{% extends 'base.html' %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-md-10">
      <div class="card card-kj border-0 shadow-sm overflow-hidden mb-4">
        <div style="padding: 18px 20px; background: linear-gradient(90deg, rgba(191,231,207,.85), rgba(216,242,226,.55));">
          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
              <div class="badge badge-kj px-3 py-2 mb-2">Resmi</div>
              <h2 class="mb-1" style="color: var(--pastel-green-ink); font-weight: 800;">
                Pengumuman Kelulusan
              </h2>
              <p class="mb-0 text-muted">
                MTs Sunan Kalijga — Silakan masukkan NISN untuk menampilkan status kelulusan.
              </p>
            </div>
            <div class="text-end">
              <div class="badge badge-kj px-3 py-2">Verifikasi Tanda Surat</div>
              <div class="mt-2" style="font-size: 12px; color: rgba(27,94,58,.85);">
                Dokumen dapat diverifikasi menggunakan token.
              </div>
            </div>
          </div>
        </div>

        <div class="p-4">
          <div class="row justify-content-center">
            <div class="col-md-8">
              <div class="card p-4 shadow-sm" style="background: rgba(255,255,255,.8); border: 1px solid rgba(47,158,90,.18);">
                <div class="d-flex align-items-center gap-2 mb-2">
                  <span class="badge badge-kj px-3 py-2">Pengumuman</span>
                  <h3 class="mb-0 card-title">Cek Kelulusan</h3>
                </div>

                <p class="mb-4 text-muted">
                  Masukkan NISN Anda untuk melihat status kelulusan dan mengunduh surat.
                </p>

                <form id="nisnForm" method="post" autocomplete="off">
                  {% csrf_token %}
                  <div class="mb-3">
                    <label class="form-label fw-semibold">NISN</label>
                    <input
                      type="text"
                      name="nisn"
                      class="form-control"
                      placeholder="Masukkan NISN"
                      value="{{ query }}"
                      inputmode="numeric"
                      autocomplete="off"
                    >
                  </div>

                  <div class="d-flex gap-2 align-items-center">
                    <button id="cekHasilBtn" class="btn btn-kj px-4" type="submit">Cek Hasil</button>
                  </div>
                </form>

                <!-- Loading overlay -->
                <div
                  id="loadingOverlay"
                  class="d-none"
                  style="
                    position: fixed;
                    inset: 0;
                    background: rgba(8, 37, 20, 0.45);
                    backdrop-filter: blur(2px);
                    z-index: 9999;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div
                    style="
                      width: 320px;
                      max-width: calc(100vw - 32px);
                      background: rgba(255,255,255,0.88);
                      border: 1px solid rgba(47,158,90,.25);
                      border-radius: 16px;
                      padding: 18px 18px;
                      box-shadow: 0 12px 30px rgba(0,0,0,.18);
                      text-align: center;
                    "
                  >
                    <div
                      style="
                        width: 74px;
                        height: 74px;
                        margin: 0 auto 10px;
                        border-radius: 50%;
                        background: radial-gradient(circle at 30% 30%, rgba(191,231,207,.9), rgba(216,242,226,.5));
                        border: 1px solid rgba(47,158,90,.25);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        overflow: hidden;
                      "
                    >
                      <img
                        src="/media/madrasah_logos/LOGOMDA.png"
                        alt="Logo"
                        style="width: 42px; height: 42px; object-fit: contain; z-index: 2;"
                      />
                      <div
                        style="
                          position: absolute;
                          inset: -18px;
                          border-radius: 50%;
                          border: 4px solid rgba(47,158,90,.18);
                          border-top-color: rgba(47,158,90,.65);
                          animation: bbSpin 1.6s linear infinite;
                        "
                      ></div>
                    </div>

                    <div style="font-weight: 800; color: rgba(27,94,58,.95); margin-bottom: 4px;">
                      Memproses...
                    </div>
                    <div style="font-size: 12px; color: rgba(27,94,58,.75);">
                      Menampilkan hasil kelulusan.
                    </div>

                    <div
                      style="
                        display:flex;
                        align-items:center;
                        justify-content:space-between;
                        gap:12px;
                        margin-top: 14px;
                      "
                    >
                      <div style="font-size:12px; color: rgba(27,94,58,.75); font-weight:700;">
                        Progres
                      </div>
                      <div id="loadingPercent" style="font-size:12px; color: rgba(27,94,58,.95); font-weight:900;">
                        1%
                      </div>
                    </div>

                    <div
                      style="
                        height: 8px;
                        background: rgba(47,158,90,.12);
                        border-radius: 999px;
                        overflow: hidden;
                        margin-top: 8px;
                      "
                    >
                      <div
                        id="loadingBarFill"
                        style="
                          height: 100%;
                          width: 1%;
                          background: linear-gradient(90deg, rgba(27,94,58,.35), rgba(27,94,58,.85));
                          border-radius: 999px;
                        "
                      ></div>
                    </div>
                  </div>
                </div>

                <style>
                  @keyframes bbSpin {
                    from { transform: rotate(0deg); }
                    to { transform: rotate(360deg); }
                  }
                </style>

                <script>
                  (function () {
                    var form = document.getElementById('nisnForm');
                    var overlay = document.getElementById('loadingOverlay');
                    var btn = document.getElementById('cekHasilBtn');

                    if (!form || !overlay) return;

                    var percentEl = document.getElementById('loadingPercent');
                    var barFillEl = document.getElementById('loadingBarFill');
                    var statusTitleEl = overlay.querySelector('div[style*="font-weight: 800"]');

                    var intervalId = null;

                    function resetOverlay() {
                      overlay.classList.add('d-none');
                      if (btn) btn.disabled = false;
                      if (intervalId) {
                        clearInterval(intervalId);
                        intervalId = null;
                      }
                      if (percentEl) percentEl.textContent = '1%';
                      if (barFillEl) barFillEl.style.width = '1%';
                      if (statusTitleEl) statusTitleEl.textContent = 'Memproses...';
                    }

                    function setStatusForPercent(p) {
                      if (!statusTitleEl) return;
                      if (p < 25) statusTitleEl.textContent = 'Memproses data...';
                      else if (p < 50) statusTitleEl.textContent = 'Menyusun surat...';
                      else if (p < 75) statusTitleEl.textContent = 'Mengecek kelulusan...';
                      else if (p < 100) statusTitleEl.textContent = 'Menyiapkan unduhan...';
                      else statusTitleEl.textContent = 'Selesai.';
                    }

                    function startProgress() {
                      if (!percentEl || !barFillEl) return;

                      var current = 1;
                      if (intervalId) clearInterval(intervalId);

                      setStatusForPercent(current);

                      intervalId = setInterval(function () {
                        current = Math.min(100, current + 1);
                        percentEl.textContent = current + '%';
                        barFillEl.style.width = current + '%';
                        setStatusForPercent(current);

                        if (current >= 100) {
                          clearInterval(intervalId);
                          intervalId = null;
                        }
                      }, 200); // ~20 detik untuk 1..100
                    }

                    // Pastikan saat masuk/return ke halaman, overlay tidak "nyangkut"
                    resetOverlay();
                    try {
                      sessionStorage.removeItem('nisnLoading');
                    } catch (e) {}

                    // Handle back/forward cache (bfcache)
                    window.addEventListener('pageshow', function (event) {
                      if (event && event.persisted) {
                        resetOverlay();
                      }
                    });

                    form.addEventListener('submit', function () {
                      try { sessionStorage.setItem('nisnLoading', '1'); } catch (e) {}

                      if (btn) btn.disabled = true;
                      overlay.classList.remove('d-none');
                      startProgress();
                    });
                  })();
                </script>
              </div>

              <div class="mt-3 text-muted" style="font-size: 12px;">
                Jika NISN tidak ditemukan, silakan hubungi tata usaha madrasah.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}