@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Add New Course'))
@section('page_heading', __('dashboard.Add New Course'))
@section('page_subtitle', 'إنشاء مساق جديد مع ربطه بالمادة والصف والمعلم ضمن التدفق الدراسي المعتاد.')
@section('page_actions')
    <a href="{{ route('admin.courses.index') }}" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">
        <i class="fa-solid fa-list"></i>
        <span>{{ __('dashboard.View All Courses') }}</span>
    </a>
@endsection

@section('content')
<div class="space-y-8">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <form action="{{ route('admin.courses.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf

            <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Year') }}</label>
                    <select id="year-select" 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-cyan-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Year') }}</option>
                        @foreach($years as $year)
                            <option value="{{ $year->id }}" @selected(old('year_id') == $year->id)>{{ $year->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Term') }}</label>
                    <select id="term-select" 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-cyan-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Term') }}</option>
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Stage') }}</label>
                    <select id="stage-select" 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-cyan-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Stage') }}</option>
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Grade') }}</label>
                    <select id="grade-select" 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-cyan-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Grade') }}</option>
                    </select>
                </div>
                <div class="xl:col-span-2">
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Subject') }}</label>
                    <select name="subject_id" id="subject-select" 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-cyan-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Subject') }}</option>
                    </select>
                    @error('subject_id') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.School Class') }}</label>
                    <select name="school_class_id" id="school-class-select" 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-cyan-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select School Class') }}</option>
                    </select>
                    @error('school_class_id') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Teacher') }}</label>
                    <select id="teacher_select" name="teacher_id" 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-cyan-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                    </select>
                    @error('teacher_id') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                </div>
                <div class="xl:col-span-4">
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Image') }}</label>
                    <input type="file" name="image" accept=".png,.jpg,.jpeg" class="block w-full rounded-2xl border border-dashed border-surface-300 bg-surface-50 px-4 py-3 text-sm text-surface-600 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-300">
                    @error('image') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                </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.courses.index') }}" 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.Cancel') }}</a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-cyan-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-cyan-700">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>{{ __('dashboard.Save') }}</span>
                </button>
            </div>
        </form>
    </section>
</div>
@endsection

@section('scripts')
<script>
    $(function () {
        function fillOptions(selector, items, placeholder, selectedValue) {
            const select = $(selector);
            select.empty().append(`<option value="">${placeholder}</option>`);
            $.each(items, function (_, item) {
                select.append(new Option(item.name, item.id, false, String(item.id) === String(selectedValue)));
            });
        }

        $('#year-select').on('change', function () {
            const yearId = $(this).val();
            fillOptions('#term-select', [], '{{ __("dashboard.Select Term") }}', '');
            fillOptions('#stage-select', [], '{{ __("dashboard.Select Stage") }}', '');
            fillOptions('#grade-select', [], '{{ __("dashboard.Select Grade") }}', '');
            fillOptions('#subject-select', [], '{{ __("dashboard.Select Subject") }}', '');
            fillOptions('#school-class-select', [], '{{ __("dashboard.Select School Class") }}', '');
            if (yearId) {
                $.get('{{ url("admin/years") }}/' + yearId + '/terms', data => fillOptions('#term-select', data, '{{ __("dashboard.Select Term") }}', ''));
            }
        });

        $('#term-select').on('change', function () {
            const termId = $(this).val();
            fillOptions('#stage-select', [], '{{ __("dashboard.Select Stage") }}', '');
            fillOptions('#grade-select', [], '{{ __("dashboard.Select Grade") }}', '');
            fillOptions('#subject-select', [], '{{ __("dashboard.Select Subject") }}', '');
            fillOptions('#school-class-select', [], '{{ __("dashboard.Select School Class") }}', '');
            if (termId) {
                $.get('{{ url("admin/terms") }}/' + termId + '/stages', data => fillOptions('#stage-select', data, '{{ __("dashboard.Select Stage") }}', ''));
            }
        });

        $('#stage-select').on('change', function () {
            const stageId = $(this).val();
            fillOptions('#grade-select', [], '{{ __("dashboard.Select Grade") }}', '');
            fillOptions('#subject-select', [], '{{ __("dashboard.Select Subject") }}', '');
            fillOptions('#school-class-select', [], '{{ __("dashboard.Select School Class") }}', '');
            if (stageId) {
                $.get('{{ url("admin/stages") }}/' + stageId + '/grades', data => fillOptions('#grade-select', data, '{{ __("dashboard.Select Grade") }}', ''));
            }
        });

        $('#grade-select').on('change', function () {
            const gradeId = $(this).val();
            fillOptions('#subject-select', [], '{{ __("dashboard.Select Subject") }}', '');
            fillOptions('#school-class-select', [], '{{ __("dashboard.Select School Class") }}', '');
            if (gradeId) {
                $.get('{{ url("admin/grades") }}/' + gradeId + '/subjects', data => fillOptions('#subject-select', data, '{{ __("dashboard.Select Subject") }}', ''));
                $.get('{{ url("admin/grades") }}/' + gradeId + '/school-classes', data => fillOptions('#school-class-select', data, '{{ __("dashboard.Select School Class") }}', ''));
            }
        });

        $('#teacher_select').select2({
            ajax: {
                url: "{{ route('admin.teachers.ajax.search') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return { q: params.term };
                },
                processResults: function (data) {
                    return { results: data.results };
                },
                cache: true
            },
            placeholder: '{{ __("dashboard.Search for a teacher by name or email...") }}',
            minimumInputLength: 1,
        });
    });
</script>
@endsection