@extends('layouts.main_dashboard.app')
@php($routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin')

@section('styles')
<style>
    #pause-upload-btn, #resume-upload-btn { min-width: 150px; }
    #pause-upload-btn.disabled, #resume-upload-btn.disabled { pointer-events: none; opacity: 0.6; }
    .recording-active {
        animation: pulse 1.5s infinite;
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
        color: white !important;
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    @keyframes pulse {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
        70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }
    .media-preview-container video, .media-preview-container audio {
        width: 100%;
        margin-top: 10px;
        border-radius: 12px;
        border: 1px solid #e4e6ef;
        background: #000;
    }
    .nav-pills .nav-link.active {
        background-color: #009ef7;
        color: #fff !important;
    }
    .nav-pills .nav-link.active .nav-text,
    .nav-pills .nav-link.active .nav-icon i { color: #fff !important; }
    .creation-shell { display:grid; gap:1.5rem; }
    .creation-hero {
        border:1px solid #e4e6ef;
        border-radius:1.75rem;
        padding:2rem;
        background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 100%);
        color:#fff;
    }
    .creation-card {
        border:1px solid #e4e6ef;
        border-radius:1.5rem;
        background:#fff;
        box-shadow:0 10px 30px rgba(15,23,42,.05);
    }
    .creation-card .card-header { border:0; padding:1.25rem 1.5rem 0; }
    .creation-card .card-body { padding:1.5rem; }
    .upload-dropzone {
        border:1px dashed #cbd5e1;
        border-radius:1.25rem;
        padding:2rem;
        background:#f8fafc;
        text-align:center;
        cursor:pointer;
    }
</style>
@endsection

@section('title', __('dashboard.Add New Material'))
@section('page_heading', __('dashboard.Add New Material'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.courses.show', $course->id) }}" class="text-muted text-hover-primary">{{ $course->name }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.courses.materials.create', $course->id) }}" class="text-muted text-hover-primary">{{ __('dashboard.Add New Material') }}</a></li>
@endsection

@section('actions')
    <a href="{{ route($routePrefix . '.courses.materials.index', $course->id) }}" class="btn btn-light-primary">{{ __('dashboard.View All Materials') }}</a>
@endsection

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-fluid">
        <div class="creation-shell">
            <section class="creation-hero">
                <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-8">
                    <div class="mw-lg-700px">
                        <div class="badge badge-light-primary mb-4 px-4 py-3 fs-8 fw-bold">{{ __('dashboard.Add New Material') }}</div>
                        <h1 class="fs-1 fw-bolder mb-4 text-white">{{ __('dashboard.Create a new learning material') }}</h1>
                        <p class="fs-5 text-white opacity-75 mb-0">{{ __('dashboard.Upload files or record live content, connect the material to a lesson, and publish it to the current or related courses from one place.') }}</p>
                    </div>
                    <div class="creation-card bg-white bg-opacity-10 border border-white border-opacity-10 shadow-none min-w-lg-300px">
                        <div class="p-6">
                            <div class="text-white opacity-75 fs-7 fw-bold mb-2">{{ __('dashboard.Course') }}</div>
                            <div class="fs-3 fw-bolder text-white mb-5">{{ $course->name }}</div>
                            <div class="d-flex flex-column gap-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-white opacity-75 fs-7">{{ __('dashboard.Lessons') }}</span>
                                    <span class="badge badge-light text-dark fw-bold">{{ $lessons->count() }}</span>
                                </div>
                                @if($relatedCourses->isNotEmpty())
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-white opacity-75 fs-7">{{ __('dashboard.Related Courses') }}</span>
                                        <span class="badge badge-light-info fw-bold">{{ $relatedCourses->count() }}</span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <form id="materialForm" class="form">
                @csrf

                <div class="row g-7">
                    <div class="col-xl-4">
                        <div class="creation-card card h-100">
                            <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                                <div class="card-title flex-column align-items-start">
                                    <span class="fs-3 fw-bolder text-gray-900">{{ __('dashboard.Material Details') }}</span>
                                    <span class="text-muted mt-1 fw-semibold fs-7">{{ __('dashboard.Select the lesson, title, visibility, and optional multi-course publishing.') }}</span>
                                </div>
                            </div>
                            <div class="p-6">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label required">{{ __('dashboard.Lesson') }}</label>
                                    <div class="input-group">
                                        <select id="lesson_select" class="form-select form-select-solid" name="lesson_id" data-control="select2" data-placeholder="{{ __('dashboard.Select Lesson') }}" required>
                                            <option></option>
                                            @foreach($lessons as $lesson)
                                                <option value="{{ $lesson->id }}" {{ old('lesson_id') == $lesson->id ? 'selected' : '' }}>{{ $lesson->title }}</option>
                                            @endforeach
                                        </select>
                                        <button type="button" class="btn btn-light-primary" data-bs-toggle="modal" data-bs-target="#addLessonModal">
                                            <i class="ki-outline ki-plus fs-2"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label required">{{ __('dashboard.Title') }}</label>
                                    <input type="text" class="form-control form-control-solid" name="title" value="{{ old('title') }}" required />
                                </div>
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label">{{ __('dashboard.Description') }}</label>
                                    <textarea class="form-control form-control-solid" name="description" rows="4">{{ old('description') }}</textarea>
                                </div>
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label required">{{ __('dashboard.Is Published') }}</label>
                                    <select class="form-select form-select-solid" name="is_published" data-control="select2" data-hide-search="true" required>
                                        <option value="1" selected>{{ __('dashboard.Yes') }}</option>
                                        <option value="0">{{ __('dashboard.No') }}</option>
                                    </select>
                                </div>
                                @if($relatedCourses->isNotEmpty())
                                    <div class="fv-row mb-0">
                                        <label class="fs-6 fw-semibold form-label">
                                            <span>{{ __('dashboard.Publish to other courses') }}</span>
                                        </label>
                                        <select class="form-select form-select-solid" data-control="select2" data-placeholder="{{ __('dashboard.Select Courses') }}" data-close-on-select="false" data-allow-clear="true" multiple="multiple" name="target_courses[]">
                                            @foreach($relatedCourses as $relCourse)
                                                <option value="{{ $relCourse->id }}">
                                                    {{ $relCourse->name }} ({{ $relCourse->schoolClass->name ?? '' }})
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="form-text text-muted">{{ __('dashboard.Leave empty to upload to current course only.') }}</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-8">
                        <div class="creation-card card">
                            <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                                <div class="card-title flex-column align-items-start">
                                    <span class="fs-3 fw-bolder text-gray-900">{{ __('dashboard.Files') }} / {{ __('dashboard.Live Recording') }}</span>
                                    <span class="text-muted mt-1 fw-semibold fs-7">{{ __('dashboard.Upload pre-prepared content or record directly from the browser, then save the material once upload is complete.') }}</span>
                                </div>
                            </div>
                            <div class="p-6">
                                <ul class="nav nav-pills nav-pills-custom mb-5 border-bottom pb-3" role="tablist">
                                    <li class="nav-item mb-3 me-3 me-lg-6" role="presentation">
                                        <a class="nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden w-150px h-85px pt-5 pb-2 active" data-bs-toggle="pill" href="#kt_tab_upload" aria-selected="true" role="tab">
                                            <div class="nav-icon mb-3">
                                                <i class="ki-outline ki-file-up fs-1"></i>
                                            </div>
                                            <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">{{ __('dashboard.Upload Files') }}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item mb-3 me-3 me-lg-6" role="presentation">
                                        <a class="nav-link btn btn-outline btn-flex btn-color-muted btn-active-color-primary flex-column overflow-hidden w-150px h-85px pt-5 pb-2" data-bs-toggle="pill" href="#kt_tab_record" aria-selected="false" role="tab">
                                            <div class="nav-icon mb-3">
                                                <i class="ki-outline ki-mic fs-1"></i>
                                            </div>
                                            <span class="nav-text text-gray-800 fw-bold fs-6 lh-1">{{ __('dashboard.Live Recording') }}</span>
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="kt_tab_upload" role="tabpanel">
                                        <div id="resumable-drop" class="upload-dropzone">
                                            <i class="ki-outline ki-cloud-upload fs-3x text-primary mb-4"></i>
                                            <h3 class="fs-4 fw-bolder text-gray-900 mb-2">{{ __('dashboard.Drag and drop files here or click to select files') }}</h3>
                                            <div class="text-muted">{{ __('dashboard.Chunked upload is enabled for large files and unstable connections.') }}</div>
                                        </div>
                                        <input type="file" class="d-none" id="files_input" name="files[]" multiple />
                                    </div>

                                    <div class="tab-pane fade" id="kt_tab_record" role="tabpanel">
                                        <div class="alert alert-dismissible bg-light-info border border-info p-5 mb-5">
                                            <i class="ki-outline ki-information-2 fs-2tx text-info me-4"></i>
                                            <div class="d-flex flex-column pe-0 pe-sm-10">
                                                <h5 class="mb-1">{{ __('dashboard.Note:') }}</h5>
                                                <span>{{ __('dashboard.Select either Audio or Video recording. The recorded file will be automatically processed for upload.') }}</span>
                                            </div>
                                        </div>
                                        <div class="d-flex flex-wrap justify-content-center gap-3 mb-5">
                                            <button type="button" id="btn-record-audio" class="btn btn-light-primary">
                                                <i class="ki-outline ki-mic fs-2 me-1"></i> {{ __('dashboard.Record Audio') }}
                                            </button>
                                            <button type="button" id="btn-record-video" class="btn btn-light-info">
                                                <i class="ki-outline ki-video fs-2 me-1"></i> {{ __('dashboard.Record Video') }}
                                            </button>
                                        </div>

                                        <div id="media-preview" class="media-preview-container d-none mb-4 p-3 border rounded">
                                            <h5 class="fw-bold mb-3">{{ __('dashboard.Preview:') }}</h5>
                                            <div id="video-placeholder"></div>
                                            <div id="audio-placeholder"></div>
                                        </div>

                                        <div id="recording-controls" class="d-none text-center">
                                            <div class="d-flex align-items-center justify-content-center gap-3">
                                                <span class="badge badge-danger fs-3" id="recording-timer">00:00</span>
                                                <button type="button" id="btn-stop-recording" class="inline-flex items-center gap-2 rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white hover:bg-red-700">
                                                    <i class="ki-outline ki-abstract-5 fs-2"></i> {{ __('dashboard.Stop Recording') }}
                                                </button>
                                            </div>
                                            <p class="text-danger fw-bold mt-2 fs-7">{{ __('dashboard.Recording in progress...') }}</p>
                                        </div>

                                        <div id="recording-status" class="mt-3 text-success fw-bold d-none">
                                            <i class="ki-outline ki-check-circle fs-2 text-success"></i> {{ __('dashboard.Recording ready! Click Save below to upload.') }}
                                            <button type="button" id="btn-reset-recording" class="btn btn-sm btn-light-danger ms-2">{{ __('dashboard.Reset') }}</button>
                                        </div>
                                    </div>
                                </div>

                                <div id="upload-info" class="mt-5" style="display: none;">
                                    <div class="d-flex align-items-center">
                                        <div class="progress flex-grow-1 me-3" style="height: 25px;">
                                            <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%;">0%</div>
                                        </div>
                                        <button id="pause-upload-btn" type="button" class="btn btn-icon btn-sm btn-light-warning me-2" style="display: none;"><i class="ki-outline ki-pause fs-2"></i></button>
                                        <button id="resume-upload-btn" type="button" class="btn btn-icon btn-sm btn-light-primary" style="display: none;"><i class="ki-outline ki-play fs-2"></i></button>
                                    </div>
                                    <div class="d-flex justify-content-between w-100 mt-2 fs-7 text-muted">
                                        <span><i class="ki-outline ki-speedometer fs-6"></i> <span id="upload-speed">0</span> KB/s</span>
                                        <span><i class="ki-outline ki-check-circle fs-6"></i> <span id="uploaded-bytes">0</span> / <span id="total-bytes">0</span> KB</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-3 mt-8">
                    <a href="{{ route($routePrefix . '.courses.materials.index', $course->id) }}" class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-2 text-sm font-bold text-zinc-700 hover:bg-zinc-100">{{ __('dashboard.Cancel') }}</a>
                    <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700" id="save-button" disabled>
                        <span class="indicator-label">{{ __('dashboard.Save') }}</span>
                        <span class="indicator-progress">{{ __('dashboard.Please wait...') }}<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="addLessonModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('dashboard.Add New Lesson') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addLessonForm">
                    <input type="hidden" name="subject_id" value="{{ $course->subject->id }}">
                    <div class="mb-3">
                        <label for="lesson-title" class="form-label required">{{ __('dashboard.Lesson Title') }}</label>
                        <input type="text" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" id="lesson-title" name="title" required>
                        <div class="invalid-feedback" id="add-lesson-title-error"></div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-light me-3" data-bs-dismiss="modal">{{ __('dashboard.Cancel') }}</button>
                        <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">{{ __('dashboard.Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.0.3/resumable.min.js"></script>
<script>
    $(document).ready(function() {
        let resumable = new Resumable({
            target: '{{ route($routePrefix . '.courses.materials.upload', $course->id) }}',
            query: {_token: '{{ csrf_token() }}'},
            chunkSize: 1 * 1024 * 1024,
            headers: {'Accept': 'application/json'},
            testChunks: false
        });

        resumable.assignBrowse(document.getElementById('resumable-drop'));
        resumable.assignDrop(document.getElementById('resumable-drop'));

        let fileUploaded = false;
        let mediaRecorder;
        let audioChunks = [];
        let stream;
        let recordingTimerInterval;
        let recordingSeconds = 0;

        const btnRecordAudio = document.getElementById('btn-record-audio');
        const btnRecordVideo = document.getElementById('btn-record-video');
        const btnStopRecording = document.getElementById('btn-stop-recording');
        const btnResetRecording = document.getElementById('btn-reset-recording');
        const recordingControls = document.getElementById('recording-controls');
        const mediaPreview = document.getElementById('media-preview');
        const videoPlaceholder = document.getElementById('video-placeholder');
        const audioPlaceholder = document.getElementById('audio-placeholder');
        const recordingTimer = document.getElementById('recording-timer');
        const recordingStatus = document.getElementById('recording-status');

        function formatTime(totalSeconds) {
            const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
            const seconds = (totalSeconds % 60).toString().padStart(2, '0');
            return `${minutes}:${seconds}`;
        }

        async function startRecording(type) {
            audioChunks = [];
            recordingSeconds = 0;
            recordingTimer.textContent = "00:00";

            const constraints = type === 'video' ? { audio: true, video: true } : { audio: true, video: false };

            try {
                stream = await navigator.mediaDevices.getUserMedia(constraints);
                mediaRecorder = new MediaRecorder(stream);

                btnRecordAudio.disabled = true;
                btnRecordVideo.disabled = true;
                recordingControls.classList.remove('d-none');

                if (type === 'video') {
                    mediaPreview.classList.remove('d-none');
                    videoPlaceholder.innerHTML = '<video autoplay muted playsinline class="w-100"></video>';
                    videoPlaceholder.querySelector('video').srcObject = stream;
                    audioPlaceholder.innerHTML = '';
                } else {
                    btnRecordAudio.classList.add('recording-active');
                }

                mediaRecorder.start();

                recordingTimerInterval = setInterval(() => {
                    recordingSeconds++;
                    recordingTimer.textContent = formatTime(recordingSeconds);
                }, 1000);

                mediaRecorder.addEventListener("dataavailable", event => {
                    audioChunks.push(event.data);
                });

                mediaRecorder.addEventListener("stop", () => {
                    clearInterval(recordingTimerInterval);

                    const mimeType = type === 'video' ? 'video/webm' : 'audio/webm';
                    const fileExtension = type === 'video' ? 'webm' : 'weba';
                    const blob = new Blob(audioChunks, { type: mimeType });
                    const fileName = `live_recording_${Date.now()}.${fileExtension}`;
                    const file = new File([blob], fileName, { type: mimeType });

                    resumable.addFile(file);

                    const mediaUrl = URL.createObjectURL(blob);

                    if (type === 'video') {
                        videoPlaceholder.innerHTML = `<video controls src="${mediaUrl}" class="w-100"></video>`;
                    } else {
                        mediaPreview.classList.remove('d-none');
                        audioPlaceholder.innerHTML = `<audio controls src="${mediaUrl}" class="w-100"></audio>`;
                        btnRecordAudio.classList.remove('recording-active');
                    }

                    stream.getTracks().forEach(track => track.stop());

                    recordingControls.classList.add('d-none');
                    recordingStatus.classList.remove('d-none');
                    $('#upload-info').show();
                });
            } catch (error) {
                Swal.fire({
                    text: "{{ __('dashboard.Could not access camera/microphone. Please check permissions.') }}",
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "Ok",
                    customClass: { confirmButton: "btn btn-primary" }
                });
            }
        }

        btnRecordAudio.addEventListener('click', () => startRecording('audio'));
        btnRecordVideo.addEventListener('click', () => startRecording('video'));

        btnStopRecording.addEventListener('click', () => {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                mediaRecorder.stop();
            }
        });

        btnResetRecording.addEventListener('click', () => {
            mediaPreview.classList.add('d-none');
            videoPlaceholder.innerHTML = '';
            audioPlaceholder.innerHTML = '';
            recordingStatus.classList.add('d-none');
            btnRecordAudio.disabled = false;
            btnRecordVideo.disabled = false;
            resumable.cancel();
            $('#upload-info').hide();
            $('#progressBar').css('width', '0%').text('0%');
            fileUploaded = false;
            toggleSaveButton();
        });

        function checkFormCompletion() {
            return $('#lesson_select').val() && $('input[name="title"]').val().trim();
        }

        function toggleSaveButton() {
            $('#save-button').prop('disabled', !(fileUploaded && checkFormCompletion()));
        }

        function showAlert(message, type = 'info') {
            Swal.fire({ text: message, icon: type, buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" }});
        }

        resumable.on('fileAdded', function(file) {
            if (!checkFormCompletion()) {
                showAlert('{{ __("dashboard.Please complete all required fields before uploading.") }}', 'warning');
                resumable.removeFile(file);
                return;
            }
            $('#upload-info, #pause-upload-btn').show();
            $('#resume-upload-btn').hide();
            resumable.upload();
        });

        resumable.on('fileProgress', function(file) {
            let progress = Math.floor(file.progress() * 100);
            $('#progressBar').css('width', `${progress}%`).text(`${progress}%`);
            $('#uploaded-bytes').text(Math.floor(file.size * file.progress() / 1024));
            $('#total-bytes').text(Math.floor(file.size / 1024));
        });

        resumable.on('fileSuccess', function(file, response) {
            response = JSON.parse(response);
            $('#materialForm').append(`<input type="hidden" name="uploaded_file" value="${response.file_path}">`);
            $('#pause-upload-btn, #resume-upload-btn').hide();
            fileUploaded = true;
            toggleSaveButton();
        });

        resumable.on('fileError', () => showAlert('{{ __("dashboard.An error occurred during file upload.") }}', 'danger'));

        $('#pause-upload-btn').on('click', () => resumable.pause());
        $('#resume-upload-btn').on('click', () => resumable.upload());
        resumable.on('pause', () => { $('#pause-upload-btn').hide(); $('#resume-upload-btn').show(); });
        resumable.on('uploadStart', () => { $('#resume-upload-btn').hide(); $('#pause-upload-btn').show(); });

        $('#materialForm').on('submit', function(e) {
            e.preventDefault();
            if (!fileUploaded) {
                showAlert('{{ __("dashboard.Please upload a file first.") }}', 'danger');
                return;
            }
            let formData = $(this).serialize();
            $.ajax({
                url: '{{ route($routePrefix . '.courses.materials.store', $course->id) }}',
                type: 'POST',
                data: formData,
                success: () => window.location.href = '{{ route($routePrefix . '.courses.materials.index', $course->id) }}',
                error: () => showAlert('{{ __("dashboard.An error occurred while saving the material.") }}', 'danger')
            });
        });

        $('#addLessonForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: '{{ route($routePrefix . ".lessons.store", $course->subject->id) }}',
                type: 'POST',
                data: $(this).serialize(),
                headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                success: function(response) {
                    $('#addLessonModal').modal('hide');
                    $('#addLessonForm')[0].reset();

                    let newOption = new Option(response.title, response.id, true, true);
                    $('#lesson_select').append(newOption).trigger('change');

                    Swal.fire({
                        text: '{{ __("dashboard.Lesson added successfully.") }}',
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: { confirmButton: "btn btn-primary" }
                    });
                },
                error: function() {
                    showAlert('{{ __("dashboard.An error occurred. Check the console for details.") }}', 'danger');
                }
            });
        });

        $('#lesson_select, input[name="title"]').on('change input', toggleSaveButton);
    });
</script>
@endsection