function fetchDetailOrder(order_id){
    fetch(`/dashboard/pending/action-progress-order/${order_id}`)
        .then(res => res.json())
        .then(res => {
            const data = res;
            document.getElementById('pesanan_container').innerHTML =''
            // Generate HTML untuk order_detail
            const detailHTML = (data?.order_detail || []).map(detail => {
                return `
                <div class="col-md-12 mb-3">
                    <div class="card shadow-sm border-0">
                        <div class="row g-0">
                            <div class="${data?.jenis_customer === "MCU" ? 'd-none' : 'col-md-5 d-flex align-items-center p-2'}">
                            <img src="/gambar/${detail?.menu?.foto || 'default.jpg'}" alt="Foto Menu" class="img-fluid rounded shadow" style="max-height: 250px; width: auto;">
                            </div>
                            <div class="${data?.jenis_customer === "MCU" ?"col-md-12 p-2" : 'col-md-5 p-2'}">
                            <p class="mb-1">Nama Menu: <strong>${detail?.menu?.nama_menu || detail?.master_mcu?.nama_mcu}</strong></p>
                            <p class="mb-1">Jumlah: <span>${detail?.jumlah || 0}</span></p>
                            ${detail?.total_kalori ? `<p class="mb-1">Total Kalori: <span>${detail?.total_kalori } kal</span></p>` : ''}

                            <p class="mb-1">Tanggal Antar: <span>${detail?.tgl_antar || 0}</span></p>
                            <p class="mb-1">Harga: <strong>Rp ${parseInt(detail?.harga_satuan || 0).toLocaleString('id-ID')}</strong></p>
                            <p class="mb-1">Status Pesanan:
                            <span class="badge text-dark ${detail?.status_order === 'Selesai' ? 'bg-success' : 'bg-warning'}"
                                    id="status_badge_${detail.order_detail_id}">
                                ${detail?.status_order}
                            </span>
                            </p>
                            ${detail?.catatan ? `<p class="mb-1">Catatan : <span>${detail?.catatan || '-'}</span></p>` : ''}
                            </div>
                        </div>
                    </div>
                </div>
                `;
            }).join('');

            const html = `
               <div class="row mt-4">
                    <!-- Gambar Bukti Pembayaran -->
                    ${data.bukti_pembayaran ? `
                    <div class="col-md-4 text-center mb-3 mb-md-0">
                        <div class="border rounded shadow-sm p-2 bg-light">
                            <a href="/storage/${data?.bukti_pembayaran}" target="_blank">
                                <img src="/storage/${data.bukti_pembayaran || 'gambar/default.jpg'}"
                                    alt="Bukti Pembayaran"
                                    class="img-fluid rounded"
                                    style="max-height: 170px; width: auto;">
                            </a>
                            <div class="text-muted small mt-2">Bukti Pembayaran</div>
                        </div>
                    </div>` : ''}

                    <!-- Informasi Pemesan -->
                    <div class="${data.bukti_pembayaran ? `col-md-8` : `col-md-12`}">
                        <div class="card shadow-sm border-0">
                            <div class="card-body">
                                <h5 class="card-title text-primary mb-1">${data.nama_pemesan}</h5>
                                <p class="mb-2">Jenis Kelamin: <strong>${data?.jenis_kelamin}</strong></p>
                                <p class="mb-2">Jenis Customer: <strong>${data?.jenis_customer}</strong></p>
                                <p class="mb-2">Email: <strong>${data?.email || '-'}</strong></p>
                                <p class="mb-2">No.Hp / WA: <strong>${data?.no_wa || '-'}</strong></p>
                                <p class="mb-2">Tinggi Badan / Berat Badan: <strong>${data?.tinggi_badan || '-'} / ${data?.berat_badan || '-'}</strong></p>

                                ${data?.jenis_customer === 'Keluarga Pasien / Penunggu Pasien' ? `
                                    <div class="mb-2">
                                        <p class="mb-1">Nama Pasien: <strong>${data.nama_pasien}</strong></p>
                                        <p class="mb-1">Nomor Kamar: <strong>${data.no_kamar_perawatan}</strong></p>
                                        <p class="mb-1">Ruang Perawatan: <strong>${data.ruang_perawatan}</strong></p>
                                        <p class="mb-1">Kelas Perawatan: <strong>${data.kelas_perawatan}</strong></p>
                                    </div>` : data?.jenis_customer === 'Masyarakat Umum' ? `
                                         <div class="mb-2">
                                        <p class="mb-1">Alamat: <strong>${data.alamat || '-'}</strong></p>
                                    </div>
                                        ` : data?.jenis_customer === 'Karyawan RSAB Harapan Kita' ?`
                                        <div class="mb-2">
                                        <p class="mb-1">Bagian / Instalasi: <strong>${data.bagian_instalasi}</strong></p>
                                        <p class="mb-1">Ekstensien: <strong>${data.no_ekstensien || '-'}</strong></p>
                                    </div>
                                    ` : ''
                                    }
                                <hr>

                                <div class="mb-2">
                                    <p class="mb-1">No Order: <strong>${data.no_order}</strong></p>
                                    <p class="mb-1">Metode Pembayaran: <strong>${data.cara_pembayaran}</strong></p>
                                    ${data?.cara_pembayaran === 'Billing' ? `
                                        <p class="mb-1">No.Medical Record: <strong>${data.medical_record}</strong></p>
                                        `: ''}
                                    <p class="mb-1">Tanggal Pembayaran: <strong>${data.tgl_pembayaran || '-'}</strong></p>
                                    <p class="mb-1">Total Harga: <strong>Rp ${parseInt(data.total_harga).toLocaleString('id-ID')}</strong></p>
                                </div>

                                <div class="mt-3">
                                    <label class="form-label fw-semibold">Status Saat Ini:</label><br>
                                    <span class="badge ${data?.status_order === 'Lunas' ? 'bg-success' : 'bg-warning'} text-dark">
                                        ${data.status_order}
                                    </span> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <hr class="my-4">

                <div class="row">
                ${detailHTML}
                </div>
            `;

            document.getElementById('pesanan_container').innerHTML = html;

        })
        .catch(err => {
        document.getElementById('pesanan_container').innerHTML = '<p class="text-danger">Terjadi kesalahan saat memuat data.</p>';
        console.error(err);
        });

}

function pesananLunas(order_id){
    new bootstrap.Modal(infoPesanan).show();
    fetchDetailOrder(order_id)
}

function exportLaporanPesanan(){
    new bootstrap.Modal(exportLp).show();
}

function exportLaporanPendapatan(){
    new bootstrap.Modal(exportPendapatan).show();
}