@extends('components.dashboard.layouts.master')

@section('styles')
    @stack('datatableStyles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .question-block {
            border: 1px solid #d1d5db;
            border-radius: 12px;
            margin-bottom: 30px;
            background-color: #ffffff;
            box-shadow: 0 4px 10px rgb(0 0 0 / 0.05);
            transition: box-shadow 0.3s ease;
            padding-bottom: 20px;
        }
        .question-block:hover {
            box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
        }
        .question-block .card-header {
            padding: 1rem 1.5rem;
            font-weight: 700;
            font-size: 1.25rem;
            color: #1e293b;
            background-color: #f1f5f9;
            border-bottom: 1px solid #cbd5e1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        label.form-label {
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 6px;
            color: #334155;
            display: block;
        }
        select.form-control,
        input.form-control,
        textarea.form-control {
            font-size: 1rem;
            padding: 12px 14px;
            border-radius: 10px;
            border: 1.8px solid #cbd5e1;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
            width: 100%;
            box-sizing: border-box;
            background-color: #f9fafb;
            height: 50px;
        }
        select.form-control:focus,
        input.form-control:focus,
        textarea.form-control:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 6px #2563eb88;
            background-color: #ffffff;
        }
        textarea.form-control {
            min-height: 80px;
            resize: vertical;
        }
        .answers-group {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 15px;
        }
        .answer-item {
            background: #fff;
            border-radius: 12px;
            border: 1.5px solid #e2e8f0;
            box-shadow: 0 2px 8px rgb(0 0 0 / 0.05);
            display: flex;
            gap: 20px;
            padding: 16px 20px;
            align-items: center;
            transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            position: relative;
        }
        .answer-item.selected-answer {
            border-color: #22c55e;
            box-shadow: 0 8px 20px rgb(34 197 94 / 0.4);
            background-color: #f0fdf4;
        }
        .answer-text-wrapper {
            flex: 1 1 auto;
            max-width: 65%;
        }
        .answer-text-wrapper textarea {
            width: 100%;
            min-height: 60px;
            resize: vertical;
            border-radius: 10px;
            border: 1.5px solid #cbd5e1;
            font-size: 1rem;
            background-color: #fff;
            transition: border-color 0.3s ease;
        }
        .answer-text-wrapper textarea:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 6px #3b82f688;
            outline: none;
        }
        .answer-file-wrapper {
            flex: 0 0 auto;
            min-width: 180px;
            display: flex;
            justify-content: center;
        }
        .answer-file-wrapper input[type="file"] {
            width: 100%;
            border-radius: 10px;
            border: 1.8px solid #cbd5e1;
            padding: 6px 10px;
            font-size: 0.95rem;
            cursor: pointer;
            background-color: #fff;
        }
        .correct-wrapper {
            flex: 0 0 110px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 700;
            font-size: 1rem;
            color: #16a34a;
            cursor: pointer;
            user-select: none;
            position: relative;
        }
        .correct-wrapper input[type="radio"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .correct-icon {
            width: 24px;
            height: 24px;
            fill: #94a3b8;
            transition: fill 0.3s ease;
            cursor: pointer;
            flex-shrink: 0;
        }
        .correct-wrapper.selected .correct-icon {
            fill: #16a34a;
        }
        .correct-wrapper:hover .correct-icon {
            fill: #22c55e;
        }
        .btn-primary {
            font-size: 1.1rem;
            padding: 12px 36px;
            border-radius: 12px;
            background-color: #2563eb;
            border: none;
            color: #fff;
            transition: background-color 0.3s ease;
            cursor: pointer;
            box-shadow: 0 3px 8px rgb(37 99 235 / 0.7);
            user-select: none;
        }
        .btn-primary:hover {
            background-color: #1e40af;
            box-shadow: 0 4px 10px rgb(30 64 175 / 0.85);
        }
        #add-question {
            display: block;
            margin: 30px auto 40px auto;
            font-weight: 700;
            letter-spacing: 0.04em;
            max-width: 240px;
        }
        small.text-danger {
            display: block;
            margin-top: 5px;
            font-size: 0.9rem;
            color: #dc2626;
        }
        @media (max-width: 576px) {
            .answer-item {
                flex-direction: column;
            }
            .answer-file-wrapper {
                flex: 1 1 auto;
                margin-top: 12px;
            }
            #add-question {
                max-width: 100%;
            }
        }
        .select2-container .select2-selection--single {
            height: 50px !important;
            border-radius: 10px !important;
            border: 1.8px solid #cbd5e1 !important;
            padding: 6px 12px !important;
            background-color: #f9fafb !important;
            box-sizing: border-box;
            font-size: 1rem !important;
            color: #334155 !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 36px !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 50px !important;
            right: 10px !important;
        }
        .answer-item.essay-item {
            flex-direction: column;
            align-items: stretch;
        }
        .answer-item.essay-item .answer-text-wrapper {
            max-width: 100%;
            flex: 1 1 100%;
        }
        .btn-remove-question {
            font-size: 1.4rem;
            color: #ef4444;
            background: transparent;
            cursor: pointer;
            line-height: 1;
        }
        .btn-remove-question:hover {
            color: #b91c1c;
        }
        .option-comment{
            padding-left : 0 !important;
            padding-right : 0 !important;
        }
    </style>
