@extends('site.layouts.app')

@section('title', 'Patient Registration')

@section('stylesheets')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" /> --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.3/css/fixedColumns.bootstrap5.min.css">

    <style type="text/css">
        .product-wrapper {
            display: flex;
        }

        .datatable .text-wrap {
            white-space: normal;
            min-width: 300px;
            max-width: 300px;
        }

        .dtfc-fixed-right {
            background: #fff;
            box-shadow: -3px 0 6px rgba(0, 0, 0, 0.1);
        }

        table.dataTable {
            white-space: nowrap;
        }

        table.dataTable .dropdown-menu {
            position: absolute !important;
            z-index: 2000 !important;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Patient Registration</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.home', ['site' => $site->slug]) }}">Home</a>
                        </li>
                        <li class="breadcrumb-item active">Patient Registration</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="overlay d-none">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <a href="{{ route('site.patientregistration.create', ['site' => $site->slug]) }}"
                                class="btn btn-info add-btn"><i class="ri-add-fill me-1 align-bottom"></i> Add Patient
                                Registration</a>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="hstack text-nowrap gap-2">
                                @if ($site->id == 5)
                                    <button onclick="printMassal()" class="btn btn-secondary btn-icon-split">
                                        <span class="icon text-white-50">
                                            <i class="fas fa-print"></i>
                                        </span>
                                        <span class="text">Print Tiket Order</span>
                                    </button>
                                @endif
                                <button type="button" onclick="popUpDPMP2()" class="btn btn-warning">
                                    <i class="ri-file-chart-line me-1"></i>Report DPMP 2
                                </button>
                                <button type="button" onclick="popUpDPMP()" class="btn btn-warning">
                                    <i class="ri-file-chart-line me-1"></i>Report DPMP
                                </button>
                                <a href="#" onclick="refresh()" class="btn btn-success">
                                    <i class="ri-restart-line me-1 align-bottom"></i> Refresh
                                </a>
                                <a href="#" onclick="filter()" class="btn btn-danger">
                                    <i class="ri-filter-2-line me-1 align-bottom"></i> Filter
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Total Data Patient Registration : <span id="total-data">000</span></h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive" style="overflow-x:auto;">
                        <table class="table table-bordered table-striped align-middle datatable" style="width:2000px">
                            <thead>
                                <tr>
                                    <th width="10">No</th>
                                    <th width="100">Registration</th>
                                    <th width="100">Room</th>
                                    <th width="10">Class</th>
                                    <th width="10">Fasting</th>
                                    <th width="10">Diet</th>
                                    <th width="10">Texture</th>
                                    <th width="10">Alergy</th>
                                    <th width="100">Note</th>
                                    <th width="10">Diagnosa</th>
                                    {{-- <th width="100">Class</th> --}}
                                    <th width="100">Payment Source</th>
                                    <th width="10">Registration Date</th>
                                    <th width="10">Last Modified</th>
                                    <th width="10">Medical Discharge</th>
                                    <th width="10">Doctor</th>
                                    <th width="10">Status</th>
                                    <th width="10">Status Process</th>
                                    <th width="5">Aksi</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="searchCanvas" aria-labelledby="searchCanvasLabel">
        <div class="offcanvas-header bg-light">
            <h5 class="offcanvas-title" id="searchCanvasLabel">Filter</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <!--end offcanvas-header-->
        <div class="offcanvas-body">
            <form id="form-search" autocomplete="off">
                <div class="mb-4">
                    <label class="control-label" for="code">Registration No.</label>
                    <input type="code" name="code" class="form-control" placeholder="Registration No.">
                </div>
                <div class="mb-4">
                    <label class="control-label" for="patient_id">Registration Date</label>
                    <div class="row">
                        <div class="col-6">
                            <div class="input-group">
                                <input type="text" name="start_date" id="start_date" class="form-control flatpickr"
                                    placeholder="Start Date" data-provider="flatpickr" data-date-format="d/m/Y">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="input-group">
                                <input type="text" name="finish_date" id="finish_date" class="form-control flatpickr"
                                    placeholder="Finish Date" data-provider="flatpickr" data-date-format="d/m/Y">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="control-label" for="patient_id">Patient</label>
                    <select class="form-control select2" name="patient_id" id="patient_id"
                        data-placeholder="Select Patient">
                    </select>
                </div>
                <div class="mb-4">
                    <label class="control-label" for="room_id">Room</label>
                    <select class="form-control select2" name="room_id" id="room_id" data-placeholder="Select Room">
                    </select>
                </div>
                <div class="mb-4">
                    <label class="control-label" for="ward_id">Ward</label>
                    <select class="form-control select2" name="ward_id" id="ward_id" data-placeholder="Select Ward">
                    </select>
                </div>
                <div class="mb-4">
                    <label class="control-label" for="class_id">Class</label>
                    <select class="form-control select2" name="class_id" id="class_id" data-placeholder="Select Class">
                    </select>
                </div>
                <div class="mb-4">
                    <label class="control-label" for="class_id">Fasting</label>
                    <select class="form-control select2" name="fasting" id="fasting" data-placeholder="fasting">
                        <option value="0">All</option>
                        <option value="Y">Yes</option>
                        <option value="N">No</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="control-label" for="class_id">Status</label>
                    <select class="form-control select2" name="status" id="status" data-placeholder="status">
                        <option value="active" selected>Active</option>
                        <option value="non-active">Non-Active</option>
                        <option value="">All</option>
                    </select>
                </div>
                {{-- <div class="mb-3">
                    <label class="control-label" for="process">Process Status</label>
                    <select name="process" id="process" class="form-control" data-placeholder="Select Process Status"
                        placeholder="Select Process Status">
                        <option value="DIPROSES">Diproses</option>
                        <option value="BELUM_DIPROSES" selected>Belum Diproses</option>
                    </select>
                </div> --}}
            </form>
        </div>
        <!--end offcanvas-body-->
        <div class="offcanvas-footer border-top p-3 d-grid">
            <div class="row">
                <div class="col-6">
                    <button onclick="exportData()" class="btn btn-success me-1 w-100">
                        <i class="fa fa-file-export me-1"></i> Export
                    </button>
                </div>
                <div class="col-6">
                    <button form="form-search" type="submit" class="btn btn-primary w-100" title="Apply">
                        <i class="ri-search-line"></i>
                        Filter
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="create-print" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header no-print">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Cetak</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <iframe id="bodyReplace" scrolling="no" allowtransparency="true"
                            style="width: 69%; border-width: 0px; position: relative; margin: 0 auto; display: block;"
                            onload="this.style.height=(this.contentDocument.body.scrollHeight+45) +'px';"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalFilterDpmp" tabindex="-1" aria-labelledby="modalFilterDpmpLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalFilterDpmpLabel">Filter & Export DPMP</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formExportDpmp">
                        <div class="mb-3">
                            <label for="filterDate" class="form-label">Tanggal</label>
                            <input type="text" name="date" required id="filterDate" class="form-control flatpickr"
                                placeholder="Pilih Hari" data-provider="flatpickr" data-date-format="d/m/Y">
                        </div>

                        <div class="mb-3">
                            <label for="filterCycle" class="form-label">Cycle Makan</label>
                            <select class="form-control" id="filterCycle" name="cycle"
                                data-placeholder="Select Dish Cycle" required>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-primary" onclick="processExportDpmp()" id="btnDownloadDpmp">
                        <i class="las la-file-excel"></i> Download Excel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalFilterDpmp2" tabindex="-1" aria-labelledby="modalFilterDpmp2Label"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalFilterDpmp2Label">Filter & Export DPMP 2</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formExportDpmp">
                        <div class="mb-3">
                            <label for="filterDate" class="form-label">Tanggal</label>
                            <input type="text" name="date" required id="filterDate2"
                                class="form-control flatpickr" placeholder="Pilih Hari" data-provider="flatpickr"
                                data-date-format="d/m/Y">
                        </div>

                        <div class="mb-3">
                            <label for="filterCycle" class="form-label">Cycle Makan</label>
                            <select class="form-control" id="filterCycle2" name="cycle"
                                data-placeholder="Select Dish Cycle" required>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-primary" onclick="processExportDpmp2()" id="btnDownloadDpmp2">
                        <i class="las la-file-excel"></i> Download Excel
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    {{-- <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script> --}}
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/3.3.3/js/dataTables.fixedColumns.min.js"></script>
    <script src="{{ asset('adminlte/component/moment/moment.min.js') }}"></script>
    <script>
        flatpickrConfig = {
            enableTime: true,
            time_24hr: true,
            altInput: true,
            dateFormat: "YYYY-MM-DD",
            altFormat: "DD/MM/YYYY",
            allowInput: true,
            parseDate: (datestr, format) => {
                return moment(datestr, format, true).toDate();
            },
            formatDate: (date, format, locale) => {
                // locale can also be used
                return moment(date).format(format);
            }
        };
        $(".flatpickr").flatpickr(flatpickrConfig);

        function exportData() {
            var code = $('#form-search').find('input[name=code]').val();
            var patient_id = $('#patient_id').val();
            var room_id = $('#room_id').val();
            var ward_id = $('#ward_id').val();
            var class_id = $('#class_id').val();
            var start_date = $('#start_date').val();
            var finish_date = $('#finish_date').val();
            var fasting = $('#fasting').val();
            var status = $('#status').val();
            var process_status = $('#process').val();


            var data = {
                code: code,
                patient_id: patient_id,
                room_id: room_id,
                ward_id: ward_id,
                class_id: class_id,
                start_date: start_date,
                finish_date: finish_date,
                fasting: fasting,
                status: status,
                process_status: process_status
            };

            $.ajax({
                url: `{{ url($site->slug . '/patientregistration/export') }}`,
                dataType: 'json',
                data: data,
                type: 'GET',
                beforeSend: function() {
                    $('.overlay').removeClass('d-none');
                }
            }).done(function(response) {
                if (response.status) {
                    $('.overlay').addClass('d-none');
                    Swal.fire({
                        title: "Success!",
                        text: "Your file has been export",
                        icon: "success",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    })
                    // $('#show_process_modal').modal('hide');
                    $('#searchCanvas').offcanvas('hide');
                    let download = document.createElement("a");
                    download.href = response.file;
                    document.body.appendChild(download);
                    download.download = response.name;
                    download.click();
                    download.remove();
                } else {
                    Swal.fire({
                        title: "Error!",
                        text: response.message,
                        icon: "error",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    })
                }
            }).fail(function(response) {
                var response = response.responseJSON;
                $('.overlay').addClass('d-none');
                Swal.fire({
                    title: "Error!",
                    text: response.message,
                    icon: "error",
                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                    buttonsStyling: !1
                })
            });
        }

        function filter() {
            $('#status').select2({
                dropdownParent: $("#searchCanvas"),
                allowClear: true,
            });
            $('#process').select2({
                dropdownParent: $("#searchCanvas"),
                allowClear: true,
            });
            $('#searchCanvas').offcanvas('show');
        }

        function diproses($id) {
            $.ajax({
                url: `{{ url($site->slug . '/patientregistration/diproses') }}/${$id}`,
                method: 'GET',
                beforeSend: function() {
                    $('.overlay').removeClass('d-none');
                },
                success: function(response) {
                    $('.overlay').addClass('d-none');
                    Swal.fire({
                        title: "Success!",
                        text: "Your file has been updated.",
                        icon: "success",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    })
                    dataTable.ajax.reload(null, false);
                },
                error: function() {
                    $('.overlay').addClass('d-none');
                    Swal.fire({
                        title: "Error!",
                        text: response.message,
                        icon: "error",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    })
                }
            });
        }

        function refresh() {
            $('.datatable').DataTable().ajax.reload();
        }

        function print(id) {
            $.ajax({
                url: `{{ url($site->slug . '/patientregistration/print') }}/${id}`,
                method: 'GET',
                beforeSend: function() {
                    $('.overlay').removeClass('d-none');
                },
                success: function(response) {
                    $('#exportCanvas').offcanvas('hide');
                    var iframe = document.getElementById('bodyReplace');
                    var iframeWindow = iframe.contentWindow || iframe.contentDocument.document || iframe
                        .contentDocument;

                    iframeWindow.document.open();
                    iframeWindow.document.write(response);
                    iframeWindow.document.close();

                    setTimeout(function() {
                        $('.overlay').addClass('d-none');
                    }, 5000);
                },
                error: function() {
                    $('.overlay').addClass('d-none');
                }
            });
        }

        function regenerate(id) {
            $.ajax({
                url: `{{ url($site->slug . '/patientregistration/regenerate') }}/${id}`,
                method: 'GET',
                beforeSend: function() {
                    $('.overlay').removeClass('d-none');
                },
                success: function(response) {
                    $('#exportCanvas').offcanvas('hide');
                    var iframe = document.getElementById('bodyReplace');
                    var iframeWindow = iframe.contentWindow || iframe.contentDocument.document || iframe
                        .contentDocument;

                    iframeWindow.document.open();
                    iframeWindow.document.write(response);
                    iframeWindow.document.close();

                    setTimeout(function() {
                        $('.overlay').addClass('d-none');
                    }, 5000);
                },
                error: function() {
                    $('.overlay').addClass('d-none');
                }
            });
        }


        $(function() {
            const params = new URLSearchParams(window.location.search);
            // const initialStatus = params.get('status') || 'active';
            // const initialProcess = params.get('process_status') || 'BELUM_DIPROSES';

            // if (params.has('status')) {
            //     $('#status').val(initialStatus);
            // }
            if (params.has('process_status')) {
                $('#process').val("");
                $('#status, #process')
                    .on('change', () => $('.datatable').DataTable().ajax.reload());
            }

            $(".select2").select2();

            $('select#patient_id').select2({
                width: 'resolve',
                placeholder: 'Patient',
                ajax: {
                    url: `{{ route('site.patient.select', ['site' => $site->slug]) }}`,
                    type: 'GET',
                    dataType: 'json',
                    data: (params) => {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 20
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var option = [];
                        $.each(data.rows, function(index, item) {
                            option.push({
                                id: item.id,
                                text: `${item.name}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
                dropdownParent: $("#searchCanvas"),
            });

            $('select#ward_id').select2({
                width: 'resolve',
                placeholder: 'Ward',
                ajax: {
                    url: `{{ route('site.ward.select', ['site' => $site->slug]) }}`,
                    type: 'GET',
                    dataType: 'json',
                    data: (params) => {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 20
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var option = [];
                        $.each(data.rows, function(index, item) {
                            option.push({
                                id: item.id,
                                text: `${item.name}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
                dropdownParent: $("#searchCanvas"),
            });

            $('select#class_id').select2({
                width: 'resolve',
                placeholder: 'Class',
                ajax: {
                    url: `{{ route('site.class.select', ['site' => $site->slug]) }}`,
                    type: 'GET',
                    dataType: 'json',
                    data: (params) => {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 20
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var option = [];
                        $.each(data.rows, function(index, item) {
                            option.push({
                                id: item.id,
                                text: `${item.name}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
                dropdownParent: $("#searchCanvas"),
            });

            $('select#room_id').select2({
                width: 'resolve',
                placeholder: 'Room',
                ajax: {
                    url: `{{ route('site.room.select', ['site' => $site->slug]) }}`,
                    type: 'GET',
                    dataType: 'json',
                    data: (params) => {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 20
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var option = [];
                        $.each(data.rows, function(index, item) {
                            option.push({
                                id: item.id,
                                text: `${item.room_no}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
                dropdownParent: $("#searchCanvas"),
            });

            $("#filterCycle").select2({
                ajax: {
                    url: "{{ route('site.foodmenucycle.select', ['slug' => $site->slug]) }}",
                    type: 'GET',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 30,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var option = [];
                        $.each(data.rows, function(index, item) {
                            option.push({
                                id: item.id,
                                text: `${item.name}`,
                                email: `${item.email}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
                dropdownParent: $("#modalFilterDpmp"),
            });

            $("#filterCycle2").select2({
                ajax: {
                    url: "{{ route('site.foodmenucycle.select', ['slug' => $site->slug]) }}",
                    type: 'GET',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 30,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var option = [];
                        $.each(data.rows, function(index, item) {
                            option.push({
                                id: item.id,
                                text: `${item.name}`,
                                email: `${item.email}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
                dropdownParent: $("#modalFilterDpmp2"),
            });

            dataTable = $('.datatable').DataTable({
                // stateSave: true,
                processing: true,
                serverSide: true,
                filter: false,
                info: false,
                lengthChange: true,
                scrollY: '400px',
                responsive: false,
                scrollX: true,
                scrollCollapse: true,
                // fixedHeader: true,
                // fixedColumns: {
                //     rightColumns: 1
                // },
                order: [
                    [1, "asc"]
                ],
                ajax: {
                    url: "{{ route('site.patientregistration.read', ['site' => $site->slug]) }}",
                    type: "GET",
                    data: function(data) {
                        var code = $('#form-search').find('input[name=code]').val();
                        var patient_id = $('#patient_id').val();
                        var room_id = $('#room_id').val();
                        var ward_id = $('#ward_id').val();
                        var class_id = $('#class_id').val();
                        var start_date = $('#start_date').val();
                        var finish_date = $('#finish_date').val();
                        var fasting = $('#fasting').val();
                        var status = $('#status').val();
                        var process_status = $('#process').val();
                        data.code = code;
                        data.patient_id = patient_id;
                        data.room_id = room_id;
                        data.ward_id = ward_id;
                        data.class_id = class_id;
                        data.start_date = start_date;
                        data.finish_date = finish_date;
                        data.fasting = fasting;
                        data.status = status;
                        data.process_status = process_status;
                    },
                    dataSrc: function(json) {
                        $('#total-data').html(json.recordsTotal);
                        return json.data;
                    },
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0, 17]
                    },
                    {
                        className: "text-center",
                        targets: [0, 16, 17]
                    },
                    {
                        className: "text-wrap",
                        targets: [14]
                    },
                    {
                        render: function(data, type, row) {
                            var reg = "";
                            reg += `<b>${row.patient.title} ${row.patient.name}</b>`;
                            reg += `<br><b>reg : </b>${row.code}`;
                            reg += `<br><b>MR : </b>${row.patient.code}`;
                            reg += `<br><b>Gender : </b>${row.patient.sex}`;
                            return reg;
                        },
                        targets: [1],
                    },
                    {
                        render: function(data, type, row) {
                            return `<b>Ward : </b>${row.ward.name}<br><b>Room : </b>${row.room_no}`;
                        },
                        targets: [2],
                    },
                    {
                        render: function(data, type, row) {
                            return `${row?.class?.name}`;
                        },
                        targets: [3],
                    },
                    {
                        render: function(data, type, row) {
                            var fasting = "-";
                            if (row.fasting) {
                                fasting = (row.fasting != "Y") ?
                                    '<span class="badge text-capitalize bg-danger">No</span>' :
                                    '<span class="badge text-capitalize bg-success">Yes</span>';
                            }
                            if (row.end_fasting) {
                                fasting += ` | end : ${row.end_fasting}`;
                            }
                            return `${fasting}`;
                        },
                        targets: [4],
                    },
                    {
                        render: function(data, type, row) {
                            var diits = "";
                            if (row.diits) {
                                for (let i = 0; i < row.diits.length; i++) {
                                    diits += `${row.diits[i].name} <br>`;
                                }
                            }
                            return `${diits ?? "-"}`;
                        },
                        targets: [5],
                    },
                    {
                        render: function(data, type, row) {
                            return `${row.food_texture ?? "-"}`;
                        },
                        targets: [6],
                    },
                    {
                        render: function(data, type, row) {
                            var alergy = "-";
                            if (row.patient) {
                                alergy = `${row.patient.alergy ?? "-"}`;
                            }
                            return `${alergy}`;
                        },
                        targets: [7],
                    },
                    {
                        render: function(data, type, row) {
                            return row.patient.note ?? "-";
                        },
                        targets: [8],
                    },
                    {
                        render: function(data, type, row) {
                            return `${row.diagnosa ?? "-"}`;
                        },
                        targets: [9],
                    },

                    // {
                    //     render: function(data, type, row) {
                    //         return `${row.class.name}`;
                    //     },
                    //     targets: [9],
                    // },
                    {
                        render: function(data, type, row) {
                            return `${row.r_penjamin ? row.r_penjamin.name : "-"}`;
                        },
                        targets: [10],
                    },
                    {
                        render: function(data, type, row) {
                            return `${row.start_date}`;
                        },
                        targets: [11],
                    },
                    {
                        render: function(data, type, row) {
                            return `<div>
                                        <span>${row.updated_at}</span>
                                        <br>
                                        <span class="text-sm text-muted">updated by: ${row.updated_by ?? "-"}</span>
                                    </div>`;
                        },
                        targets: [12],
                    },
                    {
                        render: function(data, type, row) {
                            return `${row.finish_date ?? "-"}`;
                        },
                        targets: [13],
                    },
                    {
                        render: function(data, type, row) {
                            var doctor = "-";
                            if (row.doctor) {
                                doctor = `${row.doctor.name}`;
                            }
                            return `${doctor}`;
                        },
                        targets: [14],
                    },

                    {
                        render: function(data, type, row) {
                            return `${row.finish_date ? '<span class="badge text-capitalize bg-light" style="color:#000;">Non-Active</span>' : '<span class="badge text-capitalize bg-success">Active</span>'}`;
                        },
                        targets: [15],
                    },
                    {
                        render: function(data, type, row) {
                            var status_process =
                                `<span class="badge text-capitalize bg-danger">Belum Diproses</span>`;
                            if (row.status_process == "DIPROSES") {
                                status_process =
                                    `<span class="badge text-capitalize bg-success">Diproses</span>`;
                            }
                            return status_process;
                        },
                        targets: [16],
                    },
                    {
                        render: function(data, type, row) {
                            var showorder = "";
                            if (row.unique_id) {
                                showorder =
                                    `<li><a class="dropdown-item" href="{{ url($site->slug . '/orders/patient') }}/${row.unique_id}" target="_blank"><i class="ri-shopping-cart-2-fill align-bottom me-2 text-muted"></i> Order Patient</a></li>
                                    <li><a class="dropdown-item" href="{{ url($site->slug . '/orders/companion') }}/${row.unique_id}" target="_blank"><i class="ri-shopping-cart-2-fill align-bottom me-2 text-muted"></i> Order Companion</a></li>`;
                            }
                            var diproses = "";
                            if (row.status_process == "BELUM_DIPROSES") {
                                diproses =
                                    `<li><a class="dropdown-item" href="javascript:void(0);" onclick="diproses(${row.id})"><i class="ri-check-fill align-bottom me-2 text-muted"></i> Diproses</a></li>`;
                            } else {
                                diproses =
                                    `<li><a class="dropdown-item" href="javascript:void(0);" onclick="diproses(${row.id})"><i class="ri-close-fill align-bottom me-2 text-muted"></i> Belum Diproses</a></li>`;
                            }
                            return `
                                <div class="dropdown d-inline-block">
                                    <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-more-fill align-middle"></i>
                                    </button>
                                    <ul class="dropdown-menu ">
                                        <li><a class="dropdown-item" href="{{ url($site->slug . '/patientregistration') }}/${row.id}/edit"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
                                        <li style="cursor:pointer"><a class="dropdown-item" onclick="print(${row.id})" target="_blank"><i class=" las la-file-pdf me-2"></i> Print</a></li>
                                        <li style="cursor:pointer"><a class="dropdown-item" onclick="regenerate(${row.id})" target="_blank"><i class=" las la-redo-alt me-2"></i> Regenerate QR</a></li>
                                        ${showorder}
                                        ${diproses}
                                        <li><a href="#" class="dropdown-item delete" data-id="${row.id}"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
                                    </ul>
                                </div>`;
                        },
                        targets: [17]
                    }
                ],
                columns: [{
                        data: "no"
                    },
                    {
                        data: "code"
                    },
                    {
                        data: "room_id"
                    },
                    {
                        data: "class_id"
                    },
                    {
                        data: "fasting"
                    },
                    {
                        data: "diet"
                    },
                    {
                        data: "food_texture"
                    },
                    {
                        data: "id"
                    },
                    {
                        data: "patient_id"
                    },
                    {
                        data: "diagnosa"
                    },
                    // { data: "class_id" },
                    {
                        data: "penjamin"
                    },
                    {
                        data: "start_date"
                    },
                    {
                        data: "updated_at"
                    },
                    {
                        data: "finish_date"
                    },
                    {
                        data: "doctor_id"
                    },
                    {
                        data: "status"
                    },
                    {
                        data: "status_process"
                    },
                    {
                        data: "id"
                    },
                ]
            });

            $('#form-search').submit(function(e) {
                e.preventDefault();
                dataTable.draw();
                $('#searchCanvas').offcanvas('hide');
            });

        });

        $(document).on('click', '.delete', function() {
            var id = $(this).data('id');
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: !0,
                confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
                cancelButtonClass: "btn btn-danger w-xs mt-2",
                confirmButtonText: "Yes, delete it!",
                buttonsStyling: !1,
                showCloseButton: !0,
            }).then(function(t) {
                if (t.value) {
                    var data = {
                        _token: "{{ csrf_token() }}",
                        _method: 'delete'
                    };
                    $.ajax({
                        url: `{{ url($site->slug . '/patientregistration') }}/${id}`,
                        dataType: 'json',
                        data: data,
                        type: 'POST',
                        beforeSend: function() {
                            $('.overlay').removeClass('d-none');
                        }
                    }).done(function(response) {
                        if (response.status) {
                            $('.overlay').addClass('d-none');
                            Swal.fire({
                                title: "Deleted!",
                                text: "Your file has been deleted.",
                                icon: "success",
                                confirmButtonClass: "btn btn-primary w-xs mt-2",
                                buttonsStyling: !1
                            })
                            dataTable.ajax.reload(null, false);
                        } else {
                            Swal.fire({
                                title: "Error!",
                                text: response.message,
                                icon: "error",
                                confirmButtonClass: "btn btn-primary w-xs mt-2",
                                buttonsStyling: !1
                            })
                        }
                    }).fail(function(response) {
                        var response = response.responseJSON;
                        $('.overlay').addClass('d-none');
                        Swal.fire({
                            title: "Error!",
                            text: response.message,
                            icon: "error",
                            confirmButtonClass: "btn btn-primary w-xs mt-2",
                            buttonsStyling: !1
                        })
                    })
                }
                //t.value && Swal.fire({ title: "Deleted!", text: "Your file has been deleted.", icon: "success", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 });
            });
        });

        function regenerateMassal() {
            Swal.fire({
                title: "Regenerate QR Pasien Aktif?",
                text: "Sistem akan membuat ulang QR Code untuk semua pasien yang belum pulang (Finish Date Kosong).",
                icon: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
                cancelButtonClass: "btn btn-danger w-xs mt-2",
                confirmButtonText: "Ya, Proses!",
                buttonsStyling: false,
                showCloseButton: true,
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        url: `{{ route('site.patientregistration.regenerate_massal', ['site' => $site->slug]) }}`,
                        type: 'GET',
                        beforeSend: function() {
                            $('.overlay').removeClass('d-none');
                        },
                        success: function(response) {
                            $('.overlay').addClass('d-none');
                            if (response.status) {
                                Swal.fire({
                                    title: "Selesai!",
                                    text: response.message,
                                    icon: "success",
                                    confirmButtonClass: "btn btn-primary w-xs mt-2",
                                    buttonsStyling: false
                                });
                                // Optional: Reload tabel jika ingin melihat perubahan timestamp update
                                $('.datatable').DataTable().ajax.reload(null, false);
                            } else {
                                Swal.fire("Gagal!", response.message, "error");
                            }
                        },
                        error: function(xhr) {
                            $('.overlay').addClass('d-none');
                            Swal.fire("Error!", "Terjadi kesalahan server.", "error");
                        }
                    });
                }
            });
        }

        function popUpDPMP() {
            $('#filterCycle').val('');
            $('#modalFilterDpmp').modal('show');
        }

        function popUpDPMP2() {
            $('#filterCycle2').val('');
            $('#modalFilterDpmp2').modal('show');
        }

        function processExportDpmp() {
            let date = $('#filterDate').val();
            let cycle = $('#filterCycle').val();
            let siteId = "{{ $site->id ?? 1 }}";
            let url = "{{ route('site.patientregistration.printdpmp', ['site' => $site->slug]) }}"


            if (!date || !cycle) {
                alert('Harap pilih Tanggal dan Cycle terlebih dahulu!');
                return;
            }

            let btn = $('#btnDownloadDpmp');
            let originalText = btn.html();
            btn.prop('disabled', true).html('<i class="las la-spinner la-spin"></i> Processing...');

            $.ajax({
                url: url,
                type: "GET",
                data: {
                    date: date,
                    cycle: cycle,
                    site_id: siteId
                },
                success: function(response) {
                    if (response.status) {
                        var a = document.createElement("a");
                        a.href = response.file;
                        a.download = response.name;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);

                        $('#modalFilterDpmp').modal('hide');

                        Swal.fire('Berhasil', response.message, 'success');
                    } else {
                        alert(response.message);
                    }
                },
                error: function(xhr) {
                    console.log(xhr);
                    alert('Terjadi kesalahan saat download data.');
                },
                complete: function() {
                    btn.prop('disabled', false).html(originalText);
                }
            });
        }

        function processExportDpmp2() {
            let date = $('#filterDate2').val();
            let cycle = $('#filterCycle2').val();
            let siteId = "{{ $site->id ?? 1 }}";
            let url = "{{ route('site.patientregistration.printdpmp2', ['site' => $site->slug]) }}";


            if (!date || !cycle) {
                alert('Harap pilih Tanggal dan Cycle terlebih dahulu!');
                return;
            }

            let btn = $('#btnDownloadDpmp2');
            let originalText = btn.html();
            btn.prop('disabled', true).html('<i class="las la-spinner la-spin"></i> Processing...');

            $.ajax({
                url: url,
                type: "GET",
                data: {
                    date: date,
                    cycle: cycle,
                    site_id: siteId
                },
                success: function(response) {
                    if (response.status) {
                        var a = document.createElement("a");
                        a.href = response.file;
                        a.download = response.name;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);

                        $('#modalFilterDpmp2').modal('hide');

                        Swal.fire('Berhasil', response.message, 'success');
                    } else {
                        alert(response.message);
                    }
                },
                error: function(xhr) {
                    console.log(xhr);
                    alert('Terjadi kesalahan saat download data.');
                },
                complete: function() {
                    btn.prop('disabled', false).html(originalText);
                }
            });
        }

        function printMassal() {
            let baseUrl = "{{ route('site.patientregistration.print_order', ['site' => $site->slug]) }}";
            let code = $('#form-search').find('input[name=code]').val();
            let patient_id = $('#patient_id').val();
            let room_id = $('#room_id').val();
            let ward_id = $('#ward_id').val();
            let class_id = $('#class_id').val();
            let start_date = $('#start_date').val();
            let finish_date = $('#finish_date').val();
            let fasting = $('#fasting').val();
            let status = $('#status').val();
            let process_status = $('#process').val();

            let queryParams = $.param({
                code: code,
                patient_id: patient_id,
                room_id: room_id,
                ward_id: ward_id,
                class_id: class_id,
                start_date: start_date,
                finish_date: finish_date,
                fasting: fasting,
                status: status,
                process_status: process_status
            });

            let urlTarget = baseUrl + '?' + queryParams;

            $.ajax({
                url: urlTarget,
                method: 'GET',
                beforeSend: function() {
                    $('.overlay').removeClass('d-none');
                },
                success: function(response) {
                    $('#exportCanvas').offcanvas('hide');

                    var iframe = document.getElementById('bodyReplace');
                    var iframeWindow = iframe.contentWindow || iframe.contentDocument.document || iframe
                        .contentDocument;

                    iframeWindow.document.open();
                    iframeWindow.document.write(response);
                    iframeWindow.document.close();

                    setTimeout(function() {
                        $('.overlay').addClass('d-none');
                    }, 1000);
                },
                error: function(xhr) {
                    $('.overlay').addClass('d-none');
                    if (xhr.status === 404) {
                        Swal.fire("Info", "Tidak ada data yang sesuai filter untuk dicetak.", "info");
                    } else {
                        Swal.fire("Error", "Gagal memuat data print.", "error");
                    }
                }
            });
        }
    </script>
@endpush