@extends('selva.layout')

@section('title', 'Detail Pelatihan')

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

      <div class="mb-6 rounded-2xl border border-white/20 bg-white/80 p-8 shadow-sm backdrop-blur-sm">
        <div class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div>
            <h3 class="mb-2 text-2xl font-bold text-gray-900">Progress Pelatihan</h3>
            <div class="flex flex-wrap items-center gap-2 text-sm text-gray-600">
              <span class="flex items-center gap-1">
                <i class="fas fa-graduation-cap text-gray-600"></i>
                Angkatan {{ $pelatihan->angkatan }}
              </span>
              <span class="text-gray-300">•</span>
              <span class="flex items-center gap-1">
                <i class="fas fa-calendar text-gray-600"></i>
                {{ $pelatihan->tanggal_mulai->translatedFormat('d F Y') }}
              </span>
              <span class="text-gray-300">•</span>
              <span class="flex items-center gap-1">
                <i class="fas fa-map-marker-alt text-gray-600"></i>
                Balai Diklat Keagamaan Makassar
              </span>
            </div>
          </div>

          <div class="flex items-center gap-6">
            <div class="text-center">
              <div
                class="text-2xl font-bold text-gray-900"
                x-text="completedSteps"
              ></div>
              <div class="text-xs text-gray-500">Selesai</div>
            </div>
            <div class="relative h-16 w-16">
              <svg
                class="h-16 w-16 -rotate-90 transform"
                viewBox="0 0 36 36"
              >
                <path
                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                  fill="none"
                  stroke="#e5e7eb"
                  stroke-width="2"
                />
                <path
                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                  fill="none"
                  stroke="url(#gradient)"
                  stroke-width="2"
                  :stroke-dasharray="`${(currentStep / totalSteps) * 100}, 100`"
                />
              </svg>
              <defs>
                <linearGradient
                  id="gradient"
                  x1="0%"
                  y1="0%"
                  x2="100%"
                  y2="0%"
                >
                  <stop
                    style="stop-color:#3b82f6"
                    offset="0%"
                  />
                  <stop
                    style="stop-color:#8b5cf6"
                    offset="100%"
                  />
                </linearGradient>
              </defs>
              <div class="absolute inset-0 flex items-center justify-center">
                <span
                  class="text-sm font-semibold text-gray-700"
                  x-text="`${Math.round((currentStep / totalSteps) * 100)}%`"
                ></span>
              </div>
            </div>
          </div>
        </div>

        <div class="relative">
          <div class="absolute left-0 top-6 mb-12 h-1 w-full rounded-full bg-gray-200">
            <div
              class="relative h-full overflow-hidden rounded-full bg-gradient-to-r from-gray-900 to-gray-500 transition-all duration-1000 ease-out"
              :style="`width: ${(currentStep / totalSteps) * 100}%`"
            >
              <div class="absolute inset-0 animate-pulse bg-gradient-to-r from-transparent via-white/20 to-transparent">
              </div>
            </div>
          </div>

          <div class="relative grid grid-cols-2 gap-4 md:grid-cols-5 lg:grid-cols-10">

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('peserta')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('peserta')"
                >
                  <i
                    class="fas fa-users"
                    :class="activeStep === 'peserta' ? 'text-white' : isStepCompleted('peserta') ?
                        'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('peserta')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'peserta' ? 'text-gray-600' : isStepCompleted('peserta') ?
                    'text-gray-700' : 'text-gray-500'"
              >Peserta</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('rekapitulasi')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('rekapitulasi')"
                >
                  <i
                    class="fas fa-chart-bar"
                    :class="activeStep === 'rekapitulasi' ? 'text-white' : isStepCompleted('rekapitulasi') ?
                        'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('rekapitulasi')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'rekapitulasi' ? 'text-gray-600' : isStepCompleted('rekapitulasi') ?
                    'text-gray-700' : 'text-gray-500'"
              >Rekapitulasi</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('narasumber')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('narasumber')"
                >
                  <i
                    class="fas fa-chalkboard-teacher"
                    :class="activeStep === 'narasumber' ? 'text-white' : isStepCompleted('narasumber') ?
                        'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('narasumber')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'narasumber' ? 'text-gray-600' : isStepCompleted('narasumber') ?
                    'text-gray-700' : 'text-gray-500'"
              >Narasumber</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('mata_pelatihan')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('mata_pelatihan')"
                >
                  <i
                    class="fas fa-book-open"
                    :class="activeStep === 'mata_pelatihan' ? 'text-white' : isStepCompleted(
                        'mata_pelatihan') ? 'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('mata_pelatihan')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'mata_pelatihan' ? 'text-gray-600' : isStepCompleted('mata_pelatihan') ?
                    'text-gray-700' : 'text-gray-500'"
              >Mata
                Pelatihan</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('jadwal')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('jadwal')"
                >
                  <i
                    class="fas fa-calendar-alt"
                    :class="activeStep === 'jadwal' ? 'text-white' : isStepCompleted('jadwal') ?
                        'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('jadwal')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'jadwal' ? 'text-gray-600' : isStepCompleted('jadwal') ?
                    'text-gray-700' : 'text-gray-500'"
              >Jadwal</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('absensi')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('absensi')"
                >
                  <i
                    class="fas fa-clipboard-check"
                    :class="activeStep === 'absensi' ? 'text-white' : isStepCompleted('absensi') ?
                        'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('absensi')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'absensi' ? 'text-gray-600' : isStepCompleted('absensi') ?
                    'text-gray-700' : 'text-gray-500'"
              >Absensi</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('nilai_wi')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('nilai_wi')"
                >
                  <i
                    class="fas fa-star"
                    :class="activeStep === 'nilai_wi' ? 'text-white' : isStepCompleted('nilai_wi') ?
                        'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('nilai_wi')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'nilai_wi' ? 'text-gray-600' : isStepCompleted('nilai_wi') ?
                    'text-gray-700' : 'text-gray-500'"
              >Nilai
                WI</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('nilai_penyelenggara')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('nilai_penyelenggara')"
                >
                  <i
                    class="fas fa-building"
                    :class="activeStep === 'nilai_penyelenggara' ? 'text-white' : isStepCompleted(
                        'nilai_penyelenggara') ? 'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('nilai_penyelenggara')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'nilai_penyelenggara' ? 'text-gray-600' : isStepCompleted(
                    'nilai_penyelenggara') ? 'text-gray-700' : 'text-gray-500'"
              >Nilai
                Penyelenggara</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('nilai_peserta')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('nilai_peserta')"
                >
                  <i
                    class="fas fa-user-graduate"
                    :class="activeStep === 'nilai_peserta' ? 'text-white' : isStepCompleted(
                        'nilai_peserta') ? 'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('nilai_peserta')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'nilai_peserta' ? 'text-gray-600' : isStepCompleted('nilai_peserta') ?
                    'text-gray-700' : 'text-gray-500'"
              >Nilai
                Peserta</span>
            </div>

            <div
              class="group flex cursor-pointer flex-col items-center transition-all duration-300 hover:scale-105"
              @click="setActiveStep('galeri')"
            >
              <div class="relative mb-3">
                <div
                  class="z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 text-sm font-medium transition-all duration-300"
                  :class="getStepClass('galeri')"
                >
                  <i
                    class="fas fa-images"
                    :class="activeStep === 'galeri' ? 'text-white' : isStepCompleted('galeri') ?
                        'text-white' : 'text-gray-600'"
                  ></i>
                </div>
                <div
                  class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-green-500"
                  x-show="isStepCompleted('galeri')"
                >
                  <i class="fas fa-check text-xs text-white"></i>
                </div>
              </div>
              <span
                class="max-w-20 text-center text-xs font-medium leading-tight transition-colors duration-300"
                :class="activeStep === 'galeri' ? 'text-gray-600' : isStepCompleted('galeri') ?
                    'text-gray-700' : 'text-gray-500'"
              >Galeri</span>
            </div>
          </div>
        </div>

        <div class="mt-8 rounded-xl border border-blue-100 bg-gradient-to-r from-blue-50 to-indigo-50 p-6">
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-blue-500 to-indigo-500">
                <i
                  class="text-white"
                  :class="getActiveStepIcon()"
                ></i>
              </div>
              <div>
                <h4
                  class="font-semibold text-gray-900"
                  x-text="getActiveStepName()"
                ></h4>
                <p class="text-sm text-gray-600">Tahap yang sedang aktif</p>
              </div>
            </div>

            <div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 shadow-sm">
              <i class="fas fa-database text-gray-500"></i>
              <span class="text-sm font-medium text-gray-700">Total Data:</span>
              <span
                class="text-sm font-bold text-gray-600"
                x-text="totalData"
              ></span>
            </div>
          </div>
        </div>

        <div
          class="pt-6"
          :class="activeStep === 'absensi' ? '' : 'hidden'"
        >
          <form class="w-full">
            <div class="space-y-4">

              <div
                x-data="pelatihanJadwalSelect({ key: 'Jadwal Pelatihan', customParams: { criteria: 'unit_id:1' } })"
                @set-select-pelatihan-jadwal.window="setSelected($event.detail.value); inputData.pelatihan_jadwal_id = $event.detail.value; $dispatch('pelatihan-jadwal-selected', { value: $event.detail.value })"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="pelatihan_jadwal_id"
                >
                  Jadwal Pelatihan <span class="text-red-500">*</span>
                </label>
                <input
                  name="pelatihan_jadwal_id"
                  type="hidden"
                  x-model="selectedJadwalId"
                />
                <div class="relative">
                  <select
                    id="pelatihan_jadwal_id"
                    x-ref="select"
                    x-init=""
                    x-model="pelatihan_jadwal_id"
                    {{-- Hapus setSelected di sini --}}
                    :class="{ 'border-red-500 ring-red-500': errors.pelatihan_jadwal_id }"
                  >
                  </select>

                </div>
                <template x-if="errors.pelatihan_jadwal_id">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.pelatihan_jadwal_id[0]"
                  ></p>
                </template>
              </div>

              <div class="flex w-fit items-center">
                <button
                  class="btn-save inline-flex w-auto items-center gap-2"
                  type="button"
                  @click="loadDataAbsensi"
                >
                  <i
                    class="fa-duotone fa-solid fa-spinner-third animate-spin text-xs"
                    x-show="isLoading"
                  ></i>
                  <i
                    class="fa-regular fa-save text-xs"
                    x-show="!isLoading"
                  ></i>
                  <span x-text="isLoading ? 'Loading...' : 'Lihat Absen'"></span>
                </button>
              </div>

            </div>


          </form>
        </div>

        <div
          class="pt-6"
          :class="activeStep === 'nilai_wi' ? '' : 'hidden'"
        >
          <form class="w-full">
            <div class="space-y-4">

              <div
                x-data="pelatihanMataPelatihanSelect({
                    key: 'Pelatihan Mata Pelatihan',
                    customParams: { criteria: '' },
                    customResults: { value: 'narasumber.nama' }
                })"
                x-init="$nextTick(() => updateCriteria('pelatihan_id', pelatihanId))"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="pelatihan_mata_pelatihan_id"
                >
                  Narasumber <span class="text-red-500">*</span>
                </label>
                <input
                  name="pelatihan_mata_pelatihan_id"
                  type="hidden"
                  x-model="selectedPelatihanMataPelatihanId"
                />
                <div class="relative">
                  <select
                    id="pelatihan_mata_pelatihan_id"
                    x-ref="select"
                    x-model="selectedPelatihanMataPelatihanId"
                    @change="selectedPelatihanMataPelatihanId"
                    :class="{ 'border-red-500 ring-red-500': errors.pelatihan_mata_pelatihan_id }"
                  >
                  </select>
                </div>
                <template x-if="errors.pelatihan_mata_pelatihan_id">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.pelatihan_mata_pelatihan_id[0]"
                  ></p>
                </template>
              </div>


              <div class="flex w-fit items-center">
                <button
                  class="btn-save inline-flex w-auto items-center gap-2"
                  type="button"
                  @click="loadNilaiWi"
                >
                  <i
                    class="fa-duotone fa-solid fa-spinner-third animate-spin text-xs"
                    x-show="isLoading"
                  ></i>
                  <i
                    class="fa-regular fa-save text-xs"
                    x-show="!isLoading"
                  ></i>
                  <span x-text="isLoading ? 'Loading...' : 'Input Nilai'"></span>
                </button>
              </div>

            </div>


          </form>
        </div>

        <div
          class="pt-6"
          :class="activeStep === 'nilai_penyelenggara' ? '' : 'hidden'"
        >
          <form class="w-full">
            <div class="space-y-4">

              <div class="flex w-fit items-center">
                <button
                  class="btn-save inline-flex w-auto items-center gap-2"
                  type="button"
                  @click="loadNilaiPenyelenggara"
                >
                  <i
                    class="fa-duotone fa-solid fa-spinner-third animate-spin text-xs"
                    x-show="isLoading"
                  ></i>
                  <i
                    class="fa-regular fa-save text-xs"
                    x-show="!isLoading"
                  ></i>
                  <span x-text="isLoading ? 'Loading...' : 'Input Nilai'"></span>
                </button>
              </div>

            </div>


          </form>
        </div>

        <div
          class="pt-6"
          :class="activeStep === 'nilai_peserta' ? '' : 'hidden'"
        >
          <form class="w-full">
            <div class="space-y-4">

              <div class="flex w-fit items-center">
                <button
                  class="btn-save inline-flex w-auto items-center gap-2"
                  type="button"
                  @click="loadNilaiPeserta"
                >
                  <i
                    class="fa-duotone fa-solid fa-spinner-third animate-spin text-xs"
                    x-show="isLoading"
                  ></i>
                  <i
                    class="fa-regular fa-save text-xs"
                    x-show="!isLoading"
                  ></i>
                  <span x-text="isLoading ? 'Loading...' : 'Input Nilai'"></span>
                </button>
              </div>

            </div>


          </form>
        </div>
      </div>


            <div class="mb-6 rounded-xl bg-white p-6 shadow-sm">
                <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div class="flex gap-3" :class="activeStep === 'absensi' ? '' : 'hidden'">
                        <button class="btn bg-gray-900"
                            @click="$dispatch('open-modal', {
                            modalName: activeStep,
                            type: 'create',
                            data: { pelatihan_jadwal_id: selectedJadwalId }
                        })">
                            <i class="fas fa-check-circle mr-2 text-xs"></i>
                            <span x-text="`Konfirmasi Absensi`"></span>
                        </button>

            <button
              class="btn-absence btn-light"
              @click="absenceSelectedItems"
            >
              {{-- <i class="fas fa-trash mr-2 text-xs"></i> --}}
              Hadir
            </button>

          </div>
          <div
            class="flex gap-3"
            :class="activeStep === 'absensi' ? 'hidden' : ''"
          >
            <button
              class="btn bg-gray-900"
              @click="$dispatch('open-modal', { modalName: activeStep, type: 'create' })"
            >
              <i class="fas fa-plus mr-2 text-xs"></i>
              <span x-text="`Tambah ${getActiveStepName()}`"></span>
            </button>
            {{-- <a
                          class="btn bg-gray-900"
                          href="{{ route('kediklatan.pelatihan-peserta.index') }}"
                        >
                          <i class="fas fa-plus mr-2 text-xs"></i>
                          <span x-text="`Tambah ${getActiveStepName()}`"></span>
                        </a> --}}
            <button
              class="btn-delete"
              @click="deleteSelectedItems"
            >
              <i class="fas fa-trash mr-2 text-xs"></i>
              Hapus Terpilih
            </button>

            <div
              class="relative"
              :class="activeStep === 'galeri' ? '' : 'hidden'"
              x-data="{ open: false }"
            >
              <button
                class="btn-light group"
                @click="printGaleri()"
              >
                <i class="fas fa-print mr-2 transition-transform group-hover:scale-110"></i>
                Cetak
              </button>
            </div>

            <div
              class="relative"
              :class="activeStep === 'peserta' ? '' : 'hidden'"
              x-data="{ open: false }"
              x-data="{ open: false }"
            >
              <button
                class="btn-light group"
                @click="open = !open"
              >
                <i class="fas fa-print mr-2 transition-transform group-hover:scale-110"></i>
                Cetak
                <i
                  class="fas fa-chevron-down ml-2 text-xs transition-transform duration-200"
                  :class="{ 'rotate-180': open }"
                ></i>
              </button>

                            <div class="absolute left-0 z-50 mt-3 w-56 rounded-xl border border-gray-100 bg-white shadow-xl ring-1 ring-black/5"
                                x-show="open" x-transition:enter="transition ease-out duration-200"
                                x-transition:enter-start="opacity-0 scale-95"
                                x-transition:enter-end="opacity-100 scale-100"
                                x-transition:leave="transition ease-in duration-100"
                                x-transition:leave-start="opacity-100 scale-100"
                                x-transition:leave-end="opacity-0 scale-95" @click.away="open = false">
                                <div class="p-2" x-data="{ open: false }">
                                    <button
                                        class="group flex w-full items-center rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors hover:bg-green-50 hover:text-green-700"
                                        @click="$dispatch('open-modal', { modalName: 'concard', type: 'create' })">
                                        <div
                                            class="mr-3 rounded-lg bg-green-100 p-2 transition-colors group-hover:bg-green-200">
                                            <i class="fas fa-print text-green-600"></i>
                                        </div>
                                        <div class="text-left">
                                            <div class="font-medium">Cetak Concard</div>
                                        </div>
                                    </button>
                                    <button
                                        class="group flex w-full items-center rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors hover:bg-emerald-50 hover:text-emerald-700"
                                        @click="$dispatch('open-modal', { modalName: 'biodata', type: 'create' })">
                                        <div
                                            class="mr-3 rounded-lg bg-emerald-100 p-2 transition-colors group-hover:bg-emerald-200">
                                            <i class="fas fa-file-alt text-emerald-600"></i>
                                        </div>
                                        <div class="text-left">
                                            <div class="font-medium">Cetak Biodata</div>
                                            {{-- <div class="text-xs text-gray-500">Format .xlsx</div> --}}
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </div>

            <button
              class="btn-light group"
              @click="refreshData"
            >
              <i class="fas fa-sync-alt mr-2 transition-transform group-hover:rotate-180"></i>
              Refresh
            </button>
          </div>

          <div class="relative max-w-md">
            <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..."
              @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"
            id="training-grid"
            style="height: 500px; width: 100%"
          ></div>
        </div>
      </div>
    </div>
  </div>
  <div
    x-data="detailPelatihanForm()"
    @open-modal.window="openModal($event.detail.modalName, $event.detail.type, $event.detail.data)"
  >
    @include('kediklatan.pelatihan.modal-kelola')
  </div>
@endsection

@push('style')
  @vite(['resources/js/kediklatan/pelatihan/import.js'])
@endpush
@push('script')
  <!-- jsPDF -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
@endpush