<?php
$public_access = true;
require_once __DIR__ . "/../../app/config/app.php";
require_once __DIR__ . "/../../app/config/session.php";
?>
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Monitoring – Sistem Informasi Masjid</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <!-- Monitoring CSS (isolated & namespace-based) -->
  <link rel="stylesheet" href="<?php echo base_url('/assets/css/monitoring/monitoring.css'); ?>">
</head>

<!-- ==========================================================
     Monitoring Page Wrapper
     ========================================================== -->
<body class="monitoring-page">

  <!-- ================= HEADER ================= -->
  <header>
    <div class="header-inner">
      <div class="title">SISTEM INFORMASI MASJID</div>
      <button id="fullscreen-btn" class="btn-fullscreen" title="Fullscreen">
        <i id="fullscreen-icon" class="fas fa-expand-arrows-alt"></i>
      </button>
    </div>
  </header>

  <!-- ================= RUNNING TEXT ================ -->
  <nav class="running-text">
    <div><span id="countdownRamadhan">Memuat countdown...</span></div>
  </nav>

  <!-- ================= MAIN WRAPPER ================= -->
  <div class="main">
    <div class="main-inner">

      <!-- ====================================================
           SIDEBAR KIRI — SUMBER DAYA, KEUANGAN, HIJRIAH
           ==================================================== -->
      <aside class="sidebar-left">

        <!-- SUMBER DAYA -->
        <h3>Sumber Daya</h3>
        <div id="data-sumberdaya" class="sumber-grid">
          <!-- Diisi otomatis oleh ui-sumberdaya.js -->
        </div>

        <hr class="section-divider">

        <!-- KEUANGAN -->
        <h3>Keuangan</h3>

<div class="info-row">

  <!-- Saldo Harian -->
  <div class="info-box">
    <h5>💰 Saldo Mingguan</h5>
<p class="value">
    <span id="icon-mingguan" class="saldo-icon">➖</span>
    <span id="saldo-mingguan" data-value="0">Rp. 0</span>
</p>
  </div>

  <!-- Saldo Bulanan -->
  <div class="info-box">
    <h5>🏦 Saldo Bulanan</h5>
    <p class="value">
      <span id="icon-bulanan" class="saldo-icon">➖</span>
      <span id="saldo-bulanan" data-value="0">Rp. 0</span>
    </p>
  </div>

</div>

        <hr class="section-divider">

        <!-- HIJRIAH -->
        <h3>Tanggal Hijriah</h3>
        <div class="info-box">
          <h5><i class="fa-regular fa-calendar"></i> Tanggal Hijriah</h5>
          <p id="tanggal-hijriah">Memuat...</p>
        </div>

      </aside>


      <!-- ====================================================
           CONTENT TENGAH — CAROUSEL + GRID JAMAAH
           ==================================================== -->
      <main class="content">

        <!-- ======== CAROUSEL ======== -->
        <div id="carouselMasjid" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4500">
          <div class="carousel-inner">

            <div class="carousel-item active">
              <img src="<?php echo base_url('/assets/img/src/masjiddzuhur.jpeg'); ?>" alt="Masjid">
              <div class="carousel-caption">
                <h5>Masjid Saat Dzuhur</h5>
                <p>Langit cerah dan suasana penuh semangat ibadah.</p>
              </div>
            </div>

            <div class="carousel-item">
              <img src="<?php echo base_url('/assets/img/src/masjidsubuh.jpg'); ?>" alt="Masjid">
              <div class="carousel-caption">
                <h5>Masjid Saat Subuh</h5>
                <p>Cahaya biru pagi menyelimuti keheningan.</p>
              </div>
            </div>

            <div class="carousel-item">
              <img src="<?php echo base_url('/assets/img/src/masjidashar.jpg'); ?>" alt="Masjid">
              <div class="carousel-caption">
                <h5>Masjid Saat Ashar</h5>
                <p>Mentari condong ke barat, bayangan menari di pelataran suci.</p>
              </div>
            </div>

            <div class="carousel-item">
              <img src="<?php echo base_url('/assets/img/src/masjidmaghrib.jpg'); ?>" alt="Masjid">
              <div class="carousel-caption">
                <h5>Masjid Saat Maghrib</h5>
                <p>Langit jingga membawa ketenangan senja.</p>
              </div>
            </div>

            <div class="carousel-item">
              <img src="<?php echo base_url('/assets/img/src/masjidisya.jpg'); ?>" alt="Masjid">
              <div class="carousel-caption">
                <h5>Masjid Saat Isya</h5>
                <p>Pencahayaan malam yang tenang dan khusyuk.</p>
              </div>
            </div>

          </div>

          <!-- Carousel controls -->
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselMasjid" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselMasjid" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>

        <!-- ======== JAMAAH GRID ======== -->
        <section class="jamaah-container">

          <!-- Row 1 -->
          <div class="jamaah-card"><h4>Subuh</h4><p id="subuh">Memuat...</p></div>
          <div class="jamaah-card"><h4>Dzuhur</h4><p id="dzuhur">Memuat...</p></div>
          <div class="jamaah-card"><h4>Ashar</h4><p id="ashar">Memuat...</p></div>

          <!-- Row 2 -->
          <div class="jamaah-card"><h4>Maghrib</h4><p id="maghrib">Memuat...</p></div>
          <div class="jamaah-card"><h4>Isya</h4><p id="isya">Memuat...</p></div>
          <div class="jamaah-card"><h4>Di luar Waktu</h4><p id="luar_waktu">Memuat...</p></div>

        </section>

      </main>


      <!-- ====================================================
           SIDEBAR KANAN — JAM DIGITAL, WAKTU SHOLAT, COUNTDOWN
           ==================================================== -->
      <aside class="sidebar-right">

  <!-- ======== 1. LOKASI & COUNTDOWN (pindah ke atas) ======== -->
  <div class="info-box-right big-countdown">
    

    <div class="next-label">
      Menuju waktu berikutnya: 
      <b id="nextPrayerLabel">-</b>
    </div>

    <div id="countdownNextPrayer" class="countdown-big">--:--:--</div>
    <!-- ========================  IQOMAH  ======================== -->
