@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 & HEADER MODERN (CENTER)
       ========================================= */
    .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-admin {
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 800;
    }
    
    /* Badge Jurusan (TBSM, TKJ, Farmasi) */
    .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: #6366f1;
      box-shadow: 0 6px 15px rgba(99, 102, 241, 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 TAMBAH ADMIN
       ========================================= */
    .btn-tambah-modern {
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
      color: #ffffff !important;
      border: none !important;
      border-radius: 0.5rem !important;
      padding: 0.55rem 1.2rem !important;
      font-weight: 600 !important;
      font-size: 0.85rem !important;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
      transition: all 0.3s ease !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
    }
    .btn-tambah-modern:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(99, 102, 241, 0.4) !important;
      color: #ffffff !important;
    }

    /* =========================================
       4. CUSTOM DATATABLES & TABEL MODERN
       ========================================= */
    .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: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
      background-color: #ffffff;
    }

    .table-admin-header { 
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 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: rgba(99, 102, 241, 0.04) !important; 
      transform: scale(1.008); 
      box-shadow: 0 6px 15px rgba(99, 102, 241, 0.08); 
      z-index: 10;
      position: relative;
      border-radius: 0.5rem;
    }
    .table-hover tbody tr:hover td {
      border-color: transparent !important;
    }
  </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">
          Manajemen <span class="text-gradient-admin">Data Admin</span>
        </h3>
        <div class="header-subtitle-modern mt-2">
          <i class="fas fa-school text-indigo 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">
          <div class="card-header bg-transparent border-0 px-4 pt-4 pb-0 d-flex justify-content-start">
            <a href="{{ route('admin.create') }}" class="btn btn-tambah-modern loadAMoment">
              <i class="fa fa-plus"></i> Tambah Admin
            </a>
          </div>
          <!-- /.card-header -->
          
          <div class="card-body px-4 pb-4 pt-3">
            @if ($admin->count() < 1)
              <div class="text-center py-5 text-muted fw-semibold">
                <i class="bi bi-folder2-open fs-1 d-block mb-2"></i>
                Data admin masih kosong!
              </div>
            @else
              <div class="table-responsive">
                <table id="myTable" class="table table-hover align-middle mb-0 w-100">
                  <thead>
                    <tr class="table-admin-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" style="min-width: 150px">Nama</th>
                      <th scope="col" class="text-center">L/P</th>
                      <th scope="col">NIP</th>
                      <th scope="col">NUPTK</th>
                      <th scope="col" class="text-center">Status Admin</th>
                      <th scope="col" class="text-center" style="width: 150px; border-top-right-radius: 0.75rem;">Aksi</th>
                    </tr>
                  </thead>
                </table>
              </div>
            @endif
          </div>
          <!-- /.card-body -->
        </div>
      </div>
    </div>
  </div>
</section>

@include('pages.admin._show')
@include('pages.admin._delete')

@endsection

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