@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')
@include('partials.errors_display')
<div class="card">
    <div class="card-header {{config('adminlte.bg-card-header', 'bg-info-gradient')}}">
        @lang('Measurements and Results')
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header {{config('adminlte.bg-card-header-mini', 'bg-gray-light')}}" id="step1">
                        <span class="label label-success" style="border-radius:3px">
                            &nbsp;<i class="fa fa-book margin-r-5"></i> @lang('KPI')&nbsp;
                        </span>
                        <br>{{$objKpixReco->kpi}}
                    </div>
                    <div class="card-body" id="step2">
                        <div id="gauge" style="height: 200px"></div>
                        @include('charts.gauge',[
                            'kpi' => $objKpixReco->kpi_gauge,
                            'location' => 'gauge',
                            'title' => '',
                        ])
                    </div>
                    <div class="card-footer" id="step3">
                        <span class="label label-primary" style="border-radius:3px">
                            &nbsp;<i class="fa fa-user margin-r-5"></i> @lang('Responsable')&nbsp;
                        </span>
                        <br>{{$objKpixReco->responsable->name}}
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header {{config('adminlte.bg-card-header-mini', 'bg-gray-light')}}">
                        <div class="row">
                            <div class="col-md-9" style="text-align: left">
                                <span id="btnbsc">
                                    {!! \App\Helpers\HtmlElements::aLink(__('BSC'),'w','th-list',url('cmi')) !!}
                                </span>
                                <span id="btnkpi">
                                    {!! \App\Helpers\HtmlElements::aLink(__('KPI'),'s','book margin-r-5',url('cmi/'.$objKpixReco->id.'/editar')) !!}
                                </span>
                                <span id="btnini">
                                    {!! \App\Helpers\HtmlElements::aLink(__('Initiatives'),'i','cube',url('initiative/'.$objKpixReco->id)) !!}
                                </span>
                            </div>
                            <div class="col-md-3" style="max-height: 2.5em; text-align: right" id="nave">
                                {!! $arrMeasKpix->links() !!}
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-sm">
                            <thead>
                            <tr>
                                <th width="20%" class="text-center">@lang('Estimated Date')</th>
                                <th width="20%" class="text-center">@lang('Estimated Result')</th>
                                <th width="20%" class="text-center">@lang('Result Date')</th>
                                <th width="12%" class="text-center">@lang('Result')</th>
                                <th width="12%" class="text-center">@lang('Deviation')</th>
                                <th class="text-center">@lang('Actions')</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($arrMeasKpix as $objMeasKpix)
                                <tr>
                                    <td class="text-center" id="step4">{{$objMeasKpix->estimated_date}}</td>
                                    <td class="text-center" id="step5">{{$objMeasKpix->estimated_result}}</td>
                                    <td class="text-center" id="step6">{{$objMeasKpix->result_date}}</td>
                                    <td class="text-center" id="step7">{{$objMeasKpix->result_showed}}</td>
                                    <td class="text-center" id="step8">{{$objMeasKpix->deviation}}</td>
                                    <td style="text-align: center">
                                        <div class="btn-group">
                                            <button class="btn btn-primary btn-sm" title="Editar"
                                                    data-medicion="{{$objMeasKpix->data}}" id="step9">
                                                <i class='fa fa-edit'></i>
                                            </button>
                                            @if ($objMeasKpix->deletable)
                                                <a href="{{url('measurement/'.$objMeasKpix->id.'/delete')}}"
                                                   class="btn btn-danger btn-sm" id="step10">
                                                    <i class='fa fa-trash'></i>
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @include('measurements.modal_edit')
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </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({
            // showProgress: true,
            nextLabel: "{{__('Next')}}",
            prevLabel: "{{__('Prev')}}",
            skipLabel: "{{__('Skip')}}",
            doneLabel: "{{__('Done')}}",
            steps: [
                { 
                    intro: "{{__('This form allows to see the measurements of a Indicator.  Allowed users can edit the Measurements')}}!!"
                },
                {
                    element: '#step1',
                    intro: "{{__('Indicator Name')}}",
                },
                {
                    element: '#step2',
                    intro: "{{__('Guage Graph that shows the status of the Indicator')}}",
                },
                {
                    element: '#step3',
                    intro: "{{__('Responsable of the Indicator')}}",
                },
                {
                    element: '#btnbsc',
                    intro: "{{__('Go to Indicators list')}}",
                },
                {
                    element: '#btnkpi',
                    intro: "{{__('Go to Indicator form')}}",
                },
                {
                    element: '#btnini',
                    intro: "{{__('Go to Initiatives')}}",
                },
                {
                    element: '#nave',
                    intro: "{{__('Use these button to paginate the measurements')}}",
                },
                {
                    element: document.querySelectorAll('#step4')[0],
                    intro: "{{__('Estimated date')}}",
                },
                {
                    element: document.querySelectorAll('#step5')[0],
                    intro: "{{__('Estimated result')}}",
                },
                {
                    element: document.querySelectorAll('#step6')[0],
                    intro: "{{__('Result date')}}",
                },
                {
                    element: document.querySelectorAll('#step7')[0],
                    intro: "{{__('Result value')}}",
                },
                {
                    element: document.querySelectorAll('#step8')[0],
                    intro: "{{__('Deviation from the Estimated Result')}}",
                },
                {
                    element: document.querySelectorAll('#step9')[0],
                    intro: "{{__('Use this button to edit the measurement')}}",
                },
            ]
        });

        intro.start();
    }
</script>

@endsection