@extends('layouts.master')
@section('content')
@include('partials.containers-header')
<div class="row">
    <div class="col-md-12">
        {{--@include('partials.messages_display')--}}
        @include('partials.errors_display')
        <div class="card">
            <div class="card-header {{config('adminlte.bg-card-header', 'bg-info-gradient')}}" id="kpidesc">
                <strong>@lang('Kpi: ')</strong>{{$objKpixReco->kpi}}
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card" id="addinit">
                            <div class="card-header {{config('adminlte.bg-card-header-mini', 'bg-gray-light')}}" style="min-height: 3.5em">
                                @lang('Add Initiative')
                            </div>
                            {{ Form::open(['url' => url('initiative'), 'method' => 'post']) }}
                            @csrf
                            <div class="card-body" style="min-height: 24.6em">
                                {{ Form::hidden('cmi_id',$objKpixReco->id) }}
                                <div class="form-group" id="initdesc">
                                    {{ Form::textarea('description',null,[
                                        'rows'        => 10,
                                        'class'       => 'form-control',
                                        'placeholder' => __('Initiative description'),
                                        'required'
                                    ]) }}
                                </div>
                                <div class="text-center" id="saveinit">
                                    {!! \App\Helpers\HtmlElements::aButton(__('Save'),'s','check') !!}
                                </div>
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header {{config('adminlte.bg-card-header-mini', 'bg-gray-light')}}"  style="min-height: 3.5em">
                                <span id="btnbsc">{!! \App\Helpers\HtmlElements::aLink(__('BSC'),'i','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="btnmea">{!! \App\Helpers\HtmlElements::aLink(__('Measurements'),'w','bullseye',url('measurement/'.$objKpixReco->id)) !!}</span>
                            </div>
                            <div class="card-body">
                                <table class="table table-sm" id="listmeas">
                                    <thead>
                                    <th id="onemeas" width="60%">@lang('Initiative')</th>
                                    <th id="qtytask" width="10%" class="centrado">@lang('Tasks')</th>
                                    <th id="acomper" width="16%" class="centrado">@lang('Accomplish')</th>
                                    <th id="actions" class="centrado">@lang('Actions')</th>
                                    </thead>
                                    <tbody>
                                    @foreach($arrInicKpis as $objInicKpis)
                                        <tr>
                                            <td>{{$objInicKpis->description}}</td>
                                            <td class="centrado">{{$objInicKpis->tasks_qty}}</td>
                                            <td class="centrado">{{$objInicKpis->done_perc}} %</td>
                                            <td style="text-align: center">
                                                <div class="btn-group">
                                                    <button class="btn btn-primary btn-sm" title="@lang('Edit')"
                                                            data-initiative="{{$objInicKpis->data}}">
                                                        <i class='nav-icon fa fa-edit'></i>
                                                    </button>
                                                    <a href="{{url('task/'.$objInicKpis->id)}}" class="btn btn-info btn-sm" 
                                                        title="@lang('Tasks')">
                                                        <i class='nav-icon fa fa-tasks'></i>
                                                    </a>
                                                    <a href="" data-target="#modal-delete-{{$objInicKpis->id}}" 
                                                        title="@lang('Delete')" 
                                                        data-toggle="modal"
                                                        class="btn btn-sm btn-danger">
                                                        <i class='nav-icon fa fa-trash'></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>

                                        <div class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" id="modal-delete-{{$objInicKpis->id}}">
                                            <form action="{{url('initiative/'.$objInicKpis->id.'/delete')}}" method="get">
                                                {{csrf_field()}}
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header {{config('adminlte.bg-modal-delete', 'bg-danger-gradient')}}">
                                                            <h6 class="modal-title" id="exampleModalLabel">@lang('Delete Initiative')</h6>
                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                <span aria-hidden="true">&times;</span>
                                                            </button>
                                                        </div>
                                                        @if ($objInicKpis->deletable)
                                                            <div class="modal-body">
                                                                <h6 class="text-danger">Confirme si desea Eliminar la Iniciativa: <strong>{{$objInicKpis->description}}</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>
                                                                <button type="submit" class="btn btn-danger btn-sm">
                                                                    <i class="fa fa-check"></i> @lang('Confirm')
                                                                </button>
                                                            </div>
                                                        @else
                                                            <div class="modal-body">
                                                                <h6 class="text-success">La Iniciativa que desea eliminar tiene Tareas asociadas con algún porcentaje de cumplimiento. <strong>No se puede Eliminar.</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>
                </div>
            </div>
        </div>

    </div>
</div>
@include('initiative.modal_edit')
@include('partials.containers-footer')
@endsection



@section('javascript')
<script src="{{asset('js/initiative/edit.js')}}"></script>
<script type="text/javascript">
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
</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 Initiatives of an Indicator.  You can add new Initiatives too')}}!!"
                },
                {
                    element: '#kpidesc',
                    intro: "{{__('Description of the Indicator')}}",
                },
                {
                    element: '#addinit',
                    intro: "{{__('Use this section add Initiatives to the Indicator')}}",
                    position: 'right'
                },
                {
                    element: '#initdesc',
                    intro: "{{__('Here you can write the description of the Initiative')}}",
                    position: 'right'
                },
                {
                    element: '#saveinit',
                    intro: "{{__('Use this button to save the Initivative in the database')}}",
                    position: 'right'
                },
                {
                    element: '#btnbsc',
                    intro: "{{__('Go to Indicators list')}}",
                },
                {
                    element: '#btnkpi',
                    intro: "{{__('Go to Indicator form')}}",
                },
                {
                    element: '#btnmea',
                    intro: "{{__('Go to Measurements')}}",
                },
                {
                    element: '#listmeas',
                    intro: "{{__('Initiatives list associated to the Indicator')}}",
                },
                {
                    element: '#onemeas',
                    intro: "{{__('Initiative description')}}",
                },
                {
                    element: '#qtytask',
                    intro: "{{__('How many tasks are associated to the Initiatives')}}",
                },
                {
                    element: '#acomper',
                    intro: "{{__('Acomplish Percentage (average of all Tasks)')}}",
                },
                {
                    element: '#actions',
                    intro: "{{__('Actions you can take: Edit Initiative, Task of the Initiative and Delete Initiative')}}",
                },
            ]
        });

        intro.start();
    }
</script>
@endsection