<?php $this->load->view('backend/template/meta') ?>

<body class="hold-transition sidebar-mini layout-fixed sidebar-collapse" style="background-image: url('assets/images/.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center;">
    <!-- Content Header (Page header) -->
    <nav class="navbar navbar-expand navbar-light  topbar mb-4 static-top shadow" style="background-color:#8B4533;">
    <div class="d-flex align-items-center justify-content-center mx-auto ml-4 text-center pl-4">
    <span class="mx-2 pl-1"></span>
    <h2 class="mb-0 text-white h5"><?= $header; ?></h2> <!-- Ukuran teks lebih kecil -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="text-white text-center small-box">
                <div id="tanggal"></div>
                <div id="jam_tanpa_zona"></div>
            </div>
        </div>
    </section>
</div>

            </div><!-- /.col -->
            
        </section>

        </div>
        <div class="navbar-nav">
          <a href="<?= base_url('login/logout'); ?>" class="btn btn-default btn-flat float-right">Sign out</a>
           
            <!-- Nav Item - User Information -->

          </div>
        <!--<div>
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="#">Keluar</a></li>
            </ol>
        </div> -->
    </nav>
    <!-- /.content-header -->

    <div class="content">
    <div class="container-fluid mt-4">
        <div class="table-responsive" id="tableContainer" style="height: 500px; overflow-y: auto; position: relative;">
            <table class="table table-bordered table-striped text-center"
                   style="width: 100%; font-size: 14px; table-layout: fixed; border-collapse: collapse;">
                <thead style="position: sticky; top: 0; background-color: rgb(154, 107, 54); color: white; z-index: 2;">
                    <tr>
                        <th style="width: 5%;">RUANG</th>
                        <th style="width: 3%;">NO</th>
                        <th style="width: 6%;">JAM</th>
                        <th style="width: 8%;">RUANG</th>
                        <th style="width: 15%;">NAMA PASIEN</th>
                        <th style="width: 8%;">NOMR</th>
                        <th style="width: 8%;">ESTIMASI</th>
                        <th style="width: 12%;">TINDAKAN</th>
                        <th style="width: 10%;">OPERATOR</th>
                        <th style="width: 10%;">DPJP</th>
                        <th style="width: 10%;">ANESTESI</th>
                        <th style="width: 10%;">JENIS ANESTESI</th>
                        <th style="width: 10%;">KETERANGAN</th>
                    </tr>
                </thead>
                <tbody>
        <?php $no = 1; foreach ($get_pasien_hari_ini as $pasien) : ?>
        <tr>
            <td><?= $pasien['kamar'] ?: '-'; ?></td> <!-- KAMAR -->
            <td><?= $no++; ?></td> <!-- NO -->
            <td><?= $pasien['jam'] ?: '-'; ?></td> <!-- JAM -->
            <td><?= $pasien['ruang'] ?: '-'; ?></td> <!-- RUANG OPERASI -->
            <td><?= $pasien['nama'] ?: '-'; ?></td> <!-- NAMA PASIEN -->
            <td><?= $pasien['nomr'] ?: '-'; ?></td> <!-- NOMR -->
            <td><?= $pasien['estimasi'] ?: '-'; ?></td> <!-- ESTIMASI -->

            <!-- TINDAKAN -->
            <td>
                <?php 
                $nomr = $pasien['nomr'];
                if (!empty($get_pasien_hari[$nomr])) :
                    foreach ($get_pasien_hari[$nomr] as $tarif) :
                        echo $tarif['tindakan'] ?: '-';
                    endforeach;
                else :
                    echo '-';
                endif;
                ?>
            </td>

            <td><?= $pasien['operator'] ?: '-'; ?></td> <!-- OPERATOR -->
            <td><?= $pasien['dokter_dpjp'] ?: '-'; ?></td> <!-- DPJP -->
            <td><?= $pasien['dokter_anestesi'] ?: '-'; ?></td> <!-- ANESTESI -->
            <td><?= $pasien['jenis_anestesi'] ?: '-'; ?></td> <!-- JENIS ANESTESI -->
            <td><?= $pasien['keterangan'] ?: '-'; ?></td> <!-- KETERANGAN -->
        </tr>
        <?php endforeach; ?>
    </tbody>
            </table>
        </div>
    </div>
