<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Pendaftaran</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(1000px, 3fr));
            gap: 20px;
            padding: 20px;
        }
        .grid-item {
            background-color: #f2f2f2;
            padding: 20px;
            border: 1px solid #ccc;
            text-align: center;
        }
         .grid-item h1 {
            margin: 0;
            font-size: 2em;
            color: blue;
        }
        .grid-item h2 {
            margin: 0;
            font-size: 1.2em;
        }
        .grid-item h3 {
            margin: 0;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
<div class="col-md-24">
                    <div class="card">
                        <center>
                            <img src="<?php echo base_url(); ?>assets_/imgs/logo.jpg" height="70px" width="70px" style="margin-right:800px ; margin-bottom:-75px ; margin-top:10px">

                            <h1><strong>INFORMASI KUOTA POLIKLINIK</strong></h1>
                            <h2 style=margin-bottom:20px><strong>RUMAH SAKIT UMUM ANANDA PURWOKERTO</strong></h2>
                        </center>
                         <div>
                    <div><h1 id="p2" class="justify-content-end" style='font-size: 1.5vw;'></h1></div>
                    <div><h1 id="p1" class="justify-content-end" style='font-size: 1.5vw;'></h1></div>                  
                </div>
<div class="grid-container" id="apiResponseGrid">
    <!-- Data akan dimuat di sini -->
</div>

<script>
  document.body.style.zoom = "75%";
document.addEventListener('DOMContentLoaded', function() {
    function fetchData() {
        const apiUrl = '<?= base_url("Jadwal/jadwal") ?>';  // URL API

        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                console.log('API Data:', data);  // Log data untuk memeriksa formatnya

                let gridItems = '';

                // Memeriksa jika data.response adalah array
                if (data.response && Array.isArray(data.response)) {
                    data.response.forEach(item => {
                        gridItems += `<div class="grid-item">
                            <h1>${item.nm_dokter || 'No Name'}</h1>
                            <h3>${item.nm_poliklinik || 'No Clinic'}</h3>
                            <p>JAM: ${item.jadwal_poli || 'No Schedule'}</p>
                            <h3>Kapasitas: ${item.jumlah_pasien || 'Kapasitas'}</h3>
                            <h3>Daftar: ${item.daftar || 'Jumlah Pendaftar'}</h3>

                            <h3>Sisa: ${item.sisa || 'MAsih Ada Sisa'}</h3>
                        </div>`;
                    });
                } else {
                    console.error('Data is not in expected format:', data);
                    gridItems = '<p>No data available</p>';
                }

                document.getElementById('apiResponseGrid').innerHTML = gridItems;
            })
            .catch(error => console.error('Error fetching data:', error));
    }

    fetchData();  // Panggil fetchData saat pertama kali halaman dimuat

    // Panggil fetchData setiap 5 detik untuk memperbarui grid
    setInterval(fetchData, 5000);
});
</script>

</body>
</html>