<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 {
        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
       ======================================================== */
    .filter-wrapper {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
</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 Pasien SMF & POLI</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">Tampil Data SMF & Poli</li>
            </ol>
            
            <?php 
                $val_tgl_awal = isset($tgl_awal) ? $tgl_awal : (isset($tglawal) ? $tglawal : date('Y-m-d'));
                $val_tgl_akhir = isset($tgl_akhir) ? $tgl_akhir : (isset($tglakhir) ? $tglakhir : date('Y-m-d'));
            ?>

            <div class="card mb-4 border-0 shadow-sm">
                <div class="card-body filter-wrapper">
                    <form action="<?= base_url('datarawatjalan/datasmfpoli') ?>" method="POST" name="form-input-data">
                        <div class="row g-2 align-items-end">
                            <div class="col-12 col-md-4">
                                <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="<?= $val_tgl_awal ?>" required />
                            </div>
                            
                            <div class="col-12 col-md-4">
                                <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="<?= $val_tgl_akhir ?>" required />
                            </div>

                            <div class="col-12 col-md-4 mt-3 mt-md-0">
                                <button type="submit" class="btn btn-primary w-100 shadow-sm"><i class="fas fa-search me-1"></i> Filter Data</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mb-4 shadow-sm border-0 border-top border-info border-4">
                <div class="card-header bg-white pt-3 pb-2">
                    <h5 style="margin: 0; color: #17a2b8;" class="card-title fw-bold text-center fs-5">
                        <i class="fas fa-chart-bar me-2"></i> Monitoring Waktu Tunggu Poliklinik Per Jam
                    </h5>
                </div>
                <div class="card-body p-2 p-md-3">
                    <div style="position: relative; height: 350px; width: 100%; max-width: 100%;">
                        <canvas id="chartPoliPerJam"></canvas>
                    </div>
                </div>
            </div>
            
            <h4 class="mt-4 mb-3 border-bottom pb-2 fw-bold text-muted fs-5">Rekapitulasi Rawat Jalan</h4>
            
            <div class="row g-4 mb-5">
                
                <div class="col-12 col-lg-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-header bg-white pt-3 pb-2 border-bottom-0">
                            <h6 class="text-center fw-bold m-0 text-primary"><i class="fas fa-users me-1"></i> Data Pasien Poli Lama-Baru</h6>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive w-100">
                                <table class="table table-striped table-hover table-bordered text-nowrap m-0 w-100">
                                    <thead class="table-dark text-center">
                                        <tr>
                                            <th class="text-start ps-3">Nama Pendaftaran</th>
                                            <th>Dilayani</th>
                                            <th>Batal</th>
                                            <th>Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        if (isset($pasienpolilamabaru->response) && !empty($pasienpolilamabaru->response)) {
                                            foreach ($pasienpolilamabaru->response as $a) {
                                        ?>
                                                <tr>
                                                    <td class="ps-3 fw-bold"><?= $a->nm_pendaftaran ?></td>
                                                    <td class="text-center text-success fw-bold"><?= $a->dilayani ?></td>
                                                    <td class="text-center text-danger fw-bold"><?= $a->batal ?></td>
                                                    <td class="text-center fw-bold text-primary"><?= $a->total ?></td>
                                                </tr>
                                        <?php
                                            }
                                        } else {
                                        ?>
                                            <tr>
                                                <td colspan="4" class="text-center text-muted py-3 small"><i class="fas fa-info-circle me-1"></i> Data tidak ditemukan</td>
                                            </tr>
                                        <?php
                                        }
                                        ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-header bg-white pt-3 pb-2 border-bottom-0">
                            <h6 class="text-center fw-bold m-0 text-success"><i class="fas fa-clipboard-list me-1"></i> Total Pasien Rajal Hari Ini</h6>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive w-100">
                                <table class="table table-striped table-hover table-bordered text-nowrap m-0 w-100">
                                    <thead class="table-dark text-center">
                                        <tr>
                                            <th>Daftar</th>
                                            <th>Dilayani</th>
                                            <th>Batal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        if (isset($pasienrajaltotal->response) && !empty($pasienrajaltotal->response)) {
                                            foreach ($pasienrajaltotal->response as $a) {
                                        ?>
                                                <tr>
                                                    <td class="text-center fw-bold fs-5 text-primary"><?= $a->daftar ?></td>
                                                    <td class="text-center fw-bold fs-5 text-success"><?= $a->terlayani ?></td>
                                                    <td class="text-center fw-bold fs-5 text-danger"><?= $a->batal ?></td>
                                                </tr>
                                        <?php
                                            }
                                        } else {
                                        ?>
                                            <tr>
                                                <td colspan="3" class="text-center text-muted py-3 small"><i class="fas fa-info-circle me-1"></i> Data tidak ditemukan</td>
                                            </tr>
                                        <?php
                                        }
                                        ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <div class="card border-0 shadow-sm mb-5 border-top border-warning border-4">
                <div class="card-header bg-white pt-3 pb-2 border-bottom-0">
                    <h6 class="text-center fw-bold m-0"><i class="fas fa-stethoscope me-1 text-warning"></i> Rincian Pasien Rawat Jalan Per Poli</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive w-100">
                        <table class="table table-striped table-hover table-bordered text-nowrap m-0 w-100">
                            <thead class="table-dark text-center">
                                <tr>
                                    <th>Tanggal Regist</th>
                                    <th class="text-start ps-3">Nama Poli</th>
                                    <th>Daftar</th>
                                    <th>Terlayani</th>
                                    <th>Batal</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                if (isset($tampilpasienrajal->response) && !empty($tampilpasienrajal->response)) {
                                    foreach ($tampilpasienrajal->response as $a) {
                                ?>
                                        <tr>
                                            <td class="text-center"><?= $a->tgl_registrasi ?></td>
                                            <td class="text-wrap ps-3 fw-bold" style="min-width: 200px;"><?= $a->nm_poliklinik ?></td>
                                            <td class="text-center fw-bold text-primary"><?= $a->daftar ?></td>
                                            <td class="text-center fw-bold text-success"><?= $a->terlayani ?></td>
                                            <td class="text-center fw-bold text-danger"><?= $a->batal ?></td>
                                        </tr>
                                <?php
                                    }
                                } else {
                                ?>
                                    <tr>
                                        <td colspan="5" class="text-center text-muted py-3 small"><i class="fas fa-info-circle me-1"></i> Data tidak ditemukan</td>
                                    </tr>
                                <?php
                                }
                                ?>
                            </tbody>
                        </table>
                    </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.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<script>
    // KODE LOGIC CHART.JS SAMA PERSIS DENGAN SEBELUMNYA
    if(typeof ChartDataLabels !== 'undefined') {
        Chart.register(ChartDataLabels);
    }

    const labelJamPoli = [];
    const dataPasienPoli = [];
    const dataRataDokter = [];
    const dataRataNs = [];

    // Menarik data JSON dari PHP ke JavaScript
    <?php if(isset($ratapoliperjam) && isset($ratapoliperjam->response) && is_array($ratapoliperjam->response)): ?>
        <?php foreach($ratapoliperjam->response as $a): ?>
            labelJamPoli.push(<?= json_encode($a->bucket_jam ?? '') ?>);
            dataPasienPoli.push(<?= $a->jumlah_pasien ?? 0 ?>);
            dataRataDokter.push(<?= $a->rerata_dilayani_dokter ?? 0 ?>);
            dataRataNs.push(<?= $a->rerata_tunggu_ns ?? 0 ?>);
        <?php endforeach; ?>
    <?php endif; ?>

    if(document.getElementById('chartPoliPerJam') && labelJamPoli.length > 0){
        new Chart(document.getElementById('chartPoliPerJam'), {
            type: 'bar',
            data: {
                labels: labelJamPoli,
                datasets: [
                    { 
                        label: 'Jumlah Pasien', 
                        data: dataPasienPoli, 
                        backgroundColor: '#17a2b8',
                        borderRadius: 4,
                        rataDokter: dataRataDokter, 
                        rataNs: dataRataNs          
                    }
                ]
            },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                plugins: { 
                    legend: { display: false }, 
                    
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let jml = context.parsed.y;
                                let rDok = context.dataset.rataDokter[context.dataIndex] || 0;
                                let rNs = context.dataset.rataNs[context.dataIndex] || 0;
                                return [
                                    'Jumlah Pasien: ' + jml + ' Orang',
                                    'Rerata Dilayani Dokter: ' + parseFloat(rDok).toFixed(1) + ' Menit',
                                    'Rerata Tunggu NS: ' + parseFloat(rNs).toFixed(1) + ' Menit'
                                ];
                            }
                        }
                    },
                    
                    datalabels: { 
                        display: 'auto', 
                        color: '#444', 
                        anchor: 'end', 
                        align: 'top', 
                        textAlign: 'center',
                        offset: 4,
                        font: { weight: 'bold', size: 9 },
                        formatter: (value, ctx) => { 
                            if(value > 0){
                                let rDok = ctx.dataset.rataDokter[ctx.dataIndex] || 0;
                                let rNs = ctx.dataset.rataNs[ctx.dataIndex] || 0;
                                return value + ' Px\nDr: ' + parseFloat(rDok).toFixed(1) + 'm\nNS: ' + parseFloat(rNs).toFixed(1) + 'm';
                            }
                            return '';
                        } 
                    } 
                },
                scales: {
                    x: { grid: { display: false } },
                    y: { 
                        beginAtZero: true, 
                        grace: '30%', 
                        ticks: { precision: 0 } 
                    }
                }
            }
        });
    }
</script>