<style>
    /* Styling khusus halaman ini agar rapi di Mobile */
    #tableContainer {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table.dataTable {
        /* KUNCI PERBAIKAN: Hapus table-layout: fixed; untuk tabel dengan banyak kolom */
        width: 100% !important;
        margin: 0 auto;
        clear: both;
        border-collapse: collapse;
    }

    .filter-wrapper {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* Penyesuaian tombol di layar HP */
    @media (max-width: 768px) {
        .btn-group-custom {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            margin-top: 15px;
        }
        .btn-group-custom button {
            width: 100%;
        }
    }
    @media (min-width: 769px) {
        .btn-group-custom {
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
    }
</style>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4" id="judulPasien">Data Billing Keuangan SIRUS NON BPJS</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                    <li class="breadcrumb-item active">Tampilkan Data Keuangan SIRUS NON BPJS</li>
                </ol>
                <!-- Filter Tanggal -->

                <div class="row">
                    <div class="col-md-12">
                        <div class="card mb-4 border-0 shadow-sm">
                            <div class="card-body filter-wrapper">
                                <form id="filterForm">
                                    <div class="row g-3 align-items-end">
                                        <div class="col-12 col-md-3 col-lg-2">
                                            <label for="tanggal_awal" class="form-label text-muted small 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 col-lg-2">
                                            <label for="tanggal_akhir" class="form-label text-muted small 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 col-lg-3">
                                            <label for="kd_jenis_pasien" class="form-label text-muted small mb-1">Jenis Pasien</label>
                                            <select id="kd_jenis_pasien" name="kd_jenis_pasien" 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 col-lg-5">
                                            <div class="btn-group-custom">
                                                <button type="submit" class="btn btn-primary px-4"><i class="fas fa-search me-1"></i> Submit</button>
                                                <button type="button" id="downloadButton" class="btn btn-success px-4" style="display: none;"><i class="fas fa-file-excel me-1"></i> Download Excel</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="result" class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-0 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">Memuat data...</p>
                        </div>
                        <div class="table-responsive" id="tableContainer" style="display: none;">
                            </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">
                    <div class="text-muted">Copyright &copy; By IT RSU Ananda Purwokerto 2024</div>
                    <div>
                        <a href="#" class="text-decoration-none text-muted">Privacy Policy</a>
                        &middot;
                        <a href="#" class="text-decoration-none text-muted">Terms &amp; Conditions</a>
                    </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(); // Mencegah refresh halaman
                $('#loadingIcon').show(); // Tampilkan ikon loading
                $('#tableContainer').hide(); // Sembunyikan tabel sebelum memulai pengambilan data

                $.ajax({
                    url: '<?= base_url("billing/tampilbillingnonbpjs") ?>',
                    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(); // Sembunyikan ikon loading setelah permintaan selesai

                        try {
                            const data = JSON.parse(tampil_nonbpjs); // Parsing JSON dari response

                            // Periksa status dan data
                            if (data && Array.isArray(data.tampil_nonbpjs)) {
                                const list = data.tampil_nonbpjs;

                                // Hancurkan DataTable sebelumnya jika sudah ada
                                if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                                    $('#datatablesSimple').DataTable().destroy();
                                }

                                if (list.length > 0) {
                                    let html = `
                                    <table id="datatablesSimple" class="table table-striped table-hover table-bordered w-100 text-nowrap">
                                        <thead class="thead-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>`;

                                    // Looping untuk menampilkan data
                                    list.forEach(item => {

                                        html += `<tr>
                                        <td>${item.kd_registrasi}</td>
                                        <td>${item.nm_pasien}</td>
                                        <td>${item.kelas}</td>
                                        <td>${item.tgl_registrasi}</td>
                                        <td class="text-end">${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">${item.total_tagihan}</td>
                                        <td>${item.nm_poliklinik}</td>
                                        <td>${item.nm_pembayaran}</td>
                                       
                                    </tr>`;
                                    });
                                    html += '</tbody></table>';
                                    $('#tableContainer').html(html).fadeIn(); 

                                    // PERBAIKAN DATATABLES: Wajib scrollX: true jika kolom > 6
                                    $('#datatablesSimple').DataTable({
                                        responsive: false, // Matikan responsive bawaan
                                        scrollX: true,     // Aktifkan scroll horizontal
                                        autoWidth: false,
                                        columnDefs: [{
                                            targets: 3, // Kolom Tgl Regist berada di index 3
                                            type: "date"
                                        }],
                                        order: [[3, "asc"]],
                                        language: {
                                            search: "Cari:",
                                            lengthMenu: "Tampilkan _MENU_ data",
                                            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data"
                                        }
                                    });

                                    // Panggil toggle kelas setelah tabel digambar
                                    toggleKelasColumn();

                                    // Tampilkan tombol download
                                    $('#downloadButton').show();
                                } else {
                                    $('#tableContainer').html('<p>Tidak ada data yang ditemukan.</p>').show();
                                    $('#downloadButton').hide(); // Sembunyikan tombol download jika tidak ada data
                                }
                            } else {
                                $('#tableContainer').html('<p>Tidak ada data yang ditemukan.</p>').show();
                                $('#downloadButton').hide(); // Sembunyikan tombol download jika tidak ada data
                            }

                            // Ubah URL tanpa menyegarkan halaman
                            history.replaceState(null, '', '<?= base_url("billing/tampilbillingnonbpjs") ?>');
                        } catch (e) {
                            console.error("Error parsing JSON: ", e);
                            $('#tableContainer').html('<p>Terjadi kesalahan saat memproses data.</p>').show();
                            $('#downloadButton').hide(); // Sembunyikan tombol download jika terjadi kesalahan
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#loadingIcon').hide(); // Sembunyikan ikon loading jika terjadi error
                        console.error("AJAX Error: ", error);
                    }
                });
            });

            function toggleKelasColumn() {
                let selectedValue = $('#kd_jenis_pasien').val();
                let table = $('#datatablesSimple').DataTable();

                if (selectedValue === "1" || selectedValue === "3") {
                    table.column(2).visible(false); // Sembunyikan kolom ke-3 (index 2, dimulai dari 0)
                } else {
                    table.column(2).visible(true); // Tampilkan kembali jika bukan Rawat Jalan
                }
            }

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

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

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

            // Event untuk tombol 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("billing/unduhbillingkeuangannonbpjs") ?>?TANGGAL_AWAL=${tanggalAwal}&TANGGAL_AKHIR=${tanggalAkhir}&KD_JENIS_PASIEN=${kdjenispasien}`;
            });
        });
    </script>


</html>