<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;
    }

    /* Memaksa Tabel agar menyesuaikan 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; 
    }

    /* Scroll Horizontal Halus untuk Tabel di HP */
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border: none;
    }

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

    /* Responsif Form */
    @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%; margin-left: 0 !important;}
        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>

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

<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 Coding ICD Rawat Jalan</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">Tampilkan Data Hasil ICD Rawat Jalan</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" value="<?php echo isset($tgl_awal) ? $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" value="<?php echo isset($tgl_akhir) ? $tgl_akhir : ''; ?>" required />
                            </div>

                            <div class="col-12 col-md-6 col-lg-8 mt-3 mt-lg-0">
                                <div class="btn-group-custom">
                                    <button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-search me-1"></i> Submit</button>
                                    <button type="button" id="downloadSummaryButton" class="btn btn-info px-3 shadow-sm text-white" style="display: none;"><i class="fas fa-file-excel me-1"></i> Unduh Persentase</button>
                                    <button type="button" id="downloadDetailButton" class="btn btn-success px-3 shadow-sm" style="display: none;"><i class="fas fa-file-excel me-1"></i> Unduh Detail ICD</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div id="summaryContainer" class="card border-0 shadow-sm mb-4 border-top border-info border-4" style="display: none;">
                <div class="card-header bg-white pt-3 pb-2 border-bottom-0">
                    <h6 class="text-center fw-bold m-0 text-info"><i class="fas fa-chart-pie me-1"></i> Persentase ICD Rawat Jalan</h6>
                </div>
                <div class="card-body p-0 p-md-3">
                    <div class="table-responsive w-100">
                        <table class="table table-bordered table-striped text-nowrap m-0 w-100 text-center">
                            <thead class="table-dark">
                                <tr>
                                    <th>Total Pasien</th>
                                    <th>Coding RM</th>
                                    <th>Persen Coding RM</th>
                                    <th>Coding Dokter</th>
                                    <th>Persen Coding Dokter</th>
                                    <th>Tidak Terisi</th>
                                    <th>Persen Tidak Terisi</th>
                                    <th>Total Prosentase</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td id="total_pasien" class="fw-bold fs-5 text-primary">-</td>
                                    <td id="coding_rm">-</td>
                                    <td id="persen_coding_rm">-</td>
                                    <td id="coding_dokter">-</td>
                                    <td id="persen_coding_dokter">-</td>
                                    <td id="tidak_terisi" class="text-danger">-</td>
                                    <td id="persen_tidak_terisi" class="text-danger">-</td>
                                    <td id="total_cd_prosentase" class="fw-bold text-success">-</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-5">
                <div class="card-body p-2 p-md-3">
                    <div id="result">
                        <div id="loadingIcon" style="display: none;" class="py-5 text-center">
                            <img src="<?php echo base_url('assets_/assets/img/loading-new.gif'); ?>" alt="Loading..." style="width: 50px;" />
                            <p class="mt-2 text-muted small fw-bold">Mengambil Data...</p>
                        </div>
                        
                        <div id="tableContainer" class="table-responsive w-100" style="display: none;">
                            <h6 class="fw-bold text-muted mb-3 border-bottom pb-2">Detail Pasien ICD</h6>
                            <table id="datatablesSimple" class="table table-striped table-bordered table-hover text-nowrap w-100">
                                <thead class="table-dark text-center">
                                    <tr>
                                        <th>Kode Registrasi</th>
                                        <th>Nama Pasien</th>
                                        <th>Pembayaran</th>
                                        <th>DX Primer</th>
                                        <th>DX Sekunder</th>
                                        <th>Petugas</th>
                                        <th>Dokter</th>
                                        <th class="text-start">Poliklinik</th>
                                        <th>Waktu</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    </tbody>
                            </table>
                        </div>
                    </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 class="d-none d-md-block">
                    <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();
            $('#loadingIcon').show();
            $('#summaryContainer, #tableContainer').hide();
            $('#downloadSummaryButton, #downloadDetailButton').hide();

            $.ajax({
                url: '<?= base_url("icdrawatjalan/datatampilicd") ?>',
                type: 'POST',
                data: $(this).serialize(),
                dataType: 'json',
                success: function(data) {
                    $('#loadingIcon').hide();

                    if (data.error) {
                        $('#tableContainer').html(`<div class="alert alert-danger text-center m-3 small"><i class="fas fa-exclamation-triangle me-1"></i> ${data.error}</div>`).show();
                        return;
                    }

                    // 1. Tampilkan Data Summary di Tabel
                    if (data.response && data.response.summary) {
                        const summary = data.response.summary;
                        $('#total_pasien').text(summary.total_pasien || '-');
                        $('#coding_rm').text(summary.coding_rm || '-');
                        $('#persen_coding_rm').text((summary.prosentase_coding_rekam_medis || '0') + '%');
                        $('#coding_dokter').text(summary.coding_dokter || '-');
                        $('#persen_coding_dokter').text((summary.prosentase_coding_dokter || '0') + '%');
                        $('#tidak_terisi').text(summary.tidak_terisi || '-');
                        $('#persen_tidak_terisi').text((summary.prosentase_tidak_terisi || '0') + '%');
                        $('#total_cd_prosentase').text(summary.total_prosentase || '-');
                        $('#summaryContainer').fadeIn();
                    }

                    // 2. Tampilkan Data Detail di Tabel
                    if (data.response && Array.isArray(data.response.detail)) {
                         if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                            $('#datatablesSimple').DataTable().destroy();
                        }

                        let tableBody = '';
                        const list = data.response.detail;

                        if (list.length > 0) {
                            list.forEach(item => {
                                tableBody += `
                                    <tr>
                                        <td class="fw-bold">${item.kd_registrasi || '-'}</td>
                                        <td class="fw-bold">${item.nm_pasien || '-'}</td>
                                        <td class="text-center">${item.nm_pembayaran || '-'}</td>
                                        <td class="text-center fw-bold text-primary">${item.dx_primer || '-'}</td>
                                        <td class="text-center">${item.dx_sekunder || '-'}</td>
                                        <td class="text-center">${item.petugas || '-'}</td>
                                        <td>${item.nm_dokter || '-'}</td>
                                        <td class="text-wrap" style="min-width: 200px;">${item.nm_poliklinik || '-'}</td>
                                        <td class="text-center">${item.waktu || '-'}</td>
                                    </tr>
                                `;
                            });
                            
                            $('#datatablesSimple tbody').html(tableBody);
                            $('#tableContainer').fadeIn();
                            
                            // Inisialisasi DataTables tanpa scrollX agar CSS mengatur overflow mobile
                            var table = $('#datatablesSimple').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>>'
                            });

                            setTimeout(function() {
                                table.columns.adjust().draw();
                            }, 10);
                            
                            $('#downloadSummaryButton, #downloadDetailButton').fadeIn();
                        } 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 detail yang ditemukan.</div>').show();
                        }
                    }
                },
                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-times-circle me-1"></i> Gagal terhubung ke server.</div>').show();
                }
            });
        });

        // Handler untuk tombol download summary
        $('#downloadSummaryButton').on('click', function() {
            const tanggalAwal = $('#tanggal_awal').val();
            const tanggalAkhir = $('#tanggal_akhir').val();
            window.location.href = `<?php echo base_url("icdrawatjalan/unduhdataicdpersentase"); ?>?TANGGAL_AWAL=${tanggalAwal}&TANGGAL_AKHIR=${tanggalAkhir}`;
        });

        // Handler untuk tombol download detail
        $('#downloadDetailButton').on('click', function() {
            const tanggalAwal = $('#tanggal_awal').val();
            const tanggalAkhir = $('#tanggal_akhir').val();
            window.location.href = `<?php echo base_url("icdrawatjalan/unduhdataicddetail"); ?>?TANGGAL_AWAL=${tanggalAwal}&TANGGAL_AKHIR=${tanggalAkhir}`;
        });
    });
</script>