<div class="iqomah-box mt-3">
    <div class="iqomah-title">⏳ Menuju Iqomah Selanjutnya</div>
    <div id="countdownIqomah" class="iqomah-timer">--:--:--</div>
</div>
  </div>


  <!-- ======== 2. WAKTU SEKARANG (pindah ke tengah & diperbesar) ======== -->
  <div class="info-box-right big-clock">
    <h5>🕒 Waktu Sekarang</h5>

    <h2 id="realTimeClock" class="clock-display">00:00:00</h2>

    <p id="realTimeDate" class="clock-date">Memuat tanggal...</p>
    <div id="userLocation" class="fw-bold mb-1">
      📍 Memuat lokasi...
    </div>
  </div>


  <!-- ======== 3. WAKTU SHOLAT ======== -->
  <div class="info-box-right">
    <h5>🕌 Waktu Sholat</h5>

    <table class="table table-sm mb-0 waktu-sholat-table">
      <tbody>
        <tr class="waktu-sholat-row">
          <td class="waktu-sholat-label"><span class="waktu-sholat-icon">🕯️</span> Subuh</td>
          <td class="waktu-sholat-time" id="subuhTime">--:--</td>
        </tr>

        <tr class="waktu-sholat-row">
          <td class="waktu-sholat-label"><span class="waktu-sholat-icon">🌞</span> Dzuhur</td>
          <td class="waktu-sholat-time" id="dzuhurTime">--:--</td>
        </tr>

        <tr class="waktu-sholat-row">
          <td class="waktu-sholat-label"><span class="waktu-sholat-icon">🌤️</span> Ashar</td>
          <td class="waktu-sholat-time" id="asharTime">--:--</td>
        </tr>

        <tr class="waktu-sholat-row">
          <td class="waktu-sholat-label"><span class="waktu-sholat-icon">🌇</span> Maghrib</td>
          <td class="waktu-sholat-time" id="maghribTime">--:--</td>
        </tr>

        <tr class="waktu-sholat-row">
          <td class="waktu-sholat-label"><span class="waktu-sholat-icon">🌙</span> Isya</td>
          <td class="waktu-sholat-time" id="isyaTime">--:--</td>
        </tr>
      </tbody>
    </table>

  </div>
  
  <!-- ========== QR Kritik & Saran ========== -->
<div class="info-box-right mt-3 text-center qr-kritik-box">
    <h5 class="fw-bold mb-2">📬 Kritik & Saran</h5>
    <img src="<?= base_url('/assets/img/src/kritik_saran.jpeg'); ?>" 
         alt="QR Kritik & Saran"
         class="qr-image"
         width="150">
</div>

</aside>


    </div>
  </div>

  <footer class="dashboard-footer">
  <div class="footer-inline">

      <div class="footer-item">
          <img src="<?= base_url('/assets/img/src/logo-teknikelektro.png'); ?>" class="footer-logo">
          <span>Program Studi Teknik Elektro</span>
      </div>

      <div class="footer-divider"></div>

      <div class="footer-item">
          <img src="<?= base_url('/assets/img/src/logo-unpam.png'); ?>" class="footer-logo">
          <span>Universitas Pamulang</span>
      </div>
      
      <div class="footer-divider"></div>
      
      <div class="footer-item">
          <img src="<?= base_url('/assets/img/src/logo-kelas.png'); ?>" class="footer-logo">
          <a href="https://www.instagram.com/teknikelektro_01?igsh=dDRucDRrbjZneTJ0" 
   target="_blank" 
   class="footer-link">
   © 2024 - TELM001
</a>
      </div>

  </div>
</footer>

  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>window.API_BASE = "<?= base_url('pages/web_monitoring/php/'); ?>";</script>
  <script type="module" src="<?= base_url('/assets/js/monitoring/main.js'); ?>"></script>
</body>
</html>
