@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Schedules') . ' | ' . __('dashboard.Add New 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.Add New Schedule') }}</h1>
        <p class="mt-3 text-sm text-surface-600 dark:text-surface-300">{{ $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.store') }}" class="space-y-8">
            @csrf
            <input type="hidden" name="school_class_id" value="{{ $schoolClass->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">{{ __('dashboard.Monday') }}</option>
                        <option value="Tuesday">{{ __('dashboard.Tuesday') }}</option>
                        <option value="Wednesday">{{ __('dashboard.Wednesday') }}</option>
                        <option value="Thursday">{{ __('dashboard.Thursday') }}</option>
                        <option value="Friday">{{ __('dashboard.Friday') }}</option>
                        <option value="Saturday">{{ __('dashboard.Saturday') }}</option>
                        <option value="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" 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" 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="">{{ __('dashboard.Select Course') }}</option>
                        @foreach($schoolClass->courses as $course)
                            <option value="{{ $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" 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" 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">
                        <option value="">{{ __('dashboard.Select Lesson') }}</option>
                    </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', $schoolClass->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