@extends('layouts.guru.app')
@section('title', 'Input Nilai — '.$kelasDipilih->nama_kelas)

@push('styles')
<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&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;
    --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  }

  *, *::before, *::after { box-sizing:border-box; }
  .nv-wrap { font-family:'DM Sans',sans-serif; display:flex; flex-direction:column; gap:28px; }

  /* ── Hero ── */
  .nv-hero {
    position:relative; background:var(--navy); border-radius:var(--radius-xl);
    padding:36px 44px; overflow:hidden;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    animation:slideUp .4s ease both;
  }
  .nv-hero::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(37,99,235,.18) 0%,transparent 70%),
               radial-gradient(ellipse 40% 60% at 15% 20%,rgba(201,162,74,.1) 0%,transparent 60%);
    pointer-events:none;
  }
  .nv-hero::after {
    content:''; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:36px 36px; pointer-events:none;
  }
  .nv-hero-left { position:relative; z-index:1; }
  .nv-eyebrow {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(201,162,74,.15); border:1px solid rgba(201,162,74,.3);
    border-radius:99px; padding:4px 14px;
    font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
    color:var(--gold2); margin-bottom:14px;
  }
  .nv-eyebrow i { width:5px; height:5px; border-radius:50%; background:var(--gold); display:inline-block; flex-shrink:0; }
  .nv-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(20px,3.5vw,30px); font-weight:700; color:var(--white); line-height:1.15; margin:0 0 6px; }
  .nv-hero-sub { font-size:13px; color:rgba(255,255,255,.42); font-weight:300; margin:0; }
  .nv-hero-right { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
  .nv-hero-label { font-size:10px; color:rgba(255,255,255,.38); letter-spacing:1px; text-transform:uppercase; }
  .nv-hero-name { font-size:16px; font-weight:700; color:var(--white); font-family:'Playfair Display',serif; }
  .nv-back-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 15px; border-radius:var(--radius-sm);
    background:rgba(255,255,255,.12); color:rgba(255,255,255,.85);
    font-size:12px; font-weight:600; text-decoration:none;
    transition:background .18s; border:1px solid rgba(255,255,255,.1);
  }
  .nv-back-btn:hover { background:rgba(255,255,255,.22); }

  /* ── Flash ── */
  .nv-flash {
    display:flex; align-items:center; gap:10px; padding:13px 18px;
    border-radius:var(--radius-md); font-size:13px; font-weight:500;
    background:#f0fdf4; border:1px solid #86efac; color:#15803d;
    animation:slideUp .4s ease both;
  }
  .nv-flash svg { width:16px; height:16px; flex-shrink:0; }
  .nv-flash-close { margin-left:auto; cursor:pointer; opacity:.55; transition:opacity .15s; }
  .nv-flash-close:hover { opacity:1; }

  /* ── Stats ── */
  .nv-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; animation:slideUp .4s ease .05s both; }
  .nv-stat {
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:18px 20px; display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 1px 6px rgba(0,0,0,.04);
  }
  .nv-stat-num { font-size:26px; font-weight:700; font-family:'Playfair Display',serif; line-height:1; margin-bottom:5px; }
  .nv-stat-lbl { font-size:11px; font-weight:600; color:var(--dim); letter-spacing:.5px; text-transform:uppercase; }
  .nv-stat-icon { width:42px; height:42px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .nv-stat-icon svg { width:20px; height:20px; }
  .nv-stat--green .nv-stat-num { color:var(--green); }
  .nv-stat--green .nv-stat-icon { background:#f0fdf4; color:var(--green); }
  .nv-stat--blue .nv-stat-num { color:var(--sky); }
  .nv-stat--blue .nv-stat-icon { background:#eff6ff; color:var(--sky); }
  .nv-stat--amber .nv-stat-num { color:#d97706; }
  .nv-stat--amber .nv-stat-icon { background:#fffbeb; color:#d97706; }
  .nv-stat--violet .nv-stat-num { color:#7c3aed; }
  .nv-stat--violet .nv-stat-icon { background:#f5f3ff; color:#7c3aed; }

  /* ── Table card ── */
  .nv-table-card {
    background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:0 1px 8px rgba(0,0,0,.05), 0 4px 24px rgba(0,0,0,.03);
    animation:slideUp .4s ease .1s both;
  }

  /* ── Toolbar ── */
  .nv-table-toolbar {
    background:var(--navy); padding:15px 22px;
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  }
  .nv-table-toolbar-left { display:flex; align-items:center; gap:10px; }
  .nv-toolbar-title { font-family:'Playfair Display',serif; font-size:15px; font-weight:700; color:var(--white); }
  .nv-kelas-badge {
    font-size:10px; font-weight:700; letter-spacing:1px;
    background:rgba(201,162,74,.2); border:1px solid rgba(201,162,74,.4);
    color:var(--gold2); padding:3px 11px; border-radius:99px;
  }
  .nv-toolbar-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

  /* ── Buttons ── */
  .nv-btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 20px; border-radius:var(--radius-sm);
    font-size:13px; font-weight:600; cursor:pointer;
    transition:all .18s; text-decoration:none;
    border:none; font-family:'DM Sans',sans-serif; white-space:nowrap; line-height:1;
  }
  .nv-btn svg { width:13px; height:13px; flex-shrink:0; }
  .nv-btn--gold  { background:var(--gold); color:var(--navy); }
  .nv-btn--gold:hover  { background:var(--gold2); transform:translateY(-1px); box-shadow:0 6px 20px rgba(201,162,74,.35); }
  .nv-btn--green { background:var(--green); color:var(--white); }
  .nv-btn--green:hover { background:#15803d; transform:translateY(-1px); box-shadow:0 6px 20px rgba(22,163,74,.3); }

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

  /* ── Sticky columns ── */
  .sticky-no { position:sticky; left:0; z-index:2; background:var(--fog); width:52px; text-align:center; }
  .sticky-nama { position:sticky; left:52px; z-index:2; background:var(--white); min-width:200px; }
  .nv-table tbody tr:hover .sticky-nama { background:#f8faff; }
  .nv-table thead .sticky-no,
  .nv-table thead .sticky-nama { background:var(--fog); z-index:3; }

  /* ── TP header ── */
  .nv-tp-header {
    cursor:pointer; user-select:none; text-align:center; min-width:72px;
    transition:background .15s; position:relative;
  }
  .nv-tp-header:hover { background:#fee2e2; }
  .nv-tp-header:hover .nv-tp-label { color:var(--red); }
  .nv-tp-header:hover .nv-tp-del { opacity:1; }
  .nv-tp-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); }
  .nv-tp-del { opacity:0; transition:opacity .15s; display:flex; align-items:center; justify-content:center; margin-top:3px; color:var(--red); }

  /* ── Input excel ── */
  .excel-input {
    width:70px; padding:7px 9px; border:1.5px solid var(--line);
    border-radius:var(--radius-sm); font-size:13px; font-weight:500;
    color:var(--ink); background:var(--white); outline:none;
    font-family:'DM Sans',sans-serif; text-align:center;
    transition:border-color .15s, background .15s;
    -moz-appearance:textfield; appearance:textfield;
  }
  .excel-input::-webkit-outer-spin-button,
  .excel-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .excel-input:focus { border-color:var(--sky); background:#f0f7ff; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
  .excel-input::placeholder { color:#c0ccd8; }

  /* ── Row metadata ── */
  .nv-no-circle { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--fog); font-size:12px; font-weight:600; color:var(--dim); margin:0 auto; }
  .nv-avatar { width:34px; height:34px; border-radius:50%; background:var(--navy); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
  .nv-siswa-name { font-weight:600; font-size:13px; color:var(--ink); line-height:1.3; }
  .nv-siswa-nisn { font-size:11px; color:var(--dim); margin-top:1px; }

  /* ── Rata & Grade ── */
  .nv-rata { font-weight:700; font-size:13px; color:var(--ink); }
  .nv-grade { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; font-weight:700; font-size:13px; }
  .nv-grade-A { background:#dcfce7; color:#15803d; }
  .nv-grade-B { background:#dbeafe; color:#1d4ed8; }
  .nv-grade-C { background:#fef9c3; color:#854d0e; }
  .nv-grade-D { background:#fee2e2; color:#b91c1c; }
  .nv-grade-x { background:var(--fog); color:var(--dim); }

  /* ── Table footer ── */
  .nv-table-footer {
    background:var(--fog); border-top:1px solid var(--line);
    padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
    font-size:12px; color:var(--dim); flex-wrap:wrap; gap:8px;
  }
  .nv-table-footer strong { color:var(--ink); }
  kbd { background:var(--line); padding:2px 8px; border-radius:5px; font-size:11px; font-family:monospace; }

  /* ── Toast ── */
  .nv-toast {
    position:fixed; bottom:28px; right:28px; z-index:100;
    background:var(--white); border:1px solid var(--line);
    border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,.14);
    padding:18px 20px; width:320px; max-width:calc(100vw - 40px);
    transform:translateY(20px) scale(.97); opacity:0; pointer-events:none;
    transition:transform .22s ease, opacity .22s ease;
  }
  .nv-toast.show { transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .nv-toast-inner { display:flex; align-items:flex-start; gap:14px; }
  .nv-toast-ico {
    width:38px; height:38px; border-radius:var(--radius-sm);
    background:#fee2e2; color:var(--red); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .nv-toast-ico svg { width:18px; height:18px; }
  .nv-toast-title { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:3px; }
  .nv-toast-sub { font-size:12px; color:var(--dim); line-height:1.5; margin-bottom:12px; }
  .nv-toast-actions { display:flex; gap:8px; }
  .nv-toast-cancel {
    padding:6px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
    background:var(--fog); font-size:12px; font-weight:600; cursor:pointer;
    font-family:'DM Sans',sans-serif; color:var(--ink); transition:background .15s;
  }
  .nv-toast-cancel:hover { background:var(--line); }
  .nv-toast-confirm {
    padding:6px 14px; border-radius:var(--radius-sm); border:none;
    background:var(--red); color:var(--white); font-size:12px; font-weight:600;
    cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .15s;
  }
  .nv-toast-confirm:hover { background:#b91c1c; }

  @keyframes slideUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

  @media(max-width:700px) {
    .nv-hero { flex-direction:column; align-items:flex-start; padding:24px 20px; }
    .nv-hero-right { align-items:flex-start; }
    .nv-stats { grid-template-columns:1fr 1fr; }
    .nv-table-toolbar { flex-direction:column; align-items:flex-start; }
  }
</style>
@endpush

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

  {{-- Hero --}}
  <div class="nv-hero">
    <div class="nv-hero-left">
      <div class="nv-eyebrow"><i></i> Input Nilai</div>
      <h1>{{ $kelasDipilih->nama_kelas }}</h1>
      <p class="nv-hero-sub">{{ $guru->mata_pelajaran ?? 'Semua Mata Pelajaran' }}</p>
    </div>
    <div class="nv-hero-right">
      <div class="nv-hero-label">Guru Pengampu</div>
      <div class="nv-hero-name">{{ $guru->nama_guru }}</div>
      <a href="{{ route('guru.nilai_siswa.index') }}" class="nv-back-btn">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
        Kembali
      </a>
    </div>
  </div>

  {{-- Flash --}}
  @if(session('success'))
  <div class="nv-flash" id="nv-flash">
    <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>
    <span>{{ session('success') }}</span>
    <span class="nv-flash-close" onclick="document.getElementById('nv-flash').remove()">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </span>
  </div>
  @endif

  {{-- Statistik --}}
  <div class="nv-stats">
    <div class="nv-stat nv-stat--green">
      <div>
        <div class="nv-stat-num">{{ $statistik['rata_kelas'] }}</div>
        <div class="nv-stat-lbl">Rata-rata Kelas</div>
      </div>
      <div class="nv-stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg></div>
    </div>
    <div class="nv-stat nv-stat--blue">
      <div>
        <div class="nv-stat-num">{{ $statistik['jumlah_tp'] }}</div>
        <div class="nv-stat-lbl">Jumlah TP</div>
      </div>
      <div class="nv-stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></div>
    </div>
    <div class="nv-stat nv-stat--amber">
      <div>
        <div class="nv-stat-num">{{ $statistik['belum_lengkap'] }}</div>
        <div class="nv-stat-lbl">Belum Lengkap</div>
      </div>
      <div class="nv-stat-icon"><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="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></div>
    </div>
    <div class="nv-stat nv-stat--violet">
      <div>
        <div class="nv-stat-num">{{ $statistik['total_siswa'] }}</div>
        <div class="nv-stat-lbl">Total Siswa</div>
      </div>
      <div class="nv-stat-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>

  {{-- Tabel Nilai --}}
  <div class="nv-table-card">
    <div class="nv-table-toolbar">
      <div class="nv-table-toolbar-left">
        <div class="nv-toolbar-title">Input Nilai</div>
        <span class="nv-kelas-badge">{{ $kelasDipilih->nama_kelas }}</span>
      </div>
      <div class="nv-toolbar-right">
        <form action="{{ route('guru.nilai_siswa.tambahTp') }}" method="POST" style="margin:0">
          @csrf
          <input type="hidden" name="id_kelas" value="{{ $kelasDipilih->id_kelas }}">
          <button type="submit" class="nv-btn nv-btn--gold" style="padding:8px 15px;font-size:12px;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
            Tambah Kolom TP
          </button>
        </form>
        <a href="{{ route('guru.nilai_siswa.export', ['id_kelas' => $kelasDipilih->id_kelas]) }}"
           class="nv-btn nv-btn--gold" style="padding:8px 16px;font-size:12px;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                 stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 10 12 15 17 10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            Export Excel
        </a>
        <button type="submit" form="form-nilai" class="nv-btn nv-btn--green" style="padding:8px 16px;font-size:12px;">
          <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 Nilai
        </button>
      </div>
    </div>

    <form action="{{ route('guru.nilai_siswa.simpan') }}" method="POST" id="form-nilai">
      @csrf
      <input type="hidden" name="id_kelas" value="{{ $kelasDipilih->id_kelas }}">
      <div style="overflow-x:auto;">
        <table class="nv-table">
          <thead>
            <tr>
              <th class="sticky-no">No</th>
              <th class="sticky-nama">Nama Siswa</th>
              @for($tp = 1; $tp <= $jumlahTp; $tp++)
                <th class="nv-tp-header" onclick="konfirmasiHapusTp({{ $tp }}, {{ $kelasDipilih->id_kelas }})" title="Klik untuk hapus TP {{ $tp }}">
                  <div class="nv-tp-label">TP {{ $tp }}</div>
                  <div class="nv-tp-del">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
                  </div>
                </th>
              @endfor
              <th style="text-align:center;min-width:72px;">PTS</th>
              <th style="text-align:center;min-width:72px;">PAS</th>
              <th style="text-align:center;min-width:80px;">Rata-rata</th>
              <th style="text-align:center;min-width:60px;">Grade</th>
            </tr>
          </thead>
          <tbody>
            @foreach($nilaiSiswa as $idx => $nilai)
              @php
                $tpMap = $nilai->tp->keyBy('urutan_tp');
                $tpArr = [];
                for ($i = 1; $i <= $jumlahTp; $i++) $tpArr[$i] = $tpMap->get($i)?->nilai;
                $allAngka = array_filter(array_merge(array_values($tpArr), [$nilai->pts, $nilai->pas]), fn($v) => $v !== null && $v !== '');
                $rata  = count($allAngka) > 0 ? round(array_sum($allAngka) / count($allAngka), 1) : null;
                $grade = $rata !== null ? ($rata >= 90 ? 'A' : ($rata >= 80 ? 'B' : ($rata >= 70 ? 'C' : 'D'))) : null;
                $gradeClass = match($grade) { 'A'=>'nv-grade-A','B'=>'nv-grade-B','C'=>'nv-grade-C','D'=>'nv-grade-D', default=>'nv-grade-x' };
              @endphp
              <tr id="row-{{ $idx }}">
                <td class="sticky-no">
                  <input type="hidden" name="nilai[{{ $idx }}][id_nilai]" value="{{ $nilai->id_nilai }}">
                  <span class="nv-no-circle">{{ $idx + 1 }}</span>
                </td>
                <td class="sticky-nama">
                  <div style="display:flex;align-items:center;gap:10px;">
                    <div class="nv-avatar">{{ strtoupper(substr($nilai->siswa->nama_siswa, 0, 1)) }}</div>
                    <div>
                      <div class="nv-siswa-name">{{ $nilai->siswa->nama_siswa }}</div>
                      <div class="nv-siswa-nisn">{{ $nilai->siswa->nisn ?? '—' }}</div>
                    </div>
                  </div>
                </td>
                @for($tp = 1; $tp <= $jumlahTp; $tp++)
                  <td style="text-align:center;"><input type="number" name="nilai[{{ $idx }}][tp][{{ $tp }}]" value="{{ $tpArr[$tp] ?? '' }}" min="0" max="100" step="0.1" placeholder="—" class="excel-input" data-row="{{ $idx }}"></td>
                @endfor
                <td style="text-align:center;"><input type="number" name="nilai[{{ $idx }}][pts]" value="{{ $nilai->pts ?? '' }}" min="0" max="100" step="0.1" placeholder="—" class="excel-input" data-row="{{ $idx }}"></td>
                <td style="text-align:center;"><input type="number" name="nilai[{{ $idx }}][pas]" value="{{ $nilai->pas ?? '' }}" min="0" max="100" step="0.1" placeholder="—" class="excel-input" data-row="{{ $idx }}"></td>
                <td style="text-align:center;"><span id="rata-{{ $idx }}" class="nv-rata">{{ $rata ?? '—' }}</span></td>
                <td style="text-align:center;"><span id="grade-{{ $idx }}" class="nv-grade {{ $gradeClass }}">{{ $grade ?? '—' }}</span></td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
      <div class="nv-table-footer">
        <span>
          <kbd>Tab</kbd> pindah kanan &nbsp;·&nbsp;
          <kbd>Enter</kbd> pindah bawah &nbsp;·&nbsp;
          Klik header TP untuk hapus kolom
        </span>
        <strong>{{ $nilaiSiswa->count() }} siswa</strong>
      </div>
    </form>
  </div>

</div>

{{-- Form Hapus TP --}}
<form id="form-hapus-tp" action="{{ route('guru.nilai_siswa.hapusTp') }}" method="POST" style="display:none">
  @csrf @method('DELETE')
  <input type="hidden" name="urutan_tp" id="hapus-tp-urutan">
  <input type="hidden" name="id_kelas" id="hapus-tp-kelas">
</form>

{{-- Toast --}}
<div class="nv-toast" id="nv-toast">
  <div class="nv-toast-inner">
    <div class="nv-toast-ico">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
    </div>
    <div style="flex:1">
      <div class="nv-toast-title" id="toast-msg">Hapus kolom TP?</div>
      <div class="nv-toast-sub">Semua nilai di kolom ini akan terhapus permanen</div>
      <div class="nv-toast-actions">
        <button class="nv-toast-cancel" onclick="tutupToast()">Batal</button>
        <button class="nv-toast-confirm" onclick="konfirmasiHapusTpYa()">Hapus Kolom</button>
      </div>
    </div>
  </div>
</div>

<script>
document.querySelectorAll('.excel-input').forEach(input => {
  input.addEventListener('input', () => hitungRata(input.dataset.row));
  input.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      const all = [...document.querySelectorAll('.excel-input')];
      const myPart = this.name.replace(/^nilai\[\d+\]/, '');
      const sameCol = all.filter(i => i.name.replace(/^nilai\[\d+\]/, '') === myPart);
      const ci = sameCol.indexOf(this);
      if (sameCol[ci + 1]) sameCol[ci + 1].focus();
    }
  });
});

function hitungRata(rowIdx) {
  const row = document.getElementById('row-' + rowIdx);
  if (!row) return;
  const inputs = row.querySelectorAll('.excel-input');
  let sum = 0, count = 0;
  inputs.forEach(i => { const v = parseFloat(i.value); if (!isNaN(v) && i.value.trim() !== '') { sum += v; count++; } });
  const rata = count > 0 ? (sum / count).toFixed(1) : null;
  document.getElementById('rata-' + rowIdx).textContent = rata ?? '—';
  const gradeEl = document.getElementById('grade-' + rowIdx);
  if (rata !== null) {
    const r = parseFloat(rata);
    const g = r >= 90 ? 'A' : r >= 80 ? 'B' : r >= 70 ? 'C' : 'D';
    const c = { A:'nv-grade-A', B:'nv-grade-B', C:'nv-grade-C', D:'nv-grade-D' };
    gradeEl.textContent = g; gradeEl.className = 'nv-grade ' + c[g];
  } else { gradeEl.textContent = '—'; gradeEl.className = 'nv-grade nv-grade-x'; }
}

let _tpUrutan = null, _tpKelas = null;
function konfirmasiHapusTp(urutan, kelas) {
  _tpUrutan = urutan; _tpKelas = kelas;
  document.getElementById('toast-msg').textContent = `Hapus kolom TP ${urutan}?`;
  document.getElementById('nv-toast').classList.add('show');
}
function tutupToast() { document.getElementById('nv-toast').classList.remove('show'); _tpUrutan = null; _tpKelas = null; }
function konfirmasiHapusTpYa() {
  if (!_tpUrutan) return;
  document.getElementById('hapus-tp-urutan').value = _tpUrutan;
  document.getElementById('hapus-tp-kelas').value = _tpKelas;
  document.getElementById('form-hapus-tp').submit();
}
document.addEventListener('click', e => {
  const toast = document.getElementById('nv-toast');
  if (toast.classList.contains('show') && !toast.contains(e.target) && !e.target.closest('.nv-tp-header')) tutupToast();
});
</script>
@endsection