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

@section('content')
    @php $user = auth()->user(); @endphp
    <div class="content">
        <x-content.header title="{{__('incidentreport.title')}}">
            <x-slot:headerRight>
                @can('create incident-reports')
                    <a href="javascript:;"
                        data-toggle="canvas-panel"
                        data-uri="{{url('incident-reports')}}"
                        data-title="{{ __('title.add_new_incident_report') }}"
                        class="btn-secondary-base">
                        <x-svg-icon icon="icon-plus" /> {{trans('forms.lbl_add_new')}}</a>
                @endcan
            </x-slot:headerRight>
        </x-content.header>

        <div class="relative">
            <div class="selection-overlay hidden absolute top-1 left-16 right-1 bg-white/90 rounded-t-lg px-4 py-3 lg:py-2 flex items-center gap-3 z-[20]">
                <span class="text-md-semibold text-custom-grey-600"><span class="selected-count">0</span> {{ trans('forms.lbl_items_selected') }}</span>
                <x-svg-icon icon="vertical-bar" />
                @if($user->hasAnyPermission(['delete-own incident-reports', 'delete-any incident-reports']))
                    <a href="javascript:;" data-uri="{{url('incident-reports')}}" class="btn-delete-all text-sm-semibold text-custom-orange-500 flex items-center gap-2">
                        <x-svg-icon icon="icon-delete" /> <span class="hidden lg:inline-block">{{trans('forms.lbl_delete')}}</span>
                    </a>
                @endif
            </div>

            <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
                <thead>
                    <tr>
                        <th scope="col">
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                        <th scope="col" width="45%">{{trans("tables.incident_title")}}</th>
                        <th scope="col">{{trans("tables.date_title")}}</th>
                        <th scope="col">{{trans("tables.reported_by_title")}}</th>
                        <th scope="col">{{trans("tables.processed_title")}}</th>
                        @if($user->hasAnyPermission(['edit-own incident-reports', 'edit-any incident-reports', 'delete-own incident-reports', 'delete-any incident-reports']))
                            <th scope="col">{{trans("tables.action_title")}}</th>
                        @endif
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@stop

@section('panel-content')
    @include('incidentreport::form', ['edit' => false])
@stop

@section('footer-script')
    <script type="text/javascript">
        PDDataTable({
            url: "{{ url('incident-reports') }}",
            searching : false,
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                { data: 'name', name: 'name'},
                { data: 'incident_at', name: 'incident_at'},
                { data: 'reportedby.name', name: 'reportedby.name', orderable: false, searchable : false},
                { data: 'status', name: 'status', className: 'text-left sm:text-center', orderable: false, searchable : false},
                @if($user->hasAnyPermission(['edit-own incident-reports', 'edit-any incident-reports', 'delete-own incident-reports', 'delete-any incident-reports']))
                    { data: 'action', name: 'action', orderable: false, searchable : false, className: "text-right" }
                @endif
            ],
            order : [1, 'asc']
        });

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

                if($(this).hasClass('btn-complete')) {
                    data = data+"&status=1";
                }

    			PDRequest({
    				type    : $('#form').attr("method"),
	                url     : $("#form").attr("action"),
    				data    : data,
    				event   : event
    			}).then((response) => {
                    if(response.status == "success"){
                        if($(this).hasClass('btn-complete')) {
                            $(this).prop('disabled', true);
                        }

                        PDTable.draw();

                        Canvas.close();
                    }
                });
            }
		});
    </script>
@stop