<style>
    /* ========================================================
       1. CSS CORE RESPONSIVE (ANTI HALAMAN JEBOL)
       ======================================================== */
    body, html {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
    }

    @media (max-width: 991.98px) {
        #layoutSidenav_content {
            padding-left: 0 !important;
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100vw !important;
        }
        .container-fluid {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
    }

    #layoutSidenav_content {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden !important;
    }

    table, table.dataTable {
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden; 
    }

    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: none;
    }

    /* ========================================================
       2. STYLING TAB / PILLS (PERBAIKAN SCROLL HORIZONTAL)
       ======================================================== */
    .nav-pills .nav-link {
        border-radius: 50px;
        padding: 8px 16px;
        font-weight: 500;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #e3e6f0;
        color: #5a5c69;
        background-color: #fff;
        white-space: nowrap; 
        cursor: pointer;
    }
    
    .nav-pills .nav-link.active, .nav-pills .nav-link:hover {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }

    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    .nav-pills::-webkit-scrollbar { height: 4px; }
    .nav-pills::-webkit-scrollbar-track { background: #f1f1f1; }
    .nav-pills::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

    /* ========================================================
       3. STYLING FORM FILTER & PERBAIKAN UI SELECT2
       ======================================================== */
    .filter-wrapper {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* Modifikasi Select2 Default agar mirip Bootstrap 5 (FIXED) */
    .select2-container .select2-selection--single {
        height: 38px !important; 
        border: 1px solid #ced4da !important;
        border-radius: 0.375rem !important;
        background-color: #fff !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px !important;
        color: #495057 !important;
        padding-left: 12px !important;
        padding-right: 40px !important; 
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
        right: 8px !important;
    }
    .select2-container--default .select2-selection__clear {
        position: absolute !important;
        right: 30px !important; 
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        color: #dc3545 !important;
        font-size: 1.2rem !important;
        font-weight: bold;
        z-index: 10;
    }
    .select2-dropdown {
        border: 1px solid #ced4da !important;
        border-radius: 0.375rem !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .select2-search--dropdown .select2-search__field {
        border-radius: 4px !important;
        border: 1px solid #ced4da !important;
        padding: 6px 10px !important;
    }

    @media (max-width: 768px) {
        .filter-wrapper .form-group { margin-bottom: 12px; }
        .btn-group-custom { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }
        .btn-group-custom button { width: 100%; }
        div.dataTables_wrapper div.dataTables_filter input { width: 140px !important; }
    }

    @media (min-width: 769px) {
        .btn-group-custom { display: flex; gap: 10px; align-items: flex-end; height: 100%; padding-bottom: 2px; }
    }
</style>

<div id="layoutSidenav_content">
    <main>
        <div class="container-fluid px-3 px-md-4 overflow-hidden">
            <h1 class="mt-4 fs-3" id="judulPasien">Data Laboratorium</h1>
            <ol class="breadcrumb mb-4 shadow-sm bg-white p-2 rounded">
                <li class="breadcrumb-item"><a href="index.html" class="text-decoration-none text-muted">Dashboard</a></li>
                <li class="breadcrumb-item active">Laboratorium</li>
            </ol>

            <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active shadow-sm" id="pills-laborat-tab" data-bs-toggle="pill" href="#pills-laborat" role="tab">
                        <i class="fas fa-shopping-cart me-2"></i>Penjualan Laboratorium
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link shadow-sm" id="pills-rekaplab-tab" data-bs-toggle="pill" href="#pills-rekaplab" role="tab">
                        <i class="fas fa-solid fa-file-lines me-2"></i>Rekap Data Lab
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link shadow-sm" id="pills-periksalab-tab" data-bs-toggle="pill" href="#pills-periksalab" role="tab">
                        <i class="fas fa-regular fa-file-zipper me-2"></i>Rekap Pemeriksaan Lab 
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link shadow-sm" id="pills-detaillab-tab" data-bs-toggle="pill" href="#pills-detaillab" role="tab">
                        <i class="fas fa-solid fa-file-pen me-2"></i>Rekap Detail Lab
                    </a>
                </li>
            </ul>

            <div class="tab-content" id="pills-tabContent">
                
                <div class="tab-pane fade show active" id="pills-laborat" role="tabpanel">
                    <h5 class="mb-3 border-bottom pb-2 text-muted fw-bold">Data Penjualan Laboratorium</h5>
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="filterFormLaboratorium">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Tanggal Awal</label>
                                        <input type="date" id="tanggal_awal" name="tanggal_awal" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tanggal_akhir" name="tanggal_akhir" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Jenis Pembayaran</label>
                                        <select id="kd_group_bayar" name="kd_group_bayar" class="form-select" required>
                                            <option value="" disabled selected>Pilih Pembayaran</option>
                                            <option value="1">BPJS</option>
                                            <option value="2">ASURANSI</option>
                                            <option value="0">UMUM</option>
                                        </select>
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <div class="btn-group-custom mt-3 mt-md-0">
                                            <button type="submit" class="btn btn-primary px-3 shadow-sm"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="downloadButton" class="btn btn-success px-3 shadow-sm" 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-5">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingIcon" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 50px;" />
                            </div>
                            <div id="tableContainer" style="display: none;"></div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="pills-rekaplab" role="tabpanel">
                    <h5 class="mb-3 border-bottom pb-2 text-muted fw-bold">Data Rekap Laboratorium</h5>
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="filterFormRekapLab">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Tanggal Awal</label>
                                        <input type="date" id="tanggal_awal_rekaplab" name="tanggal_awal" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tanggal_akhir_rekaplab" name="tanggal_akhir" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="btn-group-custom mt-3 mt-md-0">
                                            <button type="submit" class="btn btn-primary px-3 shadow-sm"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="downloadButton_rekaplab" class="btn btn-success px-3 shadow-sm" 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-5">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingIcon_rekaplab" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 50px;" />
                            </div>
                            <div id="tableContainer_rekaplab" style="display: none;"></div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="pills-periksalab" role="tabpanel">
                    <h5 class="mb-3 border-bottom pb-2 text-muted fw-bold">Data Rekap Pemeriksaan Laboratorium</h5>
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="filterFormPeriksaLab">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Tanggal Awal</label>
                                        <input type="date" id="tanggal_awal_periksalab" name="tanggal_awal" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tanggal_akhir_periksalab" name="tanggal_akhir" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="btn-group-custom mt-3 mt-md-0">
                                            <button type="submit" class="btn btn-primary px-3 shadow-sm"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="downloadButton_periksalab" class="btn btn-success px-3 shadow-sm" 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-5">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingIcon_periksalab" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 50px;" />
                            </div>
                            <div id="tableContainer_periksaLab" style="display: none;"></div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="pills-detaillab" role="tabpanel">
                    <h5 class="mb-3 border-bottom pb-2 text-muted fw-bold">Data Rekap Detail Laboratorium</h5>
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <form id="filterFormRekapdtl">
                                <div class="row g-2 align-items-end">
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Tanggal Awal</label>
                                        <input type="date" id="tanggal_awal_rekapdtl" name="tanggal_awal" class="form-control" value="<?= $tgl_awal ?>" required />
                                    </div>
                                    <div class="col-12 col-md-3">
                                        <label class="form-label text-muted small fw-bold mb-1">Tanggal Akhir</label>
                                        <input type="date" id="tanggal_akhir_rekapdtl" name="tanggal_akhir" class="form-control" value="<?= $tgl_akhir ?>" required />
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="btn-group-custom mt-3 mt-md-0">
                                            <button type="submit" class="btn btn-primary px-3 shadow-sm"><i class="fas fa-search me-1"></i> Submit</button>
                                            <button type="button" id="downloadButton_rekapdtl" class="btn btn-success px-3 shadow-sm" 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-5">
                        <div class="card-body p-2 p-md-3">
                            <div id="loadingIcon_rekapdtl" style="display: none;" class="py-5 text-center">
                                <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." style="width: 50px;" />
                            </div>
                            <div id="tableContainer_rekapdtl" style="display: none;"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </main>
    
    <footer class="py-4 bg-light mt-auto border-top">
        <div class="container-fluid px-4">
            <div class="text-muted small">Copyright &copy; IT RSU Ananda Purwokerto 2024</div>
        </div>
    </footer>
</div>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        
        // ==========================================
        // LOGIKA TAB 1: PENJUALAN LABORAT
        // ==========================================
        $('#filterFormLaboratorium').on('submit', function(event) {
            event.preventDefault(); 
            $('#loadingIcon').show();
            $('#tableContainer').hide();

            var tglAwal = $('#tanggal_awal').val();
            var tglAkhir = $('#tanggal_akhir').val();
            var kdBayar = $('#kd_group_bayar').val();

            $.ajax({
                url: '<?= base_url("laboratorium/penjualanlaborat") ?>',
                type: 'POST',
                data: { TANGGAL_AWAL: tglAwal, TANGGAL_AKHIR: tglAkhir, KD_GROUP_BAYAR: kdBayar },
                success: function(response) {
                    $('#loadingIcon').hide();
                    try {
                        const data = JSON.parse(response); 
                        if (data && Array.isArray(data.response) && data.response.length > 0) {
                            
                            if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                                $('#datatablesSimple').DataTable().destroy();
                            }

                            let html = `
                            <div class="table-responsive w-100">
                                <table id="datatablesSimple" class="table table-striped table-hover table-bordered text-nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Tanggal Jual</th>
                                            <th>Nama Pasien</th>
                                            <th>Tgl Regist</th>
                                            <th>Nama Tarif Lab</th>
                                            <th>Nama Poliklinik</th>
                                            <th class="text-center">Jumlah Pemeriksaan</th>
                                            <th>Nama Grup Pembayaran</th>
                                            <th class="text-end">Total</th>
                                        </tr>
                                    </thead>
                                <tbody>`;
                            
                            data.response.forEach(item => {
                                html += `<tr>
                                    <td>${item.tgl_jual}</td>
                                    <td>${item.nm_pasien}</td>
                                    <td>${item.tgl_registrasi}</td>
                                    <td>${item.nm_tarif_lab}</td>
                                    <td>${item.nm_poliklinik}</td>
                                    <td class="text-center">${item.qty_pemeriksaan}</td>
                                    <td>${item.nm_group_bayar}</td>
                                    <td class="text-end fw-bold text-success">${parseFloat(item.total||0).toLocaleString('id-ID')}</td>
                                </tr>`;
                            });
                            html += '</tbody></table></div>';
                            
                            $('#tableContainer').html(html).show(); 
                            $('#datatablesSimple').DataTable({ 
                                "order": [[0, "asc"]],
                                responsive: false, scrollX: false, autoWidth: false,
                                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>>'
                            });
                            $('#downloadButton').show();
                        } else {
                            $('#tableContainer').html('<div class="alert alert-info small m-3">Tidak ada data.</div>').show();
                            $('#downloadButton').hide();
                        }
                    } catch (e) {
                        $('#tableContainer').html('<div class="alert alert-danger m-3">Error Parsing JSON</div>').show();
                        $('#loadingIcon').hide();
                    }
                },
                error: function() { $('#loadingIcon').hide(); alert("Gagal koneksi server."); }
            });
        });

        $('#downloadButton').on('click', function() {
            const ta = $('#tanggal_awal').val();
            const tak = $('#tanggal_akhir').val();
            const kb = $('#kd_group_bayar').val();
            window.location.href = `<?= base_url("laboratorium/unduhpenjualanlaborat") ?>?TANGGAL_AWAL=${ta}&TANGGAL_AKHIR=${tak}&KD_GROUP_BAYAR=${kb}`;
        });

        // ==========================================
        // LOGIKA TAB 2: REKAP LAB 
        // ==========================================
        $('#filterFormRekapLab').on('submit', function(event) {
            event.preventDefault(); 
            $('#loadingIcon_rekaplab').show();
            $('#tableContainer_rekaplab').hide();

            var tglAwal = $('#tanggal_awal_rekaplab').val();
            var tglAkhir = $('#tanggal_akhir_rekaplab').val();

            $.ajax({
                url: '<?= base_url("laboratorium/rekaplabdata") ?>', 
                type: 'POST',
                data: { TANGGAL_AWAL: tglAwal, TANGGAL_AKHIR: tglAkhir },
                success: function(response) {
                    $('#loadingIcon_rekaplab').hide();
                    try {
                        const data = JSON.parse(response); 
                        if (data && Array.isArray(data.response) && data.response.length > 0) {
                            if ($.fn.DataTable.isDataTable('#datatablesRekapLab')) {
                                $('#datatablesRekapLab').DataTable().destroy();
                            }
                            let html = `
                            <div class="table-responsive w-100">
                                <table id="datatablesRekapLab" class="table table-striped table-hover table-bordered text-nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Nama Pembayaran</th>
                                            <th class="text-center">Jumlah Jenis Tarif</th>
                                            <th class="text-center">Jumlah Pasien</th>
                                            <th class="text-center">Total Jml Pemeriksaan</th>
                                            <th class="text-end">Total Nilai</th>
                                        </tr>
                                    </thead>
                                <tbody>`;
                            data.response.forEach(item => {
                                html += `<tr>
                                    <td class="fw-bold">${item.nm_pembayaran}</td>
                                    <td class="text-center">${item.jumlah_jenis_tarif_lab}</td>
                                    <td class="text-center">${item.jumlah_pasien}</td>
                                    <td class="text-center">${item.total_qty_pemeriksaan}</td>
                                    <td class="text-end fw-bold text-success">${parseFloat(item.total_nilai).toLocaleString('id-ID')}</td>
                                </tr>`;
                            });
                            html += '</tbody></table></div>';
                            
                            $('#tableContainer_rekaplab').html(html).show(); 
                            $('#datatablesRekapLab').DataTable({ responsive: false, scrollX: false, autoWidth: false });
                            $('#downloadButton_rekaplab').show();
                        } else {
                            $('#tableContainer_rekaplab').html('<div class="alert alert-info m-3 small">Tidak ada data Rekap Lab.</div>').show();
                            $('#downloadButton_rekaplab').hide();
                        }
                    } catch (e) {
                        $('#tableContainer_rekaplab').html('<div class="alert alert-danger m-3">Error Parsing JSON</div>').show();
                    }
                },
                error: function() { $('#loadingIcon_rekaplab').hide(); alert("Gagal koneksi server."); }
            });
        });

        $('#downloadButton_rekaplab').on('click', function() {
            const a1 = $('#tanggal_awal_rekaplab').val();
            const a2 = $('#tanggal_akhir_rekaplab').val();
            window.location.href = `<?= base_url("laboratorium/unduhrekaplab") ?>?TANGGAL_AWAL=${a1}&TANGGAL_AKHIR=${a2}`;
        });

        // ==========================================
        // LOGIKA TAB 3: REKAP LAB PEMERIKSAAN 
        // ==========================================
        $('#filterFormPeriksaLab').on('submit', function(event) {
            event.preventDefault(); 
            $('#loadingIcon_periksalab').show();
            $('#tableContainer_periksaLab').hide();

            var tglAwal = $('#tanggal_awal_periksalab').val();
            var tglAkhir = $('#tanggal_akhir_periksalab').val();

            $.ajax({
                url: '<?= base_url("laboratorium/rekapperiksalabdata") ?>', 
                type: 'POST',
                data: { TANGGAL_AWAL: tglAwal, TANGGAL_AKHIR: tglAkhir },
                success: function(response) {
                    $('#loadingIcon_periksalab').hide();
                    try {
                        const data = JSON.parse(response); 
                        if (data && Array.isArray(data.response) && data.response.length > 0) {
                            if ($.fn.DataTable.isDataTable('#datatablesPemeriksaanLab')) {
                                $('#datatablesPemeriksaanLab').DataTable().destroy();
                            }
                            let html = `
                            <div class="table-responsive w-100">
                                <table id="datatablesPemeriksaanLab" class="table table-striped table-hover table-bordered text-nowrap w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Nama Pembayaran</th>
                                            <th>Nama Tarif Lab</th>
                                            <th class="text-center">Jumlah Jenis Tarif</th>
                                            <th class="text-center">Jumlah Pasien</th>
                                            <th class="text-center">Total Qty Pemeriksaan</th>
                                            <th class="text-end">Total Nilai</th>
                                        </tr>
                                    </thead>
                                <tbody>`;
                            data.response.forEach(item => {
                                html += `<tr>
                                    <td class="fw-bold">${item.nm_pembayaran}</td>
                                    <td>${item.nm_tarif_lab}</td>
                                    <td class="text-center">${item.jumlah_jenis_tarif}</td>
                                    <td class="text-center">${item.jumlah_pasien}</td>
                                    <td class="text-center">${item.total_qty_pemeriksaan}</td>
                                    <td class="text-end fw-bold text-success">${parseFloat(item.total_nilai||0).toLocaleString('id-ID')}</td>
                                </tr>`;
                            });
                            html += '</tbody></table></div>';
                            
                            $('#tableContainer_periksaLab').html(html).show(); 
                            $('#datatablesPemeriksaanLab').DataTable({ responsive: false, scrollX: false, autoWidth: false });
                            $('#downloadButton_periksalab').show();
                        } else {
                            $('#tableContainer_periksaLab').html('<div class="alert alert-info m-3 small">Tidak ada data.</div>').show();
                            $('#downloadButton_periksalab').hide();
                        }
                    } catch (e) {
                        $('#tableContainer_periksaLab').html('<div class="alert alert-danger m-3">Error Parsing JSON</div>').show();
                    }
                },
                error: function() { $('#loadingIcon_periksalab').hide(); alert("Gagal koneksi server."); }
            });
        });

        $('#downloadButton_periksalab').on('click', function() {
            const pk1 = $('#tanggal_awal_periksalab').val();
            const pk2 = $('#tanggal_akhir_periksalab').val();
            window.location.href = `<?= base_url("laboratorium/unduhrekapperiksalab") ?>?TANGGAL_AWAL=${pk1}&TANGGAL_AKHIR=${pk2}`;
        });

        // ==========================================
        // LOGIKA TAB 4:: REKAP DETAIL LAB
        // ==========================================
        $('#filterFormRekapdtl').on('submit', function(event) {
            event.preventDefault(); 
            $('#loadingIcon_rekapdtl').show();
            $('#tableContainer_rekapdtl').hide();

            var tglAwal = $('#tanggal_awal_rekapdtl').val();
            var tglAkhir = $('#tanggal_akhir_rekapdtl').val();

            $.ajax({
                url: '<?= base_url("laboratorium/rekapdetaillab") ?>', 
                type: 'POST',
                data: { TANGGAL_AWAL: tglAwal, TANGGAL_AKHIR: tglAkhir },
                success: function(response) {
                    $('#loadingIcon_rekapdtl').hide();
                    try {
                        const data = JSON.parse(response); 
                        if (data && Array.isArray(data.response) && data.response.length > 0) {
                            
                            if ($.fn.DataTable.isDataTable('#datatablesRekapDtl')) {
                                $('#datatablesRekapDtl').DataTable().destroy();
                            }

                            let html = `
                            <div class="table-responsive w-100">
                                <table id="datatablesRekapDtl" class="table table-striped table-hover table-bordered text-nowrap w-100">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Nama Tarif Lab</th>
                                            <th class="text-center">Pasien BPJS</th>   
                                            <th class="text-center">Jumlah BPJS</th>
                                            <th class="text-end">Total Nilai BPJS</th>
                                            <th class="text-center">Pasien UMUM</th>
                                            <th class="text-center">Jumlah UMUM</th>
                                            <th class="text-end">Total Nilai UMUM</th>
                                            <th class="text-center">Pasien ASURANSI</th>
                                            <th class="text-center">Jumlah ASURANSI</th>
                                            <th class="text-end">Total Nilai ASURANSI</th>
                                            <th class="text-center">Total Pasien</th>
                                            <th class="text-center">Total Jumlah</th>
                                            <th class="text-end text-warning">Total Nilai</th>
                                        </tr>
                                    </thead>
                                <tbody>`;

                            data.response.forEach(item => {
                                html += `<tr>
                                    <td class="fw-bold">${item.nm_tarif_lab}</td>
                                    <td class="text-center">${item.bpjs_pasien}</td>
                                    <td class="text-center">${item.bpjs_qty}</td>
                                    <td class="text-end">${parseFloat(item.bpjs_nilai||0).toLocaleString('id-ID')}</td>
                                    <td class="text-center">${item.umum_pasien}</td>
                                    <td class="text-center">${item.umum_qty}</td>
                                    <td class="text-end">${parseFloat(item.umum_nilai||0).toLocaleString('id-ID')}</td>
                                    <td class="text-center">${item.asuransi_pasien}</td>
                                    <td class="text-center">${item.asuransi_qty}</td>
                                    <td class="text-end">${parseFloat(item.asuransi_nilai||0).toLocaleString('id-ID')}</td>
                                    <td class="text-center fw-bold">${item.total_pasien}</td>
                                    <td class="text-center fw-bold">${item.total_qty}</td>
                                    <td class="text-end fw-bold text-success">${parseFloat(item.total_nilai||0).toLocaleString('id-ID')}</td>
                                </tr>`;
                            });
                            html += '</tbody></table></div>';
                            
                            $('#tableContainer_rekapdtl').html(html).show(); 
                            $('#datatablesRekapDtl').DataTable({ 
                                responsive: false, scrollX: false, autoWidth: false,
                                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>>'
                            });
                            $('#downloadButton_rekapdtl').show();
                        } else {
                            $('#tableContainer_rekapdtl').html('<div class="alert alert-info m-3 small">Tidak ada data Rekap Detail Lab.</div>').show();
                            $('#downloadButton_rekapdtl').hide();
                        }
                    } catch (e) {
                        $('#tableContainer_rekapdtl').html('<div class="alert alert-danger m-3">Error Parsing JSON</div>').show();
                    }
                },
                error: function() { $('#loadingIcon_rekapdtl').hide(); alert("Gagal koneksi server."); }
            });
        });
        
        $('#downloadButton_rekapdtl').on('click', function() {
            const dtl1 = $('#tanggal_awal_rekapdtl').val();
            const dtl2 = $('#tanggal_akhir_rekapdtl').val();
            window.location.href = `<?= base_url("laboratorium/unduhrekapdetaillab") ?>?TANGGAL_AWAL=${dtl1}&TANGGAL_AKHIR=${dtl2}`;
        });
    });
</script>