@extends('layouts.master')
@section('content')
@include('partials.containers-header')
@include('partials.errors_display')
<div class="card">
    <div id="initdesc" class="card-header {{config('adminlte.bg-card-header', 'bg-info-gradient')}}">
        <strong>@lang('Objective'): </strong>{{$objInicEstr->cmi->objective->name}}&nbsp;|&nbsp;
        <strong>@lang('Kpi'): </strong>{{$objInicEstr->cmi->kpi}}&nbsp;|&nbsp;
        <strong>@lang('Initiative'): </strong>{{$objInicEstr->description}}
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="card" id="addtask">
                    <div class="card-header {{config('adminlte.bg-card-header-mini', 'bg-gray-light')}}" style="min-height: 3.5em">
                        @lang('Add Task')
                    </div>
                    <div class="card-body">
                        {{ Form::open(['url' => url('task'), 'method' => 'post']) }}
                            @csrf
                            {{ Form::hidden('initiative_id',$objInicEstr->id) }}
                            <div id="taskdesc" class="form-group">
                                {{ Form::textarea('description',null,[
                                    'class'       => 'form-control',
                                    'placeholder' => __('Task Description'),
                                    'rows'        => 3,
                                    'required'
                                ]) }}
                            </div>
                            <div id="stardate" class="form-group">
                                {{ Form::text('init_date',null,
                                [
                                    'id'        => 'init_date',
                                    'class'     => 'form-control',
                                    'placeholder' => __('Init Date'),
                                    'required',
                                ]) }}
                            </div>
                            <div id="enddate" class="form-group">
                                {{ Form::text('due_date',null,
                                [
                                    'id'        => 'due_date',
                                    'placeholder' => __('Due Date'),
                                    'class'     => 'form-control',
                                    'required',
                                ]) }}
                            </div>
                            <div id="resptask" class="form-group">
                                <select name="responsable_id" class="form-control">
                                    <option value="">@lang('Choose Responsable')</option>
                                    @foreach ($arrRespSist as $objRespSist)
                                        <option value="{{$objRespSist->id}}">{{$objRespSist->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div id="savetask" class="text-center">
                                {!! \App\Helpers\HtmlElements::aButton(__('Save'),'s','check') !!}
                            </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header {{config('adminlte.bg-card-header-mini', 'bg-gray-light')}}" style="min-height: 3.5em">
                        <span id="btninit">{!! \App\Helpers\HtmlElements::aLink(__('Initiative'),'w','reply',url('initiative/'.$objInicEstr->cmi_id)) !!}</span>
                    </div>
                    <div class="card-body" id="listtask">
                        <table class="table table-sm">
                            <thead>
                            <th id="onetask" width="36%">@lang('Tasks')</th>
                            <th id="qtynote" width="6%" class="centrado">@lang('Notes')</th>
                            <th id="onestar" width="10%" class="centrado">@lang('Init Date')</th>
                            <th id="oneend" width="10%" class="centrado">@lang('Due Date')</th>
                            <th id="respon" width="17%" class="centrado">@lang('Responsable')</th>
                            <th id="acomper" width="9%" class="centrado">% @lang('Acompl')</th>
                            <th id="actions" class="centrado">@lang('Actions')</th>
                            </thead>
                            <tbody>
                            @foreach($arrTareInic as $objTareInic)
                                <tr>
                                    <td>{{$objTareInic->description}}</td>
                                    <td class="centrado">{{$objTareInic->notes_qty}}</td>
                                    <td class="centrado">{{$objTareInic->init_date}}</td>
                                    <td class="centrado">{{$objTareInic->due_date}}</td>
                                    <td>{{$objTareInic->responsableName()}}</td>
                                    <td class="centrado">{{$objTareInic->done}}</td>
                                    <td style="text-align: center">
                                        <div class="btn-group">
                                            <button class="btn btn-primary btn-sm" title="@lang('Edit')"
                                                    data-task="{{$objTareInic->data}}">
                                                <i class='nav-icon fa fa-edit'></i>
                                            </button>
                                            <a href="" data-target="#modal-show-{{$objTareInic->id}}" title="@lang('Notes')"
                                               data-toggle="modal" class="btn btn-sm btn-dark">
                                                <i class='nav-icon fa fa-tasks'></i>
                                            </a>
                                            <a href="" data-target="#modal-delete-{{$objTareInic->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>

                                @include('task.modal_show')

                                <div class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" id="modal-delete-{{$objTareInic->id}}">
                                    <form action="{{url('task/'.$objTareInic->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">Eliminar la Tarea</h6>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">x</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <h6 class="text-danger">Confirme si desea Eliminar la Tarea: <strong>{{$objTareInic->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>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('task.modal_edit')
@include('partials.containers-footer')
@endsection


@section('javascript')
<script>
    $("#init_date").datepicker({
        format: '{{ config("app.date_format_js") }}'
    });
    $("#due_date").datepicker({
        format: '{{ config("app.date_format_js") }}'
    });
    $(function () {
        $('[data-toggle="popover"]').popover()
        $('body').attr('class','sidebar-mini sidebar-collapse');
    })
</script>
<script src="{{asset('js/task/edit.js')}}"></script>
<script src="{{asset('js/task/show.js')}}"></script>
<script type="text/javascript">
    function startIntro(){
    var intro = introJs();
        intro.setOptions({
            nextLabel: "{{__('Next')}}",
            prevLabel: "{{__('Prev')}}",
            skipLabel: "{{__('Skip')}}",
            doneLabel: "{{__('Done')}}",
            steps: [
                { 
                    intro: "{{__('This form allows to see the Tasks of an Initiative.  You can add new Tasks too')}}!!"
                },
                {
                    element: '#initdesc',
                    intro: "{{__('Description of the Initiative')}}",
                },
                {
                    element: '#addtask',
                    intro: "{{__('Use this section add Tasks to the Initiative')}}",
                },
                {
                    element: '#taskdesc',
                    intro: "{{__('Here you can write the description of the Task')}}",
                },
                {
                    element: '#stardate',
                    intro: "{{__('Here you can set the start date of the Task')}}",
                },
                {
                    element: '#enddate',
                    intro: "{{__('Here you can set the end date of the Task')}}",
                },
                {
                    element: '#resptask',
                    intro: "{{__('Here you can set the Responsable of the Task')}}",
                },
                {
                    element: '#savetask',
                    intro: "{{__('Use this button to save the Task in the database')}}",
                },
                {
                    element: '#btninit',
                    intro: "{{__('Go to Initiative form')}}",
                },
                {
                    element: '#listtask',
                    intro: "{{__('Tasks list associated to the Initiative')}}",
                },
                {
                    element: '#onetask',
                    intro: "{{__('Task description')}}",
                },
                {
                    element: '#qtynote',
                    intro: "{{__('How many notes are associated to the Task')}}",
                },
                {
                    element: '#onestar',
                    intro: "{{__('Start date of the Task')}}",
                },
                {
                    element: '#oneend',
                    intro: "{{__('Due date of the Task')}}",
                },
                {
                    element: '#acomper',
                    intro: "{{__('Acomplish Percentage')}}",
                },
                {
                    element: '#actions',
                    intro: "{{__('Actions you can take: Edit Task, Notes of the Task and Delete Task')}}",
                },
            ]
        });

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