@extends('layouts.main')

@section('css')
<!-- Import Font Poppins untuk Tipografi Modern -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
  /* Menerapkan font Poppins khusus untuk area halaman ini */
  .halaman-modern {
      font-family: 'Poppins', sans-serif;
  }

  /* Kustomisasi Card Modern */
  .card-modern {
      background: #ffffff;
      border: none;
      border-radius: 16px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
      overflow: hidden;
  }

  /* Header Card */
  .card-header-modern {
      background-color: #ffffff;
      border-bottom: 1px solid #f1f5f9;
      padding: 20px 24px;
  }

  /* Kustomisasi Header Tabel dengan Gradasi Berwarna */
  .table-custom-header th {
      background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
      color: #ffffff !important;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.85rem;
      letter-spacing: 0.8px;
      border: none !important;
      padding: 18px 20px !important;
      vertical-align: middle;
  }

  /* Dukungan Dark Mode untuk Tabel */
  .dark-mode-table th {
      background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
      color: #f8f9fa !important;
  }

  /* Styling Baris/Isi Tabel DataTables */
  table.dataTable tbody td {
      padding: 16px 20px !important;
      vertical-align: middle;
      border-bottom: 1px solid #f1f5f9;
      color: #475569;
      font-weight: 500;
      font-size: 0.95rem;
  }

  table.dataTable tbody tr {
      transition: all 0.2s ease;
  }

  table.dataTable tbody tr:hover td {
      background-color: #f8fafc !important;
      color: #1e293b;
  }

  table.dataTable tbody tr:last-child td {
      border-bottom: none !important;
  }

  /* Tombol Filter Data Modern (Gradasi Hijau) */
  .btn-filter-modern {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      border: none;
      border-radius: 50px;
      padding: 8px 20px;
      font-weight: 600;
      font-size: 0.85rem;
      box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
      transition: all 0.3s ease;
  }

  .btn-filter-modern:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
      color: white;
  }

  /* Ikon Berlatar Belakang Lembut untuk Judul */
  .icon-soft-bg {
      background: #e0e7ff;
      color: #4f46e5;
      width: 45px;
      height: 45px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      margin-right: 12px;
  }
</style>
@endsection

@section('content')
<div class="halaman-modern">
  {{-- Header Halaman --}}
  <div class="content-header pt-4 pb-3">
    <div class="container-fluid">
      <div class="row align-items-center">
        <div class="col-sm-6 d-flex align-items-center">
          <div class="icon-soft-bg shadow-sm">
            <i class="fas fa-clipboard-list fa-lg"></i>
          </div>
          <div>
            <h3 class="m-0 fw-bold text-dark" style="letter-spacing: -0.5px;">Rekap Absensi/Presensi</h3>
            <span class="text-muted small">Kelola dan pantau data absensi seluruh kelas</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Content --}}
  <section class="content pb-4">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <!-- Card Modern Tanpa Border Kaku -->
          <div class="card-modern">
            
            <div class="card-header-modern d-flex justify-content-between align-items-center">
              <h3 class="card-title fw-bold text-secondary mb-0" style="font-size: 1.1rem; color: #334155 !important;">
                <i class="fas fa-table text-primary me-2"></i> Data Kelas & Siswa
              </h3>
              
              @can('admin')
                <div class="card-tools m-0">
                  <button class="btn-filter-modern d-flex align-items-center gap-2" data-toggle="modal" data-target="#modal-filter">
                    <i class="fas fa-sliders-h"></i> Filter Data
                  </button>
                </div>
              @endcan
            </div>

            <div class="card-body p-0">
              @if ($kelas->count() < 1)
                {{-- Empty State Berwarna & Modern --}}
                <div class="d-flex flex-column justify-content-center align-items-center py-5 m-4 rounded-4" style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 2px dashed #cbd5e1;">
                  <div class="p-3 rounded-circle shadow-sm mb-3" style="background: white; color: #3b82f6;">
                    <i class="fas fa-box-open fa-2x"></i>
                  </div>
                  <h5 class="fw-bold text-dark mb-1">Tidak Ada Data Ditemukan</h5>
                  <p class="text-muted small mb-0">Silakan sesuaikan filter atau pastikan data kelas sudah tersedia.</p>
                </div>
              @else
                <div class="table-responsive px-4 pb-4 pt-3">
                  <!-- Tabel dengan header gradasi -->
                  <table id="myTable" class="table align-middle mb-0 w-100 border-0">
                    <thead class="table-custom-header {{ Auth::user()->dark_mode == '1' ? 'dark-mode-table' : '' }}">
                      <tr>
                        <!-- Tambahan Ikon di dalam Header Tabel -->
                        <th scope="col" width="5%" class="py-3 rounded-start text-center"><i class="fas fa-hashtag me-1 opacity-75"></i> No</th>
                        <th scope="col" class="py-3"><i class="fas fa-chalkboard me-1 opacity-75"></i> Nama Kelas</th>
                        <th scope="col" class="py-3 mw-150"><i class="fas fa-user-tie me-1 opacity-75"></i> Wali Kelas</th>
                        <th scope="col" class="py-3"><i class="fas fa-layer-group me-1 opacity-75"></i> Tingkat</th>
                        <th scope="col" class="py-3"><i class="fas fa-users me-1 opacity-75"></i> Jumlah Siswa</th>
                        <th scope="col" width="15%" class="py-3 rounded-end text-center"><i class="fas fa-cogs me-1 opacity-75"></i> Aksi</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              @endif
            </div>
            <!-- /.card-body -->
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

@include('pages.ketidakhadiran._filter')

@endsection

@section('js')
 @include('pages.ketidakhadiran.script')
@endsection