@extends('selva.layout')

@section('title', 'Tambah Master Template')

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

            <div x-data="formPelatihanContainer({ 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="space-y-6">

                            <!-- Nama Pelatihan -->
                            <div class="relative">
                                <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 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    id="nama" type="text" x-model="inputData.nama" placeholder="Masukkan nama">
                                <template x-if="errors.kelompok">
                                    <p class="mt-1 text-sm text-red-600" x-text="errors.kelompok[0]"></p>
                                </template>
                            </div>

                            <!-- Tipe Surat -->
                            <div>
                                <label class="mb-1 block text-sm font-medium text-gray-700" for="tipe_surat">
                                    Tipe Surat <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <select
                                        class="w-full 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 appearance-none"
                                        id="kelompok" x-model="inputData.diklat"
                                        :class="{ 'border-red-500 ring-red-500': errors.kelompok }">
                                        <option value="">Pilih Tipe Surat</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="refreshDiklat">
                                        <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.kelompok">
                                    <p class="mt-1 text-sm text-red-600" x-text="errors.kelompok[0]"></p>
                                </template>
                            </div>

                            <!-- Nomor Surat -->
                            {{-- <div>
                                <label class="mb-1 block text-sm font-medium text-gray-700" for="nomor_surat">
                                    Nomor Surat<span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input
                                        class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        id="nomor_surat" type="text" x-model="inputData.nomor_surat"
                                        placeholder="A.2/FAG/{Var.Number}/{Var.Year}">
                                </div>
                                <template x-if="errors.kelompok">
                                    <p class="mt-1 text-sm text-red-600" x-text="errors.kelompok[0]"></p>
                                </template>
                            </div>
                            <div class="mb-4">
                                <button type="button"
                                    class="inline-flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow hover:bg-gray-800"
                                    @click="showGenerateForm = !showGenerateForm">
                                    <i class="fas fa-gear animate-spin"></i>
                                    ICON fx
                                </button>

                                <div x-show="showGenerateForm" x-transition
                                    class="mt-4 rounded-lg border border-gray-200 p-4">
                                    <div class="mb-3">
                                        <label class="block text-sm font-medium text-gray-700">Formula</label>
                                        <div class="relative">
                                            <select
                                                class="w-full 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 appearance-none"
                                                id="kelompok" x-model="inputData.diklat"
                                                :class="{ 'border-red-500 ring-red-500': errors.kelompok }">
                                                <option value="">Pilih Item Formula</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="refreshDiklat">
                                                <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.kelompok">
                                            <p class="mt-1 text-sm text-red-600" x-text="errors.kelompok[0]"></p>
                                        </template>
                                    </div>

                                    <div class="flex justify-end">
                                        <button type="button"
                                            class="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-green-500"
                                            @click="generateFromSimatika" :disabled="isLoading">
                                            <i class="fas fa-sync" :class="{ 'animate-spin': isLoading }"></i>
                                            <span x-text="isLoading ? 'Generating...' : 'Generate'"></span>
                                        </button>
                                    </div>
                                </div>
                            </div> --}}

                            <div x-data="{ showFormulaDropdown: false }">
                                <label class="mb-1 block text-sm font-medium text-gray-700" for="nomor_surat">
                                    Nomor Surat<span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input
                                        class="w-full rounded-lg border border-gray-300 px-3 py-2 pr-12 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        id="nomor_surat" type="text" x-model="inputData.nomor_surat"
                                        placeholder="A.2/FAG/{Var.Number}/{Var.Year}">

                                    <button type="button"
                                        class="absolute right-2 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-md bg-gray-900 text-white hover:bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-1"
                                        @click="showFormulaDropdown = !showFormulaDropdown" title="Formula Generator">
                                        <span class="text-xs font-bold italic">fx</span>
                                    </button>
                                </div>

                                <div x-show="showFormulaDropdown" 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-150"
                                    x-transition:leave-start="opacity-100 scale-100"
                                    x-transition:leave-end="opacity-0 scale-95"
                                    class="mt-2 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">

                                    <div class="mb-3">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Formula
                                            Components</label>

                                        <div class="mb-3">
                                            <label class="block text-xs font-medium text-gray-600 mb-1">Variable
                                                Number</label>
                                            <div class="relative">
                                                <select
                                                    class="w-full 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 appearance-none">
                                                    <option value="">Pilih Format Number</option>
                                                    <option value="001">Sequential (001, 002, 003...)</option>
                                                    <option value="random">Random Number</option>
                                                    <option value="custom">Custom Input</option>
                                                </select>
                                                <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>
                                        </div>

                                        <div class="mb-3">
                                            <label class="block text-xs font-medium text-gray-600 mb-1">Variable
                                                Year</label>
                                            <div class="relative">
                                                <select
                                                    class="w-full 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 appearance-none">
                                                    <option value="">Pilih Format Year</option>
                                                    <option value="2025">Current Year (2025)</option>
                                                    <option value="2024">Previous Year (2024)</option>
                                                    <option value="custom">Custom Year</option>
                                                </select>
                                                <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>
                                        </div>

                                        <div class="mb-3">
                                            <label class="block text-xs font-medium text-gray-600 mb-1">Preview</label>
                                            <div class="rounded-lg bg-gray-50 border border-gray-200 p-3">
                                                <code class="text-sm text-gray-800">A.2/FAG/001/2025</code>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="flex justify-between items-center">
                                        <button type="button"
                                            class="inline-flex items-center gap-2 rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 transition-colors"
                                            @click="showFormulaDropdown = false">
                                            <i class="fas fa-times"></i>
                                            Cancel
                                        </button>

                                        <button type="button"
                                            class="inline-flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow hover:bg-gray-900 transition-colors">
                                            <i class="fas fa-magic"></i>
                                            Generate
                                        </button>
                                    </div>
                                </div>

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

                            <!-- File Template -->
                            <div>
                                <label class="mb-1 block text-sm font-medium text-gray-700" for="lokasi_pelatihan">
                                    File Template
                                </label>
                                <input
                                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    id="file_template" type="file" accept=".docx,.doc">
                            </div>

                            <!-- Doc. No Sequence -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <h4 class="text-sm font-medium text-gray-700 mb-3 underline">Doc. No Sequence</h4>

                                    <div class="mb-4">
                                        <label class="flex items-center">
                                            <input type="checkbox" x-model="inputData.fixed_digit"
                                                class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                            <span class="ml-2 text-sm text-gray-700">Fixed Digit</span>
                                        </label>
                                    </div>

                                    <div x-show="inputData.fixed_digit" x-transition class="mb-4">
                                        <label class="mb-1 block text-sm font-medium text-gray-700" for="number_of_digit">
                                            Number Of Digit
                                        </label>
                                        <input
                                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                            id="number_of_digit" type="number" x-model="inputData.number_of_digit"
                                            placeholder="5" min="1" max="10">
                                    </div>

                                    <div>
                                        <label class="mb-1 block text-sm font-medium text-gray-700"
                                            for="current_sequence">
                                            Current Sequence
                                        </label>
                                        <input
                                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                            id="current_sequence" type="number" x-model="inputData.current_sequence"
                                            placeholder="0" min="0">
                                    </div>
                                </div>

                                <div>
                                    <h4 class="text-sm font-medium text-gray-700 mb-3 underline">Month</h4>
                                    <div class="mb-4">
                                        <label class="flex items-center">
                                            <input type="checkbox" x-model="inputData.reset_sequence_monthly"
                                                class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                            <span class="ml-2 text-sm text-gray-700">Reset Sequence Monthly</span>
                                        </label>
                                    </div>

                                    <div x-show="inputData.reset_sequence_monthly" x-transition>
                                        <label class="mb-1 block text-sm font-medium text-gray-700" for="current_month">
                                            Current Month
                                        </label>
                                        <input
                                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                            id="current_month" type="number" x-model="inputData.current_month"
                                            placeholder="0" min="0" max="12">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-data="formKolomTable()">
                        <!-- table -->
                        <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">Kolom</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-700 focus:outline-none focus:ring-2 focus:ring-gray-800 focus:ring-offset-2"
                                    type="button" @click="addKolom">
                                    <i class="fa-regular fa-plus mr-2"></i>
                                    Tambah Kolom
                                </button>
                            </div>

                            <div class="space-y-4">
                                <template x-for="(kolom, index) in kolomData" :key="index">
                                    <div class="overflow-hidden 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="kolom.no"></div>
                                                    <h3 class="text-sm font-semibold text-gray-900">Kolom Entry</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" @click="removeKolom(index)" title="Hapus">
                                                    <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-2">
                                                <!-- No (Read Only) -->
                                                <div class="space-y-1">
                                                    <label class="block text-sm font-medium text-gray-700">No</label>
                                                    <input
                                                        class="w-full rounded-md border-0 bg-gray-100 px-3 py-2.5 text-sm ring-1 ring-gray-300 cursor-not-allowed"
                                                        type="text" x-model="kolom.no" readonly>
                                                </div>

                                                <!-- Kolom -->
                                                <div class="space-y-1">
                                                    <label class="block text-sm font-medium text-gray-700">Kolom</label>
                                                    <input
                                                        class="w-full rounded-md border-0 bg-white px-3 py-2.5 text-sm ring-1 ring-gray-300 focus:ring-2 focus:ring-blue-500"
                                                        type="text" x-model="kolom.kolom" placeholder="Pilih Field">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>

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

                            <!-- Summary -->
                            <template x-if="kolomData.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 Kolom</h3>
                                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                                        <div class="text-center">
                                            <div class="text-2xl font-bold text-blue-600" x-text="totalKolom"></div>
                                            <div class="text-sm text-gray-600">Total Kolom</div>
                                        </div>
                                        <div class="text-center">
                                            <div class="text-2xl font-bold text-green-600" x-text="filledKolom"></div>
                                            <div class="text-sm text-gray-600">Kolom Terisi</div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="flex justify-end space-x-4">
                        <a href="{{ route('master.data.master-template.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>
    @endsection