@extends('layouts.master')
@section('graficos')
    <script src="{{asset('code/highcharts.js')}}"></script>
    <script src="{{asset('code/highcharts-more.js')}}"></script>
    <script src="{{asset('code/highcharts-3d.js')}}"></script>
    <script src="{{asset('code/modules/drilldown.js')}}"></script>
    <script src="{{asset('code/modules/data.js')}}"></script>
    <script src="{{asset('code/modules/exporting.js')}}"></script>
    <script src="{{asset('code/modules/export-data.js')}}"></script>
@endsection
@section('content')
@include('partials.containers-header')
@foreach ($arrActiPers as $objActiPers)
    @if ($loop->iteration & 1)
    <div class="row" style="margin-bottom: .5em;">
    @endif
        <div class="col-md-6" id="persp">
            <div id="{{$objActiPers->dona_location}}" style="height: 230px; box-shadow: 0 1px 4px 0; border-radius: 3px" ></div>
            @include('charts.dona',[
                'id'       => $objActiPers->id,
                'location' => $objActiPers->dona_location,
                'title'    => $objActiPers->resume_link,
                'labels'   => 'true',
                'd3'       => 'true',
                'route'    => env('APP_URL','http://localhost/').'api/v1/ofp/'.$objActiPers->id,
            ])
        </div>
    @if ($loop->iteration % 2 == 0)
    </div>
    @endif
@endforeach
@include('partials.containers-footer')
@endsection

@section('javascript')
<script type="text/javascript">
function startIntro(){
    var intro = introJs();
    intro.setOptions({
        nextLabel: "{{__('Next')}}",
        prevLabel: "{{__('Prev')}}",
        skipLabel: "{{__('Skip')}}",
        doneLabel: "{{__('Done')}}",
        steps: [
            { 
                intro: "{{__('This form offers a global view about the execution of the Strategic Plan')}}!!"
            },
            {
                element: document.querySelectorAll('#persp')[0],
                intro: "{{__('The color indicates the status')}}",
                // position: 'up'
            },
        ]
    });

    intro.start();
}
</script>
@endsection