@extends('layouts.main')

@section('css')
  <!-- Include Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

  <style>
    /* =========================================
       1. STYLING JUDUL MODERN (CENTER & JURUSAN)
       ========================================= */
    .header-container-modern {
      background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
      border-radius: 1rem;
      padding: 1.5rem 1rem;
    }
    .header-title-modern {
      font-weight: 800;
      font-size: 1.8rem;
      color: #1e293b;
      letter-spacing: -0.5px;
    }
    .header-subtitle-modern {
      font-size: 0.9rem;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }
    .text-gradient-excel {
      background: linear-gradient(135deg, #107c41 0%, #22c55e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 800;
    }
    
    /* Badge Jurusan (TBSM, TKJ, Farmasi) - Diperbesar */
    .jurusan-badge-container {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .jurusan-pill {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #1e293b;
      font-size: 0.9rem;
      font-weight: 700;
      padding: 0.45rem 1.2rem;
      border-radius: 50rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.04);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.25s ease;
    }
    .jurusan-pill i {
      font-size: 1.1rem;
    }
    .jurusan-pill:hover {
      transform: translateY(-3px);
      border-color: #107c41;
      box-shadow: 0 6px 15px rgba(16, 124, 65, 0.15);
    }

    /* =========================================
       2. STYLING CARD & LAYOUT
       ========================================= */
    .card-modern {
      border: none;
      box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
      border-radius: 1.25rem;
      background-color: #ffffff;
      overflow: hidden;
      animation: fadeIn 0.5s ease-out forwards;
    }

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

    /* =========================================
       3. STYLING TOMBOL FILTER
       ========================================= */
    .btn-filter-modern {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color: #ffffff;
      border: none;
      border-radius: 0.5rem;
      padding: 0.6rem 1.25rem;
      font-weight: 600;
      font-size: 0.85rem;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .btn-filter-modern:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
      color: #ffffff;
    }

    /* =========================================
       4. CUSTOM DATATABLES & TABEL (HIJAU EXCEL)
       ========================================= */
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
      border: 1px solid #cbd5e1;
      border-radius: 0.5rem;
      padding: 0.4rem 0.75rem;
      font-size: 0.875rem;
      outline: none;
      transition: all 0.3s ease;
      background-color: #f8fafc;
    }
    .dataTables_wrapper .dataTables_filter input:focus,
    .dataTables_wrapper .dataTables_length select:focus {
      border-color: #107c41;
      box-shadow: 0 0 0 3px rgba(16, 124, 65, 0.15);
      background-color: #ffffff;
    }

    .table-excel-header { 
      background: linear-gradient(135deg, #107c41 0%, #1da85f 100%) !important; 
      color: #ffffff !important; 
    }
    
    .table th { 
      font-weight: 700; 
      text-transform: uppercase; 
      font-size: 0.75rem; 
      letter-spacing: 0.05em; 
      vertical-align: middle !important; 
      border: none !important; 
      padding: 1rem 0.75rem !important;
    }
    
    .table td { 
      vertical-align: middle !important; 
      border-color: #f1f5f9 !important; 
      font-size: 0.9rem;
      padding: 0.85rem 0.75rem !important;
    }
    
    .table-hover tbody tr { 
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
    }
    .table-hover tbody tr:hover { 
      background-color: #f0fdf4 !important; 
      transform: scale(1.008); 
      box-shadow: 0 6px 15px rgba(16, 124, 65, 0.08); 
      z-index: 10;
      position: relative;
      border-radius: 0.5rem;
    }
    .table-hover tbody tr:hover td {
      border-color: transparent !important;
    }

    /* =========================================
       5. STYLING BADGE & WARNA DINAMIS PER TINGKAT
       ========================================= */
    .badge-kelas {
      background: transparent;
      color: #1e293b;
      font-weight: 700;
      font-size: 0.95rem;
      padding: 0;
      display: inline-flex;
      align-items: center;
    }
    .badge-kelas::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 18px;
      border-radius: 4px;
      margin-right: 8px;
      background: #cbd5e1;
    }
    .badge-kelas.tingkat-10::before { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
    .badge-kelas.tingkat-11::before { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); }
    .badge-kelas.tingkat-12::before { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); }

    .badge-tingkat, .badge-jumlah {
      font-weight: 700;
      padding: 0.35rem 0.75rem;
      border-radius: 6px;
      font-size: 0.8rem;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    /* Tingkat 10 - Hijau */
    .badge-tingkat.tingkat-10-badge, .badge-jumlah.tingkat-10-badge {
      background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important;
    }
    /* Tingkat 11 - Oranye */
    .badge-tingkat.tingkat-11-badge, .badge-jumlah.tingkat-11-badge {
      background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important;
    }
    /* Tingkat 12 - Biru */
    .badge-tingkat.tingkat-12-badge, .badge-jumlah.tingkat-12-badge {
      background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important;
    }

    /* =========================================
       6. STYLING TOMBOL AKSI (WRAPPER TINGKAT)
       ========================================= */
    .wrapper-tingkat-10 a, .wrapper-tingkat-10 button, .wrapper-tingkat-10 .btn {
      background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
      color: #ffffff !important;
      border-radius: 50rem !important;
      padding: 0.4rem 1.1rem !important;
      border: none !important;
      font-weight: 700 !important;
      font-size: 0.8rem !important;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.4rem !important;
      text-decoration: none !important;
    }
    .wrapper-tingkat-10 a:hover, .wrapper-tingkat-10 button:hover {
      background: linear-gradient(135deg, #059669 0%, #065f46 100%) !important;
      color: #ffffff !important;
    }

    .wrapper-tingkat-11 a, .wrapper-tingkat-11 button, .wrapper-tingkat-11 .btn {
      background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
      color: #ffffff !important;
      border-radius: 50rem !important;
      padding: 0.4rem 1.1rem !important;
      border: none !important;
      font-weight: 700 !important;
      font-size: 0.8rem !important;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.4rem !important;
      text-decoration: none !important;
    }
    .wrapper-tingkat-11 a:hover, .wrapper-tingkat-11 button:hover {
      background: linear-gradient(135deg, #d97706 0%, #c2410c 100%) !important;
      color: #ffffff !important;
    }

    .wrapper-tingkat-12 a, .wrapper-tingkat-12 button, .wrapper-tingkat-12 .btn {
      background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
      color: #ffffff !important;
      border-radius: 50rem !important;
      padding: 0.4rem 1.1rem !important;
      border: none !important;
      font-weight: 700 !important;
      font-size: 0.8rem !important;
      box-shadow: 0 4px 12px rgba(0, 114, 255, 0.3) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.4rem !important;
      text-decoration: none !important;
    }
    .wrapper-tingkat-12 a:hover, .wrapper-tingkat-12 button:hover {
      background: linear-gradient(135deg, #00b4eb 0%, #0063e0 100%) !important;
      color: #ffffff !important;
    }

    /* =========================================
       7. STYLING EMPTY STATE
       ========================================= */
    .empty-state-modern {
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      border: 2px dashed #cbd5e1;
      border-radius: 1rem;
      padding: 4rem 2rem;
      text-align: center;
      color: #64748b;
    }
  </style>
@endsection

@section('content')

{{-- Header Modern Center dengan Jurusan --}}
<div class="content-header py-4">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-md-10 text-center header-container-modern">
        <h3 class="m-0 header-title-modern">
          Data <span class="text-gradient-excel">Leger Rombel</span>
        </h3>
        <div class="header-subtitle-modern mt-2">
          <i class="fas fa-school text-success me-1"></i> SMK INDUSTRI NASIONAL 1
        </div>
        <!-- Ikon Tiga Jurusan (TBSM, TKJ, Farmasi) -->
        <div class="jurusan-badge-container mt-3">
          <span class="jurusan-pill"><i class="fas fa-motorcycle text-danger"></i> TBSM</span>
          <span class="jurusan-pill"><i class="fas fa-network-wired text-primary"></i> TKJ</span>
          <span class="jurusan-pill"><i class="fas fa-pills text-success"></i> Farmasi</span>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- Content --}}
<section class="content pb-4">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="card card-modern">
          @can('admin')
            <div class="card-header bg-transparent border-0 px-4 pt-4 pb-0 d-flex justify-content-end">
              <button class="btn-filter-modern" data-toggle="modal" data-target="#modal-filter">
                <i class="bi bi-funnel-fill"></i>
                Filter Data
              </button>
            </div>
          @endcan
          
          <div class="card-body px-4 pb-4 pt-3">
            @if ($kelas->count() < 1)
              <div class="empty-state-modern mt-3">
                <i class="bi bi-folder2-open fs-1 text-muted mb-3 d-block"></i>
                <h5 class="fw-bold text-dark mb-2">Data Rombel Kosong</h5>
                <p class="mb-0">Belum ada data leger Rombel yang tersedia untuk ditampilkan.</p>
              </div>
            @else
              <div class="table-responsive" style="overflow-x: visible;">
                <table id="myTable" class="table table-hover align-middle mb-0 w-100">
                  <thead>
                    <tr class="table-excel-header {{ Auth::user()->dark_mode == '1' ? 'bg-light text-dark' : '' }}">
                      <th scope="col" class="text-center" style="width: 60px; border-top-left-radius: 0.75rem;">NO.</th>
                      <th scope="col">Rombel</th>
                      <th scope="col">WALI KELAS</th>
                      <th scope="col" class="text-center">Level</th>
                      <th scope="col" class="text-center">Peserta Didik</th>
                      <th scope="col" class="text-center" style="width: 150px; border-top-right-radius: 0.75rem;">Cetak</th>
                    </tr>
                  </thead>
                </table>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@include('pages.leger._filter')

@endsection

@section('js')
  <!-- CDN SweetAlert2 untuk Popup -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  
  <script>
    document.addEventListener("DOMContentLoaded", function() {
        Swal.fire({
            title: '<strong>Pesan Penting</strong>',
            icon: 'info',
            iconColor: '#107c41',
            html: `
                <div style="font-size: 1.15rem; margin-top: 10px; margin-bottom: 20px; color: #334155; font-weight: 500;">
                    Silakan Cetak Rapot dengan teliti dan benar.
                </div>
                <hr style="border-color: #e2e8f0; margin: 15px 0;">
                <div style="font-size: 0.85rem; color: #64748b; font-weight: 700; text-align: right;">
                    <i class="bi bi-person-badge-fill me-1"></i> by adminsmkindustrinasional1
                </div>
            `,
            confirmButtonText: '<i class="bi bi-check-circle-fill me-1"></i> Siap, Mengerti!',
            confirmButtonColor: '#107c41',
            background: '#ffffff',
            backdrop: `rgba(15, 23, 42, 0.85)`,
            allowOutsideClick: false,
            allowEscapeKey: false
        });
    });
  </script>

  @include('partials.toast2')
  @include('pages.leger.script')
@endsection