@extends('layouts.app')

@section('plugin-styles')
    <link href="//cdn.datatables.net/rowreorder/1.4.1/css/rowReorder.bootstrap4.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{asset('vendors/jquery-file-upload/uploadfile.css')}}">
@stop

@section('content')
    @php $user = auth()->user(); @endphp
<div class="content">
    @section('content-header-right')
            @can('create task-checklists')
                <a href="javascript:;" class="btn-create btn-secondary-base" data-toggle="modal" data-target="#modal-dialog"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
            @endcan

            @if($user->hasAnyPermission(['delete task-checklists']))

                <a href="javascript:;" data-uri="{{url('settings/checklists/topics')}}" class="btn-delete-all btn-secondary-base"><x-svg-icon icon="icon-trash" />{{trans('forms.lbl_delete')}}</a>

            @endif

            <a href="{{url('settings/checklists')}}" class="btn-tertiary-base"><x-svg-icon  class="rotate-180" icon="icon-chevron-right" />{{trans("forms.lbl_back")}}</a>
    @endsection
    @include('layouts.partials.single-page-header', [
            'pageTitle' => __('title.topic'),
        ])


    <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">

        <thead>

            <tr>

                @if($user->hasAnyPermission(['delete task-checklists']))

                    <th scope="col">

                        <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">

                    </th>

                @endif

                <th scope="col">{{trans("tables.name_title")}}</th>

                <th scope="col">{{trans("tables.action_title")}}</th>

            </tr>

        </thead>

    </table>

    @include('checklist::topics.create_edit')
</div>
@stop

@section('footer-script')

    <!-- Custom js for this page-->
    <script type="text/javascript">

        drEvent.on('dropify.beforeClear', function(event, element){
            if(confirm("{{trans('forms.do_you_really_want_delete')}}")) {

                let form = drEvent.parents("form[name='modal-form']"),
                    id = form.find("input[name='id']").val(),
                    url = form.attr('action')+"/"+id+"/cover-image";

                if(Number(id) > 0) {
                    return PDRequest({
                        type    : "DELETE",
                        url     : url
                    }).then(function(response){
                        PDTable.draw();
                        return true;
                    });
                } else {
                    return true;
                }


            } else {
                return false;
            }
        });

        PDDataTable({
            url: "{{ url('settings/checklists/topics') }}",
            searching : true,
            columns:[
                @if($user->hasAnyPermission(['delete task-checklists']))
                    { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                @endif
                { data: 'name', name: 'name'},
                { data: 'action', name: 'action', orderable: false, searchable : false, className : "text-right" }
            ],
            rowReorder : {
                dataSrc : 'order',
                update  : false,
                ajaxUri : "{{route('settings.checklists.topics.reorder')}}"
            }
        });
    </script>

@stop