@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Edit Course'))
@section('page_heading', __('dashboard.Edit Course'))
@section('page_subtitle', 'تحديث المساق وربطاته الأساسية مع المعلم والصف والمادة.')
@section('page_actions')
    <a href="{{ route('admin.courses.show', $course->id) }}" 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-eye"></i>
        <span>{{ __('dashboard.View') }}</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.update', $course->id) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf
            @method('PUT')

            <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                <div class="xl:col-span-3">
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Subject') }}</label>
                    <select name="subject_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">
                        <option value="">{{ __('dashboard.Select Subject') }}</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" @selected(old('subject_id', $course->subject_id) == $subject->id)>{{ $subject->name }}</option>
                        @endforeach
                    </select>
                    @error('subject_id') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                </div>
                <div class="xl:col-span-2">
                    <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" 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>
                        @foreach($schoolClasses as $schoolClass)
                            <option value="{{ $schoolClass->id }}" @selected(old('school_class_id', $course->school_class_id) == $schoolClass->id)>{{ $schoolClass->name }}</option>
                        @endforeach
                    </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">
                        @if($course->teacher)
                            <option value="{{ $course->teacher->id }}" selected>{{ $course->teacher->name }} ({{ $course->teacher->email }})</option>
                        @endif
                    </select>
                    @error('teacher_id') <p class="mt-2 text-sm font-bold text-red-500">{{ $message }}</p> @enderror
                </div>
                <div class="xl:col-span-3">
                    <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 () {
        $('#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