<style>
    /* 1. MENCEGAH HALAMAN MELAR KE KANAN */
    body {
        overflow-x: hidden !important;
        width: 100%;
    }

    /* 2. KUNCI PERBAIKAN: MENGATASI BUG TERGENCET SB ADMIN DI HP */
    @media (max-width: 991.98px) {
        #layoutSidenav_content {
            padding-left: 0 !important;
            margin-left: 0 !important;
            width: 100% !important;
        }
    }

    /* 3. MEMASTIKAN TABEL BISA DI-SCROLL KE SAMPING DI HP */
    .table-responsive {
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: none;
    }

    table.dataTable {
        width: 100% !important;
        min-width: 600px !important;
        border-collapse: collapse;
        margin-top: 10px !important;
    }

    /* 4. FORM FILTER AGAR RAPI DI HP */
    .filter-wrapper {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    @media (max-width: 768px) {
        .filter-wrapper .row>div {
            margin-bottom: 12px;
        }

        .btn-group-custom {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            margin-top: 5px;
        }

        .btn-group-custom button {
            width: 100%;
        }
    }

    @media (min-width: 769px) {
        .btn-group-custom {
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
    }

    /* 5. AGAR TAB BISA DI SCROLL DI HP JIKA TERLALU BANYAK */
    .nav-tabs-custom {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs-custom .nav-link {
        color: #495057;
        font-weight: 500;
    }
</style>

<div id="layoutSidenav_content">
    <main>
        <div class="container-fluid px-3 px-md-4">
            <h1 class="mt-4 fs-3" id="judulPasien">Data Billing Harian</h1>
            <ol class="breadcrumb mb-4">
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Dashboard</a></li>
                <li class="breadcrumb-item active">Tampilkan Data Billing Harian</li>
            </ol>

            <ul class="nav nav-tabs nav-tabs-custom mb-4" id="billingTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="harian-tab" data-bs-toggle="tab" data-bs-target="#tab-harian" type="button" role="tab">Harian</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="penjamin-tab" data-bs-toggle="tab" data-bs-target="#tab-penjamin" type="button" role="tab">Harian & Penjamin</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="icu-tab" data-bs-toggle="tab" data-bs-target="#tab-icu" type="button" role="tab">Harian ICU/HCU</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="bpjs-tab" data-bs-toggle="tab" data-bs-target="#tab-bpjs" type="button" role="tab">Keuangan (BPJS)</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="umum-tab" data-bs-toggle="tab" data-bs-target="#tab-umum" type="button" role="tab">Non-BPJS (Umum)</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="asuransi-tab" data-bs-toggle="tab" data-bs-target="#tab-asuransi" type="button" role="tab">Non-BPJS (Asuransi)</button>
                </li>
            </ul>
            <div class="tab-content" id="billingTabsContent">

                <div class="tab-pane fade show active" id="tab-harian" role="tabpanel">
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="formHarian">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Awal</label>
                                        <input type="date" id="tglAwalHarian" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tglAkhirHarian" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Jenis Pasien</label>
                                        <select id="jenisPasienHarian" class="form-select" required>
                                            <option value="" disabled <?= empty($kd_jenis_pasien) ? 'selected' : '' ?>>Pilih Jenis Pasien</option>
                                            <option value="1" <?= ($kd_jenis_pasien == '1') ? 'selected' : '' ?>>Rawat Jalan</option>
                                            <option value="2" <?= ($kd_jenis_pasien == '2') ? 'selected' : '' ?>>Rawat Inap</option>
                                            <option value="3" <?= ($kd_jenis_pasien == '3') ? 'selected' : '' ?>>IGD</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <div class="btn-group-custom">
                                            <button type="submit" class="btn btn-primary px-3"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="btnDownloadHarian" class="btn btn-success px-3" style="display: none;"><i class="fas fa-file-excel me-1"></i> Excel</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingHarian" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 40px;" />
                                <p class="text-muted mt-2 small">Memuat data...</p>
                            </div>
                            <div id="containerHarian" style="display: none;"></div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-penjamin" role="tabpanel">
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="formPenjamin">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Awal</label>
                                        <input type="date" id="tglAwalPenjamin" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tglAkhirPenjamin" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Jenis Pasien</label>
                                        <select id="jenisPasienPenjamin" class="form-select" required>
                                            <option value="" disabled selected>Pilih Jenis Pasien</option>
                                            <option value="1">Rawat Jalan</option>
                                            <option value="2">Rawat Inap</option>
                                            <option value="3">IGD</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <div class="btn-group-custom">
                                            <button type="submit" class="btn btn-primary px-3"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="btnDownloadPenjamin" class="btn btn-success px-3" style="display: none;"><i class="fas fa-file-excel me-1"></i> Excel</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingPenjamin" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 40px;" />
                                <p class="text-muted mt-2 small">Memuat data...</p>
                            </div>
                            <div id="containerPenjamin" style="display: none;"></div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-icu" role="tabpanel">
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="formICU">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-4">
                                        <label class="form-label text-muted small mb-1">Tanggal Awal</label>
                                        <input type="date" id="tglAwalICU" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <label class="form-label text-muted small mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tglAkhirICU" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="btn-group-custom">
                                            <button type="submit" class="btn btn-primary px-3"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="btnDownloadICU" class="btn btn-success px-3" style="display: none;"><i class="fas fa-file-excel me-1"></i> Excel</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingICU" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 40px;" />
                                <p class="text-muted mt-2 small">Memuat data...</p>
                            </div>
                            <div id="containerICU" style="display: none;"></div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-bpjs" role="tabpanel">
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="formBPJS">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Awal</label>
                                        <input type="date" id="tglAwalBPJS" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tglAkhirBPJS" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Jenis Pasien</label>
                                        <select id="jenisPasienBPJS" class="form-select" required>
                                            <option value="" disabled selected>Pilih Jenis Pasien</option>
                                            <option value="1">Rawat Jalan</option>
                                            <option value="2">Rawat Inap</option>
                                            <option value="3">IGD</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <div class="btn-group-custom">
                                            <button type="submit" class="btn btn-primary px-3"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="btnDownloadBPJS" class="btn btn-success px-3" style="display: none;"><i class="fas fa-file-excel me-1"></i> Excel</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingBPJS" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 40px;" />
                                <p class="text-muted mt-2 small">Memuat data...</p>
                            </div>
                            <div id="containerBPJS" style="display: none;"></div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-umum" role="tabpanel">
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="formUmum">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Awal</label>
                                        <input type="date" id="tglAwalUmum" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tglAkhirUmum" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Jenis Pasien</label>
                                        <select id="jenisPasienUmum" class="form-select" required>
                                            <option value="" disabled selected>Pilih Jenis Pasien</option>
                                            <option value="1">Rawat Jalan</option>
                                            <option value="2">Rawat Inap</option>
                                            <option value="3">IGD</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <div class="btn-group-custom">
                                            <button type="submit" class="btn btn-primary px-3"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="btnDownloadUmum" class="btn btn-success px-3" style="display: none;"><i class="fas fa-file-excel me-1"></i> Excel</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingUmum" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 40px;" />
                                <p class="text-muted mt-2 small">Memuat data...</p>
                            </div>
                            <div id="containerUmum" style="display: none;"></div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab-asuransi" role="tabpanel">
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="formAsuransi">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Awal</label>
                                        <input type="date" id="tglAwalAsuransi" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tglAkhirAsuransi" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small mb-1">Jenis Pasien</label>
                                        <select id="jenisPasienAsuransi" class="form-select" required>
                                            <option value="" disabled selected>Pilih Jenis Pasien</option>
                                            <option value="1">Rawat Jalan</option>
                                            <option value="2">Rawat Inap</option>
                                            <option value="3">IGD</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <div class="btn-group-custom">
                                            <button type="submit" class="btn btn-primary px-3"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="btnDownloadAsuransi" class="btn btn-success px-3" style="display: none;"><i class="fas fa-file-excel me-1"></i> Excel</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingAsuransi" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 40px;" />
                                <p class="text-muted mt-2 small">Memuat data...</p>
                            </div>
                            <div id="containerAsuransi" style="display: none;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="py-4 bg-light mt-auto">
        <div class="container-fluid px-4">
            <div class="d-flex align-items-center justify-content-between small text-muted">
                <div>Copyright &copy; IT RSU Ananda Purwokerto 2024</div>
            </div>
        </div>
    </footer>
</div>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {

        // =================================================================================
        // 1. FUNGSI UTAMA UNTUK MENGAMBIL DAN MENAMPILKAN DATA TABEL (MEGA SCRIPT)
        // =================================================================================
        function loadDataBilling(formId, urlAjax, urlDownload, hasJenisPasien = true, tipeTabel = 'standard') {

            // Tentukan Prefix ID berdasarkan tab yang diklik
            let idPrefix = '';
            if (formId === '#formHarian') idPrefix = 'Harian';
            else if (formId === '#formPenjamin') idPrefix = 'Penjamin';
            else if (formId === '#formICU') idPrefix = 'ICU';
            else if (formId === '#formBPJS') idPrefix = 'BPJS';
            else if (formId === '#formUmum') idPrefix = 'Umum';
            else if (formId === '#formAsuransi') idPrefix = 'Asuransi';

            // Ambil nilai dari inputan
            let tglAwal = $('#tglAwal' + idPrefix).val();
            let tglAkhir = $('#tglAkhir' + idPrefix).val();
            let jenisPasien = hasJenisPasien ? $('#jenisPasien' + idPrefix).val() : '';

            // Siapkan payload data yang akan dikirim ke server
            let dataAjax = {
                TANGGAL_AWAL: tglAwal,
                TANGGAL_AKHIR: tglAkhir
            };
            if (hasJenisPasien) {
                dataAjax.KD_JENIS_PASIEN = jenisPasien;
            }

            // Tampilkan loading, sembunyikan tabel dan tombol download lama
            $('#loading' + idPrefix).show();
            $('#container' + idPrefix).hide();
            $('#btnDownload' + idPrefix).hide();

            // Eksekusi AJAX
            $.ajax({
                url: urlAjax,
                type: 'POST',
                data: dataAjax,
                success: function(response) {
                    $('#loading' + idPrefix).hide();

                    try {
                        const data = JSON.parse(response);

                        // KUNCI: Deteksi dinamis nama array dari server
                        let list = null;
                        if (data && Array.isArray(data.response)) {
                            list = data.response; // Tab Harian, Penjamin, ICU
                        } else if (data && Array.isArray(data.tampil)) {
                            list = data.tampil; // Tab BPJS
                        } else if (data && Array.isArray(data.tampil_nonbpjs)) {
                            list = data.tampil_nonbpjs; // Tab Umum & Asuransi
                        }

                        if (list) {
                            let tableId = '#dt' + idPrefix;

                            // Hapus DataTable lama jika sudah ada
                            if ($.fn.DataTable.isDataTable(tableId)) {
                                $(tableId).DataTable().destroy();
                            }

                            if (list.length > 0) {

                                // --- MENYUSUN HEADER TABEL ---
                                let html = `
                                    <div class="table-responsive w-100">
                                        <table id="dt${idPrefix}" class="table table-striped table-hover table-bordered w-100 text-nowrap">
                                            <thead class="table-light">
                                                <tr>
                                `;

                                if (tipeTabel === 'icu') {
                                    html += `
                                        <th>KD Registrasi</th><th>Nama Pasien</th><th>Nama Ruang</th>
                                        <th>No Bed</th><th>Tgl Tindakan</th><th>Nama Tindakan</th>
                                        <th>Jumlah</th><th>Total</th>
                                    `;
                                } else if (tipeTabel === 'keuangan') {
                                    html += `
                                        <th>Kd Regist</th><th>Nama Pasien</th><th>Kelas</th>
                                        <th>Tgl Regist</th><th>Tarif INACBG</th><th>DPJP</th>
                                        <th>Radiologi</th><th>Obat</th><th>Keperawatan</th>
                                        <th>Laboratorium</th><th>Kamar & Akomodasi</th><th>Konsultasi</th>
                                        <th>BMHP</th><th>Nama Pembayaran</th><th>Total Tagihan</th>
                                    `;
                                } else if (tipeTabel === 'nonbpjs') {
                                    html += `
                                        <th>Kd Regist</th><th>Nama Pasien</th><th>Kelas</th>
                                        <th>Tgl Regist</th><th>DPJP</th><th>Radiologi</th>
                                        <th>Obat</th><th>Keperawatan</th><th>Laboratorium</th>
                                        <th>Kamar & Akomodasi</th><th>Konsultasi</th><th>BMHP</th>
                                        <th>Total Tagihan</th><th>Nama Poliklinik</th><th>Nama Penjamin</th>
                                    `;
                                } else {
                                    html += `<th>Jenis</th><th>Nama Tindakan</th><th>Jumlah</th>`;
                                    if (tipeTabel === 'penjamin') html += `<th>Nama Pembayaran</th>`;
                                    html += `<th>Total</th>`;
                                }

                                html += `       </tr>
                                            </thead>
                                            <tbody>
                                `;

                                // --- MENYUSUN ISI TABEL ---
                                list.forEach(item => {
                                    html += `<tr>`;

                                    if (tipeTabel === 'icu') {
                                        html += `
                                            <td>${item.kd_registrasi}</td><td>${item.nm_pasien}</td>
                                            <td>${item.nm_ruang}</td><td>${item.nm_bed}</td>
                                            <td>${item.tgl_tindakan}</td><td class="text-wrap" style="min-width: 200px;">${item.nm_tindakan}</td>
                                            <td>${item.qty}</td><td class="text-end fw-bold">${item.total}</td>
                                        `;
                                    } else if (tipeTabel === 'keuangan') {
                                        html += `
                                            <td>${item.kd_registrasi}</td><td>${item.nm_pasien}</td><td>${item.kelas}</td>
                                            <td>${item.tgl_registrasi}</td><td class="text-end">${item.tarif_inacbg}</td>
                                            <td>${item.dpjp}</td><td class="text-end">${item.radiologi}</td>
                                            <td class="text-end">${item.obat}</td><td class="text-end">${item.keperawatan}</td>
                                            <td class="text-end">${item.laboratorium}</td><td class="text-end">${item.kamar_dan_akomodasi}</td>
                                            <td class="text-end">${item.konsultasi}</td><td class="text-end">${item.bmhp}</td>
                                            <td>${item.nm_pembayaran}</td><td class="text-end fw-bold">${item.total_tagihan}</td>
                                        `;
                                    } else if (tipeTabel === 'nonbpjs') {
                                        html += `
                                            <td>${item.kd_registrasi}</td><td>${item.nm_pasien}</td><td>${item.kelas}</td>
                                            <td>${item.tgl_registrasi}</td><td>${item.dpjp}</td><td class="text-end">${item.radiologi}</td>
                                            <td class="text-end">${item.obat}</td><td class="text-end">${item.keperawatan}</td><td class="text-end">${item.laboratorium}</td>
                                            <td class="text-end">${item.kamar_dan_akomodasi}</td><td class="text-end">${item.konsultasi}</td><td class="text-end">${item.bmhp}</td>
                                            <td class="text-end fw-bold text-success">${item.total_tagihan}</td><td>${item.nm_poliklinik}</td><td>${item.nm_pembayaran}</td>
                                        `;
                                    } else {
                                        html += `
                                            <td>${item.jenis}</td><td class="text-wrap" style="min-width: 200px;">${item.nm_tindakan}</td>
                                            <td>${item.qty}</td>
                                        `;
                                        if (tipeTabel === 'penjamin') html += `<td>${item.nm_pembayaran}</td>`;
                                        html += `<td class="text-end fw-bold">${item.total}</td>`;
                                    }

                                    html += `</tr>`;
                                });

                                html += '</tbody></table></div>';

                                // Tampilkan container tabel
                                $('#container' + idPrefix).html(html).fadeIn();

                                // --- KONFIGURASI DATATABLES ---
                                let dtConfig = {
                                    responsive: false,
                                    autoWidth: false,
                                    language: {
                                        search: "Cari:",
                                        lengthMenu: "Tampil _MENU_",
                                        info: "_START_-_END_ dari _TOTAL_"
                                    }
                                };

                                // Modifikasi khusus Non-BPJS
                                if (tipeTabel === 'nonbpjs') {
                                    dtConfig.scrollX = false;
                                    dtConfig.columnDefs = [{
                                        targets: 3,
                                        type: "date"
                                    }];
                                    dtConfig.order = [
                                        [3, "asc"]
                                    ];
                                    dtConfig.dom = '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>><"row"<"col-sm-12"tr>><"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>';
                                }

                                let tableInstance = $(tableId).DataTable(dtConfig);

                                // --- LOGIKA HIDE/SHOW KOLOM KELAS KHUSUS NON-BPJS ---
                                if (tipeTabel === 'nonbpjs') {
                                    function toggleKelas() {
                                        let selectedVal = $('#jenisPasien' + idPrefix).val();
                                        // 1 = Rawat Jalan, 3 = IGD (Sembunyikan index kolom ke-2 yaitu 'Kelas')
                                        if (selectedVal === "1" || selectedVal === "3") {
                                            tableInstance.column(2).visible(false);
                                        } else {
                                            tableInstance.column(2).visible(true);
                                        }
                                    }

                                    // Panggil saat pertama render
                                    toggleKelas();

                                    // Event listener jika dropdown jenis pasien diubah
                                    $('#jenisPasien' + idPrefix).off('change').on('change', function() {
                                        toggleKelas();
                                    });
                                }

                                // Tampilkan tombol download
                                $('#btnDownload' + idPrefix).fadeIn();

                            } else {
                                $('#container' + idPrefix).html('<div class="alert alert-info text-center m-3 small"><i class="fas fa-info-circle me-1"></i> Tidak ada data transaksi yang ditemukan.</div>').fadeIn();
                            }
                        } else {
                            $('#container' + idPrefix).html('<div class="alert alert-warning text-center m-3 small">Respon data kosong atau tidak valid.</div>').fadeIn();
                        }
                    } catch (e) {
                        console.error("Error parsing JSON: ", e);
                        $('#container' + idPrefix).html('<div class="alert alert-danger text-center m-3 small">Terjadi kesalahan saat memproses format data dari server.</div>').fadeIn();
                    }
                },
                error: function(xhr, status, error) {
                    $('#loading' + idPrefix).hide();
                    console.error("AJAX Error: ", error);
                    $('#container' + idPrefix).html('<div class="alert alert-danger text-center m-3 small"><i class="fas fa-exclamation-triangle me-1"></i> Gagal terhubung ke server.</div>').fadeIn();
                }
            });

            // Action Tombol Download Excel
            $('#btnDownload' + idPrefix).off('click').on('click', function() {
                let downloadUrlFull = `${urlDownload}?TANGGAL_AWAL=${tglAwal}&TANGGAL_AKHIR=${tglAkhir}`;
                if (hasJenisPasien) {
                    downloadUrlFull += `&KD_JENIS_PASIEN=${jenisPasien}`;
                }
                window.location.href = downloadUrlFull;
            });
        }


        // =================================================================================
        // 2. TRIGGER SUBMIT UNTUK KEENAM TAB
        // =================================================================================

        // TAB 1: BILLING HARIAN
        $('#formHarian').on('submit', function(e) {
            e.preventDefault();
            loadDataBilling('#formHarian', '<?= base_url("billing/billingharian") ?>', '<?= base_url("billing/unduhbillingharian") ?>', true, 'standard');
        });

        // TAB 2: HARIAN & PENJAMIN
        $('#formPenjamin').on('submit', function(e) {
            e.preventDefault();
            loadDataBilling('#formPenjamin', '<?= base_url("billing/billingharianpenjamin") ?>', '<?= base_url("billing/unduhbillingharianpenjamin") ?>', true, 'penjamin');
        });

        // TAB 3: ICU / HCU (Tidak pakai Jenis Pasien)
        $('#formICU').on('submit', function(e) {
            e.preventDefault();
            loadDataBilling('#formICU', '<?= base_url("billing/billingharianicu") ?>', '<?= base_url("billing/unduhbillingharianicu") ?>', false, 'icu');
        });

        // TAB 4: KEUANGAN BPJS
        $('#formBPJS').on('submit', function(e) {
            e.preventDefault();
            loadDataBilling('#formBPJS', '<?= base_url("billing/billingkeuanganall") ?>', '<?= base_url("billing/unduhbillingkeuanganall") ?>', true, 'keuangan');
        });

        // TAB 5: NON-BPJS (UMUM) -> Menggunakan tipe 'nonbpjs'
        $('#formUmum').on('submit', function(e) {
            e.preventDefault();
            loadDataBilling('#formUmum', '<?= base_url("keuangan/tampilbillkeuangangnonbpjs_umum") ?>', '<?= base_url("keuangan/unduhbillkeuangangnonbpjs_umum") ?>', true, 'nonbpjs');
        });

        // TAB 6: NON-BPJS (ASURANSI) -> Sama dengan umum, beda url
        $('#formAsuransi').on('submit', function(e) {
            e.preventDefault();
            loadDataBilling('#formAsuransi', '<?= base_url("keuangan/tampilbillkeuangangnonbpjs_asuransi") ?>', '<?= base_url("keuangan/unduhbillkeuangangnonbpjs_asuransi") ?>', true, 'nonbpjs');
        });

    });
</script>