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

    /* 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: 100vw !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;
    }

    /* 3. MEMAKSA TABEL DAN CARD AGAR PATUH PADA UKURAN LAYAR */
    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; 
    }

    /* 4. SCROLL HORIZONTAL CSS (STABIL DI ANDROID) */
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: none;
    }

    /* 5. FORM FILTER RESPONSIVE */
    .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 .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%; }
        /* Membatasi input datatable search agar tidak melar di HP */
        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-2 px-md-4 overflow-hidden">
            <div class="d-flex align-items-center justify-content-between mt-4 mb-2">
                <h1 class="h3 mb-0 text-gray-800" id="judulPasien">Data Billing Keuangan SIRUS NON BPJS - UMUM</h1>
            </div>
            <ol class="breadcrumb mb-4 shadow-sm bg-white p-2 rounded">
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Dashboard</a></li>
                <li class="breadcrumb-item active">Tampilkan Data Keuangan SIRUS NON BPJS - UMUM</li>
            </ol>

            <div class="card mb-4 border-0 shadow-sm">
                <div class="card-body filter-wrapper">
                    <form id="filterForm">
                        <div class="row g-2 align-items-end">
                            <div class="col-12 col-md-3 col-lg-2">
                                <label for="tanggal_awal" 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 form-control-solid" value="<?= $tgl_awal ?>" required />
                            </div>
                            <div class="col-12 col-md-3 col-lg-2">
                                <label for="tanggal_akhir" 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 form-control-solid" value="<?= $tgl_akhir ?>" required />
                            </div>
                            <div class="col-12 col-md-3 col-lg-3">
                                <label for="kd_jenis_pasien" class="form-label text-muted small fw-bold mb-1">Jenis Pasien</label>
                                <select id="kd_jenis_pasien" name="kd_jenis_pasien" class="form-select form-select-solid" 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 col-lg-5">
                                <div class="btn-group-custom mt-md-4">
                                    <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;" />
                        <p class="text-muted mt-2 small fw-bold">Memuat data, harap tunggu...</p>
                    </div>
                    
                    <div id="tableContainer" style="display: none;">
                        </div>
                </div>
            </div>

        </div>
    </main>
    
    <footer class="py-4 bg-light mt-auto border-top">
        <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>
    $(document).ready(function() {
        $('#filterForm').on('submit', function(event) {
            event.preventDefault(); 
            $('#loadingIcon').show(); 
            $('#tableContainer').hide(); 

            $.ajax({
                url: '<?= base_url("keuangan/tampilbillkeuangangnonbpjs_umum") ?>',
                type: 'POST',
                data: {
                    TANGGAL_AWAL: $('#tanggal_awal').val(),
                    TANGGAL_AKHIR: $('#tanggal_akhir').val(),
                    KD_JENIS_PASIEN: $('#kd_jenis_pasien').val()
                },
                success: function(tampil_nonbpjs) {
                    $('#loadingIcon').hide(); 

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

                        if (data && Array.isArray(data.tampil_nonbpjs)) {
                            const list = data.tampil_nonbpjs;

                            if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                                $('#datatablesSimple').DataTable().destroy();
                            }

                            if (list.length > 0) {
                                // PERBAIKAN: Pembungkus <div class="table-responsive w-100"> HARUS DITUTUP >
                                // Penggunaan text-nowrap agar 15 kolom menyamping
                                let html = `
                                <div class="table-responsive w-100">
                                    <table id="datatablesSimple" class="table table-striped table-hover table-bordered w-100 text-nowrap">
                                        <thead class="table-light">
                                            <tr>
                                                <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>
                                            </tr>
                                        </thead>
                                    <tbody>
                                `;

                                list.forEach(item => {
                                    // PERBAIKAN: Format angka agar rapi (Opsional) dan penambahan text-end untuk kolom uang
                                    html += `<tr>
                                        <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>
                                    </tr>`;
                                });
                                html += '</tbody></table></div>';
                                
                                $('#tableContainer').html(html).fadeIn(); 

                                // INISIALISASI DATATABLES KHUSUS HP (scrollX: false)
                                $('#datatablesSimple').DataTable({
                                    responsive: false, 
                                    scrollX: false, // Biarkan CSS murni yang mengatasi scroll
                                    autoWidth: false,
                                    columnDefs: [{
                                        targets: 3, 
                                        type: "date"
                                    }],
                                    order: [[3, "asc"]],
                                    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>>',
                                    language: {
                                        search: "Cari:",
                                        lengthMenu: "Tampil _MENU_",
                                        info: "_START_-_END_ dari _TOTAL_"
                                    }
                                });

                                // Fungsi Toggle yang sudah ada tidak diubah
                                toggleKelasColumn();

                                $('#downloadButton').show();
                            } else {
                                $('#tableContainer').html('<div class="alert alert-info text-center m-3 small"><i class="fas fa-info-circle me-1"></i> Tidak ada data yang ditemukan.</div>').show();
                                $('#downloadButton').hide(); 
                            }
                        } else {
                            $('#tableContainer').html('<div class="alert alert-warning text-center m-3 small">Respons data kosong atau format salah.</div>').show();
                            $('#downloadButton').hide(); 
                        }

                        history.replaceState(null, '', '<?= base_url("billing/tampilbillingnonbpjs") ?>');
                    } catch (e) {
                        console.error("Error parsing JSON: ", e);
                        $('#tableContainer').html('<div class="alert alert-danger text-center m-3 small">Terjadi kesalahan format data dari server.</div>').show();
                        $('#downloadButton').hide(); 
                    }
                },
                error: function(xhr, status, error) {
                    $('#loadingIcon').hide(); 
                    console.error("AJAX Error: ", error);
                    $('#tableContainer').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>').show();
                }
            });
        });

        // FUNGSI LOGIKA (TIDAK DIUBAH)
        function toggleKelasColumn() {
            let selectedValue = $('#kd_jenis_pasien').val();
            if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                let table = $('#datatablesSimple').DataTable();
                if (selectedValue === "1" || selectedValue === "3") {
                    table.column(2).visible(false); 
                } else {
                    table.column(2).visible(true); 
                }
            }
        }

        $('#kd_jenis_pasien').on('change', function() {
            toggleKelasColumn();
        });

        $(document).on('draw.dt', function() {
            toggleKelasColumn();
        });

        $('#filterForm').on('submit', function(event) {
            setTimeout(toggleKelasColumn, 500);
        });

        // Event Download
        $('#downloadButton').on('click', function() {
            const tanggalAwal = $('#tanggal_awal').val();
            const tanggalAkhir = $('#tanggal_akhir').val();
            const kdjenispasien = $('#kd_jenis_pasien').val();
            window.location.href = `<?= base_url("keuangan/unduhbillkeuangangnonbpjs_umum") ?>?TANGGAL_AWAL=${tanggalAwal}&TANGGAL_AKHIR=${tanggalAkhir}&KD_JENIS_PASIEN=${kdjenispasien}`;
        });
    });
</script>