<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 TAB / PILLS (Mengikuti Style Farmasi Stok Anda)
       ======================================================== */
    .nav-pills .nav-link {
        border-radius: 50px;
        padding: 8px 16px;
        font-weight: 500;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #e3e6f0;
        color: #5a5c69;
        background-color: #fff;
        white-space: nowrap; 
        cursor: pointer;
    }
    
    .nav-pills .nav-link.active, .nav-pills .nav-link:hover {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }

    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    .nav-pills::-webkit-scrollbar { height: 4px; }
    .nav-pills::-webkit-scrollbar-track { background: #f1f1f1; }
    .nav-pills::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

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

    @media (max-width: 768px) {
        .btn-group-custom { display: flex; flex-direction: column; gap: 10px; width: 100%; }
        .btn-group-custom button, .btn-group-custom a { 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: center; }
    }
</style>

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

<div id="layoutSidenav_content">
    <main>
        <div class="container-fluid px-3 px-md-4 overflow-hidden">
            <h1 class="mt-4 fs-3">Data Pasien Baru</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">Pasien Baru Online</li>
            </ol>

            <ul class="nav nav-pills mb-4" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active shadow-sm" id="pills-pxbaru-tab" data-bs-toggle="pill" href="#pills-pxbaru" role="tab">
                        <i class="fas fa-user-plus me-2"></i>Pasien Baru Online All
                    </a>
                </li>
            </ul>

            <div class="tab-content" id="pills-tabContent">
                
                <div class="tab-pane fade show active" id="pills-pxbaru" role="tabpanel">
                    <h5 class="mb-3 border-bottom pb-2 text-muted fw-bold">Daftar Pasien Baru (Pendaftaran Online)</h5>
                    
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-body filter-wrapper">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                <div class="text-muted small">
                                    Menampilkan rekapitulasi keseluruhan data pasien baru yang mendaftar secara online.
                                </div>
                                <div class="btn-group-custom">
                                    <button type="button" id="btnTampilkanData" class="btn btn-primary px-3 shadow-sm">
                                        <i class="fas fa-sync-alt me-1"></i> Tampilkan Data
                                    </button>
                                    <button type="button" id="btnDownloadExcel" class="btn btn-success px-3 shadow-sm" style="display: none;">
                                        <i class="fas fa-file-excel me-1"></i> Download Excel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm mb-5">
                        <div class="card-body p-2 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="mt-2 text-muted small fw-bold">Memuat antrean data pasien...</p>
                            </div>
                            <div id="tableContainer" style="display: none;"></div>
                        </div>
                    </div>
                </div>

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

    <footer class="py-4 bg-light mt-auto border-top">
        <div class="container-fluid px-4">
            <div class="text-muted small">Copyright &copy; IT RSU Ananda Purwokerto 2024</div>
        </div>
    </footer>
</div>

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {
        
        // JAVASCRIPT AJAX UNTUK MENAMPILKAN DATA DARI ROUTE: pxbaru/viewdata
        $('#btnTampilkanData').on('click', function(e) {
            e.preventDefault();
            $('#loadingIcon').show();
            $('#tableContainer').hide();
            $('#btnDownloadExcel').hide();

            $.ajax({
                url: '<?= base_url("pxbaru/viewdata") ?>',
                type: 'GET',
                success: function(response) {
                    $('#loadingIcon').hide();
                    try {
                        const data = JSON.parse(response);
                        
                        if (data && Array.isArray(data.response) && data.response.length > 0) {
                            
                            if ($.fn.DataTable.isDataTable('#dtPasienBaru')) {
                                $('#dtPasienBaru').DataTable().destroy();
                            }

                            // PERBAIKAN: Menyesuaikan <th> Header Tabel dengan Struktur Parameter JSON Baru
                            let html = `
                            <div class="table-responsive w-100">
                                <table id="dtPasienBaru" class="table table-striped table-hover table-bordered text-nowrap w-100">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>Kode RM</th>
                                            <th>Nama Pasien</th>
                                            <th>No. KTP (NIK)</th>
                                            <th>No. HP</th>
                                            <th>Jenis Kelamin</th>
                                            <th>Tempat Lahir</th>
                                            <th>Tanggal Lahir</th>
                                            <th>Gol. Darah</th>
                                            <th>Disabilitas</th>
                                            <th>Alamat</th>
                                            <th>Kd Prov</th>
                                            <th>Kd Kota</th>
                                            <th>Kd Kec</th>
                                            <th>Kd Desa</th>
                                            <th>Nama PJ</th>
                                            <th>HP PJ</th>
                                            <th>Alamat PJ</th>
                                        </tr>
                                    </thead>
                                    <tbody>`;

                            // PERBAIKAN: Mapping data item sesuai dengan properti JSON Baru Anda
                            data.response.forEach(item => {
                                html += `<tr>
                                    <td class="fw-bold text-primary">${item.kd_rekam_medis || '-'}</td>
                                    <td class="fw-bold">${item.nm_pasien || '-'}</td>
                                    <td>${item.no_ktp || '-'}</td>
                                    <td>${item.hp || '-'}</td>
                                    <td class="text-center">${item.jenis_kelamin || '-'}</td>
                                    <td>${item.tempat_lahir || '-'}</td>
                                    <td>${item.tgl_lahir || '-'}</td>
                                    <td class="text-center">${item.kd_gol_darah || '-'}</td>
                                    <td>${item.is_disabilitas === '1' || item.is_disabilitas === 1 ? (item.disabilitas || 'Ya') : 'Tidak'}</td>
                                    <td class="text-wrap" style="min-width:200px;">${item.alamat || '-'}</td>
                                    <td>${item.kd_prov || '-'}</td>
                                    <td>${item.kd_kota || '-'}</td>
                                    <td>${item.kd_kec || '-'}</td>
                                    <td>${item.kd_desa || '-'}</td>
                                    <td>${item.nm_pj || '-'}</td>
                                    <td>${item.hp_pj || '-'}</td>
                                    <td class="text-wrap" style="min-width:180px;">${item.alamat_pj || '-'}</td>
                                </tr>`;
                            });
                            
                            html += '</tbody></table></div>';
                            
                            $('#tableContainer').html(html).show();
                            
                            // Inisialisasi DataTables
                            $('#dtPasienBaru').DataTable({
                                "order": [[1, "asc"]],
                                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>>',
                                language: { 
                                    search: "Cari Pasien:", 
                                    lengthMenu: "Tampil _MENU_" 
                                }
                            });

                            $('#btnDownloadExcel').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 antrean data pasien baru.</div>').show();
                        }
                    } catch (err) {
                        console.error("Error parsing JSON: ", err);
                        $('#tableContainer').html('<div class="alert alert-danger text-center m-3 small"><i class="fas fa-times-circle me-1"></i> Gagal memproses format data JSON dari server.</div>').show();
                    }
                },
                error: function() {
                    $('#loadingIcon').hide();
                    $('#tableContainer').html('<div class="alert alert-danger text-center m-3 small"><i class="fas fa-exclamation-triangle me-1"></i> Koneksi ke server terputus. Gagal memuat data.</div>').show();
                }
            });
        });

        // JAVASCRIPT EVENT UNTUK DOWNLOAD EXCEL
        $('#btnDownloadExcel').on('click', function() {
            window.location.href = '<?= base_url("pxbaru/downloaddata") ?>';
        });

    });
</script>