@endsection

@section('title')
    {{ __('Edit Question') }}
@endsection

@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-body">
                <x-dashboard.layouts.breadcrumb now="{{ __('Edit Question') }}">
                    <li class="breadcrumb-item"><a href="{{ route('teacher.questions-bank.index') }}">{{ __('Questions bank') }}</a></li>
                </x-dashboard.layouts.breadcrumb>
                <x-validation.questions-validation/>
                <section id="basic-input" class="mt-3">
                    <div class="row justify-content-center">
                        <div class="col-xl-10 col-lg-11 col-md-12 col-12">
                            <form action="{{ route('teacher.questions-bank.update', $questionBank->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('PUT')

                                <div class="question-block">
                                    <div class="card-header">
                                        <h5>{{ __('Question') }}</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="course_id">{{ __('Course name') }}</label>
                                                <select id="course-select" class="form-control select2 course-select" name="course_id" >
                                                    <option value="">{{ __('Select Course') }}</option>
                                                    @foreach($courses as $id => $title)
                                                        <option value="{{ $id }}" {{ old('course_id', $selectedCourseId) == $id ? 'selected' : '' }}>{{ $title }}</option>
                                                    @endforeach
                                                </select>
                                                @error('course_id')
                                                <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                            <div class="col-md-6">
                                                <label for="lesson_id">{{ __('Lesson name') }}</label>
                                                <select id="lesson-select" class="form-control select2 lesson-select" name="lesson_id" >
                                                    <option value="">{{ __('Select Lesson') }}</option>
                                                    @foreach($lessons as $id => $title)
                                                        <option value="{{ $id }}" {{ old('lesson_id', $questionBank->lesson_id) == $id ? 'selected' : '' }}>{{ $title }}</option>
                                                    @endforeach
                                                </select>
                                                @error('lesson_id')
                                                <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <div class="col-md-3">
                                                <label for="question_type">{{ __('Question Type') }}</label>
                                                <select id="question_type" name="question_type" class="form-control" disabled>
                                                    @foreach(\App\Enum\QuestionTypeEnum::getValues() as $questionBankType)
                                                        <option value="{{ $questionBankType }}" {{ old('question_type', $questionBank->question_type) == $questionBankType ? 'selected' : '' }}>
                                                            {{ __($questionBankType) }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <input type="hidden" name="question_type" value="{{ old('question_type', $questionBank->question_type) }}">


                                                @error('question_type')
                                                <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <div class="col-md-3">
                                                <label for="difficulty_level">{{ __('difficulty_level') }}</label>
                                                <select id="difficulty_level" name="difficulty_level" class="form-control" >
                                                    <option value="" disabled>{{ __('Select difficulty_level') }}</option>
                                                    @foreach(\App\Enum\QuestionDifficultyEnum::getValues() as $difficulty)
                                                        fa<option value="{{ $difficulty }}" {{ old('difficulty_level', $questionBank->difficulty_level) == $difficulty ? 'selected' : '' }}>{{ __($difficulty) }}</option>
                                                    @endforeach
                                                </select>
                                                @error('difficulty_level')
                                                <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <div class="col-md-3">
                                                <label for="score">{{ __('Question Score') }}</label>
                                                <input id="score" type="number" min="0" step="0.5" name="score" class="form-control" placeholder="{{ __('Enter Question Score') }}" value="{{ old('score', $questionBank->score) }}" >
                                                @error('score')
                                                <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                            <div class="col-md-3">
                                                <label for="question_image">{{ __('Question Image') }}</label>
                                                <input id="question_image" type="file" name="question_image" accept="image/*" class="form-control p-1" aria-describedby="imageHelp_0">
                                                @error('question_image')
                                                <small class="text-danger">{{ $message }}</small>
                                                @enderror

                                                @if($questionBank->image)
                                                    <div class="m-1">
                                                        <img src="{{ asset($questionBank->image) }}" alt="Question Image" class="img-thumbnail" style="width: 300px; height: 150px">
                                                    </div>
                                                @endif



                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="question_text">{{ __('Question Text') }}</label>
                                            <textarea id="question_text" name="question_text" class="form-control" rows="3" placeholder="{{ __('Enter the question') }}" >{{ old('question_text', $questionBank->question_text) }}</textarea>
                                            @error('question_text')
                                            <small class="text-danger">{{ $message }}</small>
                                            @enderror
                                        </div>

                                        <hr class="my-4">


                                        @if($questionBank->question_type === \App\Enum\QuestionTypeEnum::MCQ)
                                            <div class="answers-wrapper">
                                                <div class="answers-group">
                                                    <input type="hidden" name="correct_answer"
                                                           value="{{ old('correct_answer', $questionBank->options->search(fn($opt) => $opt->is_correct)) }}">

                                                @foreach($questionBank->options as $index => $answer)
                                                        <div class="answer-item row {{ old('correct_answer', $answer->is_correct ? $index : '') == $index ? 'selected-answer' : '' }}">
                                                            <div class="answer-text-wrapper ">
                                                                <textarea name="answer_{{ $index }}_text" class="form-control" placeholder="{{ __('Answer') }} {{ $index + 1 }}" >{{ old("answer_{$index}_text", $answer->answer) }}</textarea>
                                                            </div>
                                                            <div class="answer-file-wrapper col-4">
                                                                @if(!empty($answer->image))
                                                                    <div class="mb-2">
                                                                        <img src="{{ $answer->image }}" class="img-thumbnail" style="max-width: 120px;">
                                                                    </div>
                                                                @endif
                                                                <input type="file" name="answer_{{ $index }}_image" accept="image/*" class="form-control p-1" title="{{ __('Upload image for answer') }}">
                                                            </div>
                                                            <div class="correct-wrapper {{ old('correct_answer', $answer->is_correct ? $index : '') == $index ? 'selected' : '' }}" tabindex="0" role="radio" aria-checked="{{ old('correct_answer', $answer->is_correct ? $index : '') == $index ? 'true' : 'false' }}" data-radio-id="correct_answer_{{ $index }}">
                                                                <input class="correct-radio"
                                                                       type="radio"
                                                                       name="correct_answer"
                                                                       id="correct_answer_{{ $index }}"
                                                                       value="{{ $index }}"
                                                                    @checked(old('correct_answer', $questionBank->options->search(fn($opt) => $opt->is_correct)) == $index)>

                                                                <svg class="correct-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                                                                    <path d="M20.285 6.709a1 1 0 0 0-1.414-1.418l-9.192 9.199-4.192-4.2a1 1 0 0 0-1.415 1.415l4.9 4.906a1 1 0 0 0 1.414 0l9.899-9.902z"/>
                                                                </svg>
                                                                <span>{{ __('Correct') }}</span>
                                                            </div>
                                                            <div class="answer-text-wrapper option-comment col-12"  style ="max-width:100%">
                                                                <textarea name="comment_{{ $index }}_text" class="form-control" placeholder="{{ __('Comment') }} {{ $index + 1 }}">{{ old("comment_{$index}_text", $answer->comment) }}</textarea>
                                                            </div>

                                                        </div>

                                                    @endforeach
                                                </div>
                                            </div>
                                        @else

                                            <div class="mb-3">
                                                <label for="answer_text">{{ __('Answer') }}</label>
                                                <textarea id="answer_text" name="answer_text" class="form-control" rows="3" placeholder="{{ __('Enter the answer') }}">{{ old('answer_text', $questionBank->answer ?? '') }}</textarea>
                                                @error('answer_text')
                                                <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                                <textarea id="comment_text" name="comment_text" class="form-control mt-2" rows="3" placeholder="{{ __('Enter the Comment') }}">{{ old('comment', $questionBank->comment ?? '') }}</textarea>
                                                @error('comment_text')
                                                <small class="text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>

                                        @endif

                                    </div>
                                </div>

                                <div class="col-xl-10 col-lg-11 col-md-12 col-12 mx-auto mt-3">
                                    <button type="submit" class="btn btn-primary w-100">{{ __('update') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection

@section('script')
    @stack('datatableScripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "{{ __('Select') }}",
                allowClear: true,
                width: '100%'
            });

            // Load lessons based on course selected (same as create)
            $('#course-select').on('change', function() {
                let courseId = $(this).val();
                let $lessonSelect = $('#lesson-select');

                if (!courseId) {
                    $lessonSelect.html('<option value="">{{ __("Select Lesson") }}</option>').trigger('change');
                    return;
                }

                let urlTemplate = '{{ route("teacher.lessons.byCourse", ["course" => ":course"]) }}';
                let url = urlTemplate.replace(':course', courseId);

                $.ajax({
                    url: url,
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        let lessons = data.lessons || data.data || [];
                        let options = '<option value="">{{ __("Select Lesson") }}</option>';

                        if (typeof lessons === 'object' && Object.keys(lessons).length > 0) {
                            $.each(lessons, function(id, title) {
                                options += `<option value="${id}">${title}</option>`;
                            });
                        } else {
                            options += `<option disabled>{{ __('No lessons found') }}</option>`;
                        }

                        $lessonSelect.html(options).trigger('change');
                    },
                    error: function() {
                        alert("{{ __('Failed to load lessons') }}");
                    }
                });
            });

            function updateSelectedAnswerStyles() {
                $('.answer-item').removeClass('selected-answer');
                $('.correct-wrapper').removeClass('selected').attr('aria-checked', 'false');

                let checkedRadio = $('input.correct-radio:checked');
                if (checkedRadio.length) {
                    let $answerItem = checkedRadio.closest('.answer-item');
                    $answerItem.addClass('selected-answer');
                    $answerItem.find('.correct-wrapper').addClass('selected').attr('aria-checked', 'true');
                }
            }

            updateSelectedAnswerStyles();

            $('.correct-wrapper').off('click').on('click', function() {
                let radio = $(this).find('input.correct-radio');
                radio.prop('checked', true).trigger('change');
            });

            $('.correct-wrapper').off('keydown').on('keydown', function(e) {
                if (e.key === ' ' || e.key === 'Enter') {
                    e.preventDefault();
                    $(this).click();
                }
            });

            $('input.correct-radio').off('change').on('change', function() {
                updateSelectedAnswerStyles();
            });



        });
    </script>
@endsection