@extends('layouts.master')
@section('content')
@include('partials.containers-header')
<div class="row">
    <div class="col-md-12">
        @include('partials.errors_display')
    </div>
</div>
<div class="row">
    <div class="col-md-3">
        <div class="card" id="step2">
            <div class="card-header {{config('adminlte.bg-card-header', 'bg-info-gradient')}}">
                @lang('Add Objective to Map')
            </div>
            <div class="card-body" style="min-height: 27.4em">
                <form action="{{url('map')}}" method="post">
                    @csrf
                    <div class="form-group" id="step3">
                        <select name="perspective_id" class="form-control" required>
                            <option value="">@lang('Choose Perspective')</option>
                            @foreach($perspec as $perspective)
                                <option value="{{$perspective->id}}">{{__($perspective->name)}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" id="step4">
                        <textarea name="name" class="form-control" rows="9" placeholder="@lang('Objective description')" required></textarea>
                        <p class="help-block">@lang('The comma causes a line break')</p>
                    </div>
                    <div class="text-center" id="step5" style="margin-top:3em">
                        @can('map.create')
                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="fa fa-check"></i> @lang('Save')
                        </button>
                        @endcan
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <div class="card">
            <div class="card-body fondo">
                @foreach($perspec as $perspective)
                <div class="row" style="min-height: 7em">
                    <div class="col-md-12">
                        <h5>{{__($perspective->name)}}</h5>
                        <div style="text-align: center">
                        @foreach($perspective->objectives as $objective)
                            <a class="btn btn-default bg-{{$perspective->bg_color}}" 
                                data-map="{{$objective->data}}"
                                style="color:white; font-size:{{$tamalet}}"
                                id="step6">
                                {!! $objective->map_name !!}
                            </a>
                        @endforeach
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@include('map.modal_edit')
{{-- @include('map.modal_vision') --}}
@include('partials.containers-footer')
@endsection

@section('javascript')
<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
</script>
<script src="{{asset('js/map/edit.js')}}"></script>
<script type="text/javascript">
    function startIntro(){
    var intro = introJs();
        intro.setOptions({
            // showProgress: true,
            nextLabel: "{{__('Next')}}",
            prevLabel: "{{__('Prev')}}",
            skipLabel: "{{__('Skip')}}",
            doneLabel: "{{__('Done')}}",
            steps: [
                { 
                    intro: "{{__('This form allows to create The Strategic Map (without it you can not go on Indicators)')}}!!"
                },
                // {
                //     element: '#step1',
                //     intro: "{{__('Mission & Vision are the Guie to stablish the Objectives in the Map')}}",
                // },
                {
                    element: '#step2',
                    intro: "{{__('Define Objectives to be added the Map')}}",
                    position: 'right'
                },
                {
                    element: '#step3',
                    intro: "{{__('First off all, choose a Perspective')}}",
                    position: 'right'
                },
                {
                    element: '#step4',
                    intro: "{{__('Specify the description of the Objective. Use comma to cause a line break')}}",
                    position: 'right'
                },
                {
                    element: '#step5',
                    intro: "{{__('Press this button to add the Objective to the Map')}}",
                    position: 'up'
                },
                {
                    element: document.querySelectorAll('#step6')[0],
                    intro: "{{__('Press over some Objective to edit it')}}",
                    position: 'up'
                },
            ]
        });

        intro.start();
    }
</script>

@endsection