@extends('layouts.main')

@section('css')
<style>
  /* Kustomisasi Modern & Colorful */
  .card {
    border: none;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    overflow: hidden;
  }
  .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.5rem;
  }
  
  /* Styling Tabel Modern */
  .table {
    border-collapse: separate;
    border-spacing: 0 8px; /* Memberi jarak antar baris */
    padding: 0 1rem;
  }
  
  /* HEADER TABEL DENGAN WARNA GRADASI & IKON MENARIK */
  .table thead th {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-top: none;
    border-bottom: none !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 1rem 0.75rem;
  }
  .table thead tr th:first-child {
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    padding-left: 1.25rem;
  }
  .table thead tr th:last-child {
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    padding-right: 1.25rem;
  }

  /* Baris Data ala Card */
  .table tbody tr {
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
  }
  .table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
  }
  .table tbody td {
    border-top: 1px solid #f8f9fa;
    border-bottom: 1px solid #f8f9fa;
    padding: 1rem 0.75rem;
  }
  .table tbody td:first-child {
    border-left: 1px solid #f8f9fa;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    padding-left: 1.25rem;
  }
  .table tbody td:last-child {
    border-right: 1px solid #f8f9fa;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding-right: 1.25rem;
  }

  /* Tombol Aksi Modern */
  .btn-kelola {
    border-radius: 50rem;
    padding: 0.35rem 1rem;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
    background: linear-gradient(135deg, #28a745, #20c997);
    border: none;
    color: white;
  }
  .btn-kelola:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
    color: white;
  }

  .btn-icon-split {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 50rem;
    padding: 0.45rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
  }
  .btn-icon-split:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
  }
  
  .empty-state {
    padding: 3.5rem 1rem;
    text-align: center;
    color: #6c757d;
  }
  .empty-state i {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: #dee2e6;
  }

  /* Mini Banner Jurusan */
  .jurusan-banner {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }
  .jurusan-card {
    flex: 1;
    min-width: 140px;
    padding: 1rem;
    border-radius: 0.75rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }
  .jurusan-card.tbsm { background: linear-gradient(135deg, #f39c12, #d35400); }
  .jurusan-card.tkj { background: linear-gradient(135deg, #00b4db, #0083b0); }
  .jurusan-card.farmasi { background: linear-gradient(135deg, #eb3349, #f45c43); }
  .jurusan-card i { font-size: 1.8rem; }
</style>
@endsection

@section('content')

{{-- Header --}}
<div class="content-header py-4">
  <div class="container-fluid">
    <div class="row align-items-center mb-2">
      <div class="col-sm-8">
        <h3 class="m-0 fw-bold text-dark">
          <i class="fas fa-layer-group text-primary me-2"></i> Data Catatan Wali Kelas
        </h3>
        <p class="text-muted text-sm mb-0 mt-1">Monitoring catatan wali kelas untuk program keahlian TBSM, TKJ, dan Farmasi.</p>
      </div>
    </div>

    {{-- Mini Banner Indikator Jurusan --}}
    <div class="jurusan-banner mt-3">
      <div class="jurusan-card tbsm">
        <i class="fas fa-motorcycle"></i>
        <div>
          <h6 class="mb-0 fw-bold">TBSM</h6>
          <small style="font-size: 0.75rem;">Teknik Sepeda Motor</small>
        </div>
      </div>
      <div class="jurusan-card tkj">
        <i class="fas fa-network-wired"></i>
        <div>
          <h6 class="mb-0 fw-bold">TKJ</h6>
          <small style="font-size: 0.75rem;">Komputer & Jaringan</small>
        </div>
      </div>
      <div class="jurusan-card farmasi">
        <i class="fas fa-capsules"></i>
        <div>
          <h6 class="mb-0 fw-bold">Farmasi</h6>
          <small style="font-size: 0.75rem;">Kesehatan & Obat</small>
        </div>
      </div>
    </div>

  </div>
</div>

{{-- Content --}}
<section class="content pb-4">
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <div class="card">
          @can('admin')
            <div class="card-header d-flex justify-content-between align-items-center">
              <span class="text-secondary fw-bold text-sm"><i class="fas fa-list-ul me-1"></i> Daftar Rombongan Belajar</span>
              <button class="btn btn-sm btn-info btn-icon-split text-white shadow-sm" data-toggle="modal" data-target="#modal-filter">
                <i class="fa fa-filter"></i>
                Filter Data
              </button>
            </div>
          @endcan
          <!-- /.card-header -->
          <div class="card-body px-0 pb-3">
            @if ($kelas->count() < 1)
              <div class="empty-state">
                <i class="fas fa-folder-open text-warning"></i>
                <h5 class="fw-bold text-secondary">Data Masih Kosong</h5>
                <p class="text-sm text-muted mb-0">Catatan Kosong</p>
              </div>
            @else
              <div class="table-responsive">
                <table id="myTable" class="table align-middle mb-0">
                  <thead>
                  <tr class="header-table">
                    <th scope="col" class="ps-4"><i class="fas fa-hashtag me-1"></i> No.</th>
                    <th scope="col"><i class="fas fa-school me-1"></i> Nama Rombel</th>
                    <th scope="col"><i class="fas fa-user-tie me-1"></i> Wali Rombel</th>
                    <th scope="col"><i class="fas fa-layer-group me-1"></i> Level</th>
                    <th scope="col"><i class="fas fa-users me-1"></i> Peserta Didik</th>
                    <th scope="col" class="pe-4"><i class="fas fa-cogs me-1"></i> Proses</th>
                  </tr>
                  </thead>
                </table>
              </div>
            @endif
          </div>
          <!-- /.card-body -->
        </div>
      </div>
    </div>
  </div>
</section>

@include('pages.catatanwalas._filter')

@endsection

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