<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Indikator Pelayanan RS</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/dataTables.bootstrap5.min.css" rel="stylesheet">
    
    <style>
        /* CSS Tambahan Kecil */
        .btn-container {
            margin-top: 10px;
        }
        #loadingIcon {
            margin: 20px 0;
        }
    </style>
</head>

<body class="d-flex flex-column min-vh-100">

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h2 class="mt-4" id="judulPasien">Indikator Pelayanan Rawat Inap (BOR, LOS, TOI)</h2>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                    <li class="breadcrumb-item active">Laporan Indikator Pelayanan</li>
                </ol>

                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-filter me-1"></i>
                        Filter Periode Data
                    </div>
                    <div class="card-body">
                        <form id="filterForm">
                            <div class="row align-items-end">
                                <div class="col-md-3 mb-3">
                                    <label for="tanggal_awal" class="form-label">Tanggal Awal</label>
                                    <input type="date" id="tanggal_awal" name="tanggal_awal" class="form-control" value="<?= $tgl_awal ?>" required />
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="tanggal_akhir" class="form-label">Tanggal Akhir</label>
                                    <input type="date" id="tanggal_akhir" name="tanggal_akhir" class="form-control" value="<?= $tgl_akhir ?>" required />
                                </div>
                                <div class="col-md-6 mb-3">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-search"></i> Tampilkan Data
                                    </button>
                                    <button type="button" id="downloadButton" class="btn btn-success ms-2" style="display: none;">
                                        <i class="fas fa-file-excel"></i> Download Excel
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div id="result">
                    <div id="loadingIcon" style="display: none; text-align: center;">
                        <img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." width="50" />
                        <p>Memuat data...</p>
                    </div>
                    
                    <div class="card mb-4" id="tableCard" style="display: none;">
                        <div class="card-body">
                            <div class="table-responsive" id="tableContainer">
                                </div>
                        </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; IT RSU Ananda Purwokerto 2024</div>
                    <div>
                        <a href="#">Privacy Policy</a> &middot; <a href="#">Terms &amp; Conditions</a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function() {
            // Setup Format Rupiah atau Angka desimal jika perlu
            const formatAngka = (num) => {
                return parseFloat(num).toFixed(2);
            };

            $('#filterForm').on('submit', function(event) {
                event.preventDefault();
                $('#loadingIcon').show();
                $('#tableCard').hide();
                $('#downloadButton').hide();

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

                        try {
                            // Cek apakah response sudah object atau masih string
                            const data = typeof response === 'string' ? JSON.parse(response) : response;

                            if (data && Array.isArray(data.response) && data.response.length > 0) {
                                const list = data.response;

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

                                // 1. BUAT HEADER TABEL SESUAI DATA SIMRS (BOR, LOS, TOI)
                                let html = `
                                <table id="datatablesSimple" class="table table-striped table-bordered table-hover" style="width:100%">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Nama Ruang</th>
                                            <th>Jml TT</th>
                                            <th>Pasien Keluar</th>
                                            <th>Hari Perawatan</th>
                                            <th>Mati Total</th>
                                            <th>BOR (%)</th>
                                            <th>LOS (Hari)</th>
                                            <th>BTO</th>
                                            <th>TOI (Hari)</th>
                                            <th>NDR (%)</th>
                                            <th>GDR (%)</th>
                                        </tr>
                                    </thead>
                                    <tbody>`;

                                // 2. ISI BODY TABEL
                                list.forEach(item => {
                                    // Badge warna untuk status (Opsional, biar lebih bagus)
                                    let badgeBor = item.status_bor === 'IDEAL' ? 'success' : 'warning';
                                    
                                    html += `<tr>
                                        <td class="fw-bold">${item.nama_ruang}</td>
                                        <td class="text-center">${item.jumlah_tt}</td>
                                        <td class="text-center">${item.pasien_keluar}</td>
                                        <td class="text-center">${item.hari_perawatan}</td>
                                        <td class="text-center">${item.mati_total}</td>
                                        
                                        <td class="text-end">
                                            ${item.bor_persen}% <br>
                                            <span class="badge bg-${badgeBor}" style="font-size:0.6rem">${item.status_bor}</span>
                                        </td>
                                        
                                        <td class="text-end">
                                            ${item.los_hari} <br>
                                            <span class="badge bg-secondary" style="font-size:0.6rem">${item.status_los}</span>
                                        </td>
                                        
                                        <td class="text-end">${item.bto}</td>
                                        
                                        <td class="text-end">${item.toi_hari}</td>
                                        
                                        <td class="text-end">${item.ndr_persen}</td>
                                        
                                        <td class="text-end">${item.gdr_persen}</td>
                                    </tr>`;
                                });

                                html += '</tbody></table>';

                                // Render ke HTML
                                $('#tableContainer').html(html);
                                $('#tableCard').show();
                                $('#downloadButton').show();

                                // Inisialisasi DataTable
                                $('#datatablesSimple').DataTable({
                                    responsive: true,
                                    "language": {
                                        "url": "//cdn.datatables.net/plug-ins/1.13.4/i18n/id.json"
                                    }
                                });

                            } else {
                                Swal.fire('Info', 'Tidak ada data ditemukan pada periode tersebut.', 'info');
                                $('#tableContainer').html('<div class="alert alert-warning">Data tidak ditemukan.</div>');
                                $('#tableCard').show();
                            }
                        } catch (e) {
                            console.error(e);
                            Swal.fire('Error', 'Gagal memproses data server.', 'error');
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#loadingIcon').hide();
                        Swal.fire('Error', 'Terjadi kesalahan koneksi.', 'error');
                        console.error(error);
                    }
                });
            });

            // Tombol Download
            $('#downloadButton').on('click', function() {
                const tglAwal = $('#tanggal_awal').val();
                const tglAkhir = $('#tanggal_akhir').val();
                if(tglAwal && tglAkhir){
                    window.location.href = `<?= base_url("IPRSdata/unduhdata") ?>?TANGGAL_AWAL=${tglAwal}&TANGGAL_AKHIR=${tglAkhir}`;
                }
            });
        });
    </script>
</body>
</html>