@extends('selva.layout')

@section('title', $title)

@section('content')
  <div class="p-6 py-8">
    <div
      x-data="pegawaiSimpegList"
      @fetch-data.window="fetchData()"
    >

      <div class="mb-6 rounded-xl bg-white p-6 shadow-sm">
        <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div class="flex flex-wrap gap-2 sm:gap-3">
            <button
              class="btn-light group"
              @click="refreshData"
            >
              <i class="fas fa-sync-alt mr-1 transition-transform group-hover:rotate-180 sm:mr-2"></i>
              <span class="sm:hidden">Refresh</span>
              <span class="hidden sm:inline">Refresh</span>
            </button>
          </div>

          <div class="relative w-full max-w-md lg:w-auto lg:min-w-[280px]">
            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <i class="fas fa-search text-gray-400"></i>
            </div>
            <input
              class="block w-full rounded-xl border-0 bg-white py-2.5 pl-10 pr-4 text-sm text-gray-900 shadow-sm ring-1 ring-gray-200 transition-all duration-200 placeholder:text-gray-400 hover:ring-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0"
              type="text"
              placeholder="Cari pegawai..."
              @input="updateQuickFilter"
            />
          </div>
        </div>

        <div
          class="fixed inset-0 left-0 top-0 z-[99999] flex items-center justify-center bg-white/80 backdrop-blur-sm"
          x-show="isLoading"
          x-transition.opacity
        >
          <div class="flex flex-col items-center gap-3">
            <div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-200 border-t-blue-600"></div>
            <p class="text-sm text-gray-600">Memuat data...</p>
          </div>
        </div>

        <div class="overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-gray-200">
          <div
            class="ag-theme-alpine-custom"
            style="height: 500px; width: 100%"
            x-ref="ag_grid"
          ></div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('style')
  @vite(['resources/js/kediklatan/pegawai-simpeg/import.js'])
@endpush