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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jadwal Operasi</title>
  <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') ?>">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
  <style>
    h1 {
      font-size: 30px;
      font-weight: bold;
      color: #000;
      text-transform: uppercase;
      /* font-weight: 300px; */
      text-align: center;
      margin-bottom: 10px;
      margin-top: 10px;
    }

    table {
      width: 100%;
      table-layout: fixed;
    }

    .tbl-header {
      background-color: #007bff;
      /* Warna latar belakang header tabel */
    }

    .tbl-header.aa {
      background-color: rgb(0, 1, 2);
      /* Warna latar belakang header tabel */
    }

    .tbl-content {
      max-height: max-content;
      /* Atur batas maksimum tinggi */
      overflow-y: auto;
      /* Mengizinkan scroll vertikal */
      overflow-x: hidden;
      /* Menyembunyikan scroll horizontal */
      margin-top: 0px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      position: relative;
      /* Untuk animasi */
      transition: transform 0.5s ease;
      /* Animasi geser */
    }

    th {
      padding: 10px 15px;
      text-align: center;
      /* Memusatkan teks di header tabel */
      font-weight: 200;
      font-weight: bold;
      font-size: 20px;
      /* Ukuran font header tabel */
      color: #000;
      text-transform: uppercase;
      background-color: rgba(0, 123, 255, 0.78);
    }

    td {
      padding: 15px;
      text-align: center;
      /* Memusatkan teks di sel data tabel */
      vertical-align: middle;
      font-weight: 300;
      font-size: 17px;
      /* Ukuran font isi tabel */
      color: #000;
      background-color: rgba(252, 252, 252, 0.78);
      border-bottom: solid 1px rgba(255, 255, 255, 0.1);
    }

    @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);

    body {
      font-family: 'Roboto', sans-serif;
    }

    /* 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;
    }

    section {
      margin: 20px;
    }

    .header-logo {
      margin: 10px 0 10px 0;
    }

    .made-with-love {
      margin-top: 40px;
      padding: 10px;
      clear: left;
      text-align: center;
      font-size: 10px;
      font-family: Arial;
      color: #fff;
    }

    .made-with-love i {
      font-style: normal;
      color: #F50057;
      font-size: 14px;
      position: relative;
      top: 2px;
    }

    .made-with-love a {
      color: #fff;
      text-decoration: none;
    }

    .made-with-love a:hover {
      text-decoration: underline;
    }

    /* Custom scrollbar for webkit browsers */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    ::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    .pagination {
      text-align: center;
      margin-top: 30px;
    }

    .page-button {
      background-color: #007bff;
      color: #fff;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      margin: 0 5px 30px;
      position: relative;
      left: 45%;
      transform: translateX(-50%);
    }

    .page-button:hover {
      background-color: #0056b3;
    }

    .page-button.active {
      background-color: #004c99;
    }
  </style>
</head>

