@props(['kelasOptions' => [], 'mataKuliahOptions' => []])

<div
    x-data="{
        open: false,
        mode: '',
        data: {},
        errors: {},
        pickerKey: 0,
        kelasOptions: @js($kelasOptions),

        canSubmit() {
            return !!(this.data.hari && this.data.kelas_id && this.data.kelas && this.data.dosen_id && this.data.mata_kuliah && this.data.jam_masuk && this.data.jam_keluar);
        },

        initial(m, d) { this.mode = m; this.data = d; this.pickerKey++; this.open = true; },
        close() { this.open = false; this.errors = {}; this.data = {}; },

        async submitUpdate() {
            this.errors = {};
            try {
                const fd = new FormData();
                fd.append('_token', '{{ csrf_token() }}');
                fd.append('_method', 'patch');
                fd.append('hari', this.data.hari);
                fd.append('kelas_id', this.data.kelas_id);
                fd.append('dosen_id', this.data.dosen_id);
                fd.append('mata_kuliah', this.data.mata_kuliah);
                fd.append('jam_masuk', this.data.jam_masuk);
                fd.append('jam_keluar', this.data.jam_keluar);
                fd.append('kelas', this.data.kelas);
                const res = await fetch(`{{ url('/admin/jadwal/update') }}/${this.data.id}`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    body: fd,
                });
                const result = await res.json();
                if (result.success) {
                    this.open = false;
                    this.data = {};
                    $('#jadwal-table').DataTable().ajax.reload(null, false);
                    $store.toast.success(result.message || 'Data Jadwal berhasil diperbarui!');
                } else {
                    this.errors = result.errors || {};
                    $store.toast.error(result.message || 'Gagal memperbarui Data Jadwal.');
                }
            } catch (e) {
                $store.toast.error('Terjadi kesalahan: ' + e.message);
            }
        },

        async submitDelete() {
            try {
                const fd = new FormData();
                fd.append('_token', '{{ csrf_token() }}');
                fd.append('_method', 'delete');
                const res = await fetch(`{{ url('/admin/jadwal/delete') }}/${this.data.id}`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                    body: fd,
                });
                const result = await res.json();
                if (result.success) {
                    this.open = false;
                    this.data = {};
                    $('#jadwal-table').DataTable().ajax.reload(null, false);
                    $store.toast.success(result.message || 'Data Jadwal berhasil dihapus!');
                } else {
                    $store.toast.error(result.message || 'Gagal menghapus Data Jadwal.');
                }
            } catch (e) {
                $store.toast.error('Terjadi kesalahan: ' + e.message);
            }
        },
    }"
    @jadwal-action.window="initial($event.detail.mode, $event.detail.data)"
    @dosen-picked="data.dosen_id = $event.detail.id; data.dosen = $event.detail.nama"
    @dosen-cleared="data.dosen_id = null"
    x-show="open"
    x-transition.opacity
    x-cloak
>
    <x-modal-shell show="open" close="close" :close-on-outside="false">
        <template x-if="mode === 'update'">
            <div class="flex flex-col gap-2">
                <h2 class="text-center text-xs font-semibold">Edit Jadwal</h2>
                <form @submit.prevent="submitUpdate" class="flex flex-col gap-2 text-xs">
                    <div class="flex flex-col gap-1">
                        <label class="text-gray-600">Hari</label>
                        <select x-model="data.hari" name="hari" required class="text-xs border border-gray-300 rounded px-2 py-1.5">
                            <option value="">-- pilih hari --</option>
                            <option>Senin</option>
                            <option>Selasa</option>
                            <option>Rabu</option>
                            <option>Kamis</option>
                            <option>Jumat</option>
                        </select>
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-gray-600">Ruang</label>
                        <select x-model="data.kelas_id" name="kelas_id" required class="text-xs border border-gray-300 rounded px-2 py-1.5">
                            <option value="">-- pilih ruang --</option>
                            <template x-for="k in kelasOptions" :key="k.id">
                                <option :value="k.id" x-text="`${k.kode_ruangan} - ${k.nama}`"></option>
                            </template>
                        </select>
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-gray-600">Kelas (e.g. 2A)</label>
                        <input type="text" x-model="data.kelas" name="kelas" required maxlength="50" class="text-xs border border-gray-300 rounded px-2 py-1.5">
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-gray-600">Dosen</label>
                        <div class="relative" :key="pickerKey" x-data="dosenPicker({ id: data.dosen_id, name: data.dosen })">
                            <input
                                type="text"
                                x-model="query"
                                @keydown="onKeydown($event)"
                                @blur="onBlur"
                                autocomplete="off"
                                required
                                class="text-xs border border-gray-300 rounded px-2 py-1.5 w-full"
                            >
                            <input type="hidden" name="dosen_id" :value="dosenId">
                            <ul
                                x-show="open"
                                x-cloak
                                class="absolute z-20 w-full mt-1 max-h-48 overflow-y-auto bg-white border border-gray-300 rounded shadow-lg"
                            >
                                <template x-for="(item, i) in results" :key="item.id">
                                    <li
                                        @click="select(item)"
                                        @mouseenter="highlight = i"
                                        :class="i === highlight ? 'bg-gray-100' : ''"
                                        class="px-2 py-1.5 cursor-pointer hover:bg-gray-50"
                                        x-text="item.nama"
                                    ></li>
                                </template>
                            </ul>
                            <p x-show="hasNoMatch" x-cloak class="text-red text-[10px] mt-0.5">Dosen tidak ditemukan. Pilih dari daftar.</p>
                        </div>
                    </div>
                    <div class="flex flex-col gap-1">
                        <label class="text-gray-600">Mata Kuliah</label>
                        <input type="text" x-model="data.mata_kuliah" name="mata_kuliah" required maxlength="255" class="text-xs border border-gray-300 rounded px-2 py-1.5">
                    </div>
                    <div class="grid grid-cols-3 gap-1">
                        <div class="flex flex-col gap-1">
                            <label class="text-gray-600">Jam Masuk</label>
                            <input type="time" x-model="data.jam_masuk" name="jam_masuk" required class="text-xs border border-gray-300 rounded px-2 py-1.5">
                        </div>
                        <div class="flex flex-col gap-1">
                            <label class="text-gray-600">Jam Keluar</label>
                            <input type="time" x-model="data.jam_keluar" name="jam_keluar" required class="text-xs border border-gray-300 rounded px-2 py-1.5">
                        </div>
                    </div>
                    <div x-show="errors && Object.keys(errors).length" class="text-red text-xs" x-text="Object.values(errors).flat().join(' ')"></div>
                    <div x-show="data._error" class="text-red text-xs" x-text="data._error"></div>
                    <button type="submit" :disabled="!canSubmit()" class="bg-blue-700 text-white text-xs font-semibold hover:opacity-75 flex justify-center items-center gap-1.5 rounded-lg py-1.5 disabled:opacity-50 disabled:cursor-not-allowed">Simpan</button>
                </form>
            </div>
        </template>
        <template x-if="mode === 'delete'">
            <div class="flex flex-col items-center gap-2">
                <p class="text-xs text-center">Hapus jadwal <span class="font-medium" x-text="data.label"></span>?</p>
                <div class="flex gap-2">
                    <button @click="submitDelete" class="bg-red text-white px-3 py-1 rounded-md text-xs font-semibold">Hapus</button>
                    <button @click="close" class="bg-white text-slate-900 ring-1 ring-gray-300 px-3 py-1 rounded-md text-xs font-semibold">Batal</button>
                </div>
            </div>
        </template>
    </x-modal-shell>
</div>