@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')
<div class="row">
    <div class="col-md-2" style="text-align:center;">
        <div id="pie1" style="text-align:center; height: 230px; width: 190px; border-radius: 5px; margin-left: .25em"></div>
        @include('charts.dona',[
            'id'       => $objPersWork->id,
            'location' => 'pie1',
            'title'    => __($objPersWork->name),
            'labels'   => 0,
            'd3'       => 'true',
            'innerSize' => 70,
            'route'    => env('APP_URL','http://localhost/').'api/v1/ofp/'.$objPersWork->id,

        ])
    </div>
    <div class="col-md-10">
        <div class="card">
            <div class="card-header {{config('adminlte.bg-card-header', 'bg-grey-gradient')}}" style="min-height: 4em">
                <div class="row">
                    <div class="col-md-2">
                        <h4>{{__($objPersWork->name)}}</h4>
                    </div>
                    <div class="col-md-8">
                    </div>
                    <div class="col-md-2" style="text-align: right">
                        <a href="{{URL::previous()}}" class="btn btn-sm btn-dark">
                            <i class="fa fa-reply"></i> @lang('Dashboard')
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @foreach($arrObjePers as $objObjePers)
                    <div class="row">
                        <div class="col-md-12 titulo-obj" style="background-color: {{$objObjePers->colorhexa}};">
                            <span style="font-weight: bold">{{__('Objective')}}: </span>{{$objObjePers->name}}
                        </div>
                    </div>
                    @foreach($objObjePers->kpis as $kpi)
                        @if ($loop->first)
                            <div class="row titulo">
                                <span style="width: 30%; text-align: left">@lang('Kpis')</span>
                                <span style="width: 7%; text-align: center">@lang('Result')</span>
                                <span style="width: 8%; text-align: center">@lang('Dev')</span>
                                <span style="width: 5%; text-align: center">@lang('Meas')</span>
                                {{-- <span style="width: 8%; text-align: center">@lang('Initi')</span> --}}
                                <span style="width: 6%; text-align: center">@lang('Ref')</span>
                                <span style="width: 6%; text-align: center">@lang('Def')</span>
                                <span style="width: 6%; text-align: center">@lang('Ace')</span>
                                <span style="width: 6%; text-align: center">@lang('Opt')</span>
                                <span style="width: 15%; text-align: left">@lang('Responsable')</span>
                            </div>
                        @endif
                        <div class="row">
                            <span style="width: 30%; text-align: left">
                                <button class="btn btn-primary btn-sm" title="Tasks" onclick="showInitiatives({{$kpi->id}});">
                                    <i class='nav-icon fa fa-tasks'></i>
                                </button>
                                <a href="#"
                                   data-toggle="popover"
                                   title="Kpi Description"
                                   data-trigger="focus"
                                   data-content="{{$kpi->description}}">{{$kpi->short_name}}</a>
                            </span>
                            <span style="width: 7%; text-align: center; background-color: {{$kpi->color_code}}; font-weight: bold;">{{$kpi->result}}</span>
                            <span style="width: 8%; text-align: center">{{$kpi->deviation}}</span>
                            <span style="width: 5%; text-align: center">{{$kpi->measurements_status}}</span>
                            {{-- <span style="width: 8%; text-align: center">{{$kpi->initiatives_qty}}</span> --}}
                            <span style="width: 6%; text-align: center">{{$kpi->reference}}</span>
                            <span style="width: 6%; text-align: center">{{$kpi->deficient}}</span>
                            <span style="width: 6%; text-align: center">{{$kpi->acceptable}}</span>
                            <span style="width: 6%; text-align: center">{{$kpi->optimum}}</span>
                            <span style="width: 15%; text-align: left">
                                <a href="{{url('resumen/responsable/'.$kpi->responsable_id)}}"
                                   class="btn btn-primary btn-sm"><i class='nav-icon fa fa-tasks'></i></a>
                                {{$kpi->responsable->name}}
                            </span>
                        </div>
                        <div id="initiatives-{{$kpi->id}}" style="display: none">
                            @forelse(\App\Models\Initiative::whereCmiId($kpi->id)->get() as $initiative)
                                @if ($loop->first)
                                    <div class="row">
                                        <div class="col-md-1"></div>
                                        <div class="col-md-8 titulo" style="text-align: left">Initiatives</div>
                                        <div class="col-md-1 titulo centrado">Tasks</div>
                                        <div class="col-md-2 titulo centrado">Done</div>
                                    </div>
                                @endif
                                <div class="row">
                                    <div class="col-md-1"></div>
                                    <div class="col-md-8" style="margin-left: -.4em">
                                        <button class="btn btn-primary btn-sm" title="Tasks"
                                                data-initiative="{{$initiative->id}}|{{$initiative->description}}">
                                            <i class='nav-icon fa fa-tasks'></i>
                                        </button>
                                        {{$initiative->description}}
                                    </div>
                                    <div class="col-md-1 centrado">{{$initiative->tasks_qty}}</div>
                                    <div class="col-md-2 centrado">{{$initiative->done_perc}}</div>
                                </div>
                            @empty
                                <div class="row">
                                    <div class="col-md-3"></div>
                                    <div class="col-md-7">No Initiatives</div>
                                    <div class="col-md-2"></div>
                                </div>
                            @endforelse
                        </div>
                    @endforeach
                @endforeach
            </div>
        </div>
    </div>
</div>
@include('initiative.modal_tasks')
@include('partials.containers-footer')
@endsection

@section('javascript')
    <script src="{{asset('js/initiative/tasks.js')}}"></script>
    <script>
        $(document).ready(function () {
            var body = $('body');
            body.attr('class','sidebar-mini sidebar-collapse');
            $('[data-toggle="popover"]').popover();
            $('.popover-dismiss').popover({
                trigger: 'focus'
            })
        });
        function showInitiatives(id) {
            var element = $('#initiatives-'+id);
            var display = element.attr('style');
            if (display === 'display: none') {
                element.attr('style','display: 1');
            } else {
                element.attr('style','display: none');
            }
        }
    </script>
@endsection