<!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</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 */
        --text-dark: #343a40;       /* Warna teks utama */
        --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 15px 0;
      color: white;
    }

    .header-logo {
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }

    h1 {
      font-size: 2.2rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      margin-top: 10px;
      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; 
      border-radius: 8px;  
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
      border: none;
      overflow: hidden; 
      margin-bottom: 20px;
    }

    .card-body {
      padding: 0;
    }

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

    .table thead th {
      background-color: var(--blue-dark);
      color: #ffffff;
      border: none;
      padding: 16px 8px;
      font-size: 0.95rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-align: center;
      vertical-align: middle;
    }

    .table tbody td {
      padding: 16px 8px; 
      vertical-align: middle;
      text-align: center;
      color: var(--text-dark); 
      font-size: 1rem;
      border-bottom: 1px solid #edf2f7;
      font-weight: 400;
    }

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

    .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); 
    }
    
    .col-inisial {
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--text-dark);
      background-color: #e9ecef;
      border-radius: 4px;
      letter-spacing: 1px;
      padding: 4px 10px;
      display: inline-block;
    }

    .badge-op {
        background-color: var(--blue-primary);
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 1px;
    }

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

    .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; 
        color: #f8f9fa; 
        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 --- */
    .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 Instalasi Bedah Sentral</h1>
    <div style="font-size: 1rem; margin-top:5px; 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-11 col-lg-12">
          
          <div class="card main-card">
            <div class="card-body" id="table-container">
              <table id="example2" class="table table-striped">
                <thead>
                  <tr>
                    <th width="10%">No RM</th>
                    <th width="20%">Nama Dokter</th>
                    <th width="10%">Inisial</th>
                    <th width="15%">Nama</th>
                    <th width="10%">Jam Mulai</th>
                    <th width="10%">Jam Selesai</th>
                    <th width="13%">Ruang OP</th>
                    <th width="12%">Status OP</th>
                  </tr>
                </thead>
                <tbody id="jadwal-operasi-body">
                  <tr><td colspan="8" 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() {
      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();

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

              $.each(data, function(index, item) {
                // Formatting Jam
                var jamMulai = item.jam_mulai ? item.jam_mulai.split(' ')[1].substring(0, 5) : '-'; 
                var jamSelesai = (item.status_op === "SELESAI OPERASI" && item.jam_selesai) ? item.jam_selesai.split(' ')[1].substring(0, 5) : "-"; 

                // Menentukan Warna Badge berdasarkan Status
                var badgeStatus = 'badge-secondary';
                if(item.status_op === "SELESAI OPERASI" || item.status_op === "SELESAI") {
                    badgeStatus = 'badge-success';
                } else if(item.status_op.includes("PROSES") || item.status_op.includes("SEDANG")) {
                    badgeStatus = 'badge-warning text-dark';
                } else if(item.status_op.includes("BATAL")) {
                    badgeStatus = 'badge-danger';
                } else {
                    badgeStatus = 'badge-info'; // Default untuk status lain seperti MENUNGGU
                }

                var row = '<tr>';
                row += '<td><span class="badge-op">' + item.kd_rekam_medis + '</span></td>';
                row += '<td class="col-dokter text-left pl-3">' + item.dpjp + '</td>';
                // Sesuai urutan kolom kode asli Anda (nm_sensor -> inisial_nama)
                row += '<td><span class="col-inisial">' + item.nm_sensor + '</span></td>';
                row += '<td style="font-weight:500;">' + item.inisial_nama + '</td>';
                
                row += '<td><i class="far fa-clock text-primary mr-1"></i> <strong>' + jamMulai + '</strong></td>';
                row += '<td>' + (jamSelesai !== "-" ? '<i class="far fa-check-circle text-success mr-1"></i> <strong>' + jamSelesai + '</strong>' : '<span class="text-muted">-</span>') + '</td>';
                
                row += '<td>' + item.nm_ruang_op + '</td>';
                row += '<td><span class="badge ' + badgeStatus + ' p-2" style="font-size: 0.85rem; letter-spacing:0.5px;">' + item.status_op + '</span></td>';
                row += '</tr>';
                
                tbody.append(row);
              });
            } else {
              tbody.append('<tr><td colspan="8" class="text-center py-5 text-muted"><h4><i class="far fa-folder-open mr-2"></i> Data Operasi Belum Tersedia</h4></td></tr>');
            }

            // Panggil pagination jika data ada
            if (tbody.children().length > 1) {
              startSliding();
            }
          },
          error: function() {
             var tbody = $('#jadwal-operasi-body');
             tbody.empty();
             tbody.append('<tr><td colspan="8" 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();
        
        // --- Setting: 10 Pasien Per Halaman ---
        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); // Ganti tiap 10 detik
      }

      // Initial Load
      loadJadwalOperasi();
      
      // AJAX update every 50 seconds
      setInterval(loadJadwalOperasi, 50000);
    });
  </script>

  <script>
    // Refresh Cache Full Page every 5 minutes (300000ms)
    window.onload = function() {
      setTimeout(function() {
        window.location.reload();
      }, 300000); 
    }
  </script>

</body>
</html>