@extends('selva.layout')

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

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

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

                <form @submit.prevent="submitForm" class="space-y-8">

                    <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">Informasi Pelatihan</h2>

                        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                            <div class="space-y-2">
                                <label class="block text-sm font-medium text-gray-900" for="kode">
                                    Kode <span class="text-red-500">*</span>
                                </label>

                                <input
                                    class="w-full rounded-lg border-0 bg-gray-50 px-4 py-3 text-sm text-gray-900 ring-1 ring-gray-300 transition-all duration-200 placeholder:text-gray-500 focus:bg-white focus:ring-2 focus:ring-blue-500"
                                    id="kode" type="text" x-model="inputData.kode"
                                    :class="{ 'ring-red-500 bg-red-50': errors.kode }"
                                    placeholder="Masukkan kode pelatihan">
                                <template x-if="errors.kode">
                                    <p class="text-xs text-red-600" x-text="errors.kode[0]"></p>
                                </template>
                            </div>

                            <div class="space-y-2">
                                <label class="block text-sm font-medium text-gray-900" for="nama">
                                    Nama Pelatihan <span class="text-red-500">*</span>
                                </label>
                                <input
                                    class="w-full rounded-lg border-0 bg-gray-50 px-4 py-3 text-sm text-gray-900 ring-1 ring-gray-300 transition-all duration-200 placeholder:text-gray-500 focus:bg-white focus:ring-2 focus:ring-blue-500"
                                    id="nama" type="text" x-model="inputData.nama"
                                    :class="{ 'ring-red-500 bg-red-50': errors.nama }"
                                    placeholder="Masukkan nama pelatihan">
                                <template x-if="errors.nama">
                                    <p class="text-xs text-red-600" x-text="errors.nama[0]"></p>
                                </template>
                            </div>
                        </div>

                        <div class="mt-6 space-y-2">
                            <label class="block text-sm font-medium text-gray-900" for="jenis_pelatihan_id">
                                Jenis Pelatihan <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select
                                    class="w-full appearance-none rounded-lg border border-gray-300 bg-white px-4 py-3 pr-10 text-sm text-gray-900 shadow-sm transition-all duration-200 hover:border-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
                                    id="jenis_pelatihan_id" x-model="inputData.jenis_pelatihan_id"
                                    :class="{ 'border-red-500 ring-red-500 ring-opacity-50': errors.jenis_pelatihan_id }">
                                    <option value="" class="text-gray-500">Pilih Jenis Pelatihan</option>
                                    <option value="01.1">Pelatihan Kepemimpinan Administrator</option>
                                    <option value="01.2">Pelatihan Kepemimpinan Pengawas</option>
                                    <option value="01">Pelatihan Tenaga Administrasi</option>
                                </select>

                                <button type="button"
                                    class="absolute right-8 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 transition-colors"
                                    @click="refreshNamaPelatihan">
                                    <i class="fa-solid fa-refresh text-sm"></i>
                                </button>
                                <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
                                    <i class="fa-solid fa-chevron-down text-gray-400 text-xs"></i>
                                </div>
                            </div>
                            <template x-if="errors.jenis_pelatihan_id">
                                <p class="text-xs text-red-600" x-text="errors.jenis_pelatihan_id[0]"></p>
                            </template>
                        </div>

                        <div class="mt-6 space-y-2">
                            <label class="block text-sm font-medium text-gray-900" for="keterangan">
                                Keterangan
                            </label>
                            <textarea
                                class="w-full rounded-lg border-0 bg-gray-50 px-4 py-3 text-sm text-gray-900 ring-1 ring-gray-300 transition-all duration-200 placeholder:text-gray-500 focus:bg-white focus:ring-2 focus:ring-blue-500"
                                id="keterangan" rows="4" x-model="inputData.keterangan"
                                :class="{ 'ring-red-500 bg-red-50': errors.keterangan }" placeholder="Masukkan keterangan pelatihan (opsional)"></textarea>
                            <template x-if="errors.keterangan">
                                <p class="text-xs text-red-600" x-text="errors.keterangan[0]"></p>
                            </template>
                        </div>

                        <div class="mt-6 flex items-center space-x-3">
                            <input
                                class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 focus:ring-offset-0"
                                id="delegasi_pusdiklat" type="checkbox" x-model="inputData.delegasi_pusdiklat">
                            <label class="text-sm font-medium text-gray-700" for="delegasi_pusdiklat">
                                Delegasi Pelatihan
                            </label>
                        </div>
                    </div>

                    <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">Mata Pelatihan</h2>
                            <button
                                class="inline-flex items-center rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                                type="button" @click="addMataPelatihan">
                                <i class="fa-regular fa-plus mr-2"></i>
                                Tambah Mata Pelatihan
                            </button>
                        </div>

                        <div class="space-y-4">
                            <template x-for="(mataPelatihan, index) in mataPelatihanData" :key="index">
                                <div class="relative rounded-lg border border-gray-200 bg-gray-50 p-6">

                                    <button
                                        class="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white transition-colors hover:bg-red-600"
                                        type="button" @click="removeMataPelatihan(index)">
                                        ×
                                    </button>

                                    <div class="mb-4">
                                        <label class="mb-2 block text-sm font-medium text-gray-700">
                                            Mata Pelatihan
                                        </label>
                                        <div class="flex items-center space-x-3">
                                            <button type="button"
                                                class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                                @click="$dispatch('toggle-modal-mata-pelatihan', { index: index })">
                                                <i class="fa-regular fa-search mr-2"></i>
                                                Pilih Mata Pelatihan
                                            </button>
                                            <span class="text-sm font-medium text-gray-900"
                                                x-text="mataPelatihan.nama || 'Belum dipilih'"></span>
                                        </div>
                                        <input type="hidden" x-model="mataPelatihan.mata_pelatihan_id" />
                                    </div>

                                    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                                        <div class="space-y-2">
                                            <label class="block text-sm font-medium text-gray-700">JP Teori</label>
                                            <input
                                                class="w-full rounded-md border-0 bg-white px-3 py-2 text-sm ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500"
                                                type="number" x-model="mataPelatihan.jp_teori" placeholder="0">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="block text-sm font-medium text-gray-700">JP Praktik</label>
                                            <input
                                                class="w-full rounded-md border-0 bg-white px-3 py-2 text-sm ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500"
                                                type="number" x-model="mataPelatihan.jp_praktik" placeholder="0">
                                        </div>
                                        <div class="space-y-2">
                                            <label class="block text-sm font-medium text-gray-700">Total JP</label>
                                            <input
                                                class="w-full rounded-md border-0 bg-gray-100 px-3 py-2 text-sm text-gray-600 ring-1 ring-gray-300"
                                                type="number" x-model="mataPelatihan.total_jp" readonly>
                                        </div>
                                    </div>
                                </div>
                            </template>

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

                        <template x-if="mataPelatihanData.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 JP</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="totalJPTeori"></div>
                                        <div class="text-sm text-gray-600">Total JP Teori</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-2xl font-bold text-green-600" x-text="totalJPPraktik"></div>
                                        <div class="text-sm text-gray-600">Total JP Praktik</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-2xl font-bold text-purple-600" x-text="totalJP"></div>
                                        <div class="text-sm text-gray-600">Total JP</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <div class="flex justify-end space-x-4">
                        <a href="{{ route('master.data.nama-pelatihan.index') }}"
                            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">
                            <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 right-0 bottom-full 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="flex h-8 w-8 items-center justify-center rounded-full bg-green-100 text-green-600 mr-3">
                                            <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="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-blue-600 mr-3">
                                            <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="flex h-8 w-8 items-center justify-center rounded-full bg-purple-100 text-purple-600 mr-3">
                                            <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 x-data="mataPelatihanModal"
                @toggle-modal-mata-pelatihan.window="toggleModalMataPelatihan($event.detail.index)">
                @include('backend.master-data.nama-pelatihan.modal')
            </div>
        </div>
    </div>
@endsection