@extends('layouts.main')

@section('css')
<style>
  /* =========================================
     1. STYLING CARD & TABEL UTAMA
     ========================================= */
  .card {
    border: none;
    box-shadow: 0 0.5rem 1.25rem rgba(18, 38, 63, 0.04);
    border-radius: 0.75rem;
  }
  .table-hover tbody tr {
    transition: all 0.2s ease-in-out;
  }
  .table-hover tbody tr:hover {
    background-color: rgba(14, 165, 233, 0.04);
    transform: scale(1.002);
  }

  /* =========================================
     2. STYLING HEADER JUDUL MODERN (CENTER & JURUSAN LEBIH BESAR)
     ========================================= */
  .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-blue {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  /* Badge Jurusan (Diperbesar Ukurannya) */
  .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; /* Diperbesar dari 0.75rem */
    font-weight: 700;
    padding: 0.45rem 1.2rem; /* Diperbesar padding-nya */
    border-radius: 50rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Jarak ikon dan teks lebih lega */
    transition: all 0.25s ease;
  }
  .jurusan-pill i {
    font-size: 1.1rem; /* Ukuran ikon diperbesar */
  }
  .jurusan-pill:hover {
    transform: translateY(-3px);
    border-color: #0ea5e9;
    box-shadow: 0 6px 15px rgba(14, 165, 233, 0.15);
  }

  /* =========================================
     3. STYLING HEADER TABEL MODERN
     ========================================= */
  .table th {
    text-transform: uppercase;
    font-weight: 700 !important;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    vertical-align: middle !important;
    border-top: none !important;
  }
  .thead-vibrant-modern {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%) !important;
    border-bottom: 3px solid #1d4ed8 !important;
  }
  .thead-vibrant-modern th {
    color: #ffffff !important; 
    border-bottom: none !important;
  }

  /* =========================================
     4. STYLING BADGE & NAMA KELAS DINAMIS
     ========================================= */
  .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%); }

  /* =========================================
     5. STYLING BADGE "TINGKAT" & "JUMLAH SISWA"
     ========================================= */
  .badge-tingkat {
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: inline-block;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  .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;
  }

  .badge-tingkat.tingkat-10-badge { background: #f0fdf4 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
  .badge-jumlah.tingkat-10-badge { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); color: #15803d; }

  .badge-tingkat.tingkat-11-badge { background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
  .badge-jumlah.tingkat-11-badge { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #b45309; }

  .badge-tingkat.tingkat-12-badge { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
  .badge-jumlah.tingkat-12-badge { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #1d4ed8; }

  /* =========================================
     6. STYLING TOMBOL "PESERTA DIDIK" (AKSI DINAMIS)
     ========================================= */
  .btn-lihat-kelas {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); 
    border: none;
    border-radius: 50rem;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.5rem 1.1rem;
    letter-spacing: 0.5px;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 114, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
  }
  .btn-lihat-kelas:hover { 
    transform: translateY(-3px); 
    background: linear-gradient(135deg, #00b4eb 0%, #0063e0 100%);
    box-shadow: 0 8px 20px rgba(0, 114, 255, 0.45);
    color: #ffffff !important; 
  }
  .btn-lihat-kelas i { font-size: 0.9rem; transition: transform 0.3s ease; }
  .btn-lihat-kelas:hover i { transform: scale(1.15); }

  .wrapper-tingkat-10 .btn-lihat-kelas { background: linear-gradient(135deg, #10b981 0%, #047857 100%); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
  .wrapper-tingkat-10 .btn-lihat-kelas:hover { background: linear-gradient(135deg, #059669 0%, #065f46 100%); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.45); }

  .wrapper-tingkat-11 .btn-lihat-kelas { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
  .wrapper-tingkat-11 .btn-lihat-kelas:hover { background: linear-gradient(135deg, #d97706 0%, #c2410c 100%); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45); }

  /* =========================================
     7. KUSTOMISASI INPUT DATATABLES
     ========================================= */
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.3rem 0.75rem;
    outline: none;
    transition: all 0.3s ease;
  }
  .dataTables_wrapper .dataTables_filter input:focus,
  .dataTables_wrapper .dataTables_length select:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
  }
</style>
@endsection

@section('content')

{{-- Header Modern Center dengan Jurusan (Diperbesar) --}}
<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">
          Cetak Raport <span class="text-gradient-blue">per Rombel</span>
        </h3>
        <div class="header-subtitle-modern mt-2">
          <i class="fas fa-school text-info me-1"></i> SMK INDUSTRI NASIONAL 1
        </div>
        <!-- Ikon Tiga Jurusan (TBSM, TKJ, Farmasi) yang Lebih Besar & Jelas -->
        <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-12">
        <div class="card shadow-sm">
          <div class="card-header bg-white border-bottom py-3 px-4 d-flex justify-content-end align-items-center">
            {{-- Tombol Filter --}}
            <button class="btn btn-sm btn-info text-white shadow-sm" type="button" data-toggle="collapse" data-target="#filterCard" aria-expanded="false" style="border-radius: 6px; font-weight: 600;">
              <i class="fas fa-filter me-1"></i> Filter Data
            </button>
          </div>
          
          <div class="card-body px-4 pb-4 pt-3">
            <div class="table-responsive">
              <table id="myTable" class="table table-hover align-middle mb-0 w-100">
                <thead class="{{ Auth::user()->dark_mode == '1' ? 'table-light' : 'thead-vibrant-modern' }}">
                  <tr>
                    <th scope="col" class="py-3" style="width: 5%;">Nomor</th>
                    <th scope="col" class="py-3" style="width: 25%;">Rombel</th>
                    <th scope="col" class="py-3" style="width: 30%;">Wali Kelas</th>
                    <th scope="col" class="py-3 text-center" style="width: 15%;">Level</th>
                    <th scope="col" class="py-3 text-center" style="width: 10%;">Total Peserta didik</th>
                    <th scope="col" class="py-3 text-center" style="width: 15%;">Cetak</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@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: '#0072ff', 
            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="fas fa-user-shield me-1"></i> by adminsmkindustrinasional1
                </div>
            `,
            confirmButtonText: '<i class="fas fa-check-circle me-1"></i> Siap, Mengerti!',
            confirmButtonColor: '#0072ff', 
            background: '#ffffff',
            backdrop: `rgba(15, 23, 42, 0.85)`, 
            allowOutsideClick: false, 
            allowEscapeKey: false
        });
    });

    $(document).ready(function(){$('#myTable').DataTable({
        processing: true,
        serverSide: true,
        ordering: false,
        ajax: {
          url: '{{ route("cetakrapor.index") }}',
        },
        columns: [
          {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: true, searchable: false, className: 'ps-3 text-muted fw-semibold'},
          
          {
            data: 'name', 
            name: 'name',
            render: function(data, type, row) {
              let cleanData = data.replace(/<\/?[^>]+(>|$)/g, "").trim();
              let textUpper = cleanData.toUpperCase();
              let colorClass = '';
              
              if (textUpper.includes('XII')) {
                colorClass = 'tingkat-12';
              } else if (textUpper.includes('XI')) {
                colorClass = 'tingkat-11';
              } else if (textUpper.includes('X')) {
                colorClass = 'tingkat-10';
              }

              return `<span class="badge-kelas ${colorClass}">${cleanData}</span>`;
            }
          },
          
          {data: 'guru.name', name: 'guru.name', className: 'fw-semibold text-dark'},
          
          {
            data: 'tingkat.angka', 
            name: 'tingkat.angka', 
            className: 'text-center',
            render: function(data, type, row) {
              let cleanTingkat = String(data).replace(/<\/?[^>]+(>|$)/g, "").trim();
              let tingkatUpper = cleanTingkat.toUpperCase();
              let tingkatClass = '';
              
              if (tingkatUpper.includes('12') || tingkatUpper.includes('XII')) {
                tingkatClass = 'tingkat-12-badge';
              } else if (tingkatUpper.includes('11') || tingkatUpper.includes('XI')) {
                tingkatClass = 'tingkat-11-badge';
              } else if (tingkatUpper.includes('10') || tingkatUpper.includes('X')) {
                tingkatClass = 'tingkat-10-badge';
              }
              
              let displayLabel = cleanTingkat;
              if (!tingkatUpper.includes('TINGKAT')) {
                displayLabel = 'Tingkat ' + cleanTingkat;
              }
              
              return `<span class="badge-tingkat ${tingkatClass}">${displayLabel}</span>`;
            }
          },
          
          {
            data: 'siswa.count', 
            name: 'siswa.count', 
            className: 'text-center',
            render: function(data, type, row) {
              let angkaSiswa = String(data).replace(/[^0-9]/g, ""); 
              let className = String(row.name).replace(/<\/?[^>]+(>|$)/g, "").trim().toUpperCase();
              let colorClass = '';
              
              if (className.includes('XII')) {
                colorClass = 'tingkat-12-badge';
              } else if (className.includes('XI')) {
                colorClass = 'tingkat-11-badge';
              } else if (className.includes('X')) {
                colorClass = 'tingkat-10-badge';
              }

              return `<span class="badge-jumlah ${colorClass}"><i class="fas fa-user-graduate me-1" style="opacity: 0.8;"></i> ${angkaSiswa} Siswa</span>`;
            }
          },
          
          {
            data: 'aksi', 
            name: 'aksi', 
            className: 'text-center',
            render: function(data, type, row) {
              if (!data) return '';

              let className = String(row.name || '').replace(/<\/?[^>]+(>|$)/g, "").trim().toUpperCase();
              let wrapperClass = 'wrapper-tingkat-12';
              
              if (className.includes('XII')) {
                wrapperClass = 'wrapper-tingkat-12';
              } else if (className.includes('XI')) {
                wrapperClass = 'wrapper-tingkat-11'; 
              } else if (className.includes('X')) {
                wrapperClass = 'wrapper-tingkat-10'; 
              }

              return `<div class="${wrapperClass}">${data}</div>`;
            }
          },
        ],
      });
    });
  </script>
@endsection