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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Menggunakan Tailwind CSS untuk desain responsif -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Menggunakan font Inter untuk tampilan yang lebih modern -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
    <!-- Menggunakan path asli Anda untuk favicon -->
    <link rel="shortcut icon" type="image/png" href="<?= base_url('assets_/assets/img/logo-mini.png') ?>">
    <title>Antrean Poliklinik RSU ANANDA PURWOKERTO</title>
    <style>
        /* CSS Kustom untuk elemen yang sulit ditangani dengan Tailwind */
        body {
            font-family: 'Inter', sans-serif;
        }

        /* Styling untuk background image dengan overlay gelap agar teks lebih terbaca */
        .background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }

        .background-image {
            /* Menggunakan path asli Anda untuk background image */
            background-image: url('<?= base_url('assets_/assets/img/backgroundhd1.jpg') ?>');
            background-size: cover;
            background-position: center;
            filter: blur(2px);
            opacity: 0.7;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(24, 49, 83, 0.5);
            /* Overlay warna gelap */
            z-index: -1;
        }

        /* Custom scrollbar (opsional, untuk estetika) */
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>

<body class="bg-gray-100" onload="initializeData()">

    <!-- Kontainer untuk background image dan overlay -->
    <div class="background-container">
        <div class="background-image"></div>
        <div class="background-overlay"></div>
    </div>

    <main class="container mx-auto p-4 md:p-6 mb-12"> <!-- Menambahkan margin-bottom untuk footer -->
        <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl overflow-hidden">
            <div class="p-6 text-center border-b border-gray-200">
                <!-- Menggunakan path asli Anda untuk logo -->
                <img src="<?= base_url('assets_/assets/img/and.png') ?>" alt="Logo RSU Ananda"
                    class="h-16 w-auto mx-auto mb-4" onerror="this.src='https://placehold.co/240x70/ffffff/000000?text=Logo+Error'">
                <h1 class="text-2xl md:text-3xl font-bold text-gray-800">INFORMASI ANTREAN POLI</h1>
                <h2 class="text-lg md:text-xl font-semibold text-gray-600 mt-1">RUMAH SAKIT UMUM ANANDA PURWOKERTO</h2>
            </div>

            <div class="p-4 md:p-6">
                <!-- Header Tabel (Hanya tampil di layar besar) -->
                <div class="hidden md:grid md:grid-cols-7 gap-4 px-4 py-3 bg-blue-600 text-white font-bold rounded-t-lg">
                    <div class="col-span-2">Nama Dokter</div>
                    <div>Klinik</div>
                    <div class="text-center">Jam</div>
                    <div class="text-center">Jumlah Pasien</div>
                    <div class="text-center">Dilayani</div>
                    <div class="text-center">Batal</div>
                </div>

                <!-- Kontainer untuk data antrean yang akan diisi oleh JavaScript -->
                <div id="antrean-container" class="space-y-4 md:space-y-0 max-h-[65vh] overflow-y-auto custom-scrollbar">
                    <!-- Data antrean akan dimuat di sini -->
                    <div class="text-center p-8 text-gray-500">
                        Memuat data antrean...
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer yang diperbarui -->
    <footer class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-50 backdrop-blur-sm text-white shadow-lg">
        <div class="container mx-auto px-4 py-2 flex flex-col md:flex-row justify-between items-center text-center">
            <p class="text-sm font-medium mb-1 md:mb-0">By Instalasi Sistem Informasi RSU ANANDA Purwokerto</p>
            <p id="clock" class="text-sm font-semibold"></p>
        </div>
    </footer>

    <script>
        // Daftar dokter spesialis asli Anda untuk prioritas sorting
        const dokterSpesialis = [
            "Gandik Danu Pramiga, dr., SpPD", "Yuanita Mardastuti, dr., SpN", "Pugud Samodro,dr., Dr., SpPD KEMD",
            "Eggy Jita Pradana, dr., SpB", "KHRISNA YUDHA, dr., SpOT", "Mochamad Lutfi Budiantoro, dr., Sp.B",
            "Ermadi Satriyo Sudibyo, dr., M.Sc, Sp.D.V.E", "Setya Dian Kartika, dr., SpOG", "Qodri Santosa, dr.., Dr., M.Si,Med,SpA",
            "Sekti Joko Suntono I, dr., SpTHT-KL", "Fatiha Sri Utami Tamad, dr., SpN", "Tiara Paramita Poernomo, dr., SpPD",
            "Indah Rahmawati, dr., SpP", "Rico Fitri Wibowo, dr., SpOG", "Yosinov Nur Hafiz,dr., SpOG", "Nur Faizah, dr., Sp. A",
            "Faridz Albam Wiseso,dr.,SpU", "Siska Yumira, drg", "Elien Wihestin, dr., SpKFR", "Dian Tunjungsari H, dr., SpRad",
            "Abraham Avicenna, dr., SpJP.FIHA"
        ];

        // Fungsi untuk merender data ke dalam kontainer dengan tampilan responsif
        function renderData(data) {
            const container = document.getElementById('antrean-container');
            if (!container) return;

            if (data.length === 0) {
                container.innerHTML = `<div class="text-center p-8 text-gray-500">Tidak ada jadwal poli saat ini.</div>`;
                return;
            }

            // Buat elemen HTML untuk setiap item data
            container.innerHTML = data.map(item => {
                const jumlah = parseInt(item.jumlah, 10) || 0;
                const dilayani = parseInt(item.dilayani, 10) || 0;
                const isFull = dilayani >= jumlah;

                // Tampilan Kartu untuk Mobile, dan Grid untuk Desktop
                return `
                <div class="
                    border-b last:border-b-0 md:border-none md:rounded-lg md:shadow-sm
                    p-4 md:px-4 md:py-3
                    bg-white 
                    md:grid md:grid-cols-7 md:gap-4 md:items-center
                    ${isFull ? 'opacity-60 bg-gray-100' : ''}
                ">
                    <!-- Kolom Nama Dokter (col-span-2 di desktop) -->
                    <div class="col-span-2 mb-2 md:mb-0">
                        <p class="font-bold text-blue-700">${item.nama}</p>
                    </div>
                    
                    <!-- Kolom Klinik -->
                    <div class="text-sm md:text-base">
                        <span class="font-semibold md:hidden">Klinik: </span>${item.klinik}
                    </div>

                    <!-- Kolom Jam -->
                    <div class="text-sm md:text-base md:text-center">
                         <span class="font-semibold md:hidden">Jam: </span>${item.jam}
                    </div>

                    <!-- Kolom Jumlah Pasien -->
                    <div class="text-sm md:text-base md:text-center">
                         <span class="font-semibold md:hidden">Jumlah: </span>${item.jumlah}
                    </div>

                    <!-- Kolom Dilayani -->
                    <div class="text-sm md:text-base md:text-center font-semibold ${isFull ? 'text-green-600' : 'text-blue-600'}">
                        <span class="font-semibold md:hidden">Dilayani: </span>
                        ${item.dilayani}
                    </div>

                    <!-- Kolom Batal -->
                    <div class="text-sm md:text-base md:text-center">
                        <span class="font-semibold md:hidden">Batal: </span>${item.batal}
                    </div>
                </div>
                `;
            }).join('');
        }

        // Fungsi utama yang mengambil, memproses, dan menampilkan data
        function fetchData() {
            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                // Buat elemen dummy untuk mem-parsing HTML yang diterima
                const dummy = document.createElement("tbody");
                dummy.innerHTML = this.responseText;

                // Ambil semua baris (tr) dari response
                const rows = Array.from(dummy.querySelectorAll("tr"));

                // Urutkan baris: dokter spesialis di atas
                rows.sort((a, b) => {
                    const namaA = a.cells[0]?.innerText.trim();
                    const namaB = b.cells[0]?.innerText.trim();
                    const isSpesialisA = dokterSpesialis.includes(namaA);
                    const isSpesialisB = dokterSpesialis.includes(namaB);
                    return (isSpesialisB ? 1 : 0) - (isSpesialisA ? 1 : 0);
                });

                // Konversi baris HTML yang sudah diurutkan menjadi array of objects
                let dataAntrean = rows.map(row => ({
                    nama: row.cells[0]?.innerText.trim() || '',
                    klinik: row.cells[1]?.innerText.trim() || '',
                    jam: row.cells[2]?.innerText.trim() || '',
                    jumlah: row.cells[3]?.innerText.trim() || '0',
                    dilayani: row.cells[4]?.innerText.trim() || '0',
                    batal: row.cells[5]?.innerText.trim() || '0'
                }));

                // Tampilkan data yang sudah diurutkan dengan tampilan responsif
                renderData(dataAntrean);
            };
            xhttp.onerror = function() {
                // Handle error jika request gagal
                const container = document.getElementById('antrean-container');
                container.innerHTML = `<div class="text-center p-8 text-red-500">Gagal memuat data. Periksa koneksi atau endpoint API.</div>`;
            };
            // Menggunakan endpoint asli Anda. Ini akan bekerja di server Anda.
            xhttp.open("GET", "<?= base_url("Poli/antrean") ?>");
            xhttp.send();
        }

        // Fungsi untuk memperbarui jam di footer
        function updateClock() {
            const clockElement = document.getElementById('clock');
            if (!clockElement) return;
            const now = new Date();
            const options = {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                timeZone: 'Asia/Jakarta'
            };
            clockElement.textContent = now.toLocaleDateString('id-ID', options) + ' WIB';
        }

        // Fungsi inisialisasi dan refresh
        function initializeData() {
            fetchData(); // Panggil data antrean pertama kali
            updateClock(); // Panggil jam pertama kali
            // Menggunakan interval asli Anda untuk data
            setInterval(fetchData, 1000);
            // Set interval untuk jam
            setInterval(updateClock, 1000);
        }
    </script>
</body>

</html>