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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ketersediaan Tempat Tidur - RSU Ananda</title>
    
    <!-- External CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="shortcut icon" type="image/png" href="<?= base_url('assets_/assets/img/logo-mini.png') ?>">

    <style>
        :root {
            --primary-blue: #0d47a1;
            --glass-border: rgba(255, 255, 255, 0.2);
            --glass-bg: rgba(255, 255, 255, 0.85);
        }

        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            background-color: #1a1a1a; 
        }

        /* --- BACKGROUND HANDLING --- */
        .bg-container {
            position: fixed;
            top: -10px;
            left: -10px;
            width: calc(100% + 20px);
            height: calc(100% + 20px);
            background-image: url('<?= base_url('assets_/assets/img/backgroundhd1.jpg') ?>');
            background-size: cover;
            background-position: center;
            filter: blur(8px) brightness(0.6); 
            z-index: -2;
            transform: scale(1.1);
        }

        .main-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px 0 60px 0; /* Tambah padding bawah agar tidak tertutup running text */
            z-index: 1;
            transition: filter 0.8s ease, opacity 0.8s ease;
        }

        .blur-active {
            filter: blur(10px) brightness(0.8);
            opacity: 0.7;
            pointer-events: none;
        }

        /* --- LOADING OVERLAY --- */
        #loading-overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            text-align: center;
            color: white;
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .loading-text {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: 15px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.8);
        }

        .spinner-custom {
            width: 60px;
            height: 60px;
            border: 6px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
            display: inline-block;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* --- HEADER STYLES --- */
        .header-section {
            text-align: center;
            margin-bottom: 25px;
            color: #fff;
        }

        .header-logo {
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
            margin-bottom: 10px;
        }

        .header-title {
            font-weight: 800;
            text-transform: uppercase;
            font-size: 2rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
            margin: 0;
            letter-spacing: 2px;
        }

        .header-subtitle {
            font-weight: 600;
            font-size: 1.2rem;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
            color: #e0e0e0;
        }

        /* --- CARD & TABLE STYLES --- */
        .glass-card {
            background: var(--glass-bg);
            border-radius: 16px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
            border: 1px solid var(--glass-border);
            overflow: hidden;
            height: 100%;
        }

        .table-custom {
            margin-bottom: 0;
            width: 100%;
        }

        .table-custom thead th {
            background: linear-gradient(45deg, #0056b3, #004494);
            color: white;
            text-transform: uppercase;
            font-size: 0.95rem;
            padding: 15px 10px;
            border: none;
            letter-spacing: 0.5px;
        }

        .table-custom tbody td {
            padding: 12px 10px;
            vertical-align: middle;
            font-size: 1.05rem;
            font-weight: 700;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            color: #333;
        }

        .table-custom tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.02);
        }

        /* --- RED ROW ANIMATION --- */
        @keyframes glowRed {
            0% { box-shadow: inset 0 0 0px #dc3545; }
            50% { box-shadow: inset 0 0 20px rgba(220, 53, 69, 0.6); }
            100% { box-shadow: inset 0 0 0px #dc3545; }
        }

        .row-full {
            background-color: #dc3545 !important;
            color: white !important;
            animation: glowRed 2s infinite;
            position: relative;
            z-index: 2;
            transform: scale(1.01);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            border: none;
        }

        .row-full td {
            border-bottom: none !important;
        }

        .footer-credit {
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 15px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* --- RUNNING TEXT STYLES (FOOTER) --- */
        .running-text-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: linear-gradient(90deg, #004494, #0056b3);
            color: white;
            display: flex;
            align-items: center;
            overflow: hidden;
            border-top: 2px solid rgba(255,255,255,0.3);
            box-shadow: 0 -4px 15px rgba(0,0,0,0.4);
            z-index: 999;
        }

        .running-text-label {
            background: #002a5c;
            color: #ffd700; /* Warna emas agar mencolok */
            padding: 0 20px;
            height: 100%;
            display: flex;
            align-items: center;
            font-weight: 800;
            font-size: 1rem;
            z-index: 1000;
            box-shadow: 4px 0 10px rgba(0,0,0,0.3);
            white-space: nowrap;
        }

        .running-text-content {
            white-space: nowrap;
            animation: marquee 40s linear infinite; /* Kecepatan animasi */
            padding-left: 100%; /* Mulai dari luar layar */
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .running-text-content span {
            display: inline-block;
            padding-right: 50px; /* Jarak antar kalimat */
        }
        
        .separator {
            color: #ffd700;
            margin: 0 15px;
        }

        @keyframes marquee {
            0% { transform: translate(0, 0); }
            100% { transform: translate(-100%, 0); }
        }

    </style>
</head>

<body>
    <!-- Background -->
    <div class="bg-container"></div>

    <!-- Overlay Loading -->
    <div id="loading-overlay">
        <div class="spinner-custom"></div>
        <div class="loading-text">Loading Data Realtime...</div>
    </div>

    <!-- Konten Utama -->
    <div class="main-wrapper" id="mainContent">
        <!-- Header -->
        <div class="container header-section">
            <img src="<?= base_url('assets_/assets/img/logo-mini.png') ?>" class="header-logo" height="85px">
            <h1 class="header-title">Ketersediaan Tempat Tidur</h1>
            <h2 class="header-subtitle">Rumah Sakit Umum Ananda Purwokerto</h2>
        </div>

        <!-- Content -->
        <div class="container-fluid px-4">
            <div class="row justify-content-center">
                
                <!-- Tabel Kiri -->
                <div class="col-xl-5 col-lg-6 col-md-12 mb-4">
                    <div class="glass-card">
                        <div class="card-body p-0">
                            <table class="table table-custom text-center">
                                <thead>
                                    <tr>
                                        <th width="30%">Ruang</th>
                                        <th width="25%">Kelas</th>
                                        <th>Total</th>
                                        <th>Isi</th>
                                        <th>Sisa</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    if (isset($albarokah1)) {
                                        foreach ($albarokah1["albarokah1"] as $a) {
                                            if ($a->keterangan == "CAT" || $a->keterangan == "DDL" || $a->keterangan == "EDEL" || $a->keterangan == "IBS" || $a->keterangan == "VK" || $a->keterangan == "PERINA") {
                                                $class = $a->tersedia == 0 ? 'class="row-full"' : '';
                                                echo "<tr $class>
                                                        <td class='text-left pl-4'>{$a->ruang}</td>
                                                        <td>{$a->nm_kelas}</td>
                                                        <td>{$a->jumlah_bed}</td>
                                                        <td>{$a->terisi}</td> 
                                                        <td style='font-size: 1.2rem;'>{$a->tersedia}</td> 
                                                      </tr>";
                                            }
                                        }
                                    } else {
                                        echo '<tr><td colspan="5" class="py-4 text-muted">Data tidak ditemukan</td></tr>';
                                    }
                                    ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Tabel Kanan -->
                <div class="col-xl-5 col-lg-6 col-md-12 mb-4">
                    <div class="glass-card">
                        <div class="card-body p-0">
                            <table class="table table-custom text-center">
                                <thead>
                                    <tr>
                                        <th width="30%">Ruang</th>
                                        <th width="25%">Kelas</th>
                                        <th>Total</th>
                                        <th>Isi</th>
                                        <th>Sisa</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    if (isset($albarokah1)) {
                                        foreach ($albarokah1["albarokah1"] as $a) {
                                            if ($a->keterangan == "GRA" || $a->keterangan == "NICU" || $a->keterangan == "PICU" || $a->keterangan == "HCU" || $a->keterangan == "ICU" || $a->keterangan == "ISO") {
                                                $class = $a->tersedia == 0 ? 'class="row-full"' : '';
                                                echo "<tr $class>
                                                        <td class='text-left pl-4'>{$a->ruang}</td>
                                                        <td>{$a->nm_kelas}</td>
                                                        <td>{$a->jumlah_bed}</td>
                                                        <td>{$a->terisi}</td>
                                                        <td style='font-size: 1.2rem;'>{$a->tersedia}</td>
                                                      </tr>";
                                            }
                                        }
                                    } else {
                                        echo '<tr><td colspan="5" class="py-4 text-muted">Data tidak ditemukan</td></tr>';
                                    }
                                    ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="footer-credit">
            <p>IT RSU Ananda Purwokerto &copy; <?= date('Y'); ?></p>
        </div>
    </div>

    <!-- Running Text Section -->
    <div class="running-text-container">
        <div class="running-text-label">
            <i class="fas fa-bullhorn mr-2"></i> INFO
        </div>
        <div class="running-text-content">
            <!-- Kalimat 1 -->
            <span>
                <i class="fas fa-check-circle separator"></i> 
                RSU ANANDA Purwokerto memberikan pelayanan secara Service Excelent
            </span>
            
            <!-- Kalimat 2 -->
            <span>
                <i class="fas fa-heart separator"></i> 
                Kesehatan Anda Kebahagiaan Bagi Kami
            </span>
            
            <!-- Kalimat 3 -->
            <span>
                
                <i class="fas fa-hospital-alt separator"></i> 
                RSU ANANDA Purwokerto memiliki visi misi menjadi rumah sakit swasta terbaik di Kabupaten Banyumas dengan fokus pada pelayanan bermutu, keselamatan pasien, dan kemitraan kesehatan
            </span>

             <!-- Kalimat 4 -->
             <span>
                <i class="fas fa-exclamation-circle separator"></i> 
                Warna label merah menandakan Ruang Inap TERISI PENUH atau FULL
            </span> 
        </div>
    </div>

    <script>
        const REFRESH_INTERVAL = 100000;
        const ANIMATION_DURATION = 2000;

        function triggerRefreshAnimation() {
            const mainContent = document.getElementById('mainContent');
            const loader = document.getElementById('loading-overlay');
            mainContent.classList.add('blur-active');
            loader.style.display = 'block';
            setTimeout(() => { loader.style.opacity = '1'; }, 50);
            setTimeout(() => { window.location.reload(); }, ANIMATION_DURATION);
        }
        
        window.onload = function() {
            setTimeout(triggerRefreshAnimation, REFRESH_INTERVAL);
        }
    </script>
</body>
</html>