@extends('layouts.master')
@section('content')
@include('partials.containers-header')
{{-- <div class="card" style="box-shadow: 0 1px 4px 0;">
    <div class="card-body" style="margin-bottom: -1em"> --}}
        <form action="{{url('cmi/filter')}}" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-1" id="add">
                    @can('cmi.create')
                    <a href="{{url('cmi/create')}}" class="btn btn-block btn-success" style="font-size: .9rem">
                        <i class="fa fa-plus-circle"></i> @lang('KPI')
                    </a>
                    @endcan
                </div>
                <div class="col-md-2" id="fbypers">
                    <select name="perspective_id" id="perspective_id" class="form-control" style="font-size: .9rem">
                        @if (count($perspec) > 1)
                            <option value="">@lang('Filter by Perspective')</option>
                        @endif
                        @foreach($perspec as $perspective)
                            <option value="{{$perspective->id}}">{{$perspective->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3" id="fbyobj">
                    <select name="objective_id" id="objective_id" class="form-control" style="font-size: .9rem">
                        <option value="">@lang('Filter by Objective')</option>
                    </select>
                </div>
                <div class="col-md-3" id="fbyres">
                    <select name="responsable_id" id="responsable_id" class="form-control" style="font-size: .9rem">
                        <option value="">@lang('Filter by Responsable')</option>
                        @foreach ($respons as $key => $value)mmm
                            <option value="{{$key}}">{{$value}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2" id="fbytype">
                    <select name="indicator_type" id="indicator_type" class="form-control" style="font-size: .9rem">
                        <option value="">@lang('Filter by Type')</option>
                        @foreach (\App\Models\Cmi::indicator_types() as $key => $value)
                            <option value="{{$key}}">{{$value}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-1" id="filter">
                    <button type="submit" class="btn btn-block btn-info" title=@lang('Filter') style="font-size: .9rem">
                        <i class="fa fa-filter"></i> @lang('Filter')
                    </button>
                </div>
            </div>
        </form>
    </div>
    {{-- <div class="card-body" style="margin-top: -1em"> --}}
        <div class="table-responsive-xl mt-2">
            <table class="table table-sm">
                <thead class="thead-light" style="font-size: .9rem">
                    <th width="28%">@lang('Indicator')</th>
                    <th class="centrado" width="6%">@lang('Ref')</th>
                    <th class="centrado" width="6%">@lang('Def')</th>
                    <th class="centrado" width="6%">@lang('Acep')</th>
                    <th class="centrado" width="6%">@lang('Opt')</th>
                    <th class="centrado" width="6%">@lang('Result')</th>
                    <th class="centrado" width="6%">@lang('Dev')</th>
                    <th class="centrado" width="5%">@lang('Meas')</th>
                    <th class="centrado" width="4%">@lang('IC')</th>
                    <th class="centrado" width="4%">@lang('Type')</th>
                    <th class="centrado" width="4%">@lang('HWGD')</th>
                    <th class="centrado" width="2%">@lang('BP')</th>
                    <th width="13%">@lang('Responsable')</th>
                    <th width="5%" class="centrado">@lang('Actions')</th>
                </thead>
                <tbody>
                @foreach($arrkpis as $kpi)
                    <tr style="font-size: .9rem">
                        <td class="bg-{{$kpi->perspective->bg_color}}" style="border-radius: 5px" id="name">
                            {{'('.substr($kpi->perspective->name,0,1).') '}}
                            <a href="#" style="color:white"
                                data-toggle="popover"
                                title="{{__('Kpi Description')}}"
                                data-trigger="focus"
                                data-content="{{$kpi->description}}">{{$kpi->shortName(42)}}
                            </a>
                            {{-- {{$kpi->short_name}} --}}
                        </td>
                        <td class="text-right" id="ref"> {{$kpi->reference}} </td>
                        <td class="text-right" id="def"> {{$kpi->deficient}} </td>
                        <td class="text-right" id="acc"> {{$kpi->acceptable}} </td>
                        <td class="text-right" id="opt"> {{$kpi->optimum}} </td>
                        <td class="text-right" style="background-color: {{$kpi->color_code}}; border-radius: 5px" id="resu">
                            {{$kpi->result}}
                        </td>
                        <td class="text-right" id="dev" 
                            style="color:{{$kpi->dev_color}}; font-weight:{{$kpi->dev_bold}}"> 
                            {{$kpi->deviation}} 
                        </td>
                        <td class="centrado" id="mstat"> {{$kpi->measurements_status}} </td>
                        <td class="centrado" id="icoun"> {{$kpi->initiativesCount()}} </td>
                        <td class="centrado" id="type"> {{$kpi->indicator_type}} </td>
                        <td class="centrado" id="hwgd"> {{$kpi->initial_type_description}} </td>
                        <td class="centrado" id="bp"> {{$kpi->board_position}} </td>
                        <td id="resp_name"> {{$kpi->responsable->name}} </td>
                        <td style="text-align: center">
                            <div class="btn-group" role="group" aria-label="actions">
                                @can('cmi.edit')
                                <a href="{{url('cmi/'.$kpi->id.'/editar')}}" 
                                    class="btn btn-primary btn-sm" title="@lang('Edit')" id="step16">
                                    <i class='nav-icon fa fa-edit'></i>
                                </a>
                                @endcan
                                @can('cmi.measurement')
                                <a href="{{url('measurement/'.$kpi->id)}}" 
                                    class="btn btn-warning btn-sm" title="@lang('Measurements')" id="step17">
                                    <i class='nav-icon fa fa-bullseye'></i>
                                </a>
                                @endcan
                                @can('cmi.initiative')
                                <a href="{{url('initiative/'.$kpi->id)}}" 
                                    class="btn btn-info btn-sm" title="@lang('Initiatives')" id="step18">
                                    <i class='nav-icon fa fa-cube'></i>
                                </a>
                                @endcan
                                {{-- @can('cmi.delete')
                                <a href="" data-target="#modal-delete-{{$kpi->id}}" title="@lang('Delete')"
                                data-toggle="modal" class="btn btn-sm btn-danger" id="step19">
                                    <i class='nav-icon fa fa-trash'></i>
                                </a>
                                @endcan --}}
                            </div>
                        </td>
                    </tr>

                    <div class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" id="modal-delete-{{$kpi->id}}">
                        <form action="{{url('cmi/'.$kpi->id.'/eliminar')}}" method="get">
                            @csrf
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header {{config('adminlte.bg-modal-delete', 'bg-danger-gradient')}}">
                                        <h6 class="modal-title" id="exampleModalLabel">@lang('Delete KPI')</h6>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    @if ($kpi->editable)
                                        <div class="modal-body">
                                            <h6 class="text-danger">
                                                @lang('Are you sure you want to delete the KPI'): <br><br>
                                                <strong>{{$kpi->kpi}}</strong>
                                            </h6>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" class="btn btn-danger btn-sm">
                                                <i class="fa fa-check"></i> @lang('Confirm')
                                            </button>
                                            <button class="btn btn-default btn-sm" data-dismiss="modal">
                                                <i class="fa fa-times-circle"></i> @lang('Close')
                                            </button>
                                        </div>
                                    @else
                                        <div class="modal-body">
                                            <h6 class="text-success">
                                                <strong>@lang('The KPI'):</strong> {{$kpi->kpi}} <strong>@lang('has Measurements').</strong>
                                                <br><br>
                                                <strong>@lang('It cannot be deleted').</strong>
                                            </h6>
                                        </div>
                                        <div class="modal-footer">
                                            <button class="btn btn-default btn-sm" data-dismiss="modal">
                                                <i class="fa fa-times-circle"></i> @lang('Close')
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                @endforeach
                </tbody>
            </table>
        {{-- </div> --}}
    {{-- </div>
</div> --}}
@include('partials.containers-footer')
@endsection


@section('javascript')
<script src="{{asset('js/cmi/edit.js')}}"></script>
<script>
$(function () {
    $('[data-toggle="popover"]').popover();
    $('.popover-dismiss').popover({
        trigger: 'focus'
    })
    url = '{{ config("app.url") }}';
    var body = $('body');
    body.attr('class','sidebar-mini sidebar-collapse');
    $('#perspective_id').change(function(e) {
        var id = e.target.value;
        $.get(url +'/api/v1/odlp/' + id, function(data) {
            var i = 0;
            $.each(data, function () {
                i++;
            });
            $('#objective_id').empty();
            var option = $("<option></option>")
                .attr("value", "")
                .text("Seleccione el Objetivo ("+i+")");
            $('#objective_id').append(option);
            $.each(data, function(key, value) {
                var option = $("<option></option>")
                    .attr("value", key)
                    .text(value.replace(",",""));
                $('#objective_id').append(option);
            });
        });
    });
});
</script>
<script type="text/javascript">
function startIntro(){
    var intro = introJs();
    intro.setOptions({
        nextLabel: "{{__('Next')}}",
        prevLabel: "{{__('Prev')}}",
        skipLabel: "{{__('Skip')}}",
        doneLabel: "{{__('Done')}}",
        steps: [
            { 
                intro: "{{__('Here you can see the list of Indicators.  You can add, edit, show or delete records. You can access the Measurements and Initiatives of each Indicators, too')}}!!"
            },
            {
                element: '#add',
                intro: "{{__('Press this button to add a KPI to the list')}}",
                // position: 'up'
            },
            {
                element: '#fbypers',
                intro: "{{__('You can filter the KPIs by Perspective. Choose one of them and press the Filter button')}}",
                // position: 'right'
            },
            {
                element: '#fbyobj',
                intro: "{{__('You can filter the KPIs by Objective. Choose one of them and press the Filter button')}}",
                // position: 'right'
            },
            {
                element: '#fbyres',
                intro: "{{__('You can filter the KPIs by Responsable. Choose one of them and press the Filter button')}}",
                // position: 'right'
            },
            {
                element: '#fbytype',
                intro: "{{__('You can filter the KPIs by Type. Choose one of them and press the Filter button')}}",
                // position: 'right'
            },
            {
                element: '#filter',
                intro: "{{__('Press this button to apply the Filter')}}",
                // position: 'right'
            },
            {
                element: document.querySelectorAll('#name')[0],
                intro: "{{__('The KPI description appears in the correspoding Perspective color. Press right click to see the long description')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#ref')[0],
                intro: "{{__('Reference value of the Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#def')[0],
                intro: "{{__('Deficient value of the Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#acc')[0],
                intro: "{{__('Acceptable value of the Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#opt')[0],
                intro: "{{__('Optimum value of the Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#resu')[0],
                intro: "{{__('Last measurement Result of the Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#dev')[0],
                intro: "{{__('Actual deviation of the Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#mstat')[0],
                intro: "{{__('How many measurements has this Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#icoun')[0],
                intro: "{{__('How many initiatives has this Indicator')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#type')[0],
                intro: "{{__('Indicator Type: Performance/Risk')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#hwgd')[0],
                intro: "{{__('How the information is get: Manually o Automatically')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#bp')[0],
                intro: "{{__('Board Position')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#resp_name')[0],
                intro: "{{__('Indicator Responsable name')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step16')[0],
                intro: "{{__('Press this button to Edit the Indicator')}}",
                position: 'left'
            },
            {
                element: document.querySelectorAll('#step17')[0],
                intro: "{{__('Press this button to access to the Measurements of the Indicator')}}",
                position: 'left'
            },
            {
                element: document.querySelectorAll('#step18')[0],
                intro: "{{__('Press this button to access to the Initiatives of the Indicator')}}",
                position: 'left'
            },
        ]
    });

    intro.start();
}
</script>

@endsection