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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jadwal Operasi - RSU Ananda Purwokerto</title>
  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <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>
    /* --- PROFESSIONAL & MUTED COLOR PALETTE --- */
    :root {
        --blue-primary: #0056b3;    /* Biru standar yang lebih tenang */
        --blue-dark: #0d2b4d;       /* Biru tua pekat untuk header tabel */
        --blue-navy: #1a2226;       /* Hampir hitam untuk footer/running text */
        --blue-light-bg: #eef2f7;   /* Background stripe sangat muda */
        --accent-warm: #f0ad4e;     /* Aksen oranye hangat (tidak kuning neon) */
        --text-dark: #343a40;       /* Warna teks utama (abu tua) */
        --bg-page: #dfe6e9;         /* Background halaman abu netral */
    }

    /* --- GLOBAL STYLES --- */
    body {
      font-family: 'Poppins', sans-serif;
      background-color: var(--bg-page);
      margin: 0;
      padding: 0;
      height: 100vh;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      padding-bottom: 60px; /* Space untuk running text */
    }

    /* Background Image dengan Overlay Gelap & Teduh */
    .background-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: url('<?= base_url('assets_/assets/img/backgroundhd1.jpg') ?>');
      background-size: cover;
      background-position: center;
    }

    .background-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Overlay Gelap Solid untuk mengurangi silau */
      background: linear-gradient(to bottom, rgba(20, 30, 48, 0.95), rgba(36, 59, 85, 0.9));
    }

    /* --- HEADER SECTION --- */
    .header-section {
      text-align: center;
      padding: 25px 0 20px 0;
      color: white;
    }

    .header-logo {
      /* Drop shadow halus agar logo menonjol dari background gelap */
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }

    h1 {
      font-size: 2.4rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      margin-top: 15px;
      margin-bottom: 5px;
      text-transform: uppercase;
      color: #fff;
    }

    .sub-title {
      font-size: 1.1rem;
      font-weight: 300;
      opacity: 0.8;
      color: #fff;
    }

    /* --- CARD & TABLE CONTAINER (SOLID & CLEAN) --- */
    .main-card {
      background: #ffffff; /* SOLID PUTIH untuk keterbacaan maksimal */
      border-radius: 8px;  /* Sudut lebih tegas, terlihat lebih profesional */
      /* Shadow lembut, tidak berlebihan */
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
      border: none;
      overflow: hidden; 
      margin-bottom: 20px;
    }

    .card-body {
      padding: 0;
    }

    /* --- TABLE STYLING (Professional Look) --- */
    .table {
      margin-bottom: 0;
      width: 100%;
    }

    .table thead th {
      /* Biru Tua Solid, Tanpa Gradasi */
      background-color: var(--blue-dark);
      color: #ffffff;
      border: none;
      padding: 16px 12px;
      font-size: 1rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-align: center;
      vertical-align: middle;
    }

    .table tbody td {
      padding: 18px 12px; /* Padding lebih besar untuk keterbacaan */
      vertical-align: middle;
      text-align: center;
      color: var(--text-dark); /* Menggunakan abu tua, bukan hitam pekat */
      font-size: 1.05rem;
      border-bottom: 1px solid #edf2f7;
      font-weight: 400;
    }

    /* Striped effect sangat halus */
    .table-striped tbody tr:nth-of-type(odd) {
      background-color: var(--blue-light-bg);
    }
    
    .table-striped tbody tr:nth-of-type(even) {
      background-color: #fff;
    }

    /* Hover effect minimalis */
    .table tbody tr:hover {
      background-color: #e2e6ea !important;
      transition: background-color 0.2s ease;
    }

    /* Styling Kolom Khusus */
    .col-dokter {
      font-weight: 600;
      color: var(--blue-primary); /* Highlight dokter dengan biru standar */
    }
    
    .col-inisial {
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--text-dark);
      background-color: #e9ecef; /* Abu netral */
      border-radius: 4px;
      letter-spacing: 2px;
      padding: 6px 12px;
      display: inline-block;
    }

    /* Badge Nomor Operasi yang lebih tenang */
    .badge-op {
        background-color: var(--blue-primary);
        color: white;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 0.95rem;
        font-weight: 500;
    }

    /* --- RUNNING TEXT STYLES (Dark & Clear) --- */
    .running-text-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: var(--blue-navy); /* Background sangat gelap */
        display: flex;
        align-items: center;
        z-index: 1000;
        border-top: 2px solid var(--accent-warm); /* Garis aksen oranye hangat */
    }

    .running-text-label {
        background-color: var(--accent-warm);
        color: #fff;
        font-weight: 700;
        padding: 0 25px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        z-index: 2;
    }

    .running-text-content {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        background-color: var(--blue-navy);
    }

    .running-text-content span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 40s linear infinite; /* Diperlambat sedikit agar mudah dibaca */
        color: #f8f9fa; /* Putih gading */
        font-size: 1.1rem;
        font-weight: 400;
    }

    .separator {
        color: var(--accent-warm);
        margin: 0 20px 0 30px;
        font-size: 0.9rem;
        opacity: 0.8;
    }

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


    /* --- PAGINATION STYLING (Clean) --- */
    .pagination-container {
      display: flex;
      justify-content: center;
      padding: 15px;
      background: #fff;
      border-top: 1px solid #edf2f7;
    }

    .page-button {
      background: white;
      color: var(--text-dark);
      border: 1px solid #ced4da;
      width: 38px;
      height: 38px;
      border-radius: 4px;
      margin: 0 4px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

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

    .page-button.active {
      background-color: var(--blue-primary);
      color: white;
      border-color: var(--blue-primary);
    }

  </style>
</head>

<body>

  <div class="background-container">
    <div class="background-overlay"></div>
  </div>

  <div class="header-section">
    <img class="header-logo" src="<?php echo base_url(); ?>assets_/assets/img/and.png" height="70" alt="Logo RSU Ananda">
    <h1>Jadwal Operasi</h1>
    <div class="sub-title">Instalasi Bedah Sentral RSU Ananda Purwokerto</div>
    <div style="font-size: 1rem; margin-top:8px; color: rgba(255,255,255,0.7); font-weight:400;">
        <i class="far fa-calendar-alt mr-2"></i> <?php echo date("d F Y"); ?>
    </div>
  </div>

  <section class="content">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-11 col-md-12"> <div class="card main-card">
            <div class="card-body" id="table-container">
              <table id="example2" class="table table-striped">
                <thead>
                  <tr>
                    <th width="12%">No. OP</th>
                    <th width="15%">Tanggal</th>
                    <th width="15%">Kode Reg</th>
                    <th width="18%">Inisial Pasien</th>
                    <th width="40%">Dokter Operator</th>
                  </tr>
                </thead>
                <tbody id="jadwal-operasi-body">
                  <tr><td colspan="5" class="text-center py-5 text-muted">Memuat Data Jadwal...</td></tr>
                </tbody>
              </table>
            </div>
            </div>

        </div>
      </div>
    </div>
  </section>

  <div class="running-text-container">
    <div class="running-text-label">
        <i class="fas fa-info-circle mr-2"></i> INFO
    </div>
    <div class="running-text-content">
        <span>
            RSU ANANDA Purwokerto memberikan pelayanan secara Service Excellent
            <i class="fas fa-heart separator"></i> 
            Kesehatan Anda Kebahagiaan Bagi Kami
            <i class="fas fa-hospital 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
            <i class="fas fa-wifi separator"></i> 
            Informasi akses WIFI RS.ANANDA - Username : pasien - Password : sehatselalu
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
             <i class="fas fa-check-circle separator" style="opacity: 0.5;"></i> 
        </span>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      // Fungsi Load Data
      function loadJadwalOperasi() {
        $.ajax({
          url: "<?php echo base_url('ikbs/get_jadwal_operasi'); ?>",
          type: "POST",
          dataType: "json",
          success: function(data) {
            var tbody = $('#jadwal-operasi-body');
            tbody.empty();
            var tglsekarang = '<?php echo date("Y-m-d"); ?>';

            if (data && data.length > 0) {
              data.sort(function(a, b) {
                return new Date(a.tgl_op) - new Date(b.tgl_op);
              });

              var hasData = false;
              $.each(data, function(index, item) {
                if (item.tgl_op >= tglsekarang) {
                  hasData = true;
                  var row = '<tr>';
                  row += '<td><span class="badge-op">' + item.no_index_op + '</span></td>';
                  // Format tanggal agar lebih mudah dibaca (jika memungkinkan, idealnya diubah di sisi server/PHP)
                  row += '<td style="font-weight:500;">' + item.tgl_op + '</td>';
                  row += '<td class="text-muted" style="letter-spacing:1px;">' + item.kd_registrasi + '</td>';
                  row += '<td><span class="col-inisial">' + item.f_inisial_nama_pasien + '</span></td>';
                  row += '<td class="col-dokter">' + item.dokter_op + '</td>';
                  row += '</tr>';
                  tbody.append(row);
                }
              });
              
              if(!hasData){
                 tbody.append('<tr><td colspan="5" class="text-center py-5 text-muted"><h4><i class="far fa-calendar-times mr-2"></i> Tidak ada jadwal operasi untuk hari ini.</h4></td></tr>');
              }

            } else {
              tbody.append('<tr><td colspan="5" class="text-center py-5 text-muted"><h4><i class="far fa-folder-open mr-2"></i> Data tidak ditemukan</h4></td></tr>');
            }

            if (tbody.children().length > 1) {
              startSliding();
            }
          },
          error: function() {
             var tbody = $('#jadwal-operasi-body');
             tbody.empty();
             tbody.append('<tr><td colspan="5" class="text-center py-5 text-danger"><i class="fas fa-exclamation-triangle mr-2"></i> Gagal memuat data. Periksa koneksi.</td></tr>');
          }
        });
      }

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

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

        if(totalPages > 1){
            var paginationHTML = '<div class="pagination-container">';
            for (var i = 1; i <= totalPages; i++) {
              paginationHTML += '<button class="page-button" data-page="' + i + '">' + i + '</button>';
            }
            paginationHTML += '</div>';
            $('.main-card').append(paginationHTML);
        }

        showPage(currentPage);

        $('.page-button').on('click', function() {
          var page = $(this).data('page');
          currentPage = page;
          showPage(page);
        });

        function showPage(page) {
          $('.page-button').removeClass('active');
          $('.page-button[data-page="'+page+'"]').addClass('active');

          var startRow = (page - 1) * rowsPerPage;
          var endRow = startRow + rowsPerPage;
          
          tableRows.hide();
          for (var i = startRow; i < endRow; i++) {
            if (i < tableRows.length) {
              $(tableRows[i]).fadeIn(300);
            }
          }
        }

        function autoSlide() {
          if(totalPages > 1) {
              currentPage++;
              if (currentPage > totalPages) {
                currentPage = 1;
              }
              showPage(currentPage);
          }
        }

        if (window.slideInterval) clearInterval(window.slideInterval);
        window.slideInterval = setInterval(autoSlide, 10000);
      }

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

  <script>
    window.onload = function() {
      setTimeout(function() {
        window.location.reload();
      }, 300000); 
    }
  </script>

</body>
</html>