@extends('layouts.app')
@section('title', 'Kalender Libur')
@section('content')
<div x-data="{
    showModal: false,
    showConfirm: false,
    showConfirmUrl: '',
    form: {
        id: null,
        start_date: '',
        end_date: '',
        description: '',
        type: '{{ $holidayTypes[0]->value ?? 'holiday' }}',
        scope: '{{ $holidayScopes[0]->value ?? 'whole_school' }}',
        is_daily_attendance_active: false,
        classroom_ids: [],
    },
    openCreate() {
        this.form = {
            id: null,
            start_date: '',
            end_date: '',
            description: '',
            type: '{{ $holidayTypes[0]->value ?? 'holiday' }}',
            scope: '{{ $holidayScopes[0]->value ?? 'whole_school' }}',
            is_daily_attendance_active: false,
            classroom_ids: [],
        };
        this.showModal = true;
    },
    openEdit(data) {
        this.form = data;
        this.showModal = true;
    },
    confirmDelete(url) {
        this.showConfirmUrl = url;
        this.showConfirm = true;
    },
}">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Kalender Libur</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Kelola tanggal libur dan aktivitas absensi harian
            </p>
        </div>
        @if(auth()->user()?->role?->value === 'super_admin')
        <button @click="openCreate()"
            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" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                    clip-rule="evenodd" />
            </svg>
            Tambah Libur
        </button>
        @endif
    </div>

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

    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cari</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Deskripsi libur"
                    class="bg-gray-50 border border-gray-300 text-gray-900 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-1 text-xs font-medium text-gray-700 dark:text-gray-300">Tipe</label>
                <select name="type"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua</option>
                    @foreach($holidayTypes as $type)
                    <option value="{{ $type->value }}" {{ request('type')===$type->value ? 'selected' : '' }}>
                        {{ $type->label() }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cakupan</label>
                <select name="scope"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua</option>
                    @foreach($holidayScopes as $scope)
                    <option value="{{ $scope->value }}" {{ request('scope')===$scope->value ? 'selected' : '' }}>
                        {{ $scope->label() }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Absensi Harian</label>
                <select name="attendance_status"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua</option>
                    <option value="1" {{ request('attendance_status')==='1' ? 'selected' : '' }}>Aktif</option>
                    <option value="0" {{ request('attendance_status')==='0' ? 'selected' : '' }}>Nonaktif</option>
                </select>
            </div>
        </x-slot:fields>
    </x-filter-bar>

    <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
        <x-data-table>
            <x-slot:heading>
                <th class="px-4 py-3">Periode</th>
                <th class="px-4 py-3">Deskripsi</th>
                <th class="px-4 py-3">Tipe</th>
                <th class="px-4 py-3">Cakupan</th>
                <th class="px-4 py-3">Absensi Harian</th>
                <th class="px-4 py-3">Dibuat Oleh</th>
                @if(auth()->user()?->role?->value === 'super_admin')
                <th class="px-4 py-3 text-right">Aksi</th>
                @endif
            </x-slot:heading>
            <x-slot:body>
                @forelse($holidays as $holiday)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $holiday->start_date->format('d M
                        Y') }} - {{ $holiday->end_date->format('d M Y') }}</td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $holiday->description }}</td>
                    <td class="px-4 py-3">
                        <x-badge color="blue">{{ $holiday->type->label() }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
                        {{ $holiday->scope->label() }}
                        @if($holiday->scope->value === 'per_class')
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            {{ $holiday->classrooms->pluck('name')->join(', ') ?: '-' }}
                        </p>
                        @endif
                    </td>
                    <td class="px-4 py-3">
                        <x-badge :color="$holiday->is_daily_attendance_active ? 'green' : 'red'">
                            {{ $holiday->is_daily_attendance_active ? 'Aktif' : 'Nonaktif' }}
                        </x-badge>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">{{ $holiday->creator?->name ?? '-' }}
                    </td>
                    @if(auth()->user()?->role?->value === 'super_admin')
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button type="button" @click='openEdit({{ json_encode([
                                            ' id'=> $holiday->id,
                                'start_date' => $holiday->start_date->format('Y-m-d'),
                                'end_date' => $holiday->end_date->format('Y-m-d'),
                                'description' => $holiday->description,
                                'type' => $holiday->type->value,
                                'scope' => $holiday->scope->value,
                                'is_daily_attendance_active' => $holiday->is_daily_attendance_active,
                                'classroom_ids' => $holiday->classrooms->pluck('id')->values()->all(),
                                ]) }})'
                                class="text-xs font-medium text-primary-600 hover:underline
                                dark:text-primary-400">Edit</button>
                            <button type="button"
                                @click="confirmDelete('{{ route('admin.holidays.destroy', $holiday) }}')"
                                class="text-xs font-medium text-red-600 hover:underline dark:text-red-400">Hapus</button>
                        </div>
                    </td>
                    @endif
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-400">Belum ada data kalender libur</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if($holidays->hasPages())
            <x-slot:pagination>{{ $holidays->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    @if(auth()->user()?->role?->value === 'super_admin')
    <x-modal :show="'showModal'" title="Kalender Libur" size="md">
        <form id="holiday-form"
            :action="form.id ? '{{ url('admin/holidays') }}/' + form.id : '{{ route('admin.holidays.store') }}'"
            method="POST" class="space-y-4">
            @csrf
            <template x-if="form.id"><input type="hidden" name="_method" value="PUT"></template>

            <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="form.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="form.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>

            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Deskripsi</label>
                <input type="text" name="description" x-model="form.description" required
                    placeholder="Contoh: Libur Nasional"
                    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">Tipe</label>
                    <select name="type" x-model="form.type"
                        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"
                        required>
                        @foreach($holidayTypes as $type)
                        <option value="{{ $type->value }}">{{ $type->label() }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Cakupan</label>
                    <select name="scope" x-model="form.scope"
                        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"
                        required>
                        @foreach($holidayScopes as $scope)
                        <option value="{{ $scope->value }}">{{ $scope->label() }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <template x-if="form.scope === 'per_class'">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Target Kelas</label>
                    <select name="classroom_ids[]" x-model="form.classroom_ids" multiple
                        class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 min-h-[120px] dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        @foreach($classrooms as $classroom)
                        <option value="{{ $classroom->id }}">{{ $classroom->name }}</option>
                        @endforeach
                    </select>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Gunakan Ctrl/Cmd untuk memilih lebih dari
                        satu kelas.</p>
                </div>
            </template>

            <label class="inline-flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="is_daily_attendance_active" value="1"
                    x-model="form.is_daily_attendance_active"
                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                <span class="text-sm text-gray-700 dark:text-gray-300">Absensi harian tetap aktif pada rentang tanggal
                    ini</span>
            </label>

            <x-slot:footer>
                <button type="button" @click="showModal = 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="holiday-form"
                    class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800"
                    x-text="form.id ? 'Perbarui' : 'Simpan'"></button>
            </x-slot:footer>
        </form>
    </x-modal>

    <x-confirm-dialog show="showConfirm" title="Konfirmasi Hapus Libur"
        message="Apakah Anda yakin ingin menghapus data libur ini?" confirmText="Ya, Hapus" cancelText="Batal"
        danger="true" />
    @endif
</div>
@endsection