@extends('layouts.app')
@section('title', 'Jadwal Pelajaran')
@section('content')
<div x-data="{
    showModal: false,
    formData: {},
    showConfirm: false,
    showConfirmUrl: '',
    openCreate() {
        this.formData = {
            is_active: true,
            semester_id: '{{ $activeSemester?->id }}',
            semester_label: '{{ $activeSemester?->academicYear?->name ?? '-' }} · {{ $activeSemester?->name?->value ?? '-' }}',
        };
        this.showModal = true;
    },
    openEdit(data) { this.formData = 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">Jadwal Pelajaran</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                Semester Aktif:
                <span class="font-medium">{{ $activeSemester?->academicYear?->name ?? '-' }} · {{
                    $activeSemester?->name?->value ?? '-' }}</span>
            </p>
        </div>
        <div class="flex items-center gap-2">
            <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 Jadwal
            </button>
        </div>
    </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

    {{-- Filter --}}
    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Semester</label>
                <select name="semester_id"
                    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">
                    @forelse($semesters ?? [] as $semester)
                    <option value="{{ $semester->id }}" {{ request('semester_id', $activeSemester?->id) == $semester->id
                        ? 'selected' : '' }}>
                        {{ $semester->academicYear?->name }} · {{ $semester->name->value }}
                    </option>
                    @empty
                    <option value="">Tidak ada data semester</option>
                    @endforelse
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Hari</label>
                <select name="day_of_week"
                    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 Hari</option>
                    @foreach($dayOptions ?? [] as $day)
                    <option value="{{ $day->value }}" {{ request('day_of_week')===$day->value ? 'selected' : '' }}>{{
                        $day->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Kelas</label>
                <select name="classroom_id"
                    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 Kelas</option>
                    @foreach($classrooms ?? [] as $classroom)
                    <option value="{{ $classroom->id }}" {{ request('classroom_id')==$classroom->id ? 'selected' : ''
                        }}>{{ $classroom->name }} - {{ $classroom->grade_level->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Guru</label>
                <select name="teacher_id"
                    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 Guru</option>
                    @foreach($teachers ?? [] as $teacher)
                    <option value="{{ $teacher->id }}" {{ request('teacher_id')==$teacher->id ? 'selected' : '' }}>{{
                        $teacher->full_name }}</option>
                    @endforeach
                </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">Semester</th>
                <th class="px-4 py-3">Hari</th>
                <th class="px-4 py-3">Sesi</th>
                <th class="px-4 py-3">Jam</th>
                <th class="px-4 py-3">Mapel</th>
                <th class="px-4 py-3">Kelas</th>
                <th class="px-4 py-3">Guru</th>
                <th class="px-4 py-3 text-right">Aksi</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($schedules ?? [] as $schedule)
                <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">{{
                        $schedule->semester?->academicYear?->name }} · {{ $schedule->semester?->name?->value }}</td>
                    <td class="px-4 py-3">
                        <x-badge color="blue">{{ $schedule->day_of_week->label() }}</x-badge>
                    </td>
                    <td class="px-4 py-3 font-semibold text-gray-900 dark:text-white">{{ $schedule->session_order }}
                    </td>
                    <td class="px-4 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">{{
                        substr($schedule->start_time, 0, 5) }} - {{ substr($schedule->end_time, 0, 5) }}</td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $schedule->subject?->name ?? '-'
                        }}</td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">
                        {{ $schedule->classroom?->name ?? '-' }}
                        @if ($schedule->classroom?->grade_level)
                        <span class="text-xs text-gray-400">- {{ $schedule->classroom->grade_level->label() }}</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ $schedule->teacher?->full_name ?? '-' }}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button @click="openEdit({{ json_encode([
                                'id' => $schedule->id,
                                'semester_id' => $schedule->semester_id,
                                'semester_label' => ($schedule->semester?->academicYear?->name ?? '-') . ' · ' . ($schedule->semester?->name?->value ?? '-'),
                                'day_of_week' => $schedule->day_of_week->value,
                                'session_order' => $schedule->session_order,
                                'start_time' => substr($schedule->start_time, 0, 5),
                                'end_time' => substr($schedule->end_time, 0, 5),
                                'subject_id' => $schedule->subject_id,
                                'classroom_id' => $schedule->classroom_id,
                                'teacher_id' => $schedule->teacher_id,
                                'is_active' => $schedule->is_active,
                            ]) }})"
                                class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400">Edit</button>
                            <button type="button"
                                @click="confirmDelete('{{ route('admin.schedules.destroy', $schedule) }}')"
                                class="text-xs font-medium text-red-600 hover:underline dark:text-red-400">Hapus</button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-4 py-8 text-center text-gray-400">Tidak ada data jadwal</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($schedules) && method_exists($schedules, 'hasPages') && $schedules->hasPages())
            <x-slot:pagination>{{ $schedules->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    {{-- MODAL CREATE/EDIT --}}
    <x-modal :show="'showModal'" title="Jadwal Pelajaran" size="md">
        <form id="schedule-form"
            :action="formData.id ? '{{ url('admin/schedules') }}/' + formData.id : '{{ route('admin.schedules.store') }}'"
            method="POST" class="space-y-4">
            @csrf
            <template x-if="formData.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">Semester</label>
                <input type="hidden" name="semester_id" x-model="formData.semester_id">
                <input type="text"
                    :value="formData.semester_label || '{{ $activeSemester?->academicYear?->name ?? '-' }} · {{ $activeSemester?->name?->value ?? '-' }}'"
                    readonly
                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
                <p class="text-xs text-gray-400 mt-1">Otomatis menggunakan semester aktif.</p>
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Hari</label>
                <select name="day_of_week" x-model="formData.day_of_week" required
                    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="">Pilih Hari</option>
                    @foreach($dayOptions ?? [] as $day)
                    <option value="{{ $day->value }}">{{ $day->label() }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Sesi Ke</label>
                <input type="number" min="1" max="20" name="session_order" x-model="formData.session_order" required
                    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 class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Jam Mulai</label>
                    <input type="time" name="start_time" x-model="formData.start_time" required
                        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-2 text-sm font-medium text-gray-900 dark:text-white">Jam Selesai</label>
                    <input type="time" name="end_time" x-model="formData.end_time" required
                        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>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Mata Pelajaran</label>
                <select name="subject_id" x-model="formData.subject_id" required
                    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="">Pilih Mapel</option>
                    @foreach($subjects ?? [] as $subject)
                    <option value="{{ $subject->id }}">{{ $subject->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Kelas</label>
                <select name="classroom_id" x-model="formData.classroom_id" required
                    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="">Pilih Kelas</option>
                    @foreach($classrooms ?? [] as $classroom)
                    <option value="{{ $classroom->id }}">{{ $classroom->name }} - {{ $classroom->grade_level->label() }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Guru</label>
                <select name="teacher_id" x-model="formData.teacher_id" required
                    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="">Pilih Guru</option>
                    @foreach($teachers ?? [] as $teacher)
                    <option value="{{ $teacher->id }}">{{ $teacher->full_name }}</option>
                    @endforeach
                </select>
            </div>
            <label class="inline-flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="is_active" value="1" x-model="formData.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">Jadwal aktif</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 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                <button type="submit" form="schedule-form"
                    class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Simpan</button>
            </x-slot:footer>
        </form>
    </x-modal>

    <x-confirm-dialog show="showConfirm" title="Konfirmasi Hapus Jadwal"
        message="Apakah Anda yakin ingin menghapus jadwal ini? Tindakan ini tidak dapat dibatalkan."
        confirmText="Ya, Hapus" cancelText="Batal" danger="true" />
</div>
@endsection