@extends('admin.layout.app')
@section('title', 'Create New 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">Add Lesson</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="">Lesson</a></li>
                            <li class="breadcrumb-item"><a href="">Add Lesson</a>
                            </li>
                            <li class="breadcrumb-item active">Add Lesson</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="card comman-shadow">
                    <div class="card-body">

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="container">
                            <h2>{{ isset($lesson) ? 'Edit' : 'Create' }} Lesson</h2>

                            <form method="POST"
                                action="{{ isset($lesson) ? route('lessons.update', $lesson) : route('lessons.store') }}">
                                @csrf
                                @if (isset($lesson))
                                    @method('PUT')
                                @endif

                                <div class="row">
                                    <div class="mb-3 col-md-3 local-forms">
                                        <label> <span class="text-danger">*</span> Course</label>
                                        <select name="course_id" id="course_id" class="form-control">
                                            <option disabled selected value="">Select Course</option>
                                            @foreach ($courses as $course)
                                                <option value="{{ $course->id }}"
                                                    {{ old('course_id', $lesson->course_id ?? '') == $course->id ? 'selected' : '' }}>
                                                    {{ $course->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3 col-md-3 local-forms">
                                        <label for="">Unit <span class="text-danger">*</span></label>
                                        <select name="unit_id" id="unit_id" class="form-control" disabled>
                                            <option value="">Select Unit</option>
                                        </select>
                                    </div>

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

                                    <div class="mb-3 col-md-3 local-forms">
                                        <label> <span class="text-danger">*</span> Type</label>
                                        <select name="type" class="form-control">
                                            @foreach (['video', 'quiz', 'vocabulary', 'conversation'] as $type)
                                                <option value="{{ $type }}"
                                                    {{ old('type', $lesson->type ?? '') == $type ? 'selected' : '' }}>
                                                    {{ ucfirst($type) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label> <span class="text-danger">*</span> Title</label>
                                    <input type="text" name="title" id="lesson_title" class="form-control" readonly
                                        value="{{ old('title', $lesson->title ?? '') }}"
                                        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> <span class="text-danger">*</span> Description</label>
                                    <textarea name="description" class="form-control" rows="4">{{ old('description', $lesson->description ?? '') }}</textarea>
                                </div>



                                <button type="submit"
                                    class="btn btn-success">{{ isset($lesson) ? 'Update' : 'Create' }}</button>
                                <a href="{{ route('lessons.index') }}" class="btn btn-secondary">Back</a>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            // Function to generate lesson title
            function generateLessonTitle() {
                const courseSelect = $('#course_id');
                const unitSelect = $('#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().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);
            }

            $('#course_id').on('change', function() {
                let courseId = $(this).val();
                unitSelect = $('#unit_id')
                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
            $('#unit_id, select[name="lesson_type_id"], select[name="type"]').on('change', function() {
                updateLessonTitle();
            });

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