document.addEventListener('DOMContentLoaded', function () {
    const $timeLabel = $("#confirm_pekerjaan_time");
    $timeLabel.text("Hari Ini");

    // Init Date Picker
    flatpickr("#tanggal_offcanvas", {
        dateFormat: "Y-m-d",
        mode: "multiple",
        locale: "id",
        onValueUpdate: function (selectedDates) {
            const selectedFormatted = selectedDates.map(d =>
                `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
            );

            initPekerjaanDt(selectedFormatted);
            updateTimeLabel(selectedFormatted);
        }
    });

    initPekerjaanDt();
    getReminderVerifikasiMakananOffCanvas()
});

const getReminderVerifikasiMakananOffCanvas = () => {
    $.ajax({
        url: `/dashboard/count/verifikasi-pesanan`,
        success: function (response) {
            const konfirmasiPesanan = document.getElementById("konfirmasi_pesanan_offcanvas");
            let count = response.count;

            konfirmasiPesanan.classList.remove('d-none');
            if(count === 0){
                konfirmasiPesanan.classList.add('d-none');
            }
            konfirmasiPesanan.innerText = count;
        },
    });
};


// Update Label Tanggal
function updateTimeLabel(dates) {
    const $timeLabel = $("#confirm_pekerjaan_time");

    if (dates.length === 0) {
        $timeLabel.text("Hari Ini");
        return;
    }

    let label = dates.length === 1
        ? dates[0]
        : dates.length === 2
            ? dates.join(" dan ")
            : `${dates.slice(0, -1).join(", ")}, dan ${dates.slice(-1)}`;

    $timeLabel.text(`: ${label}`);
}

// Init Table
function initPekerjaanDt(selectDate = []) {
    let selectedRows = [];

    datatableOfPekerjaan.bootstrapTable('destroy').bootstrapTable({
        url: "/dashboard/datatable/pekerjaan",
        method: 'get',
        queryParams: params => ({
            ...params,
            tanggal: selectDate,
         }),
        showColumns: true,
        showColumnsToggleAll: true,
        showRefresh: true,
        sortable: true,
        search: true,
        searchOnEnterKey: false,
        searchHighlight: true,
        pagination: true,
        serverSide: true,
        pageSize: 10,
        pageList: [10, 20, 30, 40, 50, 100, 200],
        cookie: true,
        cookieIdTable: "datatableVerifikasiMakananOffcanvas",
        icons: { refresh: "fas fa-sync-alt", columns: "fas fa-th-large" },
        columns: getTableColumns(),
    });
    $('#filterStatus').on('change', function () {
        datatableOfPekerjaan.bootstrapTable('refresh');
    });

    // Checkbox Handling
    $(document).off('click', '#selectAll').on('click', '#selectAll', function () {
        const isChecked = this.checked;
        selectedRows = isChecked
            ? $(".rowCheckbox").map(function () { return { order_detail_id: $(this).data("order_detail_id") }; }).get()
            : [];
        $(".rowCheckbox").prop("checked", isChecked);
        toggleLabelButton(selectedRows.length > 0);
    });

    $(document).off('change', '.rowCheckbox').on('change', '.rowCheckbox', function () {
        const id = $(this).data("order_detail_id");
        if (this.checked) {
            if (!selectedRows.find(r => r.order_detail_id === id)) selectedRows.push({ order_detail_id: id });
        } else {
            selectedRows = selectedRows.filter(r => r.order_detail_id !== id);
        }
        toggleLabelButton(selectedRows.length > 0);
    });

    window.getSelectedRowsForLabel = () => selectedRows;
}

// Toggle Cetak Label Button
function toggleLabelButton(enable) {
    $('#buttonLabel').prop("disabled", !enable);
}

// Download Label
function labelDownload() {
    const ids = getSelectedRowsForLabel().map(item => item.order_detail_id);
    window.open(`/dashboard/pekerjaan/label?data=${ids}`, '_blank');
    // window.open(`https://smart.rsabhk.co.id:2222/service-reporting/label-cetering/${ids}`, '_blank');
}

// Table Columns
function getTableColumns() {
    return [
        {
            title: '<input type="checkbox" id="selectAll" />',
            field: 'order_id',
            align: 'center',
            formatter: (v, r) => `<input type="checkbox" class="rowCheckbox" data-order_detail_id="${r.order_detail_id}" />`
        },
        {
            title: "Action",
            formatter: (v, r) => {
                let btns = '';
                if (r?.status_order !== "Selesai") {
                    btns += `
                        <button class="btn btn-sm btn-success me-2"
                                onclick="approve(this)"
                                data-id="${r.order_detail_id}"
                                data-nama_pemesan="${r?.order?.nama_pemesan}"
                                data-no_order="${r?.order?.no_order}"
                                data-menu="${r?.menu?.nama_menu || r?.master_mcu?.nama_mcu}"
                                data-jenis_customer="${r?.order?.jenis_customer}"
                                data-type="${r?.type}">
                            <i class="fa fa-check me-1"></i>
                        </button>`;
                }
                btns += `
                    <button class="btn btn-sm btn-primary me-2" onclick="detailOrder(${r?.order_detail_id})">
                        <i class="fa-solid fa-circle-info"></i>
                    </button>`;
                return `<div class="d-flex">${btns}</div>`;
            }
        },
        { title: "No.Order", field: 'order.no_order', sortable: true },
        {
            title: "Status",
            formatter: (v, r) => {
                const status = r?.status_order;
                const badgeClass = status === "Selesai" ? 'bg-success text-dark' : 'bg-primary';
                return `<span class="badge ${badgeClass} px-3 py-1">${status}</span>`;
            }
        },
        { title: "Menu", formatter: (v, r) => r?.menu?.nama_menu || r?.master_mcu?.nama_mcu, sortable: true },
        {
            title: "Karbohidrat",
            formatter: (v, r) => {
                if (!r?.karbohidrat) return '';
                const nama = r.karbohidrat.nama_karbohidrat || '';
                const kalori = r.karbohidrat.nilai_kalori ? ` (${r.karbohidrat.nilai_kalori} kkal)` : '';
                return nama + kalori;
            },
            sortable: true,
        },
        {
                title:"Total Kalori",
                formatter: function(value, row){

                    return row?.total_kalori ? row?.total_kalori + ' kal' : '-'
                }
        },
        {
            title: "Pemesan",
            formatter: (v, r) => `
                <ul class="list-unstyled mb-0 text-nowrap">
                    <li><i class="fa fa-user me-1 text-muted"></i><strong>${r?.order?.nama_pemesan ?? '-'}</strong></li>
                        ${r?.order?.nama_institusi ? `
                                    <li><i class="fa fa-tag me-1 text-muted"></i> ${r?.order?.nama_institusi + '(' + r?.order?.jenis_customer +')'}</li>
                                    ` : `<li><i class="fa fa-tag me-1 text-muted"></i> ${r?.order?.jenis_customer ?? '-'}</li>`}
                        ${r?.order?.nip ? `
                            <li><i class="fas fa-id-card  me-1 text-muted"></i> ${r?.order?.nip ?? '-'}</li>
                            ` : ``}
                        ${r?.order?.bagian_instalasi ? `
                            <li><i class="fa fa-tag me-1 text-muted"></i> ${r?.order?.bagian_instalasi ?? '-'}</li>
                            ` : ''}
                </ul>`
        },
        { title: "Tgl Antar", field: 'tgl_antar' },
        { title: "Waktu Pengantaran",
        formatter: function(value, row){
        if(row?.order?.jenis_customer === 'MCU')return row.jam_layanan.slice(0, 5);
        return row?.type
        },
        sortable: true },
        { title: "Catatan", field: 'catatan', sortable: true },
    ];
}


function detailOrder(id){
    const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasKonfirmasiPesanan')) || new bootstrap.Offcanvas(document.getElementById('offcanvasKonfirmasiPesanan'));
    offcanvas.hide();
     new bootstrap.Modal(modalDetailOrder).show();
     fetch(`/dashboard/pekerjaan/detail/${id}`)
     .then(res => res.json())
     .then(res => {
        const data = res.data;
        document.getElementById('pesanan_container').innerHTML = '';
        document.getElementById('confirm_nama_pesanan').textContent = data?.order?.nama_pemesan;
        let html = '';
        html += `
            <div class="col-md-12 mb-3">
                    <div class="card shadow-sm border-0">
                        <div class="row g-0">
                            <div class="${data?.order?.jenis_customer === "MCU" ? 'd-none' : 'col-md-5 d-flex align-items-center p-2'} ">
                            <img src="/gambar/${data?.menu?.foto}" alt="Foto Menu" class="img-fluid rounded shadow m-auto" style="max-height: 240px; width: 220px;">
                            </div>
                            <div class="${data?.order?.jenis_customer === "MCU" ? 'col-md-12' : 'col-md-7 p-1'}">
                            <p class="mb-1">Nama Menu: <strong>${data?.menu?.nama_menu || data?.master_mcu?.nama_mcu}</strong></p>
                            <p class="mb-1">Tanggal Antar: <span>${data?.tgl_antar || 0}</span></p>
                            <p class="mb-1">Jumlah: <span>${data?.jumlah || 0}</span></p>
                            ${data?.total_kalori ? `<p class="mb-1">Total Kalori: <span>${data?.total_kalori || 0} kal</span></p>` : ''}
                            <p class="mb-1">Harga Satuan: <strong>Rp ${parseInt(data?.harga_satuan || 0).toLocaleString('id-ID')}</strong></p>
                            <p class="mb-1">Status Pesanan:
                            <span class="badge text-dark ${data?.status_order === 'Selesai' ? 'bg-success' : 'bg-warning'}">
                            ${data?.status_order}
                            </span>
                            </p>
                            ${data?.order?.jenis_customer === 'MCU' ? '' : `
                            <p class="mb-1">Catatan: <strong>${data?.catatan || '-'}</strong></p>`}
                             <hr class="my-2">
                                    <p class="mb-1">Pemesan: <strong>${data?.order?.nama_pemesan || '-'}</strong></p>
                                    <p class="mb-1">Jenis Kelamin: <strong>${data?.order?.jenis_kelamin || '-'}</strong></p>
                                    <p class="mb-1">Jenis Customer: <strong>${data?.order?.jenis_customer || '-'}</strong></p>
                                    ${data?.order?.jenis_customer === "Masyarakat Umum" ?
                                        `<p class="mb-1">Alamat: <strong>${data?.order?.alamat || '-'}</strong></p>
                                        ` : data?.order?.jenis_customer === "Karyawan RSAB Harapan Kita" ? `
                                        <p class="mb-1">Bagian /Instalasi: <strong>${data?.order?.bagian_instalasi || '-'}</strong></p>
                                        <p class="mb-1">No Ekstensien: <strong>${data?.order?.no_ekstensien || '-'}</strong></p>
                                        <p class="mb-1">NIP : <strong>${data?.order?.nip || '-'}</strong></p>
                                        ` : data?.order?.jenis_customer === "Keluarga Pasien / Penunggu Pasien" ? `
                                        <p class="mb-1">Nama Pasien: <strong>${data?.order?.nama_pasien || '-'}</strong></p>
                                        <p class="mb-1">Ruang Perawatan: <strong>${data?.order?.ruang_perawatan || '-'}</strong></p>
                                        <p class="mb-1">Nomor Kamar Perawatan: <strong>${data?.order?.no_kamar_perawatan || '-'}</strong></p>
                                        <p class="mb-1">Kelas Perawatan: <strong>${data?.order?.kelas_perawatan || '-'}</strong></p>
                                        ` : ''
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

        `

        document.getElementById('pesanan_container').innerHTML = html;
        document.getElementById('modalDetailOrderOf').addEventListener('hidden.bs.modal', () => {
                new bootstrap.Offcanvas(document.getElementById('offcanvasKonfirmasiPesanan')).show()
            }, { once:true});
        })
     .catch(error => {
        console.error(error);

     })
}


function exportPekerjaan(){
    const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasKonfirmasiPesanan')) || new bootstrap.Offcanvas(document.getElementById('offcanvasKonfirmasiPesanan'));
    offcanvas.hide();
    new bootstrap.Modal(modalExportPekerjaan).show();
    // document.getElementById('formExport').setAttribute('action', '/dashboard/pekerjaan/export')
}

function approve(e){
    const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasKonfirmasiPesanan')) || new bootstrap.Offcanvas(document.getElementById('offcanvasKonfirmasiPesanan'));
    offcanvas.hide();
    const data = $(e).data();
    new bootstrap.Modal(modalActionOrderPekerjaan).show();
    $("#confirmActionApproveOrder").text(data?.menu + (!data?.type ? '' : `(${data?.type})`))
    $("#confirmNoOrder").text(data?.no_order + ' (' + data?.nama_pemesan  +')')
    document.getElementById('formActionApproveOrder').setAttribute(`action`, `/dashboard/pending/update-detail-status/${data.id}`)
    document.getElementById('modalActionApproveOrder').addEventListener('hidden.bs.modal', () => {
        new bootstrap.Offcanvas(document.getElementById('offcanvasKonfirmasiPesanan')).show()
    }, { once:true});
}


document.getElementById('formActionApproveOrder').addEventListener('submit', function (e) {
    e.preventDefault();
    const form = this;
    const actionUrl = form.getAttribute('action');

    fetch(actionUrl, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
        }
    }).then(async (res) => {
        const data = await res.json();
        if (res.status) {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: 'Pesanan berhasil diselesaikan!',
                    timer: 2000,
                    showConfirmButton: false,
                    backdrop: true,
                });
            datatableOfPekerjaan.bootstrapTable('refresh');
            getReminderVerifikasiMakanan()
            getReminderVerifikasiMakananOffCanvas()
            bootstrap.Modal.getInstance(modalActionOrderPekerjaan).hide();
        } else {
            throw new Error(data.message || 'Terjadi kesalahan saat mengubah status.');
        }
    }).catch(err => {
        console.error(err);
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: err,
        });
    });
});