@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-guru {
      background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 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: #0ea5e9;
      box-shadow: 0 6px 15px rgba(14, 165, 233, 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 AKSI HEADER (TAMBAH & IMPORT)
       ========================================= */
    .btn-tambah-modern {
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 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(59, 130, 246, 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(59, 130, 246, 0.4) !important;
    }

    .btn-import-modern {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 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(245, 158, 11, 0.25) !important;
      transition: all 0.3s ease !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
    }
    .btn-import-modern:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(245, 158, 11, 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: #0ea5e9;
      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
      background-color: #ffffff;
    }

    .table-guru-header { 
      background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 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(14, 165, 233, 0.04) !important; 
      transform: scale(1.008); 
      box-shadow: 0 6px 15px rgba(14, 165, 233, 0.08); 
      z-index: 10;
      position: relative;
      border-radius: 0.5rem;
    }
    .table-hover tbody tr:hover td {
      border-color: transparent !important;
    }

    /* =========================================
       5. STYLING TOMBOL AKSI TABEL (DETAIL, EDIT, HAPUS)
       ========================================= */
    .btn-action-modern {
      border-radius: 50rem !important;
      font-weight: 600 !important;
      font-size: 0.75rem !important;
      padding: 0.35rem 0.85rem !important;
      border: none !important;
      color: #ffffff !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.3rem !important;
      transition: all 0.25s ease !important;
    }
    .btn-action-modern:hover {
      transform: translateY(-2px);
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    /* Detail (Biru Laut / Cyan Modern) */
    .btn-action-detail {
      background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    }
    
    /* Edit (Ungu / Indigo Modern) */
    .btn-action-edit {
      background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    }

    /* Hapus (Merah Rose Modern) */
    .btn-action-delete {
      background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !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">
          List <span class="text-gradient-guru">Pendidik</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) -->
        <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-between align-items-center flex-wrap gap-2">
            <!-- Tombol Tambah Guru -->
            <a href="{{ route('guru.create') }}" class="btn btn-tambah-modern loadAMoment">
              <i class="fa fa-plus"></i> Tambah Pendidik
            </a>
            <!-- Tombol Import Guru -->
            <button class="btn btn-import-modern" data-toggle="modal" data-target="#modal-import">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload me-1" viewBox="0 0 16 16">
                <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
              </svg>
              Import <span class="d-none d-sm-inline">Data</span> Pendidik
            </button>
          </div>
          <!-- /.card-header -->
          
          <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>
                  <tr class="table-guru-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: 180px">Pendidik</th>
                    <th scope="col" class="text-center">Gender</th>
                    <th scope="col">NIP</th>
                    <th scope="col">NUPTK</th>
                    <th scope="col" class="text-center">Status Pendidik</th>
                    <th scope="col" class="text-center" style="width: 180px; border-top-right-radius: 0.75rem;">Setting</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
    </div>
  </div>
</section>

@include('pages.guru._show')
@include('pages.guru._delete')
@include('pages.guru._import')

@endsection

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