@extends('backend.layout-tw')

@section('title', 'Edit Nama Pelatihan')

@section('content')
  <div class="p-6 py-8">
    <div
      x-data='namaPelatihanForm({ formType: "edit" }, @json($namaPelatihan))'
      @select-mata-pelatihan.window="selectMataPelatihan($event.detail.index, $event.detail.mataPelatihan)"
    >

      <form @submit.prevent="submitForm">
        <div class="p-6">
          <div class="space-y-4">
            <div>
              <label
                class="mb-1 block text-sm font-medium text-gray-700"
                for="kode"
              >
                Kode <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="kode"
                type="text"
                x-model="inputData.kode"
                :class="{ 'border-red-500 ring-red-500': errors.kode }"
                placeholder="Masukkan kode pelatihan"
              >
              <template x-if="errors.kode">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.kode[0]"
                ></p>
              </template>
            </div>

            <div>
              <label
                class="mb-1 block text-sm font-medium text-gray-700"
                for="nama"
              >
                Nama <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="nama"
                type="text"
                x-model="inputData.nama"
                :class="{ 'border-red-500 ring-red-500': errors.nama }"
                placeholder="Masukkan nama pelatihan"
              >
              <template x-if="errors.nama">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.nama[0]"
                ></p>
              </template>
            </div>

            <div class="relative">
              <label
                class="mb-1 block text-sm font-medium text-gray-700"
                for="jenis_pelatihan_id"
              >
                Jenis Pelatihan <span class="text-red-500">*</span>
              </label>
              <select
                class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm transition-all duration-300 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                id="jenis_pelatihan_id"
                x-model="inputData.jenis_pelatihan_id"
                :class="{ 'border-red-500 ring-red-500': errors.jenis_pelatihan_id }"
              >
                <option value="">Pilih Jenis Pelatihan</option>

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

            <div>
              <label
                class="mb-1 block text-sm font-medium text-gray-700"
                for="keterangan"
              >
                Keterangan
              </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="keterangan"
                rows="3"
                x-model="inputData.keterangan"
                :class="{ 'border-red-500 ring-red-500': errors.keterangan }"
                placeholder="Masukkan keterangan pelatihan (opsional)"
              ></textarea>
              <template x-if="errors.keterangan">
                <p
                  class="mt-1 text-sm text-red-600"
                  x-text="errors.keterangan[0]"
                ></p>
              </template>
            </div>

            <div class="flex items-center">
              <input
                class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                id="delegasi_pusdiklat"
                type="checkbox"
                :checked="inputData.delegasi_pusdiklat"
                x-model="inputData.delegasi_pusdiklat"
              >
              <label
                class="ml-2 text-sm text-gray-700"
                for="delegasi_pusdiklat"
              >Delegasi Pelatihan</label>
            </div>
          </div>
        </div>

        <div class="space-y-4 p-6">
          <h3 class="text-base font-semibold text-gray-800">Mata Pelatihan</h3>

          <template
            x-for="(mataPelatihan, index) in mataPelatihanData"
            :key="index"
          >
            <div class="relative space-y-2 rounded border p-4">
              <button
                class="absolute -right-2 -top-2 h-5 w-5 rounded-full bg-red-500 text-xs text-white"
                type="button"
                @click="removeMataPelatihan(index)"
              >&times;</button>

              <div>
                <label class="mb-1 block text-sm text-gray-700">Mata Pelatihan</label>
                <span @click="$dispatch('toggle-modal-mata-pelatihan', { index: index })">Pilih Mata Pelatihan</span>
                <span x-text="mataPelatihan.nama"></span>
                <input
                  class="w-full rounded border-gray-300 text-sm"
                  type="hidden"
                  x-model="mataPelatihan.mata_pelatihan_id"
                  placeholder="Nama mata pelatihan"
                />
              </div>

              <div class="grid grid-cols-3">
                <div>
                  <span>JP Teori</span>
                  <input
                    class="border"
                    type="text"
                    x-model="mataPelatihan.jp_teori"
                  >
                </div>
                <div>
                  <span>JP Praktik</span>
                  <input
                    class="border"
                    type="text"
                    x-model="mataPelatihan.jp_praktik"
                  >
                </div>
                <div>
                  <span>Total JP</span>
                  <input
                    class="border"
                    type="text"
                    x-model="mataPelatihan.total_jp"
                  >
                </div>
              </div>
            </div>
          </template>

          <div class="grid grid-cols-3 gap-4">
            <div>
              <span class="block text-sm text-gray-700">Total JP Teori</span>
              <span x-text="totalJPTeori"></span>
            </div>
            <div>
              <span class="block text-sm text-gray-700">Total JP Praktik</span>
              <span x-text="totalJPPraktik"></span>
            </div>
            <div>
              <span class="block text-sm text-gray-700">Total JP</span>
              <span x-text="totalJP"></span>
            </div>
          </div>

        </div>

        <div class="flex justify-between">
          <button
            class="rounded-sm bg-black px-3 py-2 text-sm text-white"
            type="button"
            @click="addMataPelatihan"
          >
            <i class="fa-regular fa-plus mr-2"></i>
            Tambah
          </button>

          <button
            class="rounded-sm bg-black px-4 py-2 text-sm text-white"
            type="submit"
          >
            <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>
          </button>
        </div>
      </form>

    </div>

    <div
      x-data="mataPelatihanModal"
      @toggle-modal-mata-pelatihan.window="toggleModalMataPelatihan($event.detail.index)"
    >
      @include('backend.master-data.nama-pelatihan.modal')
    </div>
  </div>
@endsection