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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="shortcut icon" type="image/png" href="<?= base_url('assets_/assets/img/logo-mini.png') ?>">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <title>Tampilan Ketersediaan Tempat Tidur</title>
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            /* Mengatur font menjadi Montserrat */
            margin: 0;
            /* Menghapus margin default */
            padding: 0;
            /* Menghapus padding default */
            text-align: center;
            /* Mengatur teks menjadi rata tengah */
            background-position: center;
            /* Memusatkan gambar latar belakang */
            position: relative;
            /* Mengatur posisi relatif untuk elemen overlay */
        }


        /* Mengatur gambar latar belakang */
        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('<?= base_url('assets_/assets/img/backgroundhd1.jpg') ?>');
            background-size: cover;
            background-position: center;
            opacity: 0.3;
            z-index: -1;
        }

        .header-title {
            padding-top: 20%;
            margin: 0;
            /* Menghapus margin untuk menghilangkan jarak */
            padding: 10px 0 0 0;
            /* Menambahkan padding atas untuk jarak di atas judul */
            font-weight: bold;
        }

        .header-logo {
            /* Memusatkan logo */
            /* margin-right: 20px; */
            /* Menambahkan jarak antara logo dan teks */
            /* margin-top: 20px; */
            margin: 20px 0 10px 0;
        }

        .table th,
        .table td {
            text-align: center;
            font-size: 1.2rem;
            /* Ukuran font lebih besar */
        }

        .table {
            width: 100%;
            /* Memastikan tabel lebar penuh */
            table-layout: fixed;
            border-collapse: collapse;
        }

        .table-container {
            margin: 10px;
            /* Jarak antar tabel */
            flex: 1;
            /* Memungkinkan tabel untuk tumbuh */
        }

        .table-container.aa {
            margin-left: -340px;
            /* Jarak antar tabel */
            margin-top: 30px;
        }

        .table-container.bb {
            margin-right: -330px;
            /* Jarak antar tabel */
            margin-top: 30px;
        }

        .row {
            display: flex;
            /* Menggunakan flexbox untuk menampilkan tabel bersebelahan */
            justify-content: space-between;
            /* Menjaga jarak antar tabel */
        }

        .card {
            border: none;
            /* Menghilangkan border pada card */
        }

        .table thead th {
            background-color: #007bff;
            /* Warna latar belakang header */
            color: white;
            /* Warna teks header */
        }

        .table tbody tr:hover {
            background-color: #f1f1f1;
            /* Warna latar belakang saat hover */
        }
    </style>
    <script>
        window.onload = function() {
            document.body.style.zoom = "96%";
        }
    </script>

</head>

<body>
    <div class="background-image"></div> <!-- Overlay untuk transparansi background image -->
    <div class="container">
        <img src="<?php echo base_url(); ?>assets_/assets/img/logo-mini.png" class="header-logo" height="90px" width="100px">
        <h2 class="header-title"><strong>TAMPILAN KETERSEDIAN TEMPAT TIDUR</strong></h2>
        <h2 class="header-title"><strong>RUMAH SAKIT UMUM ANANDA PURWOKERTO</strong></h2>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="table-container aa col-lg-10">
                        <div class="card">
                            <div class="card-body">
                                <table style="table-layout: fixed;" class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th><strong>Nama Ruang</strong></th>
                                            <th><strong>Kelas</strong></th>
                                            <th><strong>Jumlah</strong></th>
                                            <th><strong>Tersedia</strong></th>
                                            <th><strong>Terisi</strong></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") {
                                                    $bgColor = $a->tersedia == 0 ? 'style="background-color: red; color: white;"' : '';
                                                    echo "<tr $bgColor>
                                                            <td><strong>{$a->ruang}</strong></td>
                                                            <td><strong>{$a->nm_kelas}</strong></td>
                                                            <td><strong>{$a->jumlah_bed}</strong></td>
                                                            <td><strong>{$a->tersedia}</strong></td>
                                                            <td><strong>{$a->terisi}</strong></td>
                                                          </tr>";
                                                }
                                            }
                                        } else {
                                            echo '<tr><td colspan="5" style="text-align: center;">Data tidak ditemukan</td></tr>';
                                        }
                                        ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="table-container bb col-lg-10">
                        <div class="card">
                            <div class="card-body">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th><strong>Nama Ruang</strong></th>
                                            <th><strong>Kelas</strong></th>
                                            <th><strong>Jumlah</strong></th>
                                            <th><strong>Tersedia</strong></th>
                                            <th><strong>Terisi</strong></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") {
                                                    $bgColor = $a->tersedia == 0 ? 'style="background-color: red; color: white;"' : '';
                                                    echo "<tr $bgColor>
                                                            <td><strong>{$a->ruang}</strong></td>
                                                            <td><strong>{$a->nm_kelas}</strong></td>
                                                            <td><strong>{$a->jumlah_bed}</strong></td>
                                                            <td><strong>{$a->tersedia}</strong></td>
                                                            <td><strong>{$a->terisi}</strong></td>
                                                          </tr>";
                                                }
                                            }
                                        } else {
                                            echo '<tr><td colspan="5" style="text-align: center;">Data tidak ditemukan</td></tr>';
                                        }
                                        ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="">
            <h3 style="margin-top: 50px;"><strong>by IT Support RSU Ananda</strong></h3>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>