{% extends 'base.html' %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card card-kj border-0 shadow-sm">
        <div style="padding: 22px 24px; background: linear-gradient(90deg, rgba(191,231,207,.55), rgba(216,242,226,.35)); border-bottom:1px solid rgba(47,158,90,.12);">
          <div class="d-flex align-items-center justify-content-between gap-3">
            <div>
              <div class="badge badge-kj px-3 py-2 mb-2">Memproses Kelulusan</div>
              <h3 class="mb-1" style="color: var(--pastel-green-ink); font-weight:800;">
                {{ student.full_name }}
              </h3>
              <div class="text-muted" style="font-size:13px;">
                NISN: <strong>{{ student.nisn }}</strong> &nbsp;•&nbsp; Kelas: <strong>{{ student.kelas }}</strong>
              </div>
            </div>
            <div class="text-end">
              <div style="font-size:12px;" class="text-muted">Tunggu sebentar…</div>
              <div id="countdown" style="font-size:18px; font-weight:800; color: var(--pastel-green-ink);"></div>
            </div>
          </div>
        </div>

        <div class="p-4">
          <div class="d-flex align-items-center gap-3">
            <div class="spinner-border text-success" role="status" style="width:3rem; height:3rem;">
              <span class="visually-hidden">Loading...</span>
            </div>

            <div>
              <div style="font-weight:800; color: var(--pastel-green-ink);">Sedang menyiapkan hasil surat resmi</div>
              <div class="text-muted" style="font-size:13px; margin-top:6px;">
                Halaman ini sengaja menampilkan loading agar user tidak langsung melihat hasil terlalu cepat.
              </div>
              <div class="text-muted" style="font-size:12px; margin-top:10px;">
                Otomatis akan pindah ke hasil dalam beberapa detik.
              </div>
            </div>
          </div>
        </div>
      </div>

      <noscript>
        <div class="alert alert-warning mt-3">
          JavaScript nonaktif. Silakan refresh halaman untuk melihat hasil.
        </div>
      </noscript>
    </div>
  </div>

  <script>
    (function () {
      // delay acak 6-12 detik agar terasa "surprise"
      const minSec = 6;
      const maxSec = 12;
      const delaySec = Math.floor(Math.random() * (maxSec - minSec + 1)) + minSec;

      const countdownEl = document.getElementById('countdown');
      let remaining = delaySec;

      const tick = () => {
        if (!countdownEl) return;
        countdownEl.textContent = remaining + 's';
        remaining -= 1;
        if (remaining < 0) {
          clearInterval(timer);
        }
      };

      tick();
      const timer = setInterval(tick, 1000);

      setTimeout(() => {
        // redirect ke halaman hasil asli (render result.html)
        window.location.href = "{{ redirect_url }}";
      }, delaySec * 1000);
    })();
  </script>
{% endblock %}