@extends('layouts.master')
@section('content')
@include('partials.containers-header')
<div class="row">
    <div class="col-md-12">
        <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-6">
                    <h5>KPIs by Responsable: <strong>{{$arrKpisResp[0]->responsable->name}}</strong></h4>
                    </div>
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-3" style="text-align: right">
                        <a href="{{URL::previous()}}" class="btn btn-sm btn-dark">
                            <i class="fa fa-reply"></i> @lang('By Perspective')
                        </a>
                        <a href="{{route('dashboard')}}" class="btn btn-sm btn-dark">
                            <i class="fa fa-reply"></i> @lang('Dashboard')
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @foreach($arrKpisResp as $kpi)
                    @if ($loop->first)
                        <div class="row titulo">
                            <span style="width: 8%; text-align: left">Perspective</span>
                            <span style="width: 22%; text-align: left">Objective</span>
                            <span style="width: 23%; text-align: left">Kpi</span>
                            <span style="width: 7%; text-align: center">Result</span>
                            <span style="width: 7%; text-align: center">Dev</span>
                            <span style="width: 5%; text-align: center">Mears</span>
                            <span style="width: 5%; text-align: center">Init</span>
                            <span style="width: 5%; text-align: center">Ref</span>
                            <span style="width: 5%; text-align: center">Def</span>
                            <span style="width: 5%; text-align: center">Ace</span>
                            <span style="width: 5%; text-align: center">Opt</span>
                        </div>
                    @endif
                    <div class="row">
                        <span style="width: 8%; text-align: left;"> 
                            <a href="/resumen/{{$kpi->objective->perspective->id}}">{{$kpi->objective->perspective->name}}</a>
                        </span>
                        <span style="width: 22%; text-align: left;"> 
                            <a href="#"
                                data-toggle="popover"
                                title="Objective Description"
                                data-trigger="focus"
                                data-content="{{$kpi->objective->name}}">{{$kpi->objective->short_name}}</a>
                        </span>
                        <span style="width: 23%; 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: 7%; 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: 5%; text-align: center">{{$kpi->reference}}</span>
                        <span style="width: 5%; text-align: center">{{$kpi->deficient}}</span>
                        <span style="width: 5%; text-align: center">{{$kpi->acceptable}}</span>
                        <span style="width: 5%; text-align: center">{{$kpi->optimum}}</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-3"></div>
                                    <div class="col-md-5 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-3"></div>
                                <div class="col-md-5" 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-5">No Initiatives</div>
                                <div class="col-md-3"></div>
                            </div>
                        @endforelse
                    </div>
                @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 () {
            $('[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