@extends('admin.layout.app')
@section('title', 'Edit Lesson')

@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <div class="page-sub-header">
                        <h3 class="page-title">Edit Lesson</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('lessons.index') }}">Lessons</a></li>
                            <li class="breadcrumb-item active">Edit Lesson</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <h2>Edit Lesson</h2>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <strong>There were some problems with your input.</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('lessons.update', $lesson->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="mb-3 col-md-3 local-forms">
                        <label class="form-label">Course</label>
                        <select name="course_id" class="form-select" required>
                            <option value="">-- Select Course --</option>
                            @foreach ($courses as $course)
                                <option value="{{ $course->id }}"
                                    {{ $course->id == old('course_id', $lesson->course_id) ? 'selected' : '' }}>
                                    {{ $course->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3 col-md-3 local-forms">
                        <label class="form-label">Unit</label>
                        <select name="unit_id" class="form-select" required>
                            <option value="">-- Select Unit --</option>
                            @foreach ($units as $unit)
                                <option value="{{ $unit->id }}"
                                    {{ $unit->id == old('unit_id', $lesson->unit_id) ? 'selected' : '' }}>
                                    {{ $unit->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3 col-md-3 local-forms">
                        <label class="form-label">Lesson Type</label>
                        <select name="lesson_type_id" class="form-select" required>
                            <option value="">-- Select Lesson Type --</option>
                            @foreach ($lessonTypes as $type)
                                <option value="{{ $type->id }}"
                                    {{ $type->id == old('lesson_type_id', $lesson->lesson_type_id) ? 'selected' : '' }}>
                                    {{ $type->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3 col-md-3 local-forms">
                        <label class="form-label">Type</label>
                        <select name="type" class="form-select" required>
                            @foreach (['video', 'quiz', 'vocabulary', 'conversation'] as $type)
                                <option value="{{ $type }}"
                                    {{ $type == old('type', $lesson->type) ? 'selected' : '' }}>
                                    {{ ucfirst($type) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Title</label>
                    <input type="text" name="title" id="lesson_title" value="{{ old('title', $lesson->title) }}"
                        class="form-control" readonly required
                        placeholder="Title will be auto-generated from selected filters">
                    <small class="text-muted">Title is automatically generated from the selected course, unit, lesson type,
                        and type.</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Description</label>
                    <textarea name="description" rows="4" class="form-control">{{ old('description', $lesson->description) }}</textarea>
                </div>



                <button type="submit" class="btn btn-primary">Update Lesson</button>
                <a href="{{ route('lessons.index') }}" class="btn btn-secondary">Cancel</a>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            // Function to generate lesson title
            function generateLessonTitle() {
                const courseSelect = $('select[name="course_id"]');
                const unitSelect = $('select[name="unit_id"]');
                const lessonTypeSelect = $('select[name="lesson_type_id"]');
                const typeSelect = $('select[name="type"]');

                let title = '';
                const parts = [];

                // Add course name
                if (courseSelect.val()) {
                    parts.push(courseSelect.find('option:selected').text().replace('-- Select Course --', '')
                        .trim());
                }

                // Add unit name
                if (unitSelect.val()) {
                    parts.push(unitSelect.find('option:selected').text().replace('-- Select Unit --', '').trim());
                }

                // Add lesson type name
                if (lessonTypeSelect.val()) {
                    parts.push(lessonTypeSelect.find('option:selected').text().replace('-- Select Lesson Type --',
                        '').trim());
                }

                // Add type
                if (typeSelect.val()) {
                    parts.push(typeSelect.find('option:selected').text().trim());
                }

                // Combine all parts
                title = parts.filter(part => part !== '').join(' / ');

                return title;
            }

            // Function to update lesson title
            function updateLessonTitle() {
                const title = generateLessonTitle();
                $('#lesson_title').val(title);
            }

            const courseId = $('select[name="course_id"]').val();
            const unitSelect = $('select[name="unit_id"]');
            const lessonSelect = $('#lesson_id');

            // Load units
            // if course is already selected(on page reload)
            if (courseId) {
                $.ajax({
                    url: `/get-units-by-course/${courseId}`,
                    type: 'GET',
                    success: function(res) {
                        unitSelect.empty().append('<option value="">Select Unit</option>');
                        $.each(res.units, function(key, unit) {
                            const isSelected = unit.id == '{{ $lesson->unit_id }}' ?
                                'selected' : '';
                            unitSelect.append(
                                `<option value="${unit.id}" ${isSelected}>${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                            );
                        });
                        unitSelect.prop('disabled', false);
                        updateLessonTitle(); // Update title after loading units
                    },
                    error: function() {
                        unitSelect.html('<option value="">Error loading</option>');
                    }
                });
            }

            $('select[name="course_id"]').on('change', function() {
                let courseId = $(this).val();
                unitSelect.prop('disabled', true).html('<option value="">Loading...</option>');

                if (courseId) {
                    $.ajax({
                        url: `/get-units-by-course/${courseId}`,
                        type: 'GET',
                        success: function(res) {
                            unitSelect.empty().append('<option value="">Select Unit</option>');
                            $.each(res.units, function(key, unit) {
                                unitSelect.append(
                                    `<option value="${unit.id}">${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                                );
                            });
                            unitSelect.prop('disabled', false);
                            updateLessonTitle(); // Update title after loading units
                        },
                        error: function() {
                            unitSelect.html('<option value="">Error loading</option>');
                        }
                    });
                } else {
                    unitSelect.prop('disabled', true).html('<option value="">Select Unit</option>');
                    updateLessonTitle(); // Update title when course is cleared
                }
            });

            // Update title when any filter changes
            $('select[name="unit_id"], select[name="lesson_type_id"], select[name="type"]').on('change',
                function() {
                    updateLessonTitle();
                });

            // Initial title generation
            updateLessonTitle();
        });
    </script>
@endpush