@extends('layouts.master')
@section('content')
@include('partials.containers-header')
<div class="card">
    <div class="card-header {{config('adminlte.bg-card-header', 'bg-info-gradient')}}">
        @lang('Pending Tasks by Responsable')
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-hover table-sm">
            <thead class="thead-light">
                <th width="30%">@lang('Initiative')</th>
                <th width="38%">@lang('Task Description')</th>
                <th width="9%" class="centrado">@lang('I. Date')</th>
                <th width="9%" class="centrado">@lang('D. Date')</th>
                <th width="4%" class="centrado">@lang('Delay')</th>
                <th width="6%" class="centrado">@lang('% Done')</th>
                <th width="5%" class="centrado">@lang('Notes')</th>
                <th class="centrado">@lang('Actions')</th>
            </thead>
            <tbody>
                @foreach($arrTaskResp as $objTaskResp)
                    @php
                        $intCantDias = $objTaskResp->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">{{$objTaskResp->initiative_desc}}</td>
                        <td id="step2">{{$objTaskResp->task_description}}</td>
                        <td id="step3" class="centrado">{{$objTaskResp->due_date}}</td>
                        <td id="step4" class="centrado">{{$objTaskResp->init_date}}</td>
                        <td id="step5" class="centrado">{{$objTaskResp->days}}</td>
                        <td id="step6" class="centrado">{{$objTaskResp->done}}</td>
                        <td id="step7" class="centrado">{{$objTaskResp->notes->count()}}</td>
                        <td id="step8" style="text-align: center">
                            <div class="btn-group">
                                <button class="btn btn-primary btn-sm" title="@lang('Edit')"
                                        data-task="{{$objTaskResp->data}}">
                                    <i class='nav-icon fa fa-edit'></i>
                                </button>
                                <a href="" data-target="#modal-show-{{$objTaskResp->task_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-{{$objTaskResp->task_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',['objTareInic' => \App\Models\Task::find($objTaskResp->task_id)])

                    <div class="modal fade" aria-hidden="true" role="dialog" tabindex="-1" id="modal-delete-{{$objTaskResp->id}}">
                        <form action="{{url('task/'.$objTaskResp->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>{{$objTaskResp->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>
@include('task.modal_edit')
@include('partials.containers-footer')
@endsection


@section('javascript')
<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: "{{__('Here you can see Your Tasks List.  You can edit, show the notes or delete records')}}!!"
            },
            {
                element: document.querySelectorAll('#step1')[0],
                intro: "{{__('The Initiative associated to the Task')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step2')[0],
                intro: "{{__('The Task description')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step3')[0],
                intro: "{{__('Initial date of the Task')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step4')[0],
                intro: "{{__('The Task must be 100% done in this date')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step5')[0],
                intro: "{{__('How many days left to the due date')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step6')[0],
                intro: "{{__('Percentage of the job have been done')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step7')[0],
                intro: "{{__('How many Notes the Task has')}}",
                // position: 'up'
            },
            {
                element: document.querySelectorAll('#step8')[0],
                intro: "{{__('Actions that you can do')}}",
                position: 'left'
            },
        ]
    });

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