@extends('layouts.app')
@section('title', trans('menu.todo'))

@section('content')
    <div class="content">
        <x-content.header title="{{ __('title.To-Do') }}" />
        <div>

            <h3 class="d-flex justify-content-between align-items-center" id="ModalLabel">
                <span>{{$task->title}}</span>
                @if( $task->completors->count() > 0 && $task->completors->first()->pivot->completed_at)
                    <i class="mdi mdi-check-circle text-success icon-md"></i>
                @else
                    <i class="mdi mdi-circle text-danger icon-md"></i>
                @endif
            </h3>
            @if($task->description != "")
                <p>
                    {!!$task->description!!}
                </p>
            @endif

            <div>
                <p><b>{{__('forms.lbl_deadline')}}</b>: {{$task->deadline}}</p>
            </div>

            <form id="form"
                    name="task-checklist-form"
                    action="{{route('tasks.update.items', $task->id)}}"
                    method="PUT"
            >

                <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
                    <thead>
                        <tr>
                            <th scope="col" width="10">
                                <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                            </th>
                            <th scope="col">Name</th>
                        </tr>
                    </thead>
                </table>


                <div class="mt-4 border-top">
                    <button type="submit" class="btn btn-info mt-4 btn-save">
                        {{trans('forms.lbl_save')}}
                    </button>
                    <a href="{{route('tasks.index')}}"  class="btn btn-outline-secondary mt-4">{{trans('forms.lbl_cancel')}}</a>
                </div>
            </form>
        </div>
    </div>
@stop

@section('footer-script')
    <script type="text/javascript">

        var $datable = $('#datatable');

        PDDataTable({
            url: "{{ route('tasks.show', $task->id) }}",
            searching : false,
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                { data: 'name', name: 'name'}
            ],
            drawCallback: function ( settings ) {

            },
            order : [1, 'asc']
        });


        $(".btn-save").on("click", function(event) {
            event.preventDefault();
            data = $('#form').serialize();

            PDRequest({
                type    : "PUT",
                url     : $("#form").prop("action"),
                data    : data,
                event   : event
            }).then((response) => {
                window.location = "{{route('tasks.index')}}";
            });;
        });

    </script>
@stop