{% 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">
        <div style="padding: 18px 20px; 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 flex-wrap align-items-center justify-content-between gap-2">
            <div>
              <div class="badge badge-kj px-3 py-2 mb-2">Hasil 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>
              {% if student.status == 'L' %}
                <span
                  class="badge"
                  style="
                    background: rgba(47,158,90,.14);
                    border:1px solid rgba(47,158,90,.22);
                    color: var(--pastel-green-ink);
                    font-size:18px;
                    padding:14px 18px;
                    font-weight:900;
                    letter-spacing: .2px;
                    box-shadow: 0 10px 22px rgba(47,158,90,.10);
                  "
                >
                  ✅ Lulus
                </span>
              {% else %}
                <span
                  class="badge"
                  style="
                    background: rgba(232,244,238,.95);
                    border:1px solid rgba(47,158,90,.18);
                    color: var(--pastel-green-ink);
                    font-size:18px;
                    padding:14px 18px;
                    font-weight:900;
                    letter-spacing: .2px;
                    box-shadow: 0 10px 22px rgba(47,158,90,.08);
                  "
                >
                  ℹ️ Tidak Lulus
                </span>
              {% endif %}
              <div class="mt-2 text-muted" style="font-size:12px;">
                Surat resmi terunduh dalam format PDF.
              </div>
            </div>
          </div>
        </div>

        <div class="p-4">
          <div class="row g-4 align-items-center">
            <div class="col-md-7">
              <div class="d-flex align-items-center gap-3">
                {% if student.photo %}
                  <img
                    src="{{ student.photo.url }}"
                    alt="photo"
                    class="rounded"
                    style="width:120px;height:120px;object-fit:cover; border:1px solid rgba(47,158,90,.18); background: rgba(255,255,255,.7);"
                  />
                {% endif %}

                <div>
                  <div class="d-flex flex-wrap gap-2 align-items-center">
                    <span class="badge badge-kj">Nomor</span>
                    <span class="fw-semibold" style="color: var(--pastel-green-ink);">
                      {{ student.nomor_sk|default:"-" }}
                    </span>
                  </div>
                  <div class="text-muted mt-2" style="font-size:13px;">
                    Tanggal diterbitkan: 02 Juni 2026

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

              <div class="mt-4">
                <div class="p-3 rounded" style="border:1px dashed rgba(47,158,90,.22); background: rgba(216,242,226,.35);">
                  <div style="font-weight:700; color: var(--pastel-green-ink);">Keaslian Surat</div>
                  <div class="text-muted" style="font-size:13px;">
                    Verifikasi menggunakan token pada halaman verifikasi.
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-5">
              <div class="d-flex flex-column align-items-md-end align-items-start gap-3">
                <div>
                  <div style="position:relative; width:150px; height:150px;">
                    {% if student.sk_barcode %}
                      <div style="position:relative; width:150px; height:150px;" class="p-2 rounded bg-white">
                        <img
                          src="{{ student.sk_barcode.url }}"
                          alt="Barcode"
                          style="width:150px;height:150px; display:block; object-fit:contain;"
                        />

                        <!-- Overlay logo kecil agar barcode tetap bisa discan -->
                        <div
                          style="
                            position:absolute;
                            left:50%;
                            top:50%;
                            transform:translate(-50%,-50%);
                            width:34px;
                            height:34px;
                            border-radius:50%;
                            background: rgba(255,255,255,.98);
                            border:1px solid rgba(47,158,90,.20);
                            display:flex;
                            align-items:center;
                            justify-content:center;
                            pointer-events:none;
                            z-index:2;
                          "
                        >
                          <img
                            src="/media/madrasah_logos/LOGOMDA.png"
                            alt="Logo MTS"
                            style="width:28px; height:28px; object-fit:contain; border-radius:50%;"
                          />
                        </div>
                      </div>
                    {% elif student.qr_code %}
                      <img
                        src="{{ student.qr_code.url }}"
                        alt="QR"
                        style="width:150px;height:150px;"
                        class="p-2 rounded bg-white"
                      />
                    {% endif %}

                    <!-- Logo MTS overlay dibuat sekali saja (di blok kecil atas).
                         Blok overlay lama sengaja dihapus agar tidak double dan barcode tetap bisa discan. -->
                  </div>
                </div>

                <div class="d-flex gap-2 flex-wrap justify-content-md-end">
                  <a href="{% url 'kelulusan:preview_pdf' student.nisn %}" class="btn btn-outline-primary px-4" target="_blank" rel="noopener">
                    View Preview
                  </a>

                  <a href="{% url 'kelulusan:download' student.nisn %}" class="btn btn-kj px-4">
                    Download PDF
                  </a>

                  {% if token %}
                    <a href="{% url 'kelulusan:verify' token %}" class="btn btn-outline-dark px-4">
                      Verifikasi
                    </a>
                  {% endif %}
                </div>

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

    </div>
  </div>
{% endblock %}