@extends('layouts.app')
@section('title', 'Guru Pengganti')
@section('content')
<div x-data="{
    showModal: false,
    formData: { date: '', schedule_id: '', substitute_teacher_id: '', notes: '' },
    scheduleOptions: [],
    loadingSchedules: false,
    async loadSchedules(date) {
        if (!date) return;
        this.loadingSchedules = true;
        const res = await fetch('{{ route('admin.substitutes.schedules') }}?date=' + date);
        this.scheduleOptions = await res.json();
        this.loadingSchedules = false;
    }
}">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Guru Pengganti</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Tetapkan guru pengganti untuk sesi mengajar yang
                kosong</p>
        </div>
        <button
            @click="showModal = true; formData = { date: '', schedule_id: '', substitute_teacher_id: '', notes: '' }"
            type="button"
            class="flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300">
            <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>
            Tetapkan Pengganti
        </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

    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Tanggal</label>
                <input type="date" name="date" value="{{ request('date', now()->format('Y-m-d')) }}"
                    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">Guru Asli</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>
            <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 }}</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">Tanggal</th>
                <th class="px-4 py-3">Guru Asli</th>
                <th class="px-4 py-3">Guru Pengganti</th>
                <th class="px-4 py-3">Mata Pelajaran</th>
                <th class="px-4 py-3">Kelas</th>
                <th class="px-4 py-3">Sesi</th>
                <th class="px-4 py-3">Ditunjuk Oleh</th>
                <th class="px-4 py-3 text-right">Aksi</th>
            </x-slot:heading>
            <x-slot:body>
                @forelse($substitutes ?? [] as $sub)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">{{
                        \Carbon\Carbon::parse($sub->date)->format('d M Y') }}</td>
                    <td class="px-4 py-3 text-sm text-gray-900 dark:text-white font-medium">{{
                        $sub->schedule->teacher->full_name ?? '–' }}</td>
                    <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
                        <span class="font-medium text-primary-600 dark:text-primary-400">{{
                            $sub->substituteTeacher->full_name ?? '–' }}</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{{ $sub->schedule->subject->name ??
                        '–' }}</td>
                    <td class="px-4 py-3">
                        <x-badge color="gray">{{ $sub->schedule->classroom->name ?? '–' }}</x-badge>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">{{ $sub->schedule->session_label ??
                        $sub->schedule->start_time ?? '–' }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">{{ $sub->appointor->name ?? '–' }}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <form action="{{ route('admin.substitutes.destroy', $sub->id) }}" method="POST" class="inline"
                            onsubmit="return confirm('Batalkan penugasan pengganti ini?')">
                            @csrf @method('DELETE')
                            <button type="submit"
                                class="text-sm font-medium text-red-600 hover:underline dark:text-red-400">Batalkan</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-4 py-8 text-center text-gray-400">Tidak ada data guru pengganti</td>
                </tr>
                @endforelse
            </x-slot:body>
            @if(isset($substitutes) && method_exists($substitutes, 'hasPages') && $substitutes->hasPages())
            <x-slot:pagination>{{ $substitutes->withQueryString()->links() }}</x-slot:pagination>
            @endif
        </x-data-table>
    </div>

    {{-- Modal Tetapkan Pengganti --}}
    <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 p-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-lg" @click.outside="showModal = false">
            <div class="flex items-center justify-between p-5 border-b dark:border-gray-600">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Tetapkan Guru Pengganti</h3>
                <button @click="showModal = false" type="button"
                    class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd"
                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
            <form action="{{ route('admin.substitutes.store') }}" method="POST" class="p-5 space-y-4">
                @csrf
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tanggal <span
                            class="text-red-500">*</span></label>
                    <input type="date" name="date" x-model="formData.date" @change="loadSchedules($event.target.value)"
                        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">Jadwal / Sesi <span
                            class="text-red-500">*</span></label>
                    <select name="schedule_id" x-model="formData.schedule_id" required :disabled="loadingSchedules"
                        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 disabled:opacity-50">
                        <option value="">Pilih tanggal terlebih dahulu...</option>
                        <template x-for="s in scheduleOptions" :key="s.id">
                            <option :value="s.id" x-text="s.label"></option>
                        </template>
                    </select>
                    <p x-show="loadingSchedules" class="mt-1 text-xs text-gray-400">Memuat jadwal...</p>
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Guru Pengganti <span
                            class="text-red-500">*</span></label>
                    <select name="substitute_teacher_id" x-model="formData.substitute_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 pengganti</option>
                        @foreach($teachers ?? [] as $teacher)
                        <option value="{{ $teacher->id }}">{{ $teacher->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Catatan</label>
                    <textarea name="notes" x-model="formData.notes" rows="2"
                        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"
                        placeholder="Catatan opsional..."></textarea>
                </div>
                <div class="flex justify-end gap-3 pt-2">
                    <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"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800">Tetapkan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection