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

@section('styles')
<style>
    .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
        white-space: normal;
        word-break: break-word;
    }
</style>
@endsection

@section('title',  __('dashboard.Edit Quiz Question')
@section('page_heading',  __('dashboard.Edit Quiz Question'))

@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', $quiz->course->id) }}" class="text-muted text-hover-primary">{{ $quiz->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.quizzes.index', $quiz->course->id) }}" class="text-muted text-hover-primary">{{ __('dashboard.Quizzes') }}</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 . '.quiz-questions.index', $quizId) }}" class="text-muted text-hover-primary">{{ __('dashboard.Quiz Questions') }}</a></li>
@endsection

@section('actions')
    <a href="{{ route($routePrefix . '.quiz-questions.index', $quizId) }}" class="btn btn-flex btn-outline btn-color-gray-700 btn-active-color-primary bg-body h-40px fs-7 fw-bold">{{ __('dashboard.View All Quiz Questions') }}</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="card card-flush h-lg-100">
            <div class="card-header pt-7">
                <div class="text-lg font-black text-zinc-900 dark:text-white">
                    <i class="ki-outline ki-element-6 fs-1 me-2"></i>
                    <h2>{{ __('dashboard.Edit Quiz Question') }}</h2>
                </div>
            </div>
            <div class="card-body pt-5">
                <form class="form" action="{{ route($routePrefix . '.quiz-questions.update', [$quizId, $quizQuestion->id]) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="question-block mb-5 p-5 border border-dashed rounded position-relative">
                        <div class="selected-question-details">
                             <div class="mb-3 p-3 bg-light rounded">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="fw-bold question-text-display">{{ $quizQuestion->question->question_text }}</div>
                                    <div class="text-muted fs-7 question-creator-display" style="white-space: nowrap;">
                                        <i class="ki-outline ki-user fs-7 me-1"></i>{{ $quizQuestion->question->user->first_name . ' ' . $quizQuestion->question->user->last_name }}
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <span class="fw-semibold me-2">{{ __('dashboard.Score') }}:</span><span class="question-score-display">{{ $quizQuestion->score }}</span>
                                    <span class="fw-semibold ms-4 me-2">{{ __('dashboard.Difficulty Level') }}:</span><span class="question-difficulty-display">{{ $quizQuestion->question->difficultyLevel->name }}</span>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-light-warning edit-question-btn mb-3">{{ __('dashboard.Edit') }}</button>
                        </div>

                        <div class="question-select-wrapper" style="display:none;">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3">{{ __('dashboard.Select Lesson') }}</label>
                                <select class="form-select form-select-solid" data-control="select2" data-hide-search="true" id="lesson_select" data-placeholder="{{ __('dashboard.Select Lesson') }}">
                                    <option></option>
                                    @foreach($lessons as $lesson)
                                        <option value="{{ $lesson->id }}" {{ old('lesson_id', $quizQuestion->question->lesson_id) == $lesson->id ? 'selected' : '' }}>
                                            {{ $lesson->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3"><span class="required">{{ __('dashboard.Select Question') }}</span></label>
                                <select class="form-select form-select-solid" data-control="select2" id="question_select" name="question_id" required>
                                    @if($quizQuestion->question)
                                        <option value="{{ $quizQuestion->question->id }}" selected>{{ $quizQuestion->question->question_text }}</option>
                                    @endif
                                </select>
                            </div>
                        </div>

                        <div class="fv-row mb-7">
                            <label class="fs-6 fw-semibold form-label mt-3"><span class="required">{{ __('dashboard.Score') }}</span></label>
                            <input type="number" class="form-control form-control-solid" id="score_input" name="score" value="{{ old('score', $quizQuestion->score) }}" required min="1">
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <a href="{{ route($routePrefix . '.quiz-questions.index', $quizId) }}" class="btn btn-light me-3">{{ __('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">
                            <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>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        let lessonSelect = $('#lesson_select');
        let questionSelect = $('#question_select');
        let scoreInput = $('#score_input');
        let questionSelectWrapper = $('.question-select-wrapper');
        let selectedQuestionDetails = $('.selected-question-details');

        function initializeQuestionSelect() {
            questionSelect.select2({
                placeholder: "{{ __('dashboard.Select Question') }}",
                allowClear: true,
                ajax: {
                    url: '{{ route($routePrefix . '.quiz-questions.search') }}',
                    type: 'GET',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            lesson_id: lessonSelect.val()
                        };
                    },
                    processResults: function(data) {
                        return { results: data };
                    }
                },
                templateResult: function(data) {
                    if (!data.id) { return data.text; }
                    let badgeColor = 'badge-light-primary';
                    if (data.difficulty === 'Medium') badgeColor = 'badge-light-warning';
                    if (data.difficulty === 'Hard') badgeColor = 'badge-light-danger';

                    return $(`
                        <div>${data.text}</div>
                        <div class="mt-1 d-flex justify-content-between">
                            <div>
                                <span class="badge ${badgeColor}">${data.difficulty}</span>
                                <span class="badge badge-light-success ms-2">Score: ${data.score || 'N/A'}</span>
                            </div>
                            <div class="text-muted fs-8">
                                <i class="ki-outline ki-user fs-8"></i> ${data.creator}
                            </div>
                        </div>
                    `);
                },
                templateSelection: function(data) {
                    return data.text;
                }
            });
        }

        initializeQuestionSelect();

        lessonSelect.on('change', function() {
            questionSelect.val(null).trigger('change');
            scoreInput.val('1');
        });

        questionSelect.on('select2:select', function(e) {
            const data = e.params.data;
            if(data) {
                scoreInput.val(data.score || 1);
                selectedQuestionDetails.find('.question-text-display').text(data.text);
                selectedQuestionDetails.find('.question-score-display').text(data.score || 1);
                selectedQuestionDetails.find('.question-difficulty-display').text(data.difficulty);
                selectedQuestionDetails.find('.question-creator-display').html(`<i class="ki-outline ki-user fs-7 me-1"></i>${data.creator}`);
                questionSelectWrapper.hide();
                selectedQuestionDetails.show();
            }
        });

        $('.edit-question-btn').on('click', function() {
            selectedQuestionDetails.hide();
            questionSelectWrapper.show();
        });
    });
</script>
@endsection