@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Add Course to Teacher'))

@section('content')
<div class="space-y-8">
    <section class="rounded-xl border border-emerald-100 bg-emerald-50/80 p-6 shadow-sm dark:border-emerald-900/40 dark:bg-emerald-950/20">
        <p class="text-xs font-black uppercase tracking-[0.28em] text-emerald-600 dark:text-emerald-300">{{ __('dashboard.Course Assignment') }}</p>
        <h1 class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ __('dashboard.Add Course to Teacher') }}</h1>
        <p class="mt-3 text-sm text-surface-600 dark:text-surface-300">{{ $teacher->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 action="{{ route('admin.teachers.courses.add', $teacher->id) }}" method="POST" class="space-y-8">
            @csrf
            <input type="hidden" name="course_id" id="course_id" value="">

            <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.Stage') }}</label>
                    <select name="stage_id" id="stage_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-emerald-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Stage') }}</option>
                        @foreach($stages as $stage)
                            <option value="{{ $stage->id }}">{{ $stage->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Grade') }}</label>
                    <select name="grade_id" id="grade_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-emerald-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Grade') }}</option>
                    </select>
                </div>
                <div>
                    <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_id" required disabled 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-emerald-400 disabled:opacity-60 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Subject') }}</option>
                    </select>
                </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_id" required disabled 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-emerald-400 disabled:opacity-60 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select School Class') }}</option>
                    </select>
                </div>
            </div>

            <div class="space-y-4">
                <div id="course-message" class="hidden rounded-xl bg-sky-50 px-4 py-3 text-sm font-bold text-sky-600 dark:bg-sky-500/10 dark:text-sky-300"></div>
                <img id="course-image" src="" alt="Course Image" class="hidden max-h-48 rounded-xl border border-surface-200 object-cover dark:border-surface-700">
            </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.teachers.courses.manage', $teacher->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.Cancel') }}</a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-emerald-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-60" id="submitButton" disabled>
                    <i class="fa-solid fa-link"></i>
                    <span>{{ __('dashboard.Add Course') }}</span>
                </button>
            </div>
        </form>
    </section>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const stageSelect = document.getElementById('stage_id');
        const gradeSelect = document.getElementById('grade_id');
        const subjectSelect = document.getElementById('subject_id');
        const schoolClassSelect = document.getElementById('school_class_id');
        const courseIdInput = document.getElementById('course_id');
        const submitButton = document.getElementById('submitButton');
        const courseMessage = document.getElementById('course-message');
        const courseImage = document.getElementById('course-image');

        function resetPreview() {
            courseIdInput.value = '';
            submitButton.disabled = true;
            courseMessage.classList.add('hidden');
            courseMessage.textContent = '';
            courseImage.classList.add('hidden');
            courseImage.src = '';
        }

        stageSelect.addEventListener('change', function () {
            const stageId = this.value;
            gradeSelect.disabled = true;
            gradeSelect.innerHTML = '<option value="">{{ __("dashboard.Select Grade") }}</option>';
            subjectSelect.disabled = true;
            subjectSelect.innerHTML = '<option value="">{{ __("dashboard.Select Subject") }}</option>';
            schoolClassSelect.disabled = true;
            schoolClassSelect.innerHTML = '<option value="">{{ __("dashboard.Select School Class") }}</option>';
            resetPreview();

            if (stageId) {
                fetch(`{{ url("admin/stages") }}/${stageId}/grades`)
                    .then(response => response.json())
                    .then(data => {
                        gradeSelect.disabled = false;
                        data.forEach(grade => {
                            gradeSelect.innerHTML += `<option value="${grade.id}">${grade.name}</option>`;
                        });
                    });
            }
        });

        gradeSelect.addEventListener('change', function () {
            const gradeId = this.value;
            subjectSelect.disabled = true;
            subjectSelect.innerHTML = '<option value="">{{ __("dashboard.Select Subject") }}</option>';
            schoolClassSelect.disabled = true;
            schoolClassSelect.innerHTML = '<option value="">{{ __("dashboard.Select School Class") }}</option>';
            resetPreview();

            if (gradeId) {
                fetch(`{{ url("admin/grades") }}/${gradeId}/subjects`)
                    .then(response => response.json())
                    .then(data => {
                        subjectSelect.disabled = false;
                        data.forEach(subject => {
                            subjectSelect.innerHTML += `<option value="${subject.id}">${subject.name}</option>`;
                        });
                    });

                fetch(`{{ url("admin/grades") }}/${gradeId}/school-classes`)
                    .then(response => response.json())
                    .then(data => {
                        schoolClassSelect.disabled = false;
                        data.forEach(schoolClass => {
                            schoolClassSelect.innerHTML += `<option value="${schoolClass.id}">${schoolClass.name}</option>`;
                        });
                    });
            }
        });

        schoolClassSelect.addEventListener('change', function () {
            const subjectId = subjectSelect.value;
            const schoolClassId = this.value;
            resetPreview();

            if (subjectId && schoolClassId) {
                fetch(`{{ url("admin/courses/filter") }}?subject_id=${subjectId}&school_class_id=${schoolClassId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.length === 1) {
                            courseIdInput.value = data[0].id;
                            submitButton.disabled = false;
                            if (data[0].image) {
                                courseImage.src = data[0].image;
                                courseImage.classList.remove('hidden');
                            }
                        } else if (data.length === 0) {
                            courseMessage.textContent = '{{ __("dashboard.No courses found for this subject and school class.") }}';
                            courseMessage.classList.remove('hidden');
                        } else {
                            courseMessage.textContent = '{{ __("dashboard.Multiple courses found for this subject and school class. Please contact the administrator.") }}';
                            courseMessage.classList.remove('hidden');
                        }
                    });
            }
        });
    });
</script>
@endsection