<body>

  <div class="background-image"></div> <!-- background image -->

  <div class="text-center mb-4">
    <img class="header-logo" src="<?php echo base_url(); ?>assets_/assets/img/and.png" height="90" width="300" class="mb-2">
    <h1 style="font-weight: bold; font-size: 38px">Jadwal Operasi Instalasi Bedah Sentral</h1>
  </div>

  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-body tbl-content" id="table-container">
              <div class="">
                <table id="example2" class="table table-striped table-bordered">
                  <thead>
                    <tr>
                      <th>No RM</th>
                      <th>Nama Dokter</th>
                      <th>Inisial</th>
                      <th>Nama </th>
                      <th>Jam Mulai</th>
                      <th>Jam Selesai</th>
                      <th>Nama Ruang OP</th>
                      <th>Status OP</th>
                    </tr>
                  </thead>
                  <tbody id="jadwal-operasi-body">
                    <!-- Data akan dimuat di sini -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script>
    $(document).ready(function() {
      function loadJadwalOperasi() {
        $.ajax({
          url: "<?php echo base_url('ikbs_sibling/get_jadwal_operasi1'); ?>",
          type: "POST",
          dataType: "json",
          success: function(data) {
            var tbody = $('#jadwal-operasi-body');
            tbody.empty();

            // Urutkan data berdasarkan tanggal (dari terkecil ke terbesar)
            data.sort(function(a, b) {
              return new Date(a.tgl_op) - new Date(b.tgl_op);
            });

            $.each(data, function(index, item) {
              var jamMulai = item.jam_mulai.split(' ')[1].substring(0, 5); // Ambil hanya jam:menit
              var jamSelesai = (item.status_op === "SELESAI OPERASI") ? item.jam_selesai.split(' ')[1].substring(0, 5) : ""; // Tampilkan jam selesai hanya jika operasi selesai

              var row = '<tr>';
              // row += '<td>' + (index + 1) + '</td>';
              row += '<td>' + item.kd_rekam_medis + '</td>';
              row += '<td>' + item.dpjp + '</td>';
              row += '<td>' + item.nm_sensor + '</td>';
              row += '<td>' + item.inisial_nama + '</td>';
              row += '<td>' + jamMulai + '</td>';
              row += '<td>' + jamSelesai + '</td>'; // Selalu ada kolom, tapi kosong jika operasi belum selesai
              row += '<td>' + item.nm_ruang_op + '</td>';
              row += '<td>' + item.status_op + '</td>';
              row += '</tr>';
              tbody.append(row);
            });

            // Mulai fungsi slide jika ada lebih dari 8 data
            if (tbody.children().length > 1) {
              startSliding();
            }
          }
        });
      }

      function startSliding() {
        var tableBody = $('#jadwal-operasi-body');
        var tableRows = tableBody.children();
        var rowsPerPage = 10;
        var currentPage = 1;
        var totalPages = Math.ceil(tableRows.length / rowsPerPage);


        // Hapus pagination sebelumnya
        $('#table-container').next('.pagination').remove();

        // Buat pagination
        var pagination = '<div class="pagination">';
        for (var i = 1; i <= totalPages; i++) {
          pagination += '<button  class="page-button" data-page="' + i + '">' + i + '</button>';
        }
        pagination += '</div>';
        $('#table-container').after(pagination);



        // Tampilkan data pada halaman pertama
        showPage(currentPage);

        // Buat event listener untuk pagination
        $('.page-button').on('click', function() {
          var page = $(this).data('page');
          showPage(page);
        });

        // Fungsi untuk menampilkan data pada halaman tertentu
        function showPage(page) {
          var startRow = (page - 1) * rowsPerPage;
          var endRow = startRow + rowsPerPage;
          tableBody.empty();
          for (var i = startRow; i < endRow; i++) {
            if (i < tableRows.length) {
              tableBody.append(tableRows[i]);
            }
          }
        }

        // Buat fungsi untuk mengganti halaman secara otomatis
        function autoSlide() {
          currentPage++;
          if (currentPage > totalPages) {
            currentPage = 1;
          }
          showPage(currentPage);
        }

        // Jalankan fungsi autoSlide secara otomatis
        setInterval(autoSlide, 10000);
      }

      // Event listener untuk input tanggal
      $('#filter-tanggal').on('change', function() {
        var tanggal = $(this).val(); // Ambil nilai tanggal yang dipilih
        loadJadwalOperasi(tanggal); // Muat jadwal operasi berdasarkan tanggal
      });

      // Muat jadwal operasi untuk tanggal hari ini saat halaman pertama kali dimuat
      var tanggalHariIni = '<?php echo date("Y-m-d"); ?>';
      $('#filter-tanggal').val(tanggalHariIni); // Set nilai default input tanggal
      loadJadwalOperasi(tanggalHariIni); // Muat data untuk tanggal hari ini

      loadJadwalOperasi();
      setInterval(loadJadwalOperasi, 50000);
    });
  </script>

  <script>
    window.onload = function() {
      setInterval(function() {
        window.location.reload();
      }, 100000); // 50000 miliseconds = 50 detik
    }
  </script>



</body>
<!-- <div style="margin-top: 10px;" class="text-center">
  <a><strong> By IT Support RSU Ananda </strong></a>
</div> -->

</html>