@extends('admin.layout.app')
@section('title', 'Create New Quiz')

@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 Quiz</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="">Quiz</a></li>
                            <li class="breadcrumb-item"><a href="">Edit Quiz</a>
                            </li>
                            <li class="breadcrumb-item active">Edit Quiz</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

                        <form method="POST" class="row" action="{{ route('lesson-quizzes.update', $quiz->id) }}"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <!-- Lesson Type -->
                            <div class="mb-3 col-md-3 local-forms">
                                <label>Lesson Type <span class="text-danger">*</span></label>
                                <select name="lesson_type_id" class="form-control">
                                    @foreach ($lessonTypes as $type)
                                        <option value="{{ $type->id }}"
                                            {{ $quiz->lessonType->id == $type->id ? 'selected' : '' }}>
                                            {{ $type->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Keep Course and Unit as-is -->
                            <div class="mb-3 col-md-3 local-forms">
                                <label for="">Course <span class="text-danger">*</span></label>
                                <select name="course_id" id="course_id" class="form-control">
                                    <option value="">Select Course</option>
                                    @foreach ($courses as $course)
                                        <option value="{{ $course->id }}"
                                            {{ $quiz->course_id == $course->id ? 'selected' : '' }}>
                                            {{ $course->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Unit Filter -->
                            <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>

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


                            <div class="mb-3 local-forms">
                                <label>Question Type <span class="text-danger">*</span></label>
                                <select name="type" id="question_type" class="form-control form-select"
                                    @readonly(true)>
                                    <option disabled>Select Type</option>
                                    <option @selected($quiz->type == 'mcq') value="mcq">Multiple Choice</option>
                                    <option @selected($quiz->type == 'tf') value="tf">True / False</option>
                                    <option @selected($quiz->type == 'blank') value="blank">Fill in the Blank</option>
                                    <option @selected($quiz->type == 'matching') value="matching">Matching</option>
                                    <option @selected($quiz->type == 'audio') value="audio">Audio</option>
                                </select>
                            </div>
                            @if ($quiz->type == 'blank')
                                <div style="display: none" id="blank">
                                    <div class="mb-3 local-forms">
                                        <label class="form-label">Question Text <span class="text-danger">*</span></label>
                                        <textarea name="question_text" class="form-control">{{ old('question_text', $quiz->question_text) }}</textarea>
                                    </div>
                                    <div class="mb-3 local-forms">
                                        <label class="form-label">Correct Answer <span class="text-danger">*</span></label>
                                        <input type="text" name="answer" class="form-control"
                                            value="{{ old('answer', $quiz->answer) }}">
                                    </div>
                                </div>
                            @endif

                            @if ($quiz->type == 'mcq')
                                {{-- Mcq --}}
                                <div id="mcq">
                                    <div class="mb-3 local-forms">
                                        <label class="form-label">Question Text <span class="text-danger">*</span></label>
                                        <textarea name="question_text" class="form-control">{{ old('question_text', $quiz->question_text) }}</textarea>
                                    </div>
                                    <div class="mb-3 option-group">
                                        <label>Options (MCQ) <span class="text-danger">*</span></label>
                                        <input type="text" name="optionA" class="my-1 form-control"
                                            placeholder="Option A"
                                            value="{{ old('optionA', $quiz->options['optionA'] ?? '') }}">
                                        <input type="text" name="optionB" class="my-1 form-control"
                                            placeholder="Option B"
                                            value="{{ old('optionB', $quiz->options['optionB'] ?? '') }}">
                                        <input type="text" name="optionC" class="my-1 form-control"
                                            placeholder="Option C"
                                            value="{{ old('optionC', $quiz->options['optionC'] ?? '') }}">
                                        <input type="text" name="optionD" class="my-1 form-control"
                                            placeholder="Option D"
                                            value="{{ old('optionD', $quiz->options['optionD'] ?? '') }}">
                                    </div>
                                    <div class="mb-3 local-forms">
                                        <label class="form-label">Correct Answer <span
                                                class="text-danger">*</span></label>
                                        <select name="answer" class="form-control">
                                            <option value="">Select Correct Answer</option>
                                            <option value="A"
                                                {{ old('answer', $quiz->answer) == 'A' ? 'selected' : '' }}>A</option>
                                            <option value="B"
                                                {{ old('answer', $quiz->answer) == 'B' ? 'selected' : '' }}>B</option>
                                            <option value="C"
                                                {{ old('answer', $quiz->answer) == 'C' ? 'selected' : '' }}>C</option>
                                            <option value="D"
                                                {{ old('answer', $quiz->answer) == 'D' ? 'selected' : '' }}>D</option>
                                        </select>
                                    </div>
                                </div>
                            @endif

                            @if ($quiz->type == 'tf')
                                {{-- True False --}}
                                <div style="display: none" id="tf">
                                    <div class="mb-3 local-forms">
                                        <label class="form-label">Question Text <span class="text-danger">*</span></label>
                                        <textarea name="question_text" class="form-control">{{ old('question_text', $quiz->question_text) }}</textarea>
                                    </div>
                                    <div class="mb-3 option-group">
                                        <label>True or False <span class="text-danger">*</span></label>
                                        <div class="gap-3 d-flex align-items-center">
                                            <input type="hidden" name="options[]" value="true">
                                            <input type="hidden" name="options[]" value="false">

                                            <label><input type="radio" name="answer" value="true"
                                                    {{ $quiz->answer == 'true' ? 'checked' : '' }}> True <span
                                                    class="text-danger">*</span></label>
                                            <label><input type="radio" name="answer" value="false"
                                                    {{ $quiz->answer == 'false' ? 'checked' : '' }}> False <span
                                                    class="text-danger">*</span></label>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if ($quiz->type == 'audio')
                                <div style="display: none" id="audio">
                                    {{-- Current Audio Preview --}}
                                    @if ($quiz->type === 'audio' && $quiz->audio)
                                        <div class="mb-3" id="audio-preview-container">
                                            <label class="form-label fw-bold">Audio Preview:</label>
                                            <audio id="audio-preview" controls class="w-100"
                                                src="{{ Storage::disk('s3')->url($quiz->audio->file_path) }}">
                                                Your browser does not support the audio element.
                                            </audio>
                                        </div>
                                    @endif

                                    {{-- Upload Audio File --}}
                                    <div class="mb-3">
                                        <label class="form-label">Upload Audio <span class="text-danger">*</span></label>
                                        <input type="file" name="question_audio_file" class="form-control"
                                            id="question_audio_file" accept="audio/*">
                                    </div>

                                    {{-- Question Text --}}
                                    <div class="mb-4">
                                        <label class="form-label fw-bold">Question Text <span
                                                class="text-danger">*</span></label>
                                        <textarea name="question_text" class="form-control" rows="3">{{ old('question_text', $quiz->question_text) }}</textarea>
                                    </div>

                                    {{-- Options with Image Upload --}}
                                    <div class="mb-4">
                                        <label class="form-label fw-bold">Options (MCQ) <span
                                                class="text-danger">*</span></label>

                                        <!-- Option A -->
                                        <div class="mb-2 row">
                                            <div class="col-md-6">
                                                <input type="text" name="optionA" class="form-control"
                                                    placeholder="Option A"
                                                    value="{{ old('optionA', $quiz->options['optionA'] ?? '') }}">
                                            </div>
                                            <div class="col-md-6">
                                                <input type="file" name="optionA_image"
                                                    class="form-control option-image-input" accept="image/*"
                                                    data-option="A">
                                                <div class="mt-1 option-image-preview" id="preview-A"
                                                    style="display: none;">
                                                    <img src="" alt="Option A Preview" class="img-thumbnail"
                                                        style="max-height: 100px;">
                                                </div>
                                                @if (isset($quiz->options['optionA_image']))
                                                    <div class="mt-1">
                                                        <small class="text-muted">Current image:</small>
                                                        <img src="{{ asset('storage/' . $quiz->options['optionA_image']) }}"
                                                            alt="Current Option A" class="img-thumbnail"
                                                            style="max-height: 80px;">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Option B -->
                                        <div class="mb-2 row">
                                            <div class="col-md-6">
                                                <input type="text" name="optionB" class="form-control"
                                                    placeholder="Option B"
                                                    value="{{ old('optionB', $quiz->options['optionB'] ?? '') }}">
                                            </div>
                                            <div class="col-md-6">
                                                <input type="file" name="optionB_image"
                                                    class="form-control option-image-input" accept="image/*"
                                                    data-option="B">
                                                <div class="mt-1 option-image-preview" id="preview-B"
                                                    style="display: none;">
                                                    <img src="" alt="Option B Preview" class="img-thumbnail"
                                                        style="max-height: 100px;">
                                                </div>
                                                @if (isset($quiz->options['optionB_image']))
                                                    <div class="mt-1">
                                                        <small class="text-muted">Current image:</small>
                                                        <img src="{{ asset('storage/' . $quiz->options['optionB_image']) }}"
                                                            alt="Current Option B" class="img-thumbnail"
                                                            style="max-height: 80px;">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Option C -->
                                        <div class="mb-2 row">
                                            <div class="col-md-6">
                                                <input type="text" name="optionC" class="form-control"
                                                    placeholder="Option C"
                                                    value="{{ old('optionC', $quiz->options['optionC'] ?? '') }}">
                                            </div>
                                            <div class="col-md-6">
                                                <input type="file" name="optionC_image"
                                                    class="form-control option-image-input" accept="image/*"
                                                    data-option="C">
                                                <div class="mt-1 option-image-preview" id="preview-C"
                                                    style="display: none;">
                                                    <img src="" alt="Option C Preview" class="img-thumbnail"
                                                        style="max-height: 100px;">
                                                </div>
                                                @if (isset($quiz->options['optionC_image']))
                                                    <div class="mt-1">
                                                        <small class="text-muted">Current image:</small>
                                                        <img src="{{ asset('storage/' . $quiz->options['optionC_image']) }}"
                                                            alt="Current Option C" class="img-thumbnail"
                                                            style="max-height: 80px;">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Option D -->
                                        <div class="mb-2 row">
                                            <div class="col-md-6">
                                                <input type="text" name="optionD" class="form-control"
                                                    placeholder="Option D"
                                                    value="{{ old('optionD', $quiz->options['optionD'] ?? '') }}">
                                            </div>
                                            <div class="col-md-6">
                                                <input type="file" name="optionD_image"
                                                    class="form-control option-image-input" accept="image/*"
                                                    data-option="D">
                                                <div class="mt-1 option-image-preview" id="preview-D"
                                                    style="display: none;">
                                                    <img src="" alt="Option D Preview" class="img-thumbnail"
                                                        style="max-height: 100px;">
                                                </div>
                                                @if (isset($quiz->options['optionD_image']))
                                                    <div class="mt-1">
                                                        <small class="text-muted">Current image:</small>
                                                        <img src="{{ asset('storage/' . $quiz->options['optionD_image']) }}"
                                                            alt="Current Option D" class="img-thumbnail"
                                                            style="max-height: 80px;">
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Correct Answer --}}
                                    <div class="mb-4">
                                        <label class="form-label fw-bold">Correct Answer <span
                                                class="text-danger">*</span></label>
                                        <select name="answer" class="form-control">
                                            <option value="">Select Correct Answer</option>
                                            <option value="A"
                                                {{ old('answer', $quiz->answer) == 'A' ? 'selected' : '' }}>A</option>
                                            <option value="B"
                                                {{ old('answer', $quiz->answer) == 'B' ? 'selected' : '' }}>B</option>
                                            <option value="C"
                                                {{ old('answer', $quiz->answer) == 'C' ? 'selected' : '' }}>C</option>
                                            <option value="D"
                                                {{ old('answer', $quiz->answer) == 'D' ? 'selected' : '' }}>D</option>
                                        </select>
                                    </div>
                                </div>
                            @endif

                            @if ($quiz->type == 'matching')
                                <div id="matching" class="row" style="display: none">
                                    <div class="mb-3 local-forms">
                                        <label class="form-label">Question Text <span class="text-danger">*</span></label>
                                        <textarea name="question_text" class="form-control">{{ old('question_text', $quiz->question_text) }}</textarea>
                                    </div>

                                    <!-- Matching -->
                                    <div class="mb-3 option-group">
                                        <label>Matching Pairs <span class="text-danger">*</span></label>
                                        <div class="row">
                                            @foreach ($quiz->options as $key => $values)
                                                <div class="col-md-6">
                                                    <h6>{{ $key }}</h6>
                                                    @foreach ($values as $value)
                                                        <input type="text" name="options[]"
                                                            class="mb-1 form-control column-a"
                                                            placeholder="{{ $loop->iteration }}"
                                                            value="{{ old("options.$loop->iteration", $value) }}">
                                                    @endforeach
                                                </div>
                                            @endforeach

                                        </div>


                                        <div class="mt-3 row">
                                            @php
                                                $answers = json_decode($quiz->answer);
                                            @endphp
                                            @foreach ($answers as $answer)
                                                <div class="mb-2 col-md-2 match-wrapper"
                                                    data-index="{{ $loop->iteration }}">
                                                    <label>Match for {{ $loop->iteration + 1 }}</label>
                                                    <div class="position-relative">
                                                        <select name="answers[]" class="form-control match-select"
                                                            data-index="{{ $loop->iteration }}">
                                                            <option value="">Select</option>
                                                            <option @selected($answer == 'a') value="a">a</option>
                                                            <option @selected($answer == 'b') value="b">b</option>
                                                            <option @selected($answer == 'c') value="c">c</option>
                                                            <option @selected($answer == 'd') value="d">d</option>
                                                            <option @selected($answer == 'e') value="e">e</option>
                                                        </select>
                                                        <button type="button"
                                                            class="clear-select btn btn-sm btn-danger position-absolute"
                                                            style="top: 50%; right: 8px; transform: translateY(-50%); padding: 0 5px;">&times;</button>
                                                    </div>
                                                </div>
                                            @endforeach

                                            <input type="hidden" name="answer" id="answer"
                                                value="{{ old('answer') }}">
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div class="">
                                <button type="submit" class="btn btn-success">Update</button>
                                <a href="{{ route('lesson-quizzes.index') }}" class="btn btn-secondary">Back</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            const courseId = $('#course_id').val();
            const unitSelect = $('#unit_id');
            const unitId = "{{ $quiz->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 == '{{ $quiz->unit_id }}' ?
                                'selected' : '';
                            unitSelect.append(
                                `<option value="${unit.id}" ${isSelected}>${unit.title_prefix}-${unit.title_number}: ${unit.name}</option>`
                            );
                        });
                        unitSelect.prop('disabled', false);
                    },
                    error: function() {
                        unitSelect.html('<option value="">Error loading</option>');
                    }
                });
            }
            if (unitId) {
                $.ajax({
                    url: `/get-lessons-by-unit/${unitId}`,
                    type: 'GET',
                    success: function(res) {
                        lessonSelect.empty().append(
                            '<option value="">Select Unit</option>');
                        $.each(res.lessons, function(key, lesson) {
                            isSelected = lesson.id == "{{ $quiz->lesson_id }}" ? 'selected' :
                                '';
                            lessonSelect.append(
                                `<option ${isSelected} value="${lesson.id}">${lesson.title}</option>`
                            );
                        });
                        lessonSelect.prop('disabled', false);
                    },
                    error: function() {
                        lessonSelect.html('<option value="">Error loading</option>');
                    }
                });
            }

            // Normal on-change loading
            $('#unit_id').on('change', function() {
                let unitId = $(this).val();
                lessonSelect.prop('disabled', true).html('<option value="">Loading...</option>');

                if (unitId) {
                    $.ajax({
                        url: `/get-lessons-by-unit/${unitId}`,
                        type: 'GET',
                        success: function(res) {
                            lessonSelect.empty().append(
                                '<option value="">Select Unit</option>');
                            $.each(res.lessons, function(key, lesson) {
                                lessonSelect.append(
                                    `<option value="${lesson.id}">${lesson.title}</option>`
                                );
                            });
                            lessonSelect.prop('disabled', false);
                        },
                        error: function() {
                            lessonSelect.html('<option value="">Error loading</option>');
                        }
                    });
                } else {
                    lessonSelect.prop('disabled', true).html('<option value="">Select Unit</option>');
                }
            });

            $('#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);
                        },
                        error: function() {
                            unitSelect.html('<option value="">Error loading</option>');
                        }
                    });
                } else {
                    unitSelect.prop('disabled', true).html('<option value="">Select Unit</option>');
                }
            });

            $('form').on('submit', function() {
                const values = [];
                $('.match-select').each(function() {
                    values.push($(this).val());
                });
                $('#answer').val(JSON.stringify(values)); // or use .join('|') for custom
            });


            function updateSelectOptions() {
                const selectedValues = [];

                // Collect selected values
                $('.match-select').each(function() {
                    const val = $(this).val();
                    if (val) selectedValues.push(val);
                });

                // Disable selected values in other selects
                $('.match-select').each(function() {
                    const currentVal = $(this).val();
                    $(this).find('option').each(function() {
                        const optionVal = $(this).val();
                        if (!optionVal) return; // skip empty

                        if (selectedValues.includes(optionVal) && optionVal !== currentVal) {
                            $(this).prop('disabled', true);
                        } else {
                            $(this).prop('disabled', false);
                        }
                    });
                });
                console.log(selectedValues)
            }

            // Initial update
            updateSelectOptions();

            // On change of any select
            $('.match-select').on('change', function() {
                updateSelectOptions();
            });

            // Clear button logic
            $('.clear-select').on('click', function() {
                const wrapper = $(this).closest('.match-wrapper');
                const select = wrapper.find('.match-select');
                select.val('');
                updateSelectOptions();
            });



            $('#question_type').on('change', function() {
                const type = $(this).val();

                switch (type) {
                    case 'mcq':

                        //show mal
                        $('#mcq').show();

                        // false htrr ml
                        $('#mcq').find('input,textarea,select').prop('disabled', false);

                        //m sai tr a kone hide ml, disable cha ml
                        $('#tf').hide();
                        $('#blank').hide();
                        $('#matching').hide();
                        $('#audio').hide();


                        //all type input ko ll disable
                        $('#tf').find('input,textarea,select').prop('disabled', true);
                        $('#blank').find('input,textarea,select').prop('disabled', true);
                        $('#matching').find('input,textarea,select').prop('disabled', true);
                        $('#audio').find('input,textarea,select').prop('disabled', true);


                        break;

                    case 'tf':
                        //show mal
                        $('#tf').show();

                        // false htrr ml
                        $('#tf').find('input,textarea,select').prop('disabled', false);

                        //m sai tr a kone hide ml, disable cha ml
                        $('#mcq').hide();
                        $('#blank').hide();
                        $('#matching').hide();
                        $('#audio').hide();

                        //all type input ko ll disable
                        $('#mcq').find('input,textarea,select').prop('disabled', true);
                        $('#blank').find('input,textarea,select').prop('disabled', true);
                        $('#matching').find('input,textarea,select').prop('disabled', true);
                        $('#audio').find('input,textarea,select').prop('disabled', true);
                        break;

                    case 'blank':
                        //show mal
                        $('#blank').show();

                        // false htrr ml
                        $('#blank').find('input,textarea,select').prop('disabled', false);

                        //m sai tr a kone hide ml, disable cha ml
                        $('#mcq').hide();
                        $('#tf').hide();
                        $('#matching').hide();
                        $('#audio').hide();

                        //all type input ko ll disable
                        $('#mcq').find('input,textarea,select').prop('disabled', true);
                        $('#tf').find('input,textarea,select').prop('disabled', true);
                        $('#matching').find('input,textarea,select').prop('disabled', true);
                        $('#audio').find('input,textarea,select').prop('disabled', true);

                        break;

                    case 'audio':
                        $('#audio').show();

                        // false htrr ml
                        $('#audio').find('input,textarea,select').prop('disabled', false);

                        //m sai tr a kone hide ml, disable cha ml
                        $('#mcq').hide();
                        $('#tf').hide();
                        $('#matching').hide();
                        $('#blank').hide();

                        //all type input ko ll disable
                        $('#mcq').find('input,textarea,select').prop('disabled', true);
                        $('#tf').find('input,textarea,select').prop('disabled', true);
                        $('#matching').find('input,textarea,select').prop('disabled', true);
                        $('#blank').find('input,textarea,select').prop('disabled', true);
                        break;

                    case 'matching':
                        $('#matching').show();

                        // false htrr ml
                        $('#matching').find('input,textarea,select').prop('disabled', false);

                        //m sai tr a kone hide ml, disable cha ml
                        $('#mcq').hide();
                        $('#tf').hide();
                        $('#audio').hide();
                        $('#blank').hide();

                        //all type input ko ll disable
                        $('#mcq').find('input,textarea,select').prop('disabled', true);
                        $('#tf').find('input,textarea,select').prop('disabled', true);
                        $('#audio').find('input,textarea,select').prop('disabled', true);
                        $('#blank').find('input,textarea,select').prop('disabled', true);
                        break;
                }
            });

            // Trigger change on page load if old value exists
            const initialType = $('#question_type').val();
            if (initialType) {
                $('#question_type').trigger('change');
            }

            //media
            $('#question_audio_file').on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const url = URL.createObjectURL(file);
                    $('#audio-preview').attr('src', url);
                    $('#audio-preview-container').show();
                } else {
                    $('#audio-preview').removeAttr('src');
                    $('#audio-preview-container').hide();
                }
            });

            // Option image preview functionality
            $('.option-image-input').on('change', function(e) {
                const file = e.target.files[0];
                const option = $(this).data('option');
                const previewContainer = $(`#preview-${option}`);
                const previewImg = previewContainer.find('img');

                if (file) {
                    const url = URL.createObjectURL(file);
                    previewImg.attr('src', url);
                    previewContainer.show();
                } else {
                    previewImg.removeAttr('src');
                    previewContainer.hide();
                }
            });

        });
    </script>
@endpush