@extends('selva.layout')

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

@section('content')
  <div class="p-6 py-8">
    <div class="mx-auto">

      <div
        x-data="pelatihanContainerForm({ formType: 'create' })"
        @select-mata-pelatihan.window="selectMataPelatihan($event.detail.index, $event.detail.mataPelatihan)"
      >

        <form
          class="space-y-8"
          @submit.prevent="submitForm"
        >
          <div class="rounded-xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
            <h2
              class="mb-6 text-lg font-semibold text-gray-900"
              :class="{ 'dark': darkMode }"
            >Informasi Pelatihan</h2>

            <div class="space-y-6">

              <!-- Nama Pelatihan -->
              <div
                x-data="namaPelatihanSelect({ key: 'Nama Pelatihan', customResults: { value: 'nama' } })"
                @set-select-nama-pelatihan.window="setSelected($event.detail.value)"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="nama_pelatihan_id"
                  :class="{ 'dark': darkMode }"
                >
                  Nama Pelatihan <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="nama_pelatihan_id"
                    x-ref="select"
                    x-model="inputData.nama_pelatihan_id"
                    :class="{ 'border-red-500 ring-red-500': errors.nama_pelatihan_id }"
                  >
                  </select>
                </div>
                <template x-if="errors.nama_pelatihan_id">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.nama_pelatihan_id[0]"
                  ></p>
                </template>
              </div>

              <!-- Tahun & Angkatan -->
              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                  <label
                    class="mb-1 block text-sm font-medium text-gray-700"
                    for="tahun"
                    :class="{ 'dark': darkMode }"
                  >
                    Tahun <span class="text-red-500">*</span>
                  </label>
                  <div class="z-2 relative">
                    <select
                      class="w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                      id="tahun"
                      x-model="inputData.tahun"
                      :class="{ 'border-red-500 ring-red-500': errors.tahun }"
                    >
                      <option value="">Pilih Tahun</option>
                    </select>
                    <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                      <i class="fa-solid fa-chevron-down text-xs text-gray-400"></i>
                    </div>
                  </div>
                  <template x-if="errors.tahun">
                    <p
                      class="mt-1 text-sm text-red-600"
                      x-text="errors.tahun[0]"
                    ></p>
                  </template>
                </div>

                <div
                  x-data="enumerationSelect({ key: 'Angkatan', customParams: { criteria: 'key:Angkatan' } })"
                  @set-select-angkatan.window="setSelected($event.detail.value)"
                >
                  <label
                    class="mb-1 block text-sm font-medium text-gray-700"
                    for="angkatan"
                    :class="{ 'dark': darkMode }"
                  >
                    Angkatan <span class="text-red-500">*</span>
                  </label>
                  <div class="relative">
                    <select
                      id="angkatan"
                      x-ref="select"
                      x-model="inputData.angkatan"
                      :class="{ 'border-red-500 ring-red-500': errors.angkatan }"
                    >
                    </select>
                  </div>
                  <template x-if="errors.angkatan">
                    <p
                      class="mt-1 text-sm text-red-600"
                      x-text="errors.angkatan[0]"
                    ></p>
                  </template>
                </div>
              </div>

              <!-- Tanggal Mulai & Tanggal Selesai -->
              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                <div x-data="tanggalPicker('tanggal_mulai')">
                  <label
                    class="mb-1 block text-sm font-medium text-gray-700"
                    for="tanggal_mulai"
                    :class="{ 'dark': darkMode }"
                  >
                    Tanggal Mulai <span class="text-red-500">*</span>
                  </label>
                  <input
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    id="tanggal_mulai"
                    type="text"
                    x-ref="input"
                    x-model="inputData.tanggal_mulai"
                    :value="inputData.tanggal_mulai"
                    readonly
                  >
                </div>


                <div x-data="tanggalPicker('tanggal_selesai')">
                  <label
                    class="mb-1 block text-sm font-medium text-gray-700"
                    for="tanggal_selesai"
                    :class="{ 'dark': darkMode }"
                  >
                    Tanggal Selesai <span class="text-red-500">*</span>
                  </label>
                  <input
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    id="tanggal_selesai"
                    type="text"
                    x-ref="input"
                    x-model="inputData.tanggal_selesai"
                    :value="inputData.tanggal_selesai"
                    readonly
                  >
                </div>
              </div>

              <!-- Tempat Penyelenggara -->
              <div
                x-data="branchSelect({ key: 'Tempat Penyelenggara', customParams: { criteria: 'unit_id:1' } })"
                @set-select-tempat-penyelenggara.window="setSelected($event.detail.value)"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="tempat_penyelenggara"
                  :class="{ 'dark': darkMode }"
                >
                  Tempat Penyelenggara <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="tempat_penyelenggara"
                    x-ref="select"
                    x-model="inputData.tempat_penyelenggara_id"
                    :class="{ 'border-red-500 ring-red-500': errors.tempat_penyelenggara }"
                  >
                  </select>
                </div>
                <template x-if="errors.tempat_penyelenggara">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.tempat_penyelenggara[0]"
                  ></p>
                </template>
              </div>

              <!-- Pemilik Pelatihan -->
              <div
                x-data="branchSelect({ key: 'Tempat Penyelenggara', customParams: { criteria: 'id:468,id:478,id:19520,id:19523,id:19525,id:19527,id:19528,id:19529,id:19530,id:19531,id:19532,id:19534,id:19535,id:19536,id:19537,id:19538,id:20542,id:20541' } })"
                @set-select-penyelenggara-pelatihan.window="setSelected($event.detail.value)"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="penyelenggara_pelatihan_id"
                  :class="{ 'dark': darkMode }"
                >
                  Pemilik Pelatihan <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="penyelenggara_pelatihan_id"
                    x-ref="select"
                    x-model="inputData.penyelenggara_pelatihan_id"
                    :class="{ 'border-red-500 ring-red-500': errors.penyelenggara_pelatihan_id }"
                  >
                  </select>
                </div>
                <template x-if="errors.penyelenggara_pelatihan_id">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.penyelenggara_pelatihan_id[0]"
                  ></p>
                </template>
              </div>

              <!-- Lokasi Pelatihan -->
              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="lokasi_pelatihan"
                  :class="{ 'dark': darkMode }"
                >
                  Lokasi Pelatihan
                </label>
                <textarea
                  class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  id="lokasi_pelatihan"
                  x-model="inputData.lokasi"
                  rows="3"
                  placeholder="Masukkan lokasi pelatihan"
                ></textarea>
              </div>

              <!-- Jenis Pelatihan -->
              <div
                x-data="enumerationSelect({ key: 'Jenis Pelatihan', customParams: { criteria: 'key:PenyelenggaraDiklat' } })"
                @set-select-jenis-pelatihan.window="setSelected($event.detail.value)"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="nama_pelatihan_jenis_pelatihan_id"
                  :class="{ 'dark': darkMode }"
                >
                  Jenis Pelatihan <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="nama_pelatihan_jenis_pelatihan_id"
                    x-ref="select"
                    x-model="inputData.nama_pelatihan_jenis_pelatihan_id"
                    :class="{ 'border-red-500 ring-red-500': errors.nama_pelatihan_jenis_pelatihan_id }"
                  >
                  </select>
                </div>
                <template x-if="errors.nama_pelatihan_jenis_pelatihan_id">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.nama_pelatihan_jenis_pelatihan_id[0]"
                  ></p>
                </template>
              </div>

              <!-- Pola Pelatihan -->
              <div
                x-data="enumerationSelect({ key: 'Pola Pelatihan', customParams: { criteria: 'key:PolaDiklatTipe' } })"
                @set-select-pola-pelatihan.window="setSelected($event.detail.value)"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="pola_pelatihan"
                  :class="{ 'dark': darkMode }"
                >
                  Pola Pelatihan <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="pola_pelatihan"
                    x-ref="select"
                    x-model="inputData.pola_pelatihan_tipe_id"
                    :class="{ 'border-red-500 ring-red-500': errors.pola_pelatihan }"
                  >
                  </select>
                </div>
                <template x-if="errors.pola_pelatihan">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.pola_pelatihan[0]"
                  ></p>
                </template>
              </div>

              <!-- Tipe -->
              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  :class="{ 'dark': darkMode }"
                >
                  Tipe Pelatihan <span class="text-red-500">*</span>
                </label>
                <div class="flex gap-4">
                  <label class="flex items-center gap-2">
                    <input
                      type="radio"
                      value="private"
                      x-model="inputData.type"
                    > Private
                  </label>
                  <label class="flex items-center gap-2">
                    <input
                      type="radio"
                      value="public"
                      x-model="inputData.type"
                    > Public
                  </label>
                </div>
                <template x-if="errors.type">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.type[0]"
                  ></p>
                </template>
              </div>

              <div x-data="descriptionTinymce({ eventName: 'description-changed' })">
                <label
                  class="mb-2 block text-sm font-medium text-gray-700"
                  :class="{ 'dark': darkMode }"
                >Deskripsi Lengkap</label>
                <textarea x-ref="textarea"></textarea>
              </div>

              <div>
                <label
                  class="mb-2 block text-sm font-medium text-gray-700"
                  for="image"
                  :class="{ 'dark': darkMode }"
                >
                  Upload Gambar
                  <span class="text-red-500">*</span>
                </label>
                <div
                  class="mt-1 flex cursor-pointer justify-center rounded-lg border-2 border-dashed border-gray-300 px-6 pb-6 pt-5 transition-colors duration-200 hover:border-indigo-400"
                  @click="$refs.imageInput.click()"
                  @dragover.prevent="isDragging = true"
                  @dragleave.prevent="isDragging = false"
                  @drop.prevent="isDragging = false;
                            if ($event.dataTransfer.files.length) {
                                handleFileUploadImage({ target: { files: $event.dataTransfer.files } });
                            }"
                  :class="{ 'border-indigo-500 bg-indigo-50': isDragging }"
                >
                  <!-- Jika belum ada file -->
                  <template x-if="!previewImage">
                    <div class="text-center">
                      <i class="fas fa-cloud-upload-alt mx-auto text-3xl text-gray-400"></i>
                      <p
                        class="mt-2 text-sm text-gray-600"
                        x-text="isDragging ? 'Lepaskan gambar di sini...' : 'Klik atau drag & drop untuk upload gambar'"
                      ></p>
                      <p class="text-xs text-gray-500">PNG, JPG, JPEG up to 10MB</p>
                    </div>
                  </template>

                  <!-- Jika ada file -->
                  <template x-if="previewImage">
                    <div class="relative flex w-full flex-col items-center">
                      <!-- Tombol X -->
                      <button
                        class="absolute -right-4 -top-4 flex size-5 items-center justify-center rounded-full bg-red-500 text-white shadow hover:bg-red-600"
                        type="button"
                        @click.stop="removeFileImage"
                      >
                        <i class="fa-regular fa-close text-xs"></i>
                      </button>

                      <!-- Preview Gambar -->
                      <img
                        class="max-h-48 rounded-lg border border-gray-200 object-contain"
                        alt="Preview"
                        :src="previewImage"
                      >
                      <p
                        class="mt-2 text-sm text-gray-700"
                        x-text="inputData.image_name"
                      ></p>
                    </div>
                  </template>

                  <!-- Hidden File Input -->
                  <input
                    class="sr-only"
                    id="image"
                    type="file"
                    accept="image/*"
                    x-ref="imageInput"
                    @change="handleFileUploadImage($event)"
                  >
                </div>
                <template x-if="errors.image">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.image[0]"
                  ></p>
                </template>
              </div>

            </div>


          </div>



          <div class="rounded-xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
            <h2
              class="mb-6 text-lg font-semibold text-gray-900"
              :class="{ 'dark': darkMode }"
            >Sistem Penilaian</h2>

            <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
              <div
                x-data="sistemPenilaianSelect({ key: 'Sistem Penilaian Peserta', customParams: { criteria: 'tipe_test_id:111' } })"
                @set-select-sistem-penilaian.window="setSelected($event.detail.value)"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="sistem_penilaian_peserta"
                  :class="{ 'dark': darkMode }"
                >
                  Sistem Penilaian Peserta <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="sistem_penilaian_peserta"
                    x-ref="select"
                    x-model="inputData.sistem_penilaian_peserta"
                    :class="{ 'border-red-500 ring-red-500': errors.sistem_penilaian_peserta }"
                  >
                  </select>
                </div>
                <template x-if="errors.sistem_penilaian_peserta_id">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.sistem_penilaian_peserta[0]"
                  ></p>
                </template>
              </div>

              <div
                x-data="sistemPenilaianSelect({ key: 'Sistem Penilaian Narasumber', customParams: { criteria: 'tipe_test_id:112' } })"
                @set-select-sistem-penilaian.window="setSelected($event.detail.value)"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="sistem_penilaian_narasumber"
                  :class="{ 'dark': darkMode }"
                >
                  Sistem Penilaian Narasumber <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="sistem_penilaian_narasumber"
                    x-ref="select"
                    x-model="inputData.sistem_penilaian_narasumber_id"
                    :class="{ 'border-red-500 ring-red-500': errors.sistem_penilaian_narasumber }"
                  >
                  </select>
                </div>
                <template x-if="errors.sistem_penilaian_narasumber">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.sistem_penilaian_narasumber[0]"
                  ></p>
                </template>
              </div>

              <div
                x-data="sistemPenilaianSelect({ key: 'Sistem Penilaian Penyelenggara', customParams: { criteria: 'tipe_test_id:128' } })"
                @set-select-sistem-penilaian.window="setSelected($event.detail.value)"
              >
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="sistem_penilaian_penyelenggara"
                  :class="{ 'dark': darkMode }"
                >
                  Sistem Penilaian Penyelenggara <span class="text-red-500">*</span>
                </label>
                <div class="relative">
                  <select
                    id="sistem_penilaian_penyelenggara"
                    x-ref="select"
                    x-model="inputData.sistem_penilaian_penyelenggara_id"
                    :class="{ 'border-red-500 ring-red-500': errors.sistem_penilaian_penyelenggara }"
                  >
                  </select>
                </div>
                <template x-if="errors.sistem_penilaian_penyelenggara">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.sistem_penilaian_penyelenggara[0]"
                  ></p>
                </template>
              </div>
            </div>
          </div>

          <div class="rounded-xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
            <h2
              class="mb-6 text-lg font-semibold text-gray-900"
              :class="{ 'dark': darkMode }"
            >Master Template</h2>

            <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-3">
              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="master_template_sertifikat"
                  :class="{ 'dark': darkMode }"
                >
                  Master Template Sertifikat
                </label>
                <div class="relative">
                  <select
                    class="w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    id="kelompok"
                    x-model="inputData.diklat"
                    :class="{ 'border-red-500 ring-red-500': errors.kelompok }"
                  >
                    <option value="">Pilih Master Template Sertifikat</option>
                  </select>
                  <button
                    class="absolute right-8 top-1/2 -translate-y-1/2 p-1 text-gray-400 transition-colors hover:text-gray-600"
                    type="button"
                    @click="refreshDiklat"
                  >
                    <i class="fa-solid fa-refresh text-sm"></i>
                  </button>
                  <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                    <i class="fa-solid fa-chevron-down text-xs text-gray-400"></i>
                  </div>
                </div>
                <template x-if="errors.kelompok">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.kelompok[0]"
                  ></p>
                </template>
              </div>

              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="master_template_surat_keterangan"
                  :class="{ 'dark': darkMode }"
                >
                  Master Template Surat Keterangan
                </label>
                <div class="relative">
                  <select
                    class="w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    id="kelompok"
                    x-model="inputData.diklat"
                    :class="{ 'border-red-500 ring-red-500': errors.kelompok }"
                  >
                    <option value="">Pilih Master Template Surat Keterangan</option>
                  </select>
                  <button
                    class="absolute right-8 top-1/2 -translate-y-1/2 p-1 text-gray-400 transition-colors hover:text-gray-600"
                    type="button"
                    @click="refreshDiklat"
                  >
                    <i class="fa-solid fa-refresh text-sm"></i>
                  </button>
                  <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                    <i class="fa-solid fa-chevron-down text-xs text-gray-400"></i>
                  </div>
                </div>
                <template x-if="errors.kelompok">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.kelompok[0]"
                  ></p>
                </template>
              </div>

              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="master_template_sttp"
                  :class="{ 'dark': darkMode }"
                >
                  Master Template STTP
                </label>
                <div class="relative">
                  <select
                    class="w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    id="kelompok"
                    x-model="inputData.diklat"
                    :class="{ 'border-red-500 ring-red-500': errors.kelompok }"
                  >
                    <option value="">Pilih Master Template STTP</option>
                  </select>
                  <button
                    class="absolute right-8 top-1/2 -translate-y-1/2 p-1 text-gray-400 transition-colors hover:text-gray-600"
                    type="button"
                    @click="refreshDiklat"
                  >
                    <i class="fa-solid fa-refresh text-sm"></i>
                  </button>
                  <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                    <i class="fa-solid fa-chevron-down text-xs text-gray-400"></i>
                  </div>
                </div>
                <template x-if="errors.kelompok">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.kelompok[0]"
                  ></p>
                </template>
              </div>
            </div>

            <div class="grid grid-cols-1 gap-4 pt-3 md:grid-cols-2">
              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="master_template_dikjartih_penugasan"
                  :class="{ 'dark': darkMode }"
                >
                  Master Template Dikjartih Penugasan
                </label>
                <div class="relative">
                  <select
                    class="w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    id="kelompok"
                    x-model="inputData.diklat"
                    :class="{ 'border-red-500 ring-red-500': errors.kelompok }"
                  >
                    <option value="">Pilih Master Template Dikjartih Penugasan</option>
                  </select>
                  <button
                    class="absolute right-8 top-1/2 -translate-y-1/2 p-1 text-gray-400 transition-colors hover:text-gray-600"
                    type="button"
                    @click="refreshDiklat"
                  >
                    <i class="fa-solid fa-refresh text-sm"></i>
                  </button>
                  <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                    <i class="fa-solid fa-chevron-down text-xs text-gray-400"></i>
                  </div>
                </div>
                <template x-if="errors.kelompok">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.kelompok[0]"
                  ></p>
                </template>
              </div>

              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="master_template_dikjartih_pernyataan"
                  :class="{ 'dark': darkMode }"
                >
                  Master Template Dikjartih Pernyataan
                </label>
                <div class="relative">
                  <select
                    class="w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    id="kelompok"
                    x-model="inputData.diklat"
                    :class="{ 'border-red-500 ring-red-500': errors.kelompok }"
                  >
                    <option value="">Pilih Master Template Dikjartih Pernyataan</option>
                  </select>
                  <button
                    class="absolute right-8 top-1/2 -translate-y-1/2 p-1 text-gray-400 transition-colors hover:text-gray-600"
                    type="button"
                    @click="refreshDiklat"
                  >
                    <i class="fa-solid fa-refresh text-sm"></i>
                  </button>
                  <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                    <i class="fa-solid fa-chevron-down text-xs text-gray-400"></i>
                  </div>
                </div>
                <template x-if="errors.kelompok">
                  <p
                    class="mt-1 text-sm text-red-600"
                    x-text="errors.kelompok[0]"
                  ></p>
                </template>
              </div>
            </div>
          </div>

          <div class="rounded-xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
            <h2
              class="mb-6 text-lg font-semibold text-gray-900"
              :class="{ 'dark': darkMode }"
            >Anggaran & Dokumen</h2>

            <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-2">
              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="rencana_anggaran"
                  :class="{ 'dark': darkMode }"
                >
                  Rencana Anggaran
                </label>
                <input
                  class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  id="rencana_anggaran"
                  type="number"
                  placeholder="Masukkan rencana anggaran"
                >
              </div>

              <div>
                <label
                  class="mb-1 block text-sm font-medium text-gray-700"
                  for="realisasi_anggaran"
                >
                  Realisasi Anggaran
                </label>
                <input
                  class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  id="realisasi_anggaran"
                  type="number"
                  placeholder="Masukkan realisasi anggaran"
                >
              </div>
            </div>

            <div>
              <label
                class="mb-1 block text-sm font-medium text-gray-700"
                for="surat_panggilan"
              >
                Surat Panggilan
              </label>

              <div x-show="!suratPanggilanPreview">
                <input
                  class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  id="surat_panggilan"
                  type="file"
                  accept=".pdf,.doc,.docx"
                  @change="handleFileUpload($event)"
                >
                <p class="mt-1 text-xs text-gray-500">Format: PDF, DOC, DOCX. Maksimal 5MB</p>
              </div>

              <div
                class="mt-2"
                x-show="suratPanggilanPreview"
              >
                <template x-if="suratPanggilanPreview && suratPanggilanPreview.type === 'pdf'">
                  <div class="overflow-hidden rounded-lg border border-gray-200">
                    <div class="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3">
                      <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                          <i class="fa-solid fa-file-pdf text-xl text-red-500"></i>
                        </div>
                        <div>
                          <h4
                            class="text-sm font-medium text-gray-900"
                            x-text="suratPanggilanPreview?.name"
                          ></h4>
                          <p
                            class="text-xs text-gray-500"
                            x-text="suratPanggilanPreview?.size"
                          >
                          </p>
                        </div>
                      </div>
                      <div class="flex items-center space-x-2">
                        <button
                          class="inline-flex items-center rounded-md bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-100"
                          type="button"
                          @click="downloadFile()"
                        >
                          <i class="fa-solid fa-download mr-1"></i>
                          Download
                        </button>
                        <button
                          class="inline-flex items-center rounded-md bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-200"
                          type="button"
                          @click="changeFile()"
                        >
                          <i class="fa-solid fa-edit mr-1"></i>
                          Change
                        </button>
                        <button
                          class="inline-flex items-center rounded-md bg-red-50 px-2 py-1.5 text-xs font-medium text-red-600 transition-colors hover:bg-red-100"
                          type="button"
                          @click="removeFile()"
                        >
                          <i class="fa-solid fa-trash"></i>
                        </button>
                      </div>
                    </div>

                    <div class="bg-white">
                      <iframe
                        class="h-96 w-full border-0"
                        style="min-height: 400px;"
                        :src="suratPanggilanPreview?.url"
                      >
                      </iframe>
                    </div>
                  </div>
                </template>

                <template x-if="suratPanggilanPreview && suratPanggilanPreview.type === 'document'">
                  <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-3">
                        <div class="flex-shrink-0">
                          <i
                            class="fa-solid text-2xl text-blue-500"
                            :class="suratPanggilanPreview?.icon || 'fa-file'"
                          ></i>
                        </div>
                        <div>
                          <h4
                            class="text-sm font-medium text-gray-900"
                            x-text="suratPanggilanPreview?.name"
                          ></h4>
                          <p
                            class="text-xs text-gray-500"
                            x-text="suratPanggilanPreview?.size"
                          >
                          </p>
                          <p class="text-xs text-gray-400">Preview not available for this file
                            type</p>
                        </div>
                      </div>
                      <div class="flex items-center space-x-2">
                        <button
                          class="inline-flex items-center rounded-md bg-blue-50 px-3 py-2 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-100"
                          type="button"
                          @click="downloadFile()"
                        >
                          <i class="fa-solid fa-download mr-2"></i>
                          Download
                        </button>
                        <button
                          class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-50"
                          type="button"
                          @click="changeFile()"
                        >
                          <i class="fa-solid fa-edit mr-2"></i>
                          Change
                        </button>
                        <button
                          class="inline-flex items-center rounded-md bg-red-50 px-3 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-100"
                          type="button"
                          @click="removeFile()"
                        >
                          <i class="fa-solid fa-trash mr-2"></i>
                          Remove
                        </button>
                      </div>
                    </div>
                  </div>
                </template>
              </div>

              <input
                class="hidden"
                id="surat_panggilan_hidden"
                type="file"
                accept=".pdf,.doc,.docx"
                @change="handleFileUpload($event)"
              >
            </div>
          </div>

          <!-- ALOKASI SECTION -->
          <div class="rounded-xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
            <div class="mb-6 flex items-center justify-between">
              <h2 class="text-lg font-semibold text-gray-900">Alokasi</h2>
              <button
                class="btn bg-gray-900"
                type="button"
                @click="addAlokasi"
              >
                <i class="fa-regular fa-plus mr-2"></i>
                Tambah Satuan Kerja
              </button>
            </div>

            <div class="space-y-4">
              <template
                x-for="(alokasi, index) in alokasiData"
                :key="index"
              >
                <div class="overflow-visible rounded-lg border border-gray-200 bg-white shadow-sm">
                  <div class="bg-gray-50 px-6 py-4">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-4">
                        <div
                          class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-sm font-semibold text-blue-600"
                          x-text="index + 1"
                        ></div>
                        <h3 class="text-sm font-semibold text-gray-900">Satuan Kerja</h3>
                      </div>
                      <button
                        class="flex h-8 w-8 items-center justify-center rounded-full bg-red-100 text-red-600 transition-colors hover:bg-red-200"
                        type="button"
                        title="Hapus"
                        @click="removeAlokasi(index)"
                      >
                        <i class="fa-regular fa-trash text-xs"></i>
                      </button>
                    </div>
                  </div>

                  <div class="p-6">
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-4">
                      <!-- Satuan Kerja -->
                      <div
                        class="relative z-50 space-y-2"
                        x-data="branchSelect({ key: 'Satuan Kerja', customParams: { criteria: 'unit_id:1' } })"
                      >
                        <label
                          class="mb-1 block text-sm font-medium text-gray-700"
                          for="branch_id"
                        >
                          Satuan Kerja <span class="text-red-500">*</span>
                        </label>
                        <div class="relative z-50">
                          <select
                            id="branch_id"
                            x-ref="select"
                            x-model="alokasi.branch_id"
                            :class="{ 'border-red-500 ring-red-500': errors.branch_id }"
                          >
                          </select>
                        </div>
                        <template x-if="errors.branch_id">
                          <p
                            class="z-50 mt-1 text-sm text-red-600"
                            x-text="errors.branch_id[0]"
                          ></p>
                        </template>
                      </div>

                      <!-- Jumlah -->
                      <div class="space-y-2">
                        <label class="mb-1 block text-sm font-medium text-gray-700">Kuota</label>
                        <input
                          class="w-full rounded-md border-0 bg-white px-3 py-1.5 text-sm ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500"
                          type="number"
                          x-model="alokasi.jumlah"
                          placeholder="0"
                          min="0"
                        >
                      </div>

                      <!-- Surat Tugas -->
                      <div class="space-y-2">
                        <label class="mb-1 block text-sm font-medium text-gray-700">Surat
                          Tugas</label>
                        <input
                          class="w-full rounded-md border-0 bg-white px-3 py-1.5 text-sm ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500"
                          type="text"
                          x-model="alokasi.surat_tugas"
                          placeholder="Nomor surat tugas"
                        >
                      </div>

                      <!-- Status/Action -->
                      <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">Status</label>
                        <div class="flex items-center space-x-2">
                          <span
                            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
                            :class="alokasi.surat_tugas ? 'bg-green-100 text-green-800' :
                                'bg-red-100 text-red-800'"
                            x-text="alokasi.surat_tugas ? 'Tersedia' : 'Belum Tersedia'"
                          >
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <template x-if="alokasiData.length === 0">
                <div class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center">
                  <i class="fa-regular fa-building mx-auto mb-4 text-4xl text-gray-400"></i>
                  <p class="text-sm text-gray-500">Belum ada satuan kerja yang ditambahkan</p>
                  <p class="text-xs text-gray-400">Klik tombol "Tambah Satuan Kerja" untuk memulai
                  </p>
                </div>
              </template>
            </div>

            <!-- Summary -->
            <template x-if="alokasiData.length > 0">
              <div class="mt-8 rounded-lg bg-blue-50 p-6">
                <h3 class="mb-4 text-sm font-semibold text-gray-900">Ringkasan Alokasi</h3>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                  <div class="text-center">
                    <div
                      class="text-2xl font-bold text-blue-600"
                      x-text="totalSatuanKerja"
                    ></div>
                    <div class="text-sm text-gray-600">Total Satuan Kerja</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-2xl font-bold text-green-600"
                      x-text="totalKuota"
                    ></div>
                    <div class="text-sm text-gray-600">Total Kuota</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-2xl font-bold text-purple-600"
                      x-text="totalSuratTugas"
                    >
                    </div>
                    <div class="text-sm text-gray-600">Surat Tugas Tersedia</div>
                  </div>
                </div>
              </div>
            </template>
          </div>

          <!-- PANITIA SECTION -->
          <div class="mt-10 rounded-xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
            <div class="mb-6 flex items-center justify-between">
              <h2 class="text-lg font-semibold text-gray-900">Panitia</h2>
              <button
                class="btn bg-gray-900"
                type="button"
                @click="addPanitia"
              >
                <i class="fa-regular fa-plus mr-2"></i>
                Tambah Panitia
              </button>
            </div>

            <div class="space-y-4">
              <template
                x-for="(panitia, index) in panitiaData"
                :key="index"
              >
                <div class="overflow-visible rounded-lg border border-gray-200 bg-white shadow-sm">
                  <div class="bg-gray-50 px-6 py-4">
                    <div class="flex items-center justify-between">
                      <div class="flex items-center space-x-4">
                        <div
                          class="flex h-8 w-8 items-center justify-center rounded-full bg-green-100 text-sm font-semibold text-green-600"
                          x-text="index + 1"
                        ></div>
                        <h3 class="text-sm font-semibold text-gray-900">Anggota Panitia</h3>
                      </div>
                      <button
                        class="flex h-8 w-8 items-center justify-center rounded-full bg-red-100 text-red-600 transition-colors hover:bg-red-200"
                        type="button"
                        title="Hapus"
                        @click="removePanitia(index)"
                      >
                        <i class="fa-regular fa-trash text-xs"></i>
                      </button>
                    </div>
                  </div>

                  <div class="p-6">
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-5">
                      <div
                        class="space-y-2"
                        x-data="branchSelect({ key: 'Satuan Kerja', customParams: { criteria: 'unit_id:1' } })"
                      >
                        <label
                          class="mb-1 block text-sm font-medium text-gray-700"
                          for="branch_id"
                        >
                          Satuan Kerja <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                          <select
                            id="branch_id"
                            x-ref="select"
                            x-model="panitia.branch_id"
                            @change="$dispatch('branch-selected', { value: $event.target.value })"
                            :class="{ 'border-red-500 ring-red-500': errors.branch_id }"
                          >
                          </select>
                        </div>
                        <template x-if="errors.branch_id">
                          <p
                            class="mt-1 text-sm text-red-600"
                            x-text="errors.branch_id[0]"
                          ></p>
                        </template>
                      </div>

                      <div
                        class="space-y-2"
                        x-data="pegawaiSelect({ key: 'Pegawai' })"
                      >
                        <label
                          class="mb-1 block text-sm font-medium text-gray-700"
                          for="pegawai_id"
                        >
                          Pegawai <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                          <select
                            id="pegawai_id"
                            x-ref="select"
                            x-model="panitia.pegawai_id"
                            :class="{ 'border-red-500 ring-red-500': errors.pegawai_id }"
                          >
                          </select>
                        </div>
                        <template x-if="errors.pegawai_id">
                          <p
                            class="mt-1 text-sm text-red-600"
                            x-text="errors.pegawai_id[0]"
                          ></p>
                        </template>
                      </div>

                      <!-- Jabatan -->
                      <div
                        class="space-y-2"
                        x-data="enumerationSelect({ key: 'Jabatan', customParams: { criteria: 'key:JabatanPanitia' } })"
                      >
                        <label
                          class="mb-1 block text-sm font-medium text-gray-700"
                          for="jabatan_panitia"
                        >
                          Jabatan <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                          <select
                            id="jabatan_panitia"
                            x-ref="select"
                            x-model="panitia.jabatan_panitia_id"
                            :class="{ 'border-red-500 ring-red-500': errors.jabatan_panitia }"
                          >
                          </select>
                        </div>
                        <template x-if="errors.jabatan_panitia">
                          <p
                            class="mt-1 text-sm text-red-600"
                            x-text="errors.jabatan_panitia[0]"
                          ></p>
                        </template>
                      </div>

                      <!-- Jumlah DL -->
                      <div class="space-y-2">
                        <label class="mb-1 block text-sm font-medium text-gray-700">Jumlah
                          DL</label>
                        <input
                          class="w-full rounded-md border-0 bg-white px-3 py-1.5 text-sm ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500"
                          type="number"
                          x-model="panitia.jumlah_dl"
                          placeholder="0"
                          min="0"
                        >
                      </div>

                      <!-- Pendapatan -->
                      <div class="space-y-2">
                        <label class="mb-1 block text-sm font-medium text-gray-700">Pendapatan</label>
                        <input
                          class="w-full rounded-md border-0 bg-white px-3 py-1.5 text-sm ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500"
                          type="number"
                          x-model="panitia.pendapatan"
                          placeholder="0"
                          min="0"
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </template>

              <template x-if="panitiaData.length === 0">
                <div class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center">
                  <i class="fa-regular fa-users mx-auto mb-4 text-4xl text-gray-400"></i>
                  <p class="text-sm text-gray-500">Belum ada panitia yang ditambahkan</p>
                  <p class="text-xs text-gray-400">Klik tombol "Tambah Panitia" untuk memulai</p>
                </div>
              </template>
            </div>

            <!-- Summary -->
            <template x-if="panitiaData.length > 0">
              <div class="mt-8 rounded-lg bg-green-50 p-6">
                <h3 class="mb-4 text-sm font-semibold text-gray-900">Ringkasan Panitia</h3>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
                  <div class="text-center">
                    <div
                      class="text-2xl font-bold text-green-600"
                      x-text="totalPanitia"
                    ></div>
                    <div class="text-sm text-gray-600">Total Panitia</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-2xl font-bold text-blue-600"
                      x-text="totalJumlahDL"
                    ></div>
                    <div class="text-sm text-gray-600">Total DL</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-2xl font-bold text-purple-600"
                      x-text="totalPendapatan"
                    >
                    </div>
                    <div class="text-sm text-gray-600">Total Pendapatan</div>
                  </div>
                  <div class="text-center">
                    <div
                      class="text-2xl font-bold text-orange-600"
                      x-text="uniqueSatuanKerja"
                    >
                    </div>
                    <div class="text-sm text-gray-600">Satuan Kerja Terlibat</div>
                  </div>
                </div>
              </div>
            </template>
          </div>

          <div class="flex justify-end space-x-4">
            <a
              class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-6 py-3 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
              href="{{ route('kediklatan.pelatihan.index') }}"
            >
              <i class="fa-regular fa-undo mr-2"></i>
              Kembali
            </a>


            <div
              class="relative"
              x-data="{ open: false }"
            >
              <button
                class="inline-flex items-center rounded-lg bg-gray-900 px-6 py-3 text-sm font-medium text-white shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 disabled:opacity-50"
                type="button"
                @click="open = !open"
                :disabled="isLoading"
              >
                <i
                  class="fa-regular fa-save mr-2"
                  x-show="!isLoading"
                ></i>
                <i
                  class="fa-duotone fa-solid fa-spinner-third mr-2 animate-spin text-xs"
                  x-show="isLoading"
                ></i>
                <span x-text="isLoading ? 'Menyimpan...' : 'Simpan'"></span>
                <svg
                  class="ml-2 h-4 w-4 transition-transform duration-200"
                  :class="{ 'rotate-180': open }"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7"
                  >
                  </path>
                </svg>
              </button>

              <div
                class="absolute bottom-full right-0 z-10 mb-2 w-64 origin-bottom-right rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                x-show="open"
                x-cloak
                @click.away="open = false"
                x-transition:enter="transition ease-out duration-200 transform"
                x-transition:enter-start="opacity-0 scale-95 translate-y-2"
                x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                x-transition:leave="transition ease-in duration-150 transform"
                x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                x-transition:leave-end="opacity-0 scale-95 translate-y-2"
              >
                <div class="py-2">
                  <button
                    class="flex w-full items-center px-4 py-3 text-sm text-gray-700 transition-colors duration-150 hover:bg-gray-50 hover:text-gray-900"
                    type="button"
                    @click="submitForm(); open = false"
                  >
                    <div class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-green-100 text-green-600">
                      <i class="fa-regular fa-save text-xs"></i>
                    </div>
                    <div class="flex flex-col items-start text-left">
                      <span class="font-medium">Simpan</span>
                      <span class="text-xs text-gray-500">Simpan pelatihan ini</span>
                    </div>
                  </button>

                  <button
                    class="flex w-full items-center px-4 py-3 text-sm text-gray-700 transition-colors duration-150 hover:bg-gray-50 hover:text-gray-900"
                    type="button"
                    @click="submitForm('save_and_new'); open = false"
                  >
                    <div class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-blue-600">
                      <i class="fa-regular fa-plus text-xs"></i>
                    </div>
                    <div class="flex flex-col items-start text-left">
                      <span class="font-medium">Simpan dan tambah lagi</span>
                      <span class="text-xs text-gray-500">Buat pelatihan baru setelah simpan</span>
                    </div>
                  </button>

                  <button
                    class="flex w-full items-center px-4 py-3 text-sm text-gray-700 transition-colors duration-150 hover:bg-gray-50 hover:text-gray-900"
                    type="button"
                    @click="submitForm('save_and_list'); open = false"
                  >
                    <div class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-purple-100 text-purple-600">
                      <i class="fa-regular fa-list text-xs"></i>
                    </div>
                    <div class="flex flex-col items-start text-left">
                      <span class="font-medium">Simpan dan kembali ke daftar</span>
                      <span class="text-xs text-gray-500">Kembali ke halaman daftar pelatihan</span>
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </div>

        </form>
      </div>
    </div>
  @endsection

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