@extends('layouts.app')
@section('title', 'Timetable')
@section('page-title', 'Timetable')
@section('content')
<div class="space-y-6">

    {{-- Admin: Class Selector + Action Buttons --}}
    @if(auth()->user()->isAdmin())
    <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-100">
        <form method="GET" class="flex flex-wrap gap-4 items-end">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Class</label>
                <select name="class_id" onchange="this.form.submit()" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    <option value="">Select Class</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>{{ $class->full_name }}</option>
                    @endforeach
                </select>
            </div>

            @if(request('class_id'))
                @if(!$editMode)
                    <a href="{{ route('timetable.index', ['class_id' => request('class_id'), 'edit' => 1]) }}"
                       class="inline-flex items-center gap-2 bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700 transition">
                        <i class="fas fa-edit"></i>
                        {{ $entries->isEmpty() ? 'Create Timetable' : 'Edit Timetable' }}
                    </a>
                @else
                    <a href="{{ route('timetable.index', ['class_id' => request('class_id')]) }}"
                       class="inline-flex items-center gap-2 bg-gray-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-600 transition">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                @endif
            @endif
        </form>
    </div>
    @endif

    {{-- Success Message --}}
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
    </div>
    @endif

    {{-- Validation Errors --}}
    @if($errors->any())
    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-exclamation-circle mr-1"></i>
        @foreach($errors->all() as $error)
            <p>{{ $error }}</p>
        @endforeach
    </div>
    @endif

    {{-- EDIT MODE: Editable Grid Form --}}
    @if(auth()->user()->isAdmin() && $editMode && request('class_id') && $periods->isNotEmpty())
    <form method="POST" action="{{ route('timetable.store') }}">
        @csrf
        <input type="hidden" name="class_id" value="{{ request('class_id') }}">

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-x-auto">
            <table class="w-full min-w-[900px]">
                <thead class="bg-primary-900 text-white">
                    <tr>
                        <th class="px-3 py-3 text-left text-sm">Period</th>
                        <th class="px-3 py-3 text-left text-sm">Time</th>
                        @foreach($days as $day)
                            <th class="px-3 py-3 text-center text-sm">{{ ucfirst($day) }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @php $idx = 0; @endphp
                    @foreach($periods as $period)
                    <tr class="{{ $period->is_break ? 'bg-yellow-50' : 'hover:bg-gray-50' }}">
                        <td class="px-3 py-3 font-medium text-sm">{{ $period->name }}</td>
                        <td class="px-3 py-2 text-xs text-gray-500 whitespace-nowrap">
                            {{ \Carbon\Carbon::parse($period->start_time)->format('h:i A') }} -
                            {{ \Carbon\Carbon::parse($period->end_time)->format('h:i A') }}
                        </td>
                        @foreach($days as $day)
                            <td class="px-2 py-2 text-center">
                                @if($period->is_break)
                                    <span class="text-yellow-600 font-medium text-sm">Break</span>
                                @else
                                    @php $existing = $grid[$period->id][$day] ?? null; @endphp
                                    <input type="hidden" name="entries[{{ $idx }}][period_id]" value="{{ $period->id }}">
                                    <input type="hidden" name="entries[{{ $idx }}][day]" value="{{ $day }}">

                                    <select name="entries[{{ $idx }}][subject_id]"
                                            class="w-full border border-gray-200 rounded px-1 py-1 text-xs mb-1 focus:ring-primary-500 focus:border-primary-500">
                                        <option value="">— Subject —</option>
                                        @foreach($subjects as $subject)
                                            <option value="{{ $subject->id }}"
                                                {{ ($existing?->subject_id == $subject->id) ? 'selected' : '' }}>
                                                {{ $subject->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <select name="entries[{{ $idx }}][teacher_id]"
                                            class="w-full border border-gray-200 rounded px-1 py-1 text-xs mb-1 focus:ring-primary-500 focus:border-primary-500">
                                        <option value="">— Teacher —</option>
                                        @foreach($teachers as $teacher)
                                            <option value="{{ $teacher->id }}"
                                                {{ ($existing?->teacher_id == $teacher->id) ? 'selected' : '' }}>
                                                {{ $teacher->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <input type="text" name="entries[{{ $idx }}][room]"
                                           value="{{ $existing?->room ?? '' }}"
                                           placeholder="Room"
                                           class="w-full border border-gray-200 rounded px-1 py-1 text-xs focus:ring-primary-500 focus:border-primary-500">

                                    @php $idx++; @endphp
                                @endif
                            </td>
                        @endforeach
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="flex justify-end mt-4">
            <button type="submit"
                    class="inline-flex items-center gap-2 bg-green-600 text-white px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-green-700 transition shadow-sm">
                <i class="fas fa-save"></i> Save Timetable
            </button>
        </div>
    </form>

    {{-- VIEW MODE: Read-only Grid --}}
    @elseif($periods->isNotEmpty() && !empty($grid))
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-x-auto">
        <table class="w-full min-w-[800px]">
            <thead class="bg-primary-900 text-white">
                <tr>
                    <th class="px-4 py-3 text-left text-sm">Period</th>
                    <th class="px-4 py-3 text-left text-sm">Time</th>
                    @foreach($days as $day)
                        <th class="px-4 py-3 text-center text-sm">{{ ucfirst($day) }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($periods as $period)
                <tr class="{{ $period->is_break ? 'bg-yellow-50' : 'hover:bg-gray-50' }}">
                    <td class="px-4 py-3 font-medium text-sm">{{ $period->name }}</td>
                    <td class="px-4 py-3 text-xs text-gray-500">
                        {{ \Carbon\Carbon::parse($period->start_time)->format('h:i A') }} -
                        {{ \Carbon\Carbon::parse($period->end_time)->format('h:i A') }}
                    </td>
                    @foreach($days as $day)
                        <td class="px-4 py-3 text-center text-sm">
                            @if($period->is_break)
                                <span class="text-yellow-600 font-medium">Break</span>
                            @elseif(isset($grid[$period->id][$day]))
                                @php $entry = $grid[$period->id][$day]; @endphp
                                <div>
                                    <p class="font-medium text-gray-800">{{ $entry->subject?->name ?? '-' }}</p>
                                    <p class="text-xs text-gray-500">{{ $entry->teacher?->name ?? '' }}</p>
                                    @if($entry->room)
                                        <p class="text-xs text-blue-500">{{ $entry->room }}</p>
                                    @endif
                                </div>
                            @else
                                <span class="text-gray-300">—</span>
                            @endif
                        </td>
                    @endforeach
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    @else
        <div class="bg-white rounded-xl shadow-sm p-12 border border-gray-100 text-center text-gray-500">
            <i class="fas fa-calendar-alt text-4xl mb-3"></i>
            <p>{{ auth()->user()->isAdmin() ? 'Select a class to view or create a timetable.' : 'Select a class to view the timetable.' }}</p>
        </div>
    @endif
</div>
@endsection