@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Schedules') . ' | ' . __('dashboard.Edit Schedule'))

@section('content')
<div class="space-y-8">
    <section class="rounded-xl border border-violet-100 bg-violet-50/80 p-6 shadow-sm dark:border-violet-900/40 dark:bg-violet-950/20">
        <p class="text-xs font-black uppercase tracking-[0.28em] text-violet-600 dark:text-violet-300">{{ __('dashboard.Schedule Builder') }}</p>
        <h1 class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ __('dashboard.Edit Schedule') }}</h1>
        <p class="mt-3 text-sm text-surface-600 dark:text-surface-300">{{ $schedule->schoolClass->name ?? '' }}</p>
    </section>

    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <form method="POST" action="{{ route('admin.schedules.update', $schedule->id) }}" class="space-y-8">
            @csrf
            @method('PUT')
            <input type="hidden" name="school_class_id" value="{{ $schedule->school_class_id }}">

            <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Day of Week') }}</label>
                    <select name="day_of_week" required class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-violet-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="Monday" @selected($schedule->day_of_week == 'Monday')>{{ __('dashboard.Monday') }}</option>
                        <option value="Tuesday" @selected($schedule->day_of_week == 'Tuesday')>{{ __('dashboard.Tuesday') }}</option>
                        <option value="Wednesday" @selected($schedule->day_of_week == 'Wednesday')>{{ __('dashboard.Wednesday') }}</option>
                        <option value="Thursday" @selected($schedule->day_of_week == 'Thursday')>{{ __('dashboard.Thursday') }}</option>
                        <option value="Friday" @selected($schedule->day_of_week == 'Friday')>{{ __('dashboard.Friday') }}</option>
                        <option value="Saturday" @selected($schedule->day_of_week == 'Saturday')>{{ __('dashboard.Saturday') }}</option>
                        <option value="Sunday" @selected($schedule->day_of_week == 'Sunday')>{{ __('dashboard.Sunday') }}</option>
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Period') }}</label>
                    <input type="number" name="period" value="{{ $schedule->period }}" required class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-violet-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Course') }}</label>
                    <select name="course_id" id="courseSelect" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-violet-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Course') }}</option>
                        @foreach($schedule->schoolClass->courses as $course)
                            <option value="{{ $course->id }}" @selected($schedule->course_id == $course->id)>{{ $course->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Start Time') }}</label>
                    <input type="time" name="start_time" value="{{ $schedule->start_time }}" required class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-violet-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.End Time') }}</label>
                    <input type="time" name="end_time" value="{{ $schedule->end_time }}" required class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-violet-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Lesson') }}</label>
                    <select name="lesson_id" id="lessonSelect" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-violet-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        @if($schedule->lesson)
                            <option value="{{ $schedule->lesson->id }}" selected>{{ $schedule->lesson->title }}</option>
                        @else
                            <option value="">{{ __('dashboard.Select Lesson') }}</option>
                        @endif
                    </select>
                </div>
            </div>

            <div class="flex flex-wrap justify-end gap-3 border-t border-surface-200 pt-6 dark:border-surface-800">
                <a href="{{ route('admin.schedules.index', $schedule->school_class_id) }}" class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-600 transition hover:border-surface-300 dark:border-surface-700 dark:text-surface-300">{{ __('dashboard.Back to Schedules') }}</a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-violet-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-violet-700">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>{{ __('dashboard.Save') }}</span>
                </button>
            </div>
        </form>
    </section>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('courseSelect').addEventListener('change', function () {
        const courseId = this.value;
        const lessonSelect = document.getElementById('lessonSelect');
        lessonSelect.innerHTML = '<option value="">{{ __("dashboard.Select Lesson") }}</option>';

        if (courseId) {
            fetch(`/admin/courses/${courseId}/lessons`)
                .then(response => response.json())
                .then(data => {
                    data.forEach(function (lesson) {
                        const option = document.createElement('option');
                        option.value = lesson.id;
                        option.textContent = lesson.title;
                        lessonSelect.appendChild(option);
                    });
                });
        }
    });
</script>
@endsection