{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
        </div>
        <div class="card-toolbar">
            @if($hasCheckboxPermission)
            <!--begin::Button-->
            <button class="btn btn-primary report_history me-2">Report History</button>
            <!--end::Button-->
            <!--begin::Button-->
            <button class="btn btn-primary send_report me-2 mr-5">Send Report</button>
            <!--end::Button-->
            @endif

            {{-- //start --}}
            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">

                <!--begin::Filter-->
                <button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
                    <span class="svg-icon svg-icon-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="currentColor"></path>
                        </svg>
                    </span>
                    <!--end::Svg Icon-->Filter
                </button>
                <!--begin::Menu 1-->
                <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true" id="kt-toolbar-filter">
                    <!--begin::Header-->
                    <div class="px-7 py-5">
                        <div class="fs-4 text-dark fw-bolder">Filter Options</div>
                    </div>
                    <!--end::Header-->
                    <!--begin::Separator-->
                    <div class="separator border-gray-200"></div>
                    <!--end::Separator-->
                    <!--begin::Content-->
                    <div class="px-7 py-5 scroll_filter_dropmenu">
                        {!!Helper::getClientFilterDropDown()!!}
                        <!--begin::Input group-->

                            <div class="mb-10 scroll_filter_dropmenu">
                                <label class="form-label fs-5 fw-bold mb-3">Status:</label>
                                <select class="form-control input-status filter-date select2" {{$isDisabled??""}} name="status">
                                    <option value="">All Status</option>
                                    <option value="0">Draft</option>
                                    <option value="1">Finalized</option>
                                </select>
                            </div>
                            <div class="mb-10 scroll_filter_dropmenu">
                                <label class="form-label fs-5 fw-bold mb-3">Compliance Status:</label>
                                <select class="form-control input-compliance-status filter-date select2" {{$isDisabled??""}} name="compliance-status">
                                    <option value="">All Compliance Status</option>
                                    <option value="0">Draft</option>
                                    <option value="1">Finalized</option>
                                    <option value="2">Reported</option>
                                </select>
                            </div>
                            <div class="mb-10 scroll_filter_dropmenu">
                                <label class="form-label fs-5 fw-bold mb-3">From Date:</label>
                                <input type="text" class="form-control input-start-date age-datepicker filter-date" name="start_date" placeholder="From Date" autocomplete="off">
                            </div>
                            <div class="mb-10 scroll_filter_dropmenu">
                                <label class="form-label fs-5 fw-bold mb-3">To Date:</label>
                                <input type="text" class="form-control input-end-date age-datepicker filter-date" name="end_date" placeholder="To Date" autocomplete="off">
                            </div>

                        <!--end::Input group-->
                    </div>
                    <!--end::Content-->
                    <!--begin::Actions-->
                    <div class="d-flex justify-content-end mt-2 mb-5">
                        <button type="reset" class="btn btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true" data-kt-customer-table-filter="reset">Reset</button>
                        <button type="submit" class="btn btn-primary" data-kt-menu-dismiss="true" data-kt-customer-table-filter="filter">Apply</button>
                    </div>
                    <!--end::Actions-->
                </div>
                <!--end::Menu 1-->
            </div>
             <!--begin::Button-->
             {!!Helper::getListAddBtn(route("incidentreport.create"),"Add Incident Report")!!}
             <!--end::Button-->
{{-- //end --}}
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        @include("backend.alerts")

        <div id="custom-loader">
            <div class="overlay"></div>
            <div class="loader"></div>
        </div>
        <!--begin: Datatable-->
        {!! $html->table() !!}
        <!--end: Datatable-->
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->

<!-- Modal -->
<div class="modal fade" id="send_report_modal" tabindex="-1" role="dialog" aria-labelledby="send_report_modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="send_report_modal_Label">Send Report</h5>
          <button type="button" class="btn fs-1 close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

        </div>
        <div class="modal-body" id="send_report_details">
        </div>
        <div class="modal-footer">

          <button type="button" class="btn btn-secondary"  id="cancelButton"  data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="report-submit">Send</button>
        </div>
      </div>
    </div>
  </div>
<!-- End::Modal -->
<!-- Modal -->
<div class="modal fade" id="show_report_history_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="show_report_history_modal_Label">Report History</h5>
          <button type="button" class="btn fs-1 close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="show_report_history">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
<!-- End::Modal -->

<!-- Modal -->
<div class="modal fade" id="show_email_body_modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable modal-xl" role="1">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="show_email_body_modal_Label">Email Body</h5>
          <button type="button" class="btn fs-1 close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-wrap text-break" id="show_email_body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
<!-- End::Modal -->
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script src="https://cdn.ckeditor.com/4.15.1/standard/ckeditor.js"></script>
{!! $html->scripts() !!}
<script type="text/javascript">
 $(document).on('change', '.select_all_incident_report_checkbox', function() {
        if ($(this).prop('checked')) {
            $('.select_incident_report_checkbox').attr('checked', true);
        } else {
            $('.select_incident_report_checkbox').removeAttr('checked');
        }
    });
    $(document).on('change keyup','.filter-date',function(){
            window.LaravelDataTables["dataTableBuilder"].ajax.reload();
    });
    $('#cancelButton').on('click', function() {
        $('#send_report_modal').modal('hide');
    });
    function actionDelete(ele) {
        var row = $(ele).parents('tr:first');
        if (row) {
            var id = row.attr('id');
            if (id) {
                Swal.fire(deleteAlert).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: id,
                                "_token": "{{ csrf_token() }}",
                                _method: 'DELETE'
                            },
                            url: "{!! route('incidentreport.destroy',1) !!}",
                            success: function(data) {
                                if (data.status) {
                                    Swal.fire(deleteSuccessAlert);
                                    window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                }
                            }
                        });
                    }
                });
            }
        }
    }

    $('.send_report').on('click', function(event) {

        if ($('.select_incident_report_checkbox:checked').length == 0) {
            Swal.fire({
                "text": 'Please choose at least one record to generate a report!',
                "icon": "info",
                "showCancelButton": false
            });
        } else {

            let syncAlert = deleteAlert;
            syncAlert['title'] = "Create Report";
            syncAlert['text'] = "Are you sure you want to create report for the selected records?"
            Swal.fire(syncAlert).then(function(result) {
                if (result.value) {

                    var reportIds = [];
                    $('.select_incident_report_checkbox:checked').each(function() {
                        reportIds.push($(this).val());
                    });
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            "reportIds": reportIds,
                            "_token": "{{ csrf_token() }}",
                        },
                        url: "{!! route('incidentreport.show-report') !!}",
                        success: function(data) {

                            if (data.status) {
                                if (data.html) {
                                    $('#send_report_details').html(data.html);
                                    CKEDITOR.replace('kt-ckeditor-5', {
                                        fullPage: true,
                                        allowedContent: true,
                                        versionCheck: false
                                    });
                                    hideLoader('#send_report_modal .modal-content')
                                    $('#send_report_modal').modal('show');
                                }else{
                                    $('#send_report_details').html('');
                                    $('#send_report_modal').modal('hide');
                                }
                            } else {
                                Swal.fire({
                                    "text": data.msg,
                                    "icon": "error",
                                    "showCancelButton": false
                                });
                            }
                        },
                    });

                }
            });
        }
        });
    $('#report-submit').on('click', function() {
            if ($('#report_form').valid()) {

                    if ($('#email_to').val() == '') {
                        Swal.fire({
                            "text": 'Please enter To Email Address!',
                            "icon": "error",
                            "showCancelButton": false
                        });
                        return false;
                    }
                    if ($('#subject').val() == '') {
                        Swal.fire({
                            "text": 'Please enter Email Subject!',
                            "icon": "error",
                            "showCancelButton": false
                        });
                        return false;
                    }

                    $('#driver-submit').prop("disabled", true);
                    showLoader('#send_report_modal .modal-content')

                    for ( instance in CKEDITOR.instances ){
                        CKEDITOR.instances[instance].updateElement();
                    }
                    var formData = $('#report_form').serialize();

                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: formData,
                        url: "{!! route('incidentreport.send-report',1) !!}",
                        success: function(data) {
                            hideLoader('#send_report_modal .modal-content')
                            if (data.status) {
                                Swal.fire({
                                    "text": data.msg,
                                    "icon": "success",
                                    "showCancelButton": false
                                }).then(function(result) {
                                    if (result.value) {
                                        $('#send_report_modal').modal('hide');
                                        $('.select_all_incident_report_checkbox').removeAttr('checked').trigger('change');
                                        $('.select_incident_report_checkbox').removeAttr('checked');
                                        window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                                    }
                                });
                            }else{
                                Swal.fire({
                                    "text": data.msg,
                                    "icon": "error",
                                    "showCancelButton": false
                                });
                            }
                        },
                        error: function(error) {
                            hideLoader('#send_report_modal .modal-content')
                        }
                    });

            }
    });

    $('.report_history').on('click', function() {

        ReportHistory();
    });
    // $(document).on('click','.report_history',function(){
    //     alert(11);
    // });
    function ReportHistory(){

        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: "{!! route('show.incidentreport-history',1) !!}",
            success: function(data) {
                if (data.html) {
                    if (data.html) {
                        $('#show_report_history').html(data.html);
                        $('#show_report_history_modal').modal('show');
                        setTimeout(() => {
                            $("#kt_datatable_zero_configuration").DataTable({
                            "dom": '<"row"<"col-6"<"d-flex justify-content-start"<""><"mt-3 ms-5">>><"col-6"<"d-flex justify-content-end"<"">>>><"col-12"f>tpil',
                            // 'scrollCollapse': true,
                            // 'scroller': true,
                            'scrollY': 400,
                            'order':[0,'desc'],
                            "drawCallback": function(settings) {
                                $('.table-responsive').addClass('ps-5 pe-5');
                            }
                        });
                        }, 500);

                    }else{
                        $('#show_report_history').html('');
                        $('#show_report_history_modal').modal('hide');
                    }
                }
            },
        });
    }
    $(document).on('click', '.email_body', function() {
        var dataId =  $(this).attr('data-id');
        $.ajax({
            type: 'GET',
            dataType: 'json',
            data : {'type': 'email_body','record_id': dataId},
            url: "{!! route('show.incidentreport-history',1) !!}",
            success: function(data) {
                if (data.html) {
                    if (data.html) {
                        $('#show_email_body').html(data.html);
                        // $('#show_email_body_modal_Label').html(data.subject);
                        $('#show_email_body_modal').modal('show');
                    }else{
                        $('#show_email_body').html('');
                        $('#show_email_body_modal').modal('hide');
                    }
                }
            },
        });
    });

    $('#example-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: "{{ route('incidentreport.index') }}",
    columns: [
        hasCheckboxPermission ? {
            data: 'check',
            name: 'check',
            orderable: false,
            searchable: false,
            className: 'min-w-125px',
            title: '<div class="checkbox-list"><input type="checkbox" class="checkbox select_all_incident_report_checkbox" title="Select All" name="selected_incident_report_all" value="1"></div>'
        } : null,
        { data: 'id', name: 'id', title: 'Id', className: 'min-w-125px' },
        { data: 'event_type', name: 'event_type', title: 'Event Type', className: 'min-w-125px' },
        { data: 'date', name: 'date', title: 'Date', className: 'min-w-125px' },
        // other columns...
    ].filter(Boolean), // Remove null columns
    scrollY: true,
    scrollX: true,
    scrollCollapse: true,
    order: [[1, 'desc']],
    drawCallback: function () {
        // Add any additional DataTable callbacks
    },
});
</script>
@endsection