@extends('layouts.guru.app')

@section('title', 'Absensi Siswa')

@push('styles')
<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

  :root {
    --navy:  #0f1f3d;
    --sky:   #2563eb;
    --gold:  #c9a24a;
    --gold2: #e2bb6a;
    --ink:   #1e293b;
    --dim:   #64748b;
    --fog:   #f1f5f9;
    --line:  #e2e8f0;
    --white: #ffffff;
    --green: #16a34a;
    --red:   #dc2626;
    --amber: #d97706;
    --blue:  #2563eb;
  }

  .as-wrap * { font-family: 'DM Sans', sans-serif; box-sizing: border-box; }
  .as-wrap { display: flex; flex-direction: column; gap: 24px; max-width: 860px; }

  /* ── HERO ─────────────────────────────── */
  .as-hero {
    position: relative;
    background: var(--navy);
    border-radius: 20px;
    padding: 30px 40px;
    overflow: hidden;
    display: flex; align-items: center; gap: 20px;
    animation: slideUp 0.4s ease both;
  }
  .as-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 55% 80% at 85% 50%, rgba(37,99,235,0.18) 0%, transparent 65%),
      radial-gradient(ellipse 40% 60% at 12% 20%, rgba(201,162,74,0.1) 0%, transparent 60%);
    pointer-events: none;
  }
  .as-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
  }
  .as-hero-text { position: relative; z-index: 1; }
  .as-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(201,162,74,0.15);
    border: 1px solid rgba(201,162,74,0.3);
    border-radius: 99px;
    padding: 4px 14px;
    font-size: 10px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold2);
    margin-bottom: 10px;
  }
  .as-hero-eyebrow i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); display: inline-block; }
  .as-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(18px, 3.5vw, 28px);
    font-weight: 700; color: var(--white);
    line-height: 1.2; margin: 0 0 4px;
  }
  .as-hero p { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 300; margin: 0; }

  /* ── FLASH ───────────────────────────── */
  .as-flash {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px; border-radius: 12px;
    font-size: 13px; font-weight: 500;
    animation: slideUp 0.4s ease both;
  }
  .as-flash svg { width: 16px; height: 16px; flex-shrink: 0; }
  .as-flash--success { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; }
  .as-flash--error   { background: #fff5f5; border: 1px solid #fca5a5; color: #b91c1c; }

  /* ── NO KELAS STATE ──────────────────── */
  .as-nokelas {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px; padding: 48px 32px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    animation: slideUp 0.4s ease both;
  }
  .as-nokelas-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: #fef3c7; border: 1px solid #fcd34d;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
  }
  .as-nokelas-icon svg { width: 28px; height: 28px; color: var(--amber); }
  .as-nokelas-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
  .as-nokelas-sub   { font-size: 13px; color: var(--dim); margin-bottom: 24px; }
  .as-scan-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border-radius: 10px;
    background: var(--navy); color: var(--white);
    font-size: 14px; font-weight: 700;
    text-decoration: none; transition: all 0.2s;
  }
  .as-scan-btn:hover { background: var(--sky); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.3); }
  .as-scan-btn svg { width: 16px; height: 16px; }

  /* ── KELAS INFO BAR ──────────────────── */
  .as-kelas-bar {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    animation: slideUp 0.4s ease 0.06s both;
  }
  .as-kelas-bar-left { display: flex; align-items: center; gap: 12px; }
  .as-kelas-icon {
    width: 42px; height: 42px; border-radius: 11px;
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .as-kelas-icon svg { width: 19px; height: 19px; color: var(--blue); }
  .as-kelas-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
  .as-kelas-name  { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 1px;
    font-family: 'Playfair Display', serif; }
  .as-ganti-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 9px;
    background: #fee2e2; color: #b91c1c;
    border: 1px solid #fca5a5;
    font-size: 12px; font-weight: 700;
    text-decoration: none; transition: all 0.2s; flex-shrink: 0;
  }
  .as-ganti-btn:hover { background: #fca5a5; }
  .as-ganti-btn svg { width: 13px; height: 13px; }

  /* ── TABLE CARD ──────────────────────── */
  .as-table-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    animation: slideUp 0.4s ease 0.12s both;
  }
  .as-table-head {
    background: var(--navy);
    padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .as-table-head-title {
    font-family: 'Playfair Display', serif;
    font-size: 15px; font-weight: 600; color: var(--white);
  }
  .as-table-count {
    font-size: 11px; color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.1); padding: 3px 10px; border-radius: 99px;
  }

  /* Legend */
  .as-legend {
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: var(--fog);
  }
  .as-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; color: var(--dim);
  }
  .as-legend-dot {
    width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
  }

  /* ── ABSENSI TABLE ───────────────────── */
  table.as-table { width: 100%; border-collapse: collapse; }
  .as-table thead tr { background: var(--fog); border-bottom: 2px solid var(--line); }
  .as-table thead th {
    padding: 12px 16px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--dim); text-align: left;
  }
  .as-table thead th.center { text-align: center; }
  .as-table tbody tr { border-bottom: 1px solid var(--line); transition: background 0.15s; }
  .as-table tbody tr:last-child { border-bottom: none; }
  .as-table tbody tr:hover { background: rgba(37,99,235,0.02); }
  .as-table td { padding: 12px 16px; font-size: 13px; color: var(--ink); vertical-align: middle; }
  .as-table td.center { text-align: center; }

  /* Row number */
  .as-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--fog); border: 1px solid var(--line);
    font-size: 11px; font-weight: 700; color: var(--dim);
  }

  /* Avatar + name */
  .as-name-cell { display: flex; align-items: center; gap: 10px; }
  .as-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 13px; font-weight: 700; color: var(--gold);
    flex-shrink: 0;
  }
  .as-name { font-weight: 600; color: var(--ink); font-size: 13px; }

  /* ── STATUS RADIO BUTTONS ────────────── */
  .as-status-group {
    display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  }
  .as-status-label {
    position: relative; cursor: pointer;
  }
  .as-status-label input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0;
  }
  .as-status-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 9px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
    border: 2px solid transparent;
    transition: all 0.15s; cursor: pointer;
    user-select: none;
  }

  /* Hadir */
  .as-status-label[data-status="hadir"] .as-status-pill {
    background: #f0fdf4; border-color: #86efac; color: #16a34a;
  }
  .as-status-label[data-status="hadir"] input:checked ~ .as-status-pill {
    background: #16a34a; border-color: #16a34a; color: white;
    box-shadow: 0 4px 12px rgba(22,163,74,0.35);
  }
  /* Izin */
  .as-status-label[data-status="izin"] .as-status-pill {
    background: #fefce8; border-color: #fde047; color: #a16207;
  }
  .as-status-label[data-status="izin"] input:checked ~ .as-status-pill {
    background: #d97706; border-color: #d97706; color: white;
    box-shadow: 0 4px 12px rgba(217,119,6,0.35);
  }
  /* Sakit */
  .as-status-label[data-status="sakit"] .as-status-pill {
    background: #eff6ff; border-color: #93c5fd; color: #1d4ed8;
  }
  .as-status-label[data-status="sakit"] input:checked ~ .as-status-pill {
    background: #2563eb; border-color: #2563eb; color: white;
    box-shadow: 0 4px 12px rgba(37,99,235,0.35);
  }
  /* Alpha */
  .as-status-label[data-status="alpha"] .as-status-pill {
    background: #fff5f5; border-color: #fca5a5; color: #b91c1c;
  }
  .as-status-label[data-status="alpha"] input:checked ~ .as-status-pill {
    background: #dc2626; border-color: #dc2626; color: white;
    box-shadow: 0 4px 12px rgba(220,38,38,0.35);
  }

  .as-status-pill:hover { transform: scale(1.1); }
  .as-status-label input:checked ~ .as-status-pill { transform: scale(1.05); }

  /* ── ROW HIGHLIGHT WHEN ALL SET ──────── */
  .as-table tbody tr.row-ok { background: rgba(22,163,74,0.03); }

  /* ── SUBMIT AREA ─────────────────────── */
  .as-submit-area {
    padding: 18px 24px;
    border-top: 1px solid var(--line);
    background: var(--fog);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap;
  }
  .as-submit-info { font-size: 12px; color: var(--dim); }
  .as-submit-info strong { color: var(--ink); }

  .as-submit-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 32px; border-radius: 10px;
    background: var(--green); color: var(--white);
    font-size: 14px; font-weight: 700;
    cursor: pointer; border: none;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
  }
  .as-submit-btn:hover:not(:disabled) {
    background: #15803d; transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(22,163,74,0.35);
  }
  .as-submit-btn:disabled {
    background: var(--dim); cursor: not-allowed; opacity: 0.6;
  }
  .as-submit-btn svg { width: 15px; height: 15px; }

  /* Progress bar */
  .as-progress-wrap {
    padding: 0 24px 16px;
    background: var(--fog);
    border-bottom: 1px solid var(--line);
  }
  .as-progress-label {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 600; color: var(--dim);
    margin-bottom: 6px;
  }
  .as-progress-bar {
    height: 5px; background: var(--line); border-radius: 99px; overflow: hidden;
  }
  .as-progress-fill {
    height: 100%; background: var(--green);
    border-radius: 99px; transition: width 0.3s ease;
    width: 0%;
  }

  /* ── ANIMATION ───────────────────────── */
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── RESPONSIVE ──────────────────────── */
  @media (max-width: 600px) {
    .as-hero { padding: 22px 18px; }
    .as-kelas-bar { flex-direction: column; align-items: flex-start; }
    .as-status-pill { width: 32px; height: 32px; font-size: 10px; }
    .as-legend { display: none; }
    .as-submit-area { flex-direction: column; }
    .as-submit-btn { width: 100%; justify-content: center; }
  }
