@extends('layouts.master')
@section('content')
@include('partials.containers-header')
<div class="card">
    <div class="card-header {{config('adminlte.bg-card-header', 'bg-gray-gradient')}}">
        <div class="row">
            <div class="col-8">
                @lang('Measurements by Responsable')
            </div>
            <div class="col-4" style="text-right">
                {!! $arrMeasKpix->links() !!}
            </div>
        </div>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-hover table-sm">
            <thead class="thead-light">
                <tr>
                    <th width="25%">@lang('Indicator Name')<br>@lang('or Description')</th>
                    <th width="28%">@lang('Initiative Name')<br>@lang('or Description')</th>
                    <th width="4%" class="text-center">@lang('Delayed')<br>@lang('Days')</th>
                    <th width="8%" class="text-center">@lang('Estimated')<br>@lang('Date')</th>
                    <th width="7%" class="text-center">@lang('Estimated')<br>@lang('Result')</th>
                    <th width="8%" class="text-center">@lang('Result')<br>@lang('Date')</th>
                    <th width="7%" class="text-center">@lang('Real')<br>@lang('Result')</th>
                    <th width="10%" class="text-center">@lang('Measurem.')<br>@lang('Deviation')</th>
                    <th class="text-center">@lang('Actions')</th>
                </tr>
            </thead>
            <tbody>
                @foreach($arrMeasKpix as $objMeasKpix)
                    @php
                        $intCantDias = $objMeasKpix->days;
                        $strRowxColo = 'darkblue';
                        switch (true) {
                            case ($intCantDias < 0):
                                $strRowxColo = 'crimson';
                                break;
                            case (($intCantDias >= 1) && ($intCantDias <= 7)):
                                $strRowxColo = 'green';
                                break;
                        }
                    @endphp     
                    <tr style="color:{{$strRowxColo}}">
                        <td id="step1">{{$objMeasKpix->kpi_description}}</td>
                        <td id="step2">{{$objMeasKpix->initiative_description}}</td>
                        <td id="step3" class="text-center">{{$objMeasKpix->days}}</td>
                        <td id="step4" class="text-center">{{$objMeasKpix->estimated_date}}</td>
                        <td id="step5" class="text-center">{{$objMeasKpix->estimated_result}}</td>
                        <td id="step6" class="text-center">{{$objMeasKpix->result_date}}</td>
                        <td id="step7" class="text-center">{{$objMeasKpix->result}}</td>
                        <td id="step8" class="text-center">{{$objMeasKpix->deviation}}</td>
                        <td id="step9" style="text-align: center">
                            <div class="btn-group">
                                <button class="btn btn-primary btn-sm" title="Editar"
                                        data-medicion="{{$objMeasKpix->data}}">
                                    <i class='fa fa-edit'></i>
                                </button>
                                @if ($objMeasKpix->deletable)
                                    <a href="{{url('measurement/'.$objMeasKpix->id.'/delete')}}"
                                        class="btn btn-danger btn-sm">
                                        <i class='fa fa-trash'></i>
                                    </a>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @include('measurements.modal_edit')
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@include('partials.containers-footer')
@endsection


@section('javascript')
<script src="{{asset('js/measurement/edit.js')}}"></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 Your Measurements List.  You can edit records, in order to feed data')}}!!"
            },
            {
                element: document.querySelectorAll('#step1')[0],
                intro: "{{__('The Indicator associated to the Measurement')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step2')[0],
                intro: "{{__('The Initiative associated to the Measurement')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step3')[0],
                intro: "{{__('How many days left to the measurement date')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step4')[0],
                intro: "{{__('Estimated date to do the Measurement')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step5')[0],
                intro: "{{__('Estimated measurement result')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step6')[0],
                intro: "{{__('Real measurement date')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step7')[0],
                intro: "{{__('Real measurement result')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step8')[0],
                intro: "{{__('How far we are from the estimated goal in this measurement')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step9')[0],
                intro: "{{__('Actions that you can do')}}",
                position: 'left'
            },
        ]
    });

    intro.start();
}
</script>

@endsection