</div>
            <!-- End of Footer -->
           
    <script>
        let tanggalSekarang = new Date();

        let tanggal = tanggalSekarang.getDate();
        let bulan = getNamaBulan(tanggalSekarang.getMonth());
        let tahun = tanggalSekarang.getFullYear();

        let tanggalFormat = tanggal + ' ' + bulan + ' ' + tahun;

        var options = {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        };
        document.querySelector('#tanggal').innerText = tanggalFormat;

        function getNamaBulan(indeksBulan) {
            let namaBulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
            return namaBulan[indeksBulan];
        }

        function updateJamTanpaZona() {
            var options = {
                hour12: false,
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            };
            var jamTanpaZona = new Date().toLocaleTimeString('id-ID', options);
            document.getElementById('jam_tanpa_zona').textContent = jamTanpaZona;
        }

        // Memperbarui jam setiap detik
        setInterval(updateJamTanpaZona, 1000);

        // Memanggil fungsi untuk pertama kali
        updateJamTanpaZona();
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Inisialisasi
            let currentPage = 3;
            const totalPages = document.querySelectorAll(".page").length;

            // Fungsi untuk menampilkan halaman tertentu
            function showPage(pageNumber) {
                document.querySelectorAll(".page").forEach((page) => {
                    page.style.display = "none";
                });

                document.getElementById(`page${pageNumber}`).style.display = "block";
            }

            // Fungsi untuk mengatur automatic pagination setiap 5 detik
            function automaticPagination() {
                if (currentPage < totalPages) {
                    currentPage++;
                } else {
                    currentPage = 3;
                }

                showPage(currentPage);
                setTimeout(automaticPagination, 4000); // Set timeout 5 detik
            }

            // Panggil fungsi automaticPagination untuk pertama kali
            automaticPagination();
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Inisialisasi
            let currentPage = 3;
            const totalPages = document.querySelectorAll(".page").length;

            // Fungsi untuk menampilkan halaman tertentu
            function showPage(pageNumber) {
                document.querySelectorAll(".page").forEach((page) => {
                    page.style.display = "none";
                });

                document.getElementById(`page${pageNumber}`).style.display = "block";
            }

            // Fungsi untuk mengatur automatic pagination setiap 5 detik
            function automaticPagination() {
                if (currentPage < totalPages) {
                    currentPage++;
                } else {
                    currentPage = 3;
                }

                showPage(currentPage);
                setTimeout(automaticPagination, 4000); // Set timeout 5 detik
            }

            // Panggil fungsi automaticPagination untuk pertama kali
            automaticPagination();
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Inisialisasi
            let currentPage = 3;
            const totalPages = document.querySelectorAll(".table_rj").length;

            // Fungsi untuk menampilkan halaman tertentu
            function showPage(pageNumber) {
                document.querySelectorAll(".table_rj").forEach((table_rj) => {
                    table_rj.style.display = "none";
                });

                document.getElementById(`table_rj${pageNumber}`).style.display = "block";
            }

            // Fungsi untuk mengatur automatic pagination setiap 5 detik
            function automaticPagination() {
                if (currentPage < totalPages) {
                    currentPage++;
                } else {
                    currentPage = 3;
                }

                showPage(currentPage);
                setTimeout(automaticPagination, 4000); // Set timeout 5 detik
            }

            // Panggil fungsi automaticPagination untuk pertama kali
            automaticPagination();
        });
    </script>
<style>
     .card {
      background-color: rgba(255, 255, 255, 0.6); /* Adjust the alpha value (0.5) as needed */
      border: none; /* Optional: Remove border for a cleaner look */
      margin: 10px;
      padding: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 1); /* Optional: Add a box shadow for depth */
    }

    .card-header {
      background-color: rgba(209, 169, 98, 0.5); /* Adjust the alpha value (0.7) as needed */
      color: b; /* Text color for better visibility on the header */
      padding: 10px;
      text-align: center;
    }
  
</style>

<script>document.addEventListener("DOMContentLoaded", function () {
    let tableContainer = document.getElementById("tableContainer"); // Pastikan ID ini ada di <div>
    let scrollPosition = 0;
    let scrollSpeed = 500; // Kecepatan scroll
    let scrollStep = 1; // Langkah per scroll
    let maxScroll = tableContainer.scrollHeight - tableContainer.clientHeight;

    function scrollDown() {
        if (scrollPosition < maxScroll) {
            scrollPosition += scrollStep;
            tableContainer.scrollTop = scrollPosition;
            setTimeout(scrollDown, scrollSpeed);
        } else {
            setTimeout(scrollUp, 2000); // Tunggu sebelum scroll ke atas
        }
    }

    function scrollUp() {
        if (scrollPosition > 0) {
            scrollPosition -= scrollStep;
            tableContainer.scrollTop = scrollPosition;
            setTimeout(scrollUp, scrollSpeed);
        } else {
            setTimeout(scrollDown, 2000); // Tunggu sebelum scroll ke bawah
        }
    }

    if (tableContainer.scrollHeight > tableContainer.clientHeight) {
        scrollDown(); // Jalankan scrolling hanya jika data lebih dari viewport
    }
});

</script>
<style>
  #scrollTable {
    display: block;
    width: 100%;
    max-height: 450px;
    overflow-y: auto;
}

#scrollTable tr {
    height: 18px; /* Tinggi baris lebih kecil */
    font-size: 12px; /* Ukuran font diperkecil */
}

#scrollTable td {
    padding: 2px 5px; /* Kurangi padding agar lebih rapat */
    white-space: nowrap; /* Mencegah teks turun ke bawah */
}

table {
    border-collapse: collapse; /* Rapatkan batas antar sel */
    width: 100%;
}

th, td {
    border: 1px solid #ddd; /* Tambahkan border agar tetap rapi */
    text-align: center;
}


.small-box {
    padding: 1px 3px; /* Kurangi padding lebih banyak */
    font-size: 8px;   /* Ukuran huruf lebih kecil lagi */
    display: inline-flex; /* Supaya tetap proporsional */
    justify-content: center;
    align-items: center;
    border-radius: 2px; /* Supaya tetap rapi */
    background: transparent; /* Hilangkan background */
    min-width: auto; /* Jangan paksa lebar */
    min-height: auto; /* Jangan paksa tinggi */
}

#tanggal, #jam_tanpa_zona {
    font-size: 10px;   /* Ukuran font lebih kecil lagi */
    color: white;      /* Warna tetap putih */
    text-align: center;
    margin: 0 3px; /* Kasih jarak antar elemen */
    padding: 1px 2px; /* Kurangi padding */
    display: inline-block;
}

/* warna */
tbody tr:nth-child(odd) {
    background-color: rgba(190, 168, 88, 0.5) !important; /* Warna emas dengan transparansi 50% */
}
tbody tr:nth-child(even) {
    background-color: rgba(123, 115, 23, 0.5) !important; /* Abu-abu dengan transparansi 50% */
}


#tanggal, #jam_tanpa_zona {
    font-size: 15px; /* Bisa diganti sesuai kebutuhan */
    font-weight: bold;
}

</style>
</body>

</html>