@extends('layouts.app')
@section('title', 'Tahun Ajaran')
@section('content')
    @php
        use App\Enums\SemesterName;

        $semesterOptions = collect(SemesterName::cases())
            ->map(
                fn(SemesterName $semester) => [
                    'value' => $semester->value,
                    'label' => $semester->label(),
                ],
            )
            ->values();
    @endphp

    <div x-data="{
        showAcademicYearModal: false,
        showSemesterModal: false,
        showConfirm: false,
        confirmUrl: '',
        confirmTitle: '',
        confirmText: '',
        confirmMethod: 'PATCH',
        academicYearForm: {
            id: null,
            name: '',
            start_date: '',
            end_date: '',
        },
        semesterForm: {
            id: null,
            academic_year_id: '',
            semester_name: '{{ SemesterName::Semester1->value }}',
            start_date: '',
            end_date: '',
            is_active: true,
        },
        selectedYearName: '',
        expandedYears: {},
        toggleYear(id) {
            this.expandedYears[id] = !this.expandedYears[id];
        },
        isExpanded(id) {
            return this.expandedYears[id] ?? true;
        },
        openAcademicYearCreate() {
            this.academicYearForm = {
                id: null,
                name: '',
                start_date: '',
                end_date: '',
            };
            this.showAcademicYearModal = true;
        },
        openAcademicYearEdit(data) {
            this.academicYearForm = data;
            this.showAcademicYearModal = true;
        },
        openSemesterCreate(academicYearId, academicYearName) {
            this.selectedYearName = academicYearName;
            this.semesterForm = {
                id: null,
                academic_year_id: academicYearId,
                semester_name: '{{ SemesterName::Semester1->value }}',
                start_date: '',
                end_date: '',
                is_active: true,
            };
            this.showSemesterModal = true;
        },
        openSemesterEdit(data, academicYearName) {
            this.selectedYearName = academicYearName;
            this.semesterForm = data;
            this.showSemesterModal = true;
        },
        confirmActivate(url, yearName, semesterName) {
            this.confirmUrl = url;
            this.confirmTitle = 'Konfirmasi Aktivasi Semester';
            this.confirmText = `Aktifkan ${semesterName} pada tahun ajaran ${yearName}? Semester aktif lain akan dinonaktifkan.`;
            this.confirmMethod = 'PATCH';
            this.showConfirm = true;
        },
        confirmDelete(url, text) {
            this.confirmUrl = url;
            this.confirmTitle = 'Konfirmasi Hapus';
            this.confirmText = text;
            this.confirmMethod = 'DELETE';
            this.showConfirm = true;
        }
    }">
        {{-- Page Header --}}
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
            <div>
                <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Tahun Ajaran</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Kelola tahun ajaran dan semester</p>
            </div>
            <button @click="openAcademicYearCreate()"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">
                <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M5 12h14m-7 7V5" />
                </svg>
                Tambah Tahun Ajaran
            </button>
        </div>

        @if (session('success'))
            <x-alert type="success">{{ session('success') }}</x-alert>
        @endif
        @if (session('error'))
            <x-alert type="danger">{{ session('error') }}</x-alert>
        @endif
        @if ($errors->any())
            <x-alert type="danger">{{ $errors->first() }}</x-alert>
        @endif

        {{-- Active Semester Banner --}}
        @if (isset($activeSemester))
            <div
                class="mb-6 p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 flex items-center gap-4">
                <div
                    class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-800/50 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-green-600 dark:text-green-400" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                        viewBox="0 0 24 24">
                        <path fill-rule="evenodd"
                            d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z"
                            clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="text-xs font-semibold uppercase tracking-wider text-green-600 dark:text-green-400">Semester
                        Aktif</p>
                    <p class="text-base font-bold text-gray-900 dark:text-white truncate">
                        {{ $activeSemester->academicYear->name }} — {{ $activeSemester->name->label() }}
                    </p>
                    <p class="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
                        {{ $activeSemester->start_date->format('d M Y') }} s/d
                        {{ $activeSemester->end_date->format('d M Y') }}
                    </p>
                </div>
            </div>
        @endif

        {{-- Academic Years Accordion --}}
        <div class="space-y-4">
            @forelse($academicYears ?? [] as $year)
                @php
                    $hasActiveSemester = $year->semesters->contains('is_active', true);
                @endphp
                <div
                    class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
                    {{-- Year Header (Accordion Trigger) --}}
                    <div class="flex items-center justify-between px-5 py-4 cursor-pointer select-none group"
                        @click="toggleYear('{{ $year->id }}')">
                        <div class="flex items-center gap-4 min-w-0">
                            {{-- Expand/Collapse Icon --}}
                            <div class="flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-colors"
                                :class="isExpanded('{{ $year->id }}') ? 'bg-primary-100 dark:bg-primary-900/30' :
                                    'bg-gray-100 dark:bg-gray-700'">
                                <svg class="w-4 h-4 transition-transform duration-200"
                                    :class="isExpanded('{{ $year->id }}') ?
                                        'rotate-90 text-primary-600 dark:text-primary-400' :
                                        'text-gray-500 dark:text-gray-400'"
                                    aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m9 5 7 7-7 7" />
                                </svg>
                            </div>
                            {{-- Year Info --}}
                            <div class="min-w-0">
                                <div class="flex items-center gap-2.5">
                                    <h2 class="text-base font-bold text-gray-900 dark:text-white truncate">
                                        {{ $year->name }}
                                    </h2>
                                </div>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                                    <svg class="w-3 h-3 inline-block mr-1 -mt-0.5" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                        viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M4 10h16M8 14h8m-4-7V4M7 7V4m10 3V4M5 20h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z" />
                                    </svg>
                                    {{ $year->start_date->format('d M Y') }} — {{ $year->end_date->format('d M Y') }}
                                    <span class="mx-1.5 text-gray-300 dark:text-gray-600">|</span>
                                    {{ $year->semesters->count() }} semester
                                </p>
                            </div>
                        </div>
                        {{-- Year Actions --}}
                        <div class="flex items-center gap-2 flex-shrink-0 ml-4" @click.stop>
                            <button type="button"
                                @click="openSemesterCreate('{{ $year->id }}', '{{ $year->name }}')"
                                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-primary-700 bg-primary-50 rounded-lg hover:bg-primary-100 dark:text-primary-400 dark:bg-primary-900/20 dark:hover:bg-primary-900/40 transition-colors"
                                title="Tambah semester">
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
                                    height="24" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 12h14m-7 7V5" />
                                </svg>
                                <span class="hidden sm:inline">Semester</span>
                            </button>
                            <button type="button"
                                @click='openAcademicYearEdit({{ json_encode([
                                    'id' => $year->id,
                                    'name' => $year->name,
                                    'start_date' => $year->start_date->format('Y-m-d'),
                                    'end_date' => $year->end_date->format('Y-m-d'),
                                ]) }})'
                                class="inline-flex items-center justify-center w-8 h-8 text-gray-500 rounded-lg
                        hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700
                        dark:hover:text-gray-200 transition-colors"
                                title="Edit tahun ajaran">
                                <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
                                    height="24" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2"
                                        d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z" />
                                </svg>
                            </button>
                            <button type="button"
                                @click="confirmDelete('{{ route('admin.academic-years.destroy', $year) }}', 'Hapus tahun ajaran {{ $year->name }} beserta semester di dalamnya?')"
                                class="inline-flex items-center justify-center w-8 h-8 text-gray-400 rounded-lg hover:bg-red-50 hover:text-red-600 dark:text-gray-500 dark:hover:bg-red-900/20 dark:hover:text-red-400 transition-colors"
                                title="Hapus tahun ajaran">
                                <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                    width="24" height="24" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z" />
                                </svg>
                            </button>
                        </div>
                    </div>

                    {{-- Semesters Panel (Collapsible) --}}
                    <div x-show="isExpanded('{{ $year->id }}')" x-collapse x-cloak>
                        <div class="border-t border-gray-100 dark:border-gray-700/50">
                            @forelse($year->semesters as $semester)
                                <div
                                    class="relative flex items-center gap-4 px-5 py-3.5 group/sem transition-colors {{ $semester->is_active ? 'bg-green-50 dark:bg-green-900/20' : 'hover:bg-gray-50 dark:hover:bg-gray-700/30' }} {{ !$loop->last ? 'border-b border-gray-100 dark:border-gray-700/50' : '' }}">

                                    {{-- Semester Icon --}}
                                    <div
                                        class="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center {{ $semester->is_active ? 'bg-green-100 dark:bg-green-900/30' : 'bg-gray-100 dark:bg-gray-700' }}">
                                        <svg class="w-4 h-4 {{ $semester->is_active ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400' }}"
                                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
                                            height="24" fill="none" viewBox="0 0 24 24">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M12 6.03v13m0-13c-2.819-.831-4.715-1.076-8.029-1.023A.99.99 0 0 0 3 6v11c0 .563.466 1.014 1.03 1.007 3.122-.043 5.018.212 7.97 1.023m0-13c2.819-.831 4.715-1.076 8.029-1.023A.99.99 0 0 1 21 6v11c0 .563-.466 1.014-1.03 1.007-3.122-.043-5.018.212-7.97 1.023" />
                                        </svg>
                                    </div>

                                    {{-- Semester Info --}}
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm font-semibold text-gray-900 dark:text-white">
                                                {{ $semester->name->label() }}</p>
                                            @if ($semester->is_active)
                                                <span
                                                    class="bg-green-100 text-green-800 text-xs font-medium px-2 py-0.5 rounded border border-green-400 dark:bg-green-900 dark:text-green-300 dark:border-green-800">Aktif</span>
                                            @else
                                                <span
                                                    class="bg-gray-100 text-gray-800 text-xs font-medium px-2 py-0.5 rounded border border-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600">Arsip</span>
                                            @endif
                                        </div>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                                            {{ $semester->start_date->format('d M Y') }} s/d
                                            {{ $semester->end_date->format('d M Y') }}
                                        </p>
                                    </div>

                                    {{-- Semester Actions --}}
                                    <div
                                        class="flex items-center gap-1.5 flex-shrink-0 opacity-0 group-hover/sem:opacity-100 transition-opacity">
                                        <button type="button"
                                            @click='openSemesterEdit({{ json_encode([
                                                'id' => $semester->id,
                                                'academic_year_id' => $year->id,
                                                'semester_name' => $semester->name->value,
                                                'start_date' => $semester->start_date->format('Y-m-d'),
                                                'end_date' => $semester->end_date->format('Y-m-d'),
                                                'is_active' => $semester->is_active,
                                            ]) }}, "{{ $year->name }}")'
                                            class="inline-flex items-center justify-center w-7 h-7 text-gray-400 rounded-md
                                hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600 dark:hover:text-gray-200
                                transition-colors"
                                            title="Edit semester">
                                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                                width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                <path stroke="currentColor" stroke-linecap="round"
                                                    stroke-linejoin="round" stroke-width="2"
                                                    d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z" />
                                            </svg>
                                        </button>
                                        @if (!$semester->is_active)
                                            <button type="button"
                                                @click="confirmActivate('{{ route('admin.semesters.activate', $semester) }}', '{{ $year->name }}', '{{ $semester->name->value }}')"
                                                class="inline-flex items-center justify-center w-7 h-7 text-gray-400 rounded-md hover:bg-green-100 hover:text-green-600 dark:hover:bg-green-900/30 dark:hover:text-green-400 transition-colors"
                                                title="Aktifkan semester">
                                                <svg class="w-4 h-4" aria-hidden="true"
                                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    fill="currentColor" viewBox="0 0 24 24">
                                                    <path fill-rule="evenodd"
                                                        d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.707-1.293a1 1 0 0 0-1.414-1.414L11 12.586l-1.793-1.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4-4Z"
                                                        clip-rule="evenodd" />
                                                </svg>
                                            </button>
                                        @endif
                                        <button type="button"
                                            @click="confirmDelete('{{ route('admin.semesters.destroy', $semester) }}', 'Hapus {{ $semester->name->value }} pada tahun ajaran {{ $year->name }}?')"
                                            class="inline-flex items-center justify-center w-7 h-7 text-gray-400 rounded-md hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400 transition-colors"
                                            title="Hapus semester">
                                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                                width="24" height="24" fill="none" viewBox="0 0 24 24">
                                                <path stroke="currentColor" stroke-linecap="round"
                                                    stroke-linejoin="round" stroke-width="2"
                                                    d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            @empty
                                <div class="px-5 py-8 text-center">
                                    <div
                                        class="w-12 h-12 mx-auto mb-3 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                                        <svg class="w-6 h-6 text-gray-400 dark:text-gray-500" aria-hidden="true"
                                            xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            fill="none" viewBox="0 0 24 24">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M10 3v4a1 1 0 0 1-1 1H5m4 8h6m-6-4h6m4-8v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1Z" />
                                        </svg>
                                    </div>
                                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Belum ada semester</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            @empty
                <div
                    class="bg-white dark:bg-gray-800 border-2 border-solid border-gray-200 dark:border-gray-700 rounded-xl p-12 text-center">
                    <div
                        class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                        <svg class="w-8 h-8 text-gray-400 dark:text-gray-500" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                            viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-6 5h6m-6 4h6M10 3v4h4V3h-4Z" />
                        </svg>
                    </div>
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-1">Belum ada tahun ajaran</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Mulai dengan membuat tahun ajaran pertama.</p>
                </div>
            @endforelse
        </div>

        <div class="mt-4">
            {{ $academicYears->links() }}
        </div>

        {{-- Academic Year Modal --}}
        <x-modal :show="'showAcademicYearModal'" title="Tahun Ajaran" size="md">
            <form id="academic-year-form"
                :action="academicYearForm.id ? '{{ url('admin/academic-years') }}/' + academicYearForm.id :
                    '{{ route('admin.academic-years.store') }}'"
                method="POST" class="space-y-4">
                @csrf
                <template x-if="academicYearForm.id">
                    <input type="hidden" name="_method" value="PUT">
                </template>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nama Tahun Ajaran</label>
                    <input type="text" name="name" x-model="academicYearForm.name" placeholder="2024/2025"
                        required
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tanggal Mulai</label>
                        <input type="date" name="start_date" x-model="academicYearForm.start_date" required
                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                    <div>
                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tanggal Selesai</label>
                        <input type="date" name="end_date" x-model="academicYearForm.end_date" required
                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                </div>
                <x-slot:footer>
                    <button type="button" @click="showAcademicYearModal = false"
                        class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                    <button type="submit" form="academic-year-form"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800"
                        x-text="academicYearForm.id ? 'Perbarui Tahun Ajaran' : 'Simpan Tahun Ajaran'"></button>
                </x-slot:footer>
            </form>
        </x-modal>

        {{-- Semester Modal --}}
        <x-modal :show="'showSemesterModal'" title="Semester" size="md">
            <form id="semester-form"
                :action="semesterForm.id ? '{{ url('admin/semesters') }}/' + semesterForm.id :
                    '{{ route('admin.semesters.store') }}'"
                method="POST" class="space-y-4">
                @csrf
                <template x-if="semesterForm.id">
                    <input type="hidden" name="_method" value="PATCH">
                </template>
                <input type="hidden" name="academic_year_id" :value="semesterForm.academic_year_id">
                <div class="text-sm text-gray-600 dark:text-gray-300">
                    Tahun ajaran: <span class="font-semibold" x-text="selectedYearName"></span>
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Semester</label>
                    <select name="semester_name" x-model="semesterForm.semester_name" required
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        @foreach ($semesterOptions as $semesterOption)
                            <option value="{{ $semesterOption['value'] }}">{{ $semesterOption['label'] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Mulai Semester</label>
                        <input type="date" name="start_date" x-model="semesterForm.start_date" required
                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                    <div>
                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Selesai
                            Semester</label>
                        <input type="date" name="end_date" x-model="semesterForm.end_date" required
                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                </div>
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_active" value="1" x-model="semesterForm.is_active"
                        class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    <span class="text-sm text-gray-700 dark:text-gray-300">Set sebagai semester aktif</span>
                </label>
                <x-slot:footer>
                    <button type="button" @click="showSemesterModal = false"
                        class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                    <button type="submit" form="semester-form"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800"
                        x-text="semesterForm.id ? 'Perbarui Semester' : 'Simpan Semester'"></button>
                </x-slot:footer>
            </form>
        </x-modal>

        {{-- Confirm Dialog --}}
        <div x-show="showConfirm" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 p-4"
            @keydown.escape.window="showConfirm = false">
            <div class="bg-white dark:bg-gray-700 rounded-xl shadow-xl p-6 max-w-md w-full text-center"
                x-show="showConfirm" 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">
                <div class="flex justify-center mb-4">
                    <div
                        :class="confirmMethod === 'DELETE'
                            ?
                            'w-14 h-14 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center' :
                            'w-14 h-14 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center'">
                        <svg :class="confirmMethod === 'DELETE'
                            ?
                            'w-7 h-7 text-red-600 dark:text-red-300' :
                            'w-7 h-7 text-yellow-600 dark:text-yellow-300'"
                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                            fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 13V8m0 8h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                    </div>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2" x-text="confirmTitle"></h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-6" x-text="confirmText"></p>
                <div class="flex justify-center gap-3">
                    <button @click="showConfirm = false"
                        class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                    <form :action="confirmUrl" method="POST" class="inline">
                        @csrf
                        <template x-if="confirmMethod === 'PATCH'">
                            <input type="hidden" name="_method" value="PATCH">
                        </template>
                        <template x-if="confirmMethod === 'DELETE'">
                            <input type="hidden" name="_method" value="DELETE">
                        </template>
                        <button type="submit"
                            :class="confirmMethod === 'DELETE'
                                ?
                                'px-5 py-2.5 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700' :
                                'px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800'"
                            x-text="confirmMethod === 'DELETE' ? 'Ya, Hapus' : 'Ya, Aktifkan'"></button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection