@extends('layouts.main')

@section('css')
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  body, .content, h1, h2, h3, h4, h5, h6, th, td, span, label {
    font-family: 'Inter', sans-serif !important;
  }

  .card {
    border: none;
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    background: #ffffff;
  }
  .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding: 1.75rem;
  }
  
  .page-header-wrapper {
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 50%, #06b6d4 100%);
    color: #ffffff;
    padding: 2.25rem 2rem;
    border-radius: 1.25rem;
    margin-bottom: 1.75rem;
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .back-btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 0.6rem 1.25rem;
    border-radius: 50rem;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  .back-btn-modern:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-2px);
  }

  .info-grid-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-left: 6px solid #4f46e5;
    border-radius: 1rem;
    padding: 1.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
  }
  .info-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    color: #64748b;
  }
  .info-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
  }

  /* KEPALA TABEL GRADASI WARNA CERAH */
  .table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
  }
  .table thead th {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 1.15rem 1rem !important;
  }
  .table thead th:first-child {
    border-top-left-radius: 0.85rem;
    border-bottom-left-radius: 0.85rem;
  }
  .table thead th:last-child {
    border-top-right-radius: 0.85rem;
    border-bottom-right-radius: 0.85rem;
  }

  /* BARIS DATA TABEL MENJADI KARTU COLORFUL & BERKELAS */
  .table tbody tr {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease-in-out;
    border-left: 5px solid #3b82f6;
  }
  .table tbody tr:nth-child(even) {
    border-left-color: #8b5cf6;
  }
  .table tbody tr:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15) !important;
    background: #ffffff !important;
    border-left-color: #10b981;
  }
  .table tbody td {
    padding: 1.25rem 1rem !important;
    vertical-align: middle !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    font-size: 0.925rem;
    font-weight: 500;
  }

  /* KOLOM NOMOR (NO.) DENGAN TEMA UNGU VIOLET ELEGAN YANG NYAMBUNG */
  .table tbody td:first-child {
    border-left: 1px solid #f1f5f9;
    border-top-left-radius: 0.85rem;
    border-bottom-left-radius: 0.85rem;
    font-weight: 800;
    color: #6d28d9 !important; /* Teks ungu violet tegas */
    text-align: center;
    background: linear-gradient(135deg, rgba(237, 233, 254, 0.9), rgba(221, 214, 254, 0.6)) !important; /* Background ungu lembut */
  }

  .table tbody td:last-child {
    border-right: 1px solid #f1f5f9 !important;
    border-top-right-radius: 0.85rem;
    border-bottom-right-radius: 0.85rem;
  }

  /* Textarea / Input Catatan Modern */
  .modern-textarea-wrapper {
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    transition: all 0.2s ease-in-out;
    background-color: #ffffff;
  }
  .modern-textarea-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
  }
  .modern-textarea-wrapper textarea {
    font-size: 0.9rem;
    color: #1e293b;
    border: none;
  }

  .card-footer {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
  }
  .btn-perbarui {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 50rem;
    padding: 0.75rem 2.25rem;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
    transition: all 0.2s ease-in-out;
    color: white;
  }
  .btn-perbarui:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
    color: white;
  }

  .empty-state {
    padding: 4rem 1rem;
    text-align: center;
    color: #64748b;
  }
  .empty-state i {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #cbd5e1;
  }
</style>
@endsection

@section('content')

{{-- Header Modern Banner Bergradasi --}}
<div class="content-header pb-0">
  <div class="container-fluid">
    <div class="page-header-wrapper">
      <div>
        <h2 class="m-0 fw-bold text-white d-flex align-items-center gap-2" style="font-size: 1.75rem;">
          <i class="fas fa-clipboard-list text-warning"></i> Kelola Catatan Wali Kelas
        </h2>
        <p class="text-white-50 mb-0 mt-1" style="font-size: 0.95rem;">Input dan perbarui catatan perkembangan siswa secara komprehensif dan interaktif.</p>
      </div>
      <div>
        <a href="#" class="back-btn-modern shadow-sm" onclick="history.back()">
          <i class="fas fa-arrow-left"></i> Kembali
        </a>
      </div>
    </div>
  </div>
</div>

{{-- Content --}}
<section class="content pb-5">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <form action="{{ route('catatanwalas.update', $kelas->id) }}" method="POST" id="form-update-catatanwalas">
          @csrf
          @method('PUT')

          <div class="card">
            <div class="card-header border-0 pb-0">
              <div class="info-grid-card shadow-sm">
                <div class="info-item">
                  <span class="info-label"><i class="fas fa-door-open text-primary me-1"></i> Kelas</span>
                  <span class="info-value text-primary fs-4">{{ $kelas->name }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label"><i class="fas fa-user-tie text-success me-1"></i> Wali Kelas</span>
                  <span class="info-value text-dark">{{ $kelas->wali_kelas() }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label"><i class="fas fa-calendar-alt text-warning me-1"></i> Tahun Pelajaran</span>
                  <div>
                    <span class="badge px-3 py-2 rounded-pill text-white shadow-sm" style="background: linear-gradient(135deg, #4f46e5, #3b82f6) !important; font-size: 0.85rem; font-weight: 600;">
                      <i class="fas fa-clock me-1"></i> {{ $kelas->tapel->tahun_pelajaran() }} (Semester {{ $kelas->tapel->semester }})
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="card-body px-4 pb-4 mt-3">
              @if ($siswa->count() < 1)
                <div class="empty-state">
                  <i class="fas fa-user-slash text-warning"></i>
                  <h4 class="fw-bold text-secondary">Data Siswa Masih Kosong</h4>
                  <p class="text-sm text-muted mb-0">Belum ada siswa yang terdaftar di rombongan belajar ini.</p>
                </div>
              @else
                <div class="table-responsive">
                  <table id="myTableShow" class="table table-hover mb-0 align-middle">
                    <thead>
                    <tr>
                      <th scope="col">No.</th>
                      <th scope="col">Nama</th>
                      <th scope="col">NIS</th>
                      <th scope="col">L/P</th>
                      <th scope="col">Catatan</th>
                      @if ($kelas->tapel->semester == 2)
                        <th scope="col">Naik Tingkat</th>
                      @endif
                    </tr>
                    </thead>
                  </table>
                </div>
              @endif
            </div>

            @if ($siswa->count() >= 1)
              <div class="card-footer">
                <div class="form-check d-flex align-items-center gap-2">
                  <input type="hidden" name="kelas_id" id="kelas_id" value="{{ $kelas->id }}">
                  <input type="checkbox" class="form-check-input mt-0" id="update-confirm" required style="width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: #10b981;">
                  <label class="form-check-label fw-semibold text-secondary mb-0" for="update-confirm" style="cursor: pointer; font-size: 0.95rem;"> 
                     Simpan catatan Rapor Peserta Didik
                  </label>
                </div>
                <button type="submit" class="btn btn-perbarui" id="update-button">
                  <i class="fas fa-save me-2"></i> UPDATE
                </button>
              </div>
            @endif
          </div>

        </form>
      </div>
    </div>
  </div>
</section>

@endsection

@section('js')
@include('partials.toast2')
@if ($kelas->tapel->semester == 1)
  @include('pages.catatanwalas._scriptshow1')
@else
  @include('pages.catatanwalas._scriptshow2')
@endif
@endsection