<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard SINARAN</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body { background-color: #f4f6f9; }
        .card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
            border-radius: 0.5rem;
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            font-weight: 600;
            color: #333;
            border-top-left-radius: 0.5rem !important;
            border-top-right-radius: 0.5rem !important;
        }
        .section-title {
            color: #2c3e50;
            font-weight: bold;
            margin-top: 30px;
            margin-bottom: 15px;
            border-left: 5px solid #198754; 
            padding-left: 10px;
        }
        .kpi-card {
            color: white;
            border-radius: 0.5rem;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .kpi-card:hover { transform: translateY(-5px); }
        .kpi-card .inner-text h3 { font-size: 2rem; margin: 0; font-weight: bold; }
        .kpi-card .inner-text p { margin: 0; font-size: 1rem; opacity: 0.9; }
        .kpi-card i { font-size: 2.5rem; opacity: 0.3; }
        
        .bg-primary-grad { background: linear-gradient(45deg, #0d6efd, #4facfe); }
        .bg-success-grad { background: linear-gradient(45deg, #198754, #20c997); }
        .bg-danger-grad { background: linear-gradient(45deg, #dc3545, #f8d7da); color: #842029 !important;}
        .bg-danger-grad.text-white { color: #fff !important; }
        
        /* Container Chart Wajib memiliki tinggi relatif */
        .chart-container {
            position: relative;
            margin: auto;
            height: 300px;
            width: 100%;
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.5.1.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>
</head>
<body>

<div id="layoutSidenav_content">
    <main>
        <div class="container-fluid px-4">
            <h1 class="mt-4" id="judulPasien">Dashboard SINARAN</h1>
            <ol class="breadcrumb mb-4">
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Dashboard</a></li>
                <li class="breadcrumb-item active">Tampil Info Dashboard SINARAN</li>
            </ol>

            <div class="card mb-4">
                <div class="card-body">
                    <form action="<?= base_url('keuangan/dashboardlayanan') ?>" method="POST" name="form-input-data">
                        <div class="row align-items-end">
                            <div class="col-md-3">
                                <label for="tanggal_awal" class="form-label text-muted small">Tanggal Awal</label>
                                <input type="date" id="tanggal_awal" name="tanggal_awal" class="form-control" value="<?= $tglawal ?>" required />
                            </div>
                            <div class="col-md-5">
                                <label for="tanggal_akhir" class="form-label text-muted small">Tanggal Akhir</label>
                                <div class="input-group">
                                    <input type="date" id="tanggal_akhir" name="tanggal_akhir" class="form-control" value="<?= $tglakhir ?>" required />
                                    <button type="submit" class="btn btn-primary px-4"><i class="fas fa-search me-1"></i> Filter</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <h3 class="section-title">Rawat Jalan</h3>

            <?php 
                $totDaftarRJ = 0; $totLayaniRJ = 0; $totBatalRJ = 0;
                if (isset($pasienrajaltotal->response)) {
                    foreach ($pasienrajaltotal->response as $a) {
                        $totDaftarRJ += $a->daftar;
                        $totLayaniRJ += $a->terlayani;
                        $totBatalRJ += $a->batal;
                    }
                }
            ?>
            <div class="row mb-3">
                <div class="col-xl-4 col-md-6 mb-3">
                    <div class="kpi-card bg-primary-grad">
                        <div class="inner-text">
                            <p>Total Pendaftar</p>
                            <h3><?= $totDaftarRJ ?></h3>
                        </div>
                        <i class="fas fa-users"></i>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 mb-3">
                    <div class="kpi-card bg-success-grad">
                        <div class="inner-text">
                            <p>Telah Dilayani</p>
                            <h3><?= $totLayaniRJ ?></h3>
                        </div>
                        <i class="fas fa-user-check"></i>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 mb-3">
                    <div class="kpi-card bg-danger-grad text-white">
                        <div class="inner-text">
                            <p>Batal</p>
                            <h3><?= $totBatalRJ ?></h3>
                        </div>
                        <i class="fas fa-user-times"></i>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header"><i class="fas fa-chart-pie me-1"></i> Jenis Pendaftaran</div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="chartJenisDaftar"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header"><i class="fas fa-chart-bar me-1"></i> Data Pasien Lama & Data Pasien Baru</div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="chartLamaBaru"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><i class="fas fa-table me-1"></i> Detail Pasien Per Poliklinik</div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tableRajal" class="table table-striped table-bordered w-100">
                            <thead class="table-light text-center">
                                <tr>
                                    <th>Nama Poliklinik</th>
                                    <th>Daftar</th>
                                    <th>Terlayani</th>
                                    <th>Batal</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (isset($pasienrajal->response)) {
                                    foreach ($pasienrajal->response as $a) { ?>
                                        <tr>
                                            <td><?= $a->nm_ruang ?></td>
                                            <td class="text-center"><?= $a->daftar ?></td>
                                            <td class="text-center text-success fw-bold"><?= $a->terlayani ?></td>
                                            <td class="text-center text-danger"><?= $a->batal ?></td>
                                        </tr>
                                <?php } } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <h3 class="section-title">Rawat Inap</h3>

            <?php 
                $totRanap = 0;
                if (isset($pasienranaptotal->response)) {
                    foreach ($pasienranaptotal->response as $a) {
                        $totRanap += $a->jumlah;
                    }
                }
            ?>
            <div class="row mb-3">
                <div class="col-xl-4 col-md-6 mb-3">
                    <div class="kpi-card bg-primary-grad">
                        <div class="inner-text">
                            <p>Total Pasien Rawat Inap</p>
                            <h3><?= $totRanap ?></h3>
                        </div>
                        <i class="fas fa-procedures"></i>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header"><i class="fas fa-chart-pie me-1"></i> Pasien Berdasarkan Kelas</div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="chartKelasRanap"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header"><i class="fas fa-chart-doughnut me-1"></i> Rekap Penjamin Inap</div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="chartPenjaminRanap"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><i class="fas fa-bed me-1"></i> Ketersediaan Tempat Tidur (Bed)</div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tableBed" class="table table-striped table-bordered w-100">
                            <thead class="table-light text-center">
                                <tr>
                                    <th>Nama Ruang</th>
                                    <th>Kelas</th>
                                    <th>Jml Bed</th>
                                    <th>Tersedia</th>
                                    <th>Terisi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if (isset($ketersediantt->response)) {
                                    foreach ($ketersediantt->response as $a) { ?>
                                        <tr class="text-center">
                                            <td class="text-start"><?= $a->ruang ?></td>
                                            <td><span class="badge bg-secondary"><?= $a->nm_kelas ?></span></td>
                                            <td><?= $a->jumlah_bed ?></td>
                                            <td class="text-success fw-bold"><?= $a->tersedia ?></td>
                                            <td class="text-danger"><?= $a->terisi ?></td>
                                        </tr>
                                <?php } } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <h3 class="section-title">Instalasi Gawat Darurat (IGD)</h3>

            <?php 
                $totLayaniIGD = 0; $totBatalIGD = 0; $totSemuaIGD = 0;
                if (isset($pasienigdtotal->response)) {
                    foreach ($pasienigdtotal->response as $a) {
                        $totLayaniIGD += $a->dilayani;
                        $totBatalIGD += $a->batal;
                        $totSemuaIGD += $a->total_igd;
                    }
                }
            ?>
            <div class="row mb-3">
                <div class="col-xl-4 col-md-6 mb-3">
                    <div class="kpi-card bg-primary-grad">
                        <div class="inner-text">
                            <p>Total Pasien IGD</p>
                            <h3><?= $totSemuaIGD ?></h3>
                        </div>
                        <i class="fas fa-ambulance"></i>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 mb-3">
                    <div class="kpi-card bg-success-grad">
                        <div class="inner-text">
                            <p>Telah Dilayani</p>
                            <h3><?= $totLayaniIGD ?></h3>
                        </div>
                        <i class="fas fa-stethoscope"></i>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 mb-3">
                    <div class="kpi-card bg-danger-grad text-white">
                        <div class="inner-text">
                            <p>Batal</p>
                            <h3><?= $totBatalIGD ?></h3>
                        </div>
                        <i class="fas fa-times-circle"></i>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header"><i class="fas fa-chart-bar me-1"></i> Data Jenis Pasien IGD</div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="chartJenisIGD"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header"><i class="fas fa-chart-pie me-1"></i> Pasien Lama & Pasien Baru (IGD)</div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="chartLamaBaruIGD"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </main>
</div>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
    $(document).ready(function() {
        $('#tableRajal').DataTable({ pageLength: 5, lengthMenu: [5, 10, 20, 50] });
        $('#tableBed').DataTable({ pageLength: 5, lengthMenu: [5, 10, 20, 50] });
    });
</script>

<script>
    // Registrasi Plugin DataLabels agar angka muncul
    Chart.register(ChartDataLabels);

    const colorColors = ['#0d6efd', '#198754', '#ffc107', '#dc3545', '#0dcaf0', '#6f42c1', '#d63384'];

    // --- Konfigurasi Default agar label terlihat jelas ---
    const datalabelOption = {
        color: '#fff', // Warna teks putih
        font: {
            weight: 'bold',
            size: 14
        },
        formatter: (value, ctx) => {
            // Jika nilainya 0 atau null, jangan tampilkan
            if(value === 0 || value === null) return '';
            return value;
        }
    };

    // --------------------------------------------------
    // 1. Chart Jenis Pendaftaran (REVISI: Stacked Bar Chart)
    // --------------------------------------------------
    const labelJenisDaftar = [];
    const dataJenisDilayani = [];
    const dataJenisBatal = [];

    // Mengambil data terpisah untuk Dilayani dan Batal
    <?php if(isset($daftaronlinerekap->response)): foreach($daftaronlinerekap->response as $a): ?>
        labelJenisDaftar.push(<?= json_encode($a->status) ?>);
        dataJenisDilayani.push(<?= $a->dilayani ?>);
        dataJenisBatal.push(<?= $a->batal ?>);
    <?php endforeach; endif; ?>

    if(document.getElementById('chartJenisDaftar')){
        new Chart(document.getElementById('chartJenisDaftar'), {
            type: 'bar', // Ubah dari 'pie' menjadi 'bar'
            data: {
                labels: labelJenisDaftar,
                datasets: [
                    {
                        label: 'Dilayani',
                        data: dataJenisDilayani,
                        backgroundColor: '#198754', // Warna Hijau
                        borderRadius: 4,
                        borderWidth: 1,
                        borderColor: '#fff'
                    },
                    {
                        label: 'Batal',
                        data: dataJenisBatal,
                        backgroundColor: '#dc3545', // Warna Merah
                        borderRadius: 4,
                        borderWidth: 1,
                        borderColor: '#fff'
                    }
                ]
            },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                scales: {
                    x: {
                        stacked: true, // Mengaktifkan mode tumpuk (stacked)
                        grid: { display: false }
                    },
                    y: {
                        stacked: true, // Mengaktifkan mode tumpuk (stacked)
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    datalabels: {
                        color: '#fff',
                        font: {
                            weight: 'bold'
                        },
                        formatter: (value, ctx) => {
                            // Sembunyikan angka 0 agar grafik terlihat bersih
                            if(value === 0 || value === null || value === '0') return '';
                            return value;
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                }
            }
        });
    }

    // --------------------------------------------------
    // 2. Chart Rajal Lama vs Baru - Bar 
    // --------------------------------------------------
    const labelLamaBaru = [];
    const dataDilayaniLB = [];
    const dataBatalLB = [];
    <?php if(isset($pasienpolilamabaru->response)): foreach($pasienpolilamabaru->response as $a): ?>
        labelLamaBaru.push(<?= json_encode($a->nm_pendaftaran) ?>);
        dataDilayaniLB.push(<?= $a->dilayani ?>);
        dataBatalLB.push(<?= $a->batal ?>);
    <?php endforeach; endif; ?>

    if(document.getElementById('chartLamaBaru')){
        new Chart(document.getElementById('chartLamaBaru'), {
            type: 'bar',
            data: {
                labels: labelLamaBaru,
                datasets: [
                    { 
                        label: 'Dilayani', 
                        data: dataDilayaniLB, 
                        backgroundColor: '#198754' 
                    },
                    { 
                        label: 'Batal', 
                        data: dataBatalLB, 
                        backgroundColor: '#dc3545' 
                    }
                ]
            },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                layout: {
                    padding: {
                        top: 25 // Memberi ruang ekstra di atas agar angka tidak terpotong
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    datalabels: {
                        color: '#444', // Ubah warna teks jadi gelap agar terbaca di background putih
                        anchor: 'end', // Jangkar di ujung batang
                        align: 'top',  // Letakkan teks DI ATAS batang (bukan di dalam)
                        font: { 
                            weight: 'bold',
                            size: 12
                        },
                        formatter: (value) => {
                            return value > 0 ? value : ''; // Sembunyikan jika 0
                        }
                    }
                }
            }
        });
    }

    // 3. Chart Kelas Rawat Inap - Donut
    const labelKelas = [];
    const dataKelas = [];
    <?php if(isset($pasienranap->response)): foreach($pasienranap->response as $a): ?>
        labelKelas.push(<?= json_encode($a->nm_kelas) ?>);
        dataKelas.push(<?= $a->qty ?>);
    <?php endforeach; endif; ?>

    if(document.getElementById('chartKelasRanap')){
        new Chart(document.getElementById('chartKelasRanap'), {
            type: 'doughnut',
            data: { labels: labelKelas, datasets: [{ data: dataKelas, backgroundColor: colorColors }] },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                plugins: {
                    datalabels: datalabelOption
                }
            }
        });
    }

    // 4. Chart Penjamin Inap - Pie
    const labelPenjamin = [];
    const dataPenjamin = [];
    <?php if(isset($inappenjamin->response)): foreach($inappenjamin->response as $a): ?>
        labelPenjamin.push(<?= json_encode($a->penjamin) ?>);
        dataPenjamin.push(<?= $a->qty ?>);
    <?php endforeach; endif; ?>

    if(document.getElementById('chartPenjaminRanap')){
        new Chart(document.getElementById('chartPenjaminRanap'), {
            type: 'pie',
            data: { labels: labelPenjamin, datasets: [{ data: dataPenjamin, backgroundColor: colorColors }] },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                plugins: {
                    datalabels: datalabelOption
                }
            }
        });
    }

    // 5. Chart Jenis Pasien IGD - Bar
    const labelJenisIGD = [];
    const dataIGDDilayani = [];
    <?php if(isset($pasienigd->response)): foreach($pasienigd->response as $a): ?>
        labelJenisIGD.push(<?= json_encode($a->nm_jenis_pasien) ?>);
        dataIGDDilayani.push(<?= $a->total ?>);
    <?php endforeach; endif; ?>

    if(document.getElementById('chartJenisIGD')){
        new Chart(document.getElementById('chartJenisIGD'), {
            type: 'bar',
            data: {
                labels: labelJenisIGD,
                datasets: [{ label: 'Total Pasien', data: dataIGDDilayani, backgroundColor: '#0d6efd' }]
            },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                plugins: {
                    datalabels: {
                        color: '#fff',
                        anchor: 'end',
                        align: 'start',
                        font: { weight: 'bold' }
                    }
                }
            }
        });
    }

    // 6. Chart Lama vs Baru IGD - Doughnut
    const labelLamaBaruIGD = [];
    const dataLamaBaruIGD = [];
    <?php if(isset($pasienigdlamabaru->response)): foreach($pasienigdlamabaru->response as $a): ?>
        labelLamaBaruIGD.push(<?= json_encode($a->nm_pendaftaran) ?>);
        dataLamaBaruIGD.push(<?= $a->total ?>);
    <?php endforeach; endif; ?>

    if(document.getElementById('chartLamaBaruIGD')){
        new Chart(document.getElementById('chartLamaBaruIGD'), {
            type: 'doughnut',
            data: {
                labels: labelLamaBaruIGD,
                datasets: [{ data: dataLamaBaruIGD, backgroundColor: ['#ffc107', '#0dcaf0'] }]
            },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                plugins: {
                    datalabels: datalabelOption
                }
            }
        });
    }
</script>

</body>
</html>