@extends('layouts.school')

@section('title', 'Timetable')
@section('header', 'Class Timetable')

@section('content')
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <form method="GET" class="flex gap-3">
            <select name="class_id" class="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                <option value="">Select class...</option>
                @foreach($classes as $c)
                    <option value="{{ $c->id }}" {{ ($classId ?? '') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                @endforeach
            </select>
            <button type="submit" class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200">View</button>
        </form>
        <div class="flex gap-2">
            <button onclick="document.getElementById('copyModal').classList.remove('hidden')" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Copy to Class</button>
            <button onclick="document.getElementById('addEntryModal').classList.remove('hidden')" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">+ Add Entry</button>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-4 rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="mb-4 rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
    @endif

    @if($classInfo)
        <div class="mb-4 flex items-center justify-between">
            <h2 class="text-lg font-bold text-gray-900">{{ $classInfo->name }} — Weekly Timetable</h2>
            <a href="{{ route('school.timetable.print', [request()->route('schoolId'), 'class_id' => $classInfo->id]) }}" target="_blank" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Print View</a>
        </div>

        <div class="overflow-x-auto rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5">
            <table class="min-w-full border-collapse">
                <thead>
                    <tr>
                        <th class="border border-gray-200 bg-gray-50 px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase w-24">Time</th>
                        @foreach($days as $day)
                            <th class="border border-gray-200 bg-gray-50 px-4 py-3 text-center text-xs font-semibold text-gray-500 uppercase">{{ ucfirst($day) }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach($periods as $period)
                        <tr>
                            <td class="border border-gray-200 bg-gray-50 px-3 py-2 text-xs font-medium text-gray-600 whitespace-nowrap">{{ $period }}</td>
                            @foreach($days as $day)
                                @php
                                    $hour = substr($period, 0, 2);
                                    $key = $day . '_' . $hour;
                                    $entry = $timetable->get($key);
                                @endphp
                                <td class="border border-gray-200 px-2 py-2 align-top min-w-[120px]">
                                    @if($entry)
                                        <div class="rounded-lg bg-primary-50 border border-primary-200 p-2 relative group">
                                            <p class="text-xs font-semibold text-primary-900">{{ $entry->subject?->name ?? '—' }}</p>
                                            @if($entry->teacher)
                                                <p class="text-[11px] text-primary-600">{{ $entry->teacher->name }}</p>
                                            @endif
                                            @if($entry->room)
                                                <p class="text-[11px] text-gray-500">Rm: {{ $entry->room }}</p>
                                            @endif
                                            <form method="POST" action="{{ route('school.timetable.destroy', [request()->route('schoolId'), $entry->id]) }}" class="hidden group-hover:block absolute top-1 right-1">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-red-400 hover:text-red-600 text-[10px]" onclick="return confirm('Remove?')">&times;</button>
                                            </form>
                                        </div>
                                    @endif
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center text-sm text-gray-500">Select a class above to view its timetable.</div>
    @endif

    {{-- Copy Modal --}}
    <div id="copyModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
        <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Copy Timetable to Another Class</h3>
            <form method="POST" action="{{ route('school.timetable.copy', request()->route('schoolId')) }}">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">From Class *</label>
                        <select name="from_class_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            @foreach($classes as $c)
                                <option value="{{ $c->id }}" {{ ($classId ?? '') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">To Class *</label>
                        <select name="to_class_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            <option value="">Select...</option>
                            @foreach($classes as $c)
                                <option value="{{ $c->id }}">{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <p class="text-xs text-gray-500">Entries that would create teacher/room conflicts are skipped.</p>
                </div>
                <div class="mt-6 flex items-center gap-3">
                    <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Copy</button>
                    <button type="button" onclick="document.getElementById('copyModal').classList.add('hidden')" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Add Entry Modal --}}
    <div id="addEntryModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
        <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Add Timetable Entry</h3>
            <form method="POST" action="{{ route('school.timetable.store', request()->route('schoolId')) }}">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Class *</label>
                        <select name="class_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            <option value="">Select...</option>
                            @foreach($classes as $c)
                                <option value="{{ $c->id }}" {{ ($classId ?? '') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Subject *</label>
                        <select name="subject_id" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            <option value="">Select...</option>
                            @php
                                $subjects = \App\Models\Subject::where('school_id', request()->route('schoolId'))->orderBy('name')->get();
                            @endphp
                            @foreach($subjects as $s)
                                <option value="{{ $s->id }}">{{ $s->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Teacher</label>
                        <select name="teacher_id" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                            <option value="">None</option>
                            @php
                                $teachers = \App\Models\User::where('school_id', request()->route('schoolId'))->where('role', 'teacher')->orderBy('name')->get();
                            @endphp
                            @foreach($teachers as $t)
                                <option value="{{ $t->id }}">{{ $t->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Day *</label>
                            <select name="day_of_week" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                @foreach(['monday','tuesday','wednesday','thursday','friday','saturday'] as $d)
                                    <option value="{{ $d }}">{{ ucfirst($d) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Start *</label>
                            <input type="time" name="start_time" value="08:00" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">End *</label>
                            <input type="time" name="end_time" value="09:00" required class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Room</label>
                        <input type="text" name="room" placeholder="e.g. Room 101" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                    </div>
                </div>
                <div class="mt-6 flex items-center gap-3">
                    <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Add Entry</button>
                    <button type="button" onclick="document.getElementById('addEntryModal').classList.add('hidden')" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                </div>
            </form>
        </div>
    </div>
@endsection