@extends('selva.layout')

@section('title', 'Input Nilai')

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

            <div x-data="inputList">

                <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">Input Nilai</h2>

                        <div class="space-y-6">
                            <div>
                                <label class="mb-1 block text-sm font-medium text-gray-700" for="master_template_sertifikat">
                                    Jenis Penilaian
                                </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 Jenis Penilaian</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>

                            <label class="inline-flex items-center gap-2 text-sm text-gray-700">
                                <input class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
                                    type="checkbox" x-model="inputData.use_jp_teori" :checked="inputData.use_jp_teori">
                                Input Nilai Akhir
                            </label>

                            <div>
                                <label class="mb-1 block text-sm font-medium text-gray-700" for="tahun">
                                    Tahun
                                </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 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.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="pelatihan">
                                    Pelatihan
                                </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 Pelatihan</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 class="space-y-4">
                                <div class="ag-theme-alpine h-80 w-full rounded-lg border border-gray-200"
                                    id="komponen-grid" style="height: 450px;">
                                </div>
                            </div>
                        </div>
                    </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 class="fixed inset-0 left-0 top-0 z-[99999] flex items-center justify-center bg-white/80 backdrop-blur-sm"
                x-show="isLoading" x-transition.opacity>
                <div class="flex flex-col items-center gap-3">
                    <div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-200 border-t-blue-600"></div>
                    <p class="text-sm text-gray-600">Memuat data...</p>
                </div>
            </div>
        </div>
    </div>
@endsection

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