</style>
@endpush

@section('content')
<div class="as-wrap">

  {{-- ══ HERO ══════════════════════════════════ --}}
  <div class="as-hero">
    <div class="as-hero-text">
      <div class="as-hero-eyebrow"><i></i> Kehadiran Harian</div>
      <h1>Absensi Siswa</h1>
      <p>Catat kehadiran siswa berdasarkan kelas yang di-scan</p>
    </div>
  </div>

  {{-- ══ FLASH ═══════════════════════════════════ --}}
  @if(session('success'))
  <div class="as-flash as-flash--success">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
  </div>
  @endif
  @if(session('error'))
  <div class="as-flash as-flash--error">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
    {{ session('error') }}
  </div>
  @endif

  {{-- ══ BELUM SCAN KELAS ════════════════════════ --}}
  @php $kelas = session('kelasNama'); @endphp

  @if(!$kelas)
  <div class="as-nokelas">
    <div class="as-nokelas-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    </div>
    <div class="as-nokelas-title">Belum ada kelas dipilih</div>
    <div class="as-nokelas-sub">Silakan scan barcode kelas terlebih dahulu untuk memulai absensi</div>
    <a href="{{ route('guru.absensi_siswa.scan') }}" class="as-scan-btn">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
      Scan Kelas
    </a>
  </div>
  @php return; @endphp
  @endif

  {{-- ══ KELAS INFO BAR ══════════════════════════ --}}
  <div class="as-kelas-bar">
    <div class="as-kelas-bar-left">
      <div class="as-kelas-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      </div>
      <div>
        <div class="as-kelas-label">Kelas Aktif</div>
        <div class="as-kelas-name">{{ $kelas }}</div>
      </div>
    </div>
    <a href="{{ route('guru.absensi_siswa.reset') }}" class="as-ganti-btn">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.7"/></svg>
      Ganti Kelas
    </a>
  </div>

  {{-- ══ ABSENSI TABLE CARD ═══════════════════════ --}}
  <div class="as-table-card">
    <div class="as-table-head">
      <div class="as-table-head-title">Daftar Siswa</div>
      <div class="as-table-count" id="count-label">0 / {{ count($siswa) }} terisi</div>
    </div>

    {{-- Legend --}}
    <div class="as-legend">
      <div class="as-legend-item"><div class="as-legend-dot" style="background:#16a34a;"></div> H — Hadir</div>
      <div class="as-legend-item"><div class="as-legend-dot" style="background:#d97706;"></div> I — Izin</div>
      <div class="as-legend-item"><div class="as-legend-dot" style="background:#2563eb;"></div> S — Sakit</div>
      <div class="as-legend-item"><div class="as-legend-dot" style="background:#dc2626;"></div> A — Alpha</div>
    </div>

    {{-- Progress --}}
    <div class="as-progress-wrap">
      <div class="as-progress-label">
        <span>Progress Pengisian</span>
        <span id="progress-text">0%</span>
      </div>
      <div class="as-progress-bar">
        <div class="as-progress-fill" id="progress-fill"></div>
      </div>
    </div>

    <form action="{{ route('guru.absensi_siswa.store') }}" method="POST">
      @csrf

      <div style="overflow-x:auto;">
        <table class="as-table">
          <thead>
            <tr>
              <th class="center">No</th>
              <th>Nama Siswa</th>
              <th class="center" style="min-width:180px;">Status Kehadiran</th>
            </tr>
          </thead>
          <tbody>
            @foreach($siswa as $i => $s)
            <tr data-id="{{ $s->id }}">
              <td class="center"><div class="as-no">{{ $i + 1 }}</div></td>
              <td>
                <div class="as-name-cell">
                  <div class="as-avatar">{{ strtoupper(substr($s->nama_siswa, 0, 1)) }}</div>
                  <span class="as-name">{{ $s->nama_siswa }}</span>
                </div>
              </td>
              <td class="center">
                <div class="as-status-group">
                  @foreach(['hadir' => 'H', 'izin' => 'I', 'sakit' => 'S', 'alpha' => 'A'] as $value => $label)
                  <label class="as-status-label" data-status="{{ $value }}">
                    <input type="checkbox"
                           name="status[{{ $s->id }}]"
                           value="{{ $value }}"
                           class="check-siswa-{{ $s->id }}"
                           {{ $value === 'hadir' ? 'checked' : '' }}>
                    <div class="as-status-pill">{{ $label }}</div>
                  </label>
                  @endforeach
                </div>
              </td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      <div class="as-submit-area">
        <div class="as-submit-info">
          Pastikan semua siswa telah diisi statusnya sebelum menyimpan.
          <br><strong id="submit-status">Mengisi absensi...</strong>
        </div>
        <button type="submit" id="btnSubmit" class="as-submit-btn" disabled>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
          Simpan Absensi
        </button>
      </div>
    </form>
  </div>

</div>

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", () => {
  const total    = {{ count($siswa) }};
  const btnSubmit    = document.getElementById("btnSubmit");
  const countLabel   = document.getElementById("count-label");
  const progressFill = document.getElementById("progress-fill");
  const progressText = document.getElementById("progress-text");
  const submitStatus = document.getElementById("submit-status");

  function getFilledCount() {
    let filled = 0;
    document.querySelectorAll("tr[data-id]").forEach(row => {
      const id = row.dataset.id;
      const checked = row.querySelectorAll(".check-siswa-" + id + ":checked");
      if (checked.length > 0) filled++;
    });
    return filled;
  }

  function update() {
    const filled = getFilledCount();
    const pct = total > 0 ? Math.round((filled / total) * 100) : 0;

    countLabel.textContent   = filled + " / " + total + " terisi";
    progressFill.style.width = pct + "%";
    progressText.textContent = pct + "%";

    const allDone = filled === total;
    btnSubmit.disabled = !allDone;

    submitStatus.textContent = allDone
      ? "Semua siswa telah diisi — siap disimpan."
      : (total - filled) + " siswa belum diisi.";

    // Highlight completed rows
    document.querySelectorAll("tr[data-id]").forEach(row => {
      const id = row.dataset.id;
      const checked = row.querySelectorAll(".check-siswa-" + id + ":checked");
      row.classList.toggle("row-ok", checked.length > 0);
    });
  }

  // Attach listeners — enforce single-select behaviour
  document.querySelectorAll("tr[data-id]").forEach(row => {
    const id = row.dataset.id;
    const checkboxes = row.querySelectorAll(".check-siswa-" + id);

    checkboxes.forEach(cb => {
      cb.addEventListener("change", () => {
        if (cb.checked) {
          checkboxes.forEach(other => { if (other !== cb) other.checked = false; });
        }
        update();
      });
    });
  });

  update();
});
</script>
@endpush
@endsection