@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;
    }
    .drag-handle {
        cursor: grab;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: .475rem;
        background: var(--bs-light);
        color: var(--bs-gray-700);
        border: 1px dashed var(--bs-gray-300);
    }
    .drag-handle:active {
        cursor: grabbing;
    }
    .sortable-ghost {
        opacity: .6;
        background: var(--bs-light-primary);
    }
</style>
@endsection

@section('title',  __('dashboard.Add Questions to Quiz')
@section('page_heading',  __('dashboard.Add Questions to Quiz'))

@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.quizzes.index', $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')
    <button type="button" onclick="document.getElementById('examBankModal').classList.remove('hidden')"
        class="btn btn-flex btn-light-primary h-40px fs-7 fw-bold me-2">
        <i class="ki-outline ki-book fs-4 me-1"></i>{{ __('dashboard.Import from Exam Bank') }}
    </button>
    <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

{{-- Exam Bank Import Modal --}}
<div id="examBankModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
    <div class="w-full max-w-2xl rounded-2xl bg-white dark:bg-zinc-900 shadow-xl">
        <div class="flex items-center justify-between border-b border-zinc-200 dark:border-zinc-700 px-6 py-4">
            <h3 class="text-lg font-black text-zinc-900 dark:text-white">
                <i class="fa-solid fa-database me-2 text-brand-500"></i>
                {{ app()->getLocale() === 'ar' ? 'استيراد من بنك الأسئلة' : 'Import from Exam Bank' }}
            </h3>
            <button onclick="document.getElementById('examBankModal').classList.add('hidden')" class="text-zinc-400 hover:text-zinc-600">
                <i class="fa-solid fa-xmark text-xl"></i>
            </button>
        </div>
        <div class="p-6 space-y-4">
            <input type="text" id="ebSearch" placeholder="{{ app()->getLocale() === 'ar' ? 'ابحث عن سؤال...' : 'Search questions...' }}"
                class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-800 dark:text-white">
            <div id="ebResults" class="max-h-72 overflow-y-auto space-y-2 text-sm text-zinc-500">
                {{ app()->getLocale() === 'ar' ? 'اكتب للبحث...' : 'Type to search...' }}
            </div>
            <div class="flex justify-end gap-3 border-t border-zinc-100 dark:border-zinc-800 pt-4">
                <button onclick="document.getElementById('examBankModal').classList.add('hidden')"
                    class="rounded-xl border border-zinc-200 px-4 py-2 text-sm font-bold text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300">
                    {{ app()->getLocale() === 'ar' ? 'إلغاء' : 'Cancel' }}
                </button>
                <button id="ebImportBtn" onclick="importSelectedBankQuestions()"
                    class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">
                    {{ app()->getLocale() === 'ar' ? 'استيراد المحدد' : 'Import Selected' }}
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const ebSearchInput = document.getElementById('ebSearch');
const ebResults = document.getElementById('ebResults');
const selectedBankIds = new Set();
let ebTimeout;

ebSearchInput?.addEventListener('input', function() {
    clearTimeout(ebTimeout);
    ebTimeout = setTimeout(() => fetchBankQuestions(this.value), 300);
});

function fetchBankQuestions(q) {
    const subjectId = {{ $subject->id ?? 'null' }};
    fetch(`{{ route('admin.quiz-questions.search-exam-bank') }}?q=${encodeURIComponent(q)}&subject_id=${subjectId}`)
        .then(r => r.json())
        .then(data => {
            if (!data.length) { ebResults.innerHTML = '<p class="text-center py-4 text-zinc-400">{{ app()->getLocale() === "ar" ? "لا توجد نتائج" : "No results" }}</p>'; return; }
            ebResults.innerHTML = data.map(q => `
                <label class="flex items-center gap-3 rounded-xl border border-zinc-200 dark:border-zinc-700 p-3 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800">
                    <input type="checkbox" value="${q.id}" class="eb-check rounded" onchange="toggleBankId(${q.id}, this.checked)" ${selectedBankIds.has(q.id) ? 'checked' : ''}>
                    <div class="flex-1 min-w-0">
                        <p class="font-bold text-zinc-900 dark:text-white truncate">${q.title}</p>
                        <p class="text-xs text-zinc-400">${q.type} · ${q.difficulty} · ${q.points} pts</p>
                    </div>
                </label>`).join('');
        });
}

function toggleBankId(id, checked) { checked ? selectedBankIds.add(id) : selectedBankIds.delete(id); }

function importSelectedBankQuestions() {
    if (!selectedBankIds.size) return alert('{{ app()->getLocale() === "ar" ? "اختر سؤالاً على الأقل" : "Select at least one question" }}');
    fetch('{{ route("admin.quiz-questions.import-from-exam-bank", $quizId) }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
        body: JSON.stringify({ question_ids: [...selectedBankIds] })
    }).then(r => r.json()).then(data => {
        if (data.ok) {
            document.getElementById('examBankModal').classList.add('hidden');
            location.reload();
        } else alert(data.error || 'Error');
    });
}

// Load on open
document.getElementById('examBankModal')?.addEventListener('click', function(e) {
    if (e.target === this) this.classList.add('hidden');
});
</script>
@endpush

@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 mb-7">
            <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                <div class="text-lg font-black text-zinc-900 dark:text-white">
                    <i class="ki-outline ki-notepad-edit fs-1 me-2"></i>
                    <h2>{{ __('dashboard.Quiz') }}: {{ $quiz->title }}</h2>
                </div>
                <div class="card-toolbar">
                    <a href="#kt_quiz_summary_body" class="btn btn-sm btn-light-info" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="kt_quiz_summary_body">
                        {{ __('dashboard.Show/Hide Details') }}
                    </a>
                </div>
            </div>
            <div class="collapse" id="kt_quiz_summary_body">
                <div class="card-body pt-5">
                    <div class="row">
                        <div class="col-md-4 mb-5"><span class="fw-bold me-2">{{ __('dashboard.Start Time') }}:</span><span class="text-gray-600">{{ $quiz->start_time }}</span></div>
                        <div class="col-md-4 mb-5"><span class="fw-bold me-2">{{ __('dashboard.End Time') }}:</span><span class="text-gray-600">{{ $quiz->end_time }}</span></div>
                        <div class="col-md-4 mb-5"><span class="fw-bold me-2">{{ __('dashboard.Duration (minutes)') }}:</span><span class="text-gray-600">{{ $quiz->duration_minutes }}</span></div>
                        <div class="col-md-4 mb-5"><span class="fw-bold me-2">{{ __('dashboard.Difficulty Level') }}:</span><span class="badge badge-light-primary">{{ $quiz->difficulty_level }}</span></div>
                        <div class="col-md-4 mb-5"><span class="fw-bold me-2">{{ __('dashboard.Total Marks') }}:</span><span class="badge badge-light-success">{{ $quiz->total_marks }}</span></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card card-flush mb-7">
            <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                <div class="text-lg font-black text-zinc-900 dark:text-white">
                    <i class="ki-outline ki-information-5 fs-1 me-2"></i>
                    <h2>{{ __('dashboard.Question Bank Summary for') }}: {{ $subject->name }}</h2>
                </div>
                <div class="card-toolbar">
                    <a href="#kt_subject_stats_body" class="btn btn-sm btn-light-primary" data-bs-toggle="collapse" role="button" aria-expanded="false" aria-controls="kt_subject_stats_body">
                        {{ __('dashboard.Show/Hide Details') }}
                    </a>
                </div>
            </div>
            <div class="collapse" id="kt_subject_stats_body">
                <div class="card-body pt-5">
                    <div class="row g-5 g-xl-8 mb-5">
                        <div class="col-md-4">
                            <div class="card bg-light-primary hoverable card-xl-stretch">
                                <div class="p-6">
                                    <i class="ki-outline ki-book-square text-primary fs-2x ms-n1"></i>
                                    <div class="text-gray-900 fw-bold fs-2 mb-2 mt-5">{{ $subjectStats['total_lessons'] }}</div>
                                    <div class="fw-semibold text-gray-500">{{ __('dashboard.Total Lessons') }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-light-success hoverable card-xl-stretch">
                                <div class="p-6">
                                    <i class="ki-outline ki-questionnaire-tablet text-success fs-2x ms-n1"></i>
                                    <div class="text-gray-900 fw-bold fs-2 mb-2 mt-5">{{ $subjectStats['total_questions'] }}</div>
                                    <div class="fw-semibold text-gray-500">{{ __('dashboard.Total Questions in Bank') }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-light-warning hoverable card-xl-stretch">
                                <div class="p-6">
                                    <i class="ki-outline ki-level-variation text-warning fs-2x ms-n1"></i>
                                    <div class="mt-5">
                                        @forelse($subjectStats['by_difficulty'] as $level => $count)
                                            <p class="mb-1"><span class="fw-bold text-gray-900">{{ $count }}</span> <span class="text-gray-600">{{ $level }}</span></p>
                                        @empty
                                            <p class="text-gray-600">{{ __('dashboard.No questions categorized') }}</p>
                                        @endforelse
                                    </div>
                                    <div class="fw-semibold text-gray-500">{{ __('dashboard.Questions by Difficulty') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h3 class="mt-10 mb-5">{{ __('dashboard.Lessons Breakdown') }}</h3>
                    <div class="table-responsive">
                        <table class="table table-row-bordered table-striped gy-5 gs-7">
                            <thead>
                                <tr class="fw-bold fs-6 text-gray-800">
                                    <th>{{ __('dashboard.Lesson Title') }}</th>
                                    <th>{{ __('dashboard.Number of Questions') }}</th>
                                    <th>{{ __('dashboard.Difficulty Breakdown') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($subjectStats['lessons'] as $lesson)
                                <tr>
                                    <td>{{ $lesson['title'] }}</td>
                                    <td><span class="badge badge-primary">{{ $lesson['total_questions'] }}</span></td>
                                    <td>
                                        @forelse($lesson['difficulty_counts'] as $level => $count)
                                            <span class="badge badge-light-info me-2">{{ $count }} {{ $level }}</span>
                                        @empty
                                            <span class="badge badge-light-warning">{{ __('dashboard.No questions') }}</span>
                                        @endforelse
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <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.Add Questions to Quiz') }}</h2>
                </div>
            </div>
            <div class="card-body pt-5">
                <form id="quiz-form" class="form" action="{{ route($routePrefix . '.quiz-questions.store', $quizId) }}" method="POST">
                    @csrf
                    <div id="question-blocks"></div>
                    <button type="button" id="add-question" class="btn btn-light-primary mb-5">
                        <i class="ki-outline ki-plus fs-2"></i>
                        {{ __('dashboard.Add Another Question') }}
                    </button>
                    <div class="d-flex justify-content-end">
                        <button type="reset" id="cancel-btn" class="btn btn-light me-3">{{ __('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">
                            <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 src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    $(document).ready(function() {

        const questionBlocksContainer = $('#question-blocks');

        new Sortable(questionBlocksContainer[0], {
            animation: 150,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            onEnd: function () {
                updateQuestionNumbers();
            }
        });

        function getSelectedQuestionIds(excludeCurrentBlock = null) {
            let ids = [];
            $('.question-select').each(function() {
                let block = $(this).closest('.question-block');
                if (excludeCurrentBlock && block.is(excludeCurrentBlock)) {
                    return;
                }
                if ($(this).val()) {
                    ids.push($(this).val());
                }
            });
            return ids;
        }

        function updateQuestionNumbers() {
            questionBlocksContainer.find('.question-block').each(function(index) {
                const questionNumber = index + 1;
                $(this).find('.question-order-number').text('#' + questionNumber);
                $(this).find('.question-position').val(questionNumber);
            });
        }

        function initializeSelect2(element) {
            $(element).select2({
                placeholder: "{{ __('dashboard.Select Question') }}",
                allowClear: true,
                ajax: {
                    url: '{{ route($routePrefix . '.quiz-questions.search') }}',
                    type: 'GET',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        let currentBlock = $(this).closest('.question-block');
                        return {
                            q: params.term,
                            lesson_id: currentBlock.find('.lesson-select').val(),
                            exclude: getSelectedQuestionIds(currentBlock)
                        };
                    },
                    processResults: function(data) {
                        return { results: data };
                    },
                    cache: true
                },
                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;
                }
            });
        }

        function createNewQuestionBlock() {
            const newBlock = $(`
                <div class="question-block mb-5 p-5 border border-dashed rounded position-relative">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div class="d-flex align-items-center">
                            <div class="drag-handle me-3" title="{{ __('dashboard.Drag to reorder') }}">
                                <i class="ki-outline ki-burger-menu-6 fs-2x"></i>
                            </div>
                            <h4 class="mb-0 d-flex align-items-center">
                                {{ __('dashboard.Question') }} <span class="question-order-number ms-2"></span>
                            </h4>
                        </div>
                        <button type="button" class="btn btn-sm btn-icon btn-light-danger remove-question-block">
                            <i class="ki-outline ki-trash fs-2"></i>
                        </button>
                    </div>
                    <input type="hidden" name="positions[]" class="question-position">

                    <div class="selected-question-details" style="display:none;">
                         <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"></div>
                                <div class="text-muted fs-7 question-creator-display" style="white-space: nowrap;"></div>
                            </div>
                            <div class="mt-2">
                                <span class="fw-semibold me-2">{{ __('dashboard.Score') }}:</span><span class="question-score-display"></span>
                                <span class="fw-semibold ms-4 me-2">{{ __('dashboard.Difficulty Level') }}:</span><span class="question-difficulty-display"></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">
                        <div class="mb-5">
                            <label class="fs-6 fw-semibold form-label">{{ __('dashboard.Select Lesson') }}</label>
                            <select class="form-select form-select-solid lesson-select">
                                <option value="">{{ __('dashboard.Select Lesson') }}</option>
                                @foreach($lessons as $lesson)
                                    <option value="{{ $lesson->id }}">{{ $lesson->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-5">
                            <label class="fs-6 fw-semibold form-label">{{ __('dashboard.Select Question') }}</label>
                            <select class="form-select form-select-solid question-select" name="questions[]" required>
                                <option value="">{{ __('dashboard.Select Question') }}</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="fs-6 fw-semibold form-label">{{ __('dashboard.Score') }}</label>
                        <input type="number" class="form-control form-control-solid question-score" name="scores[]" required value="1" min="1">
                    </div>
                </div>
            `);
            questionBlocksContainer.append(newBlock);
            initializeSelect2(newBlock.find('.question-select'));
            updateQuestionNumbers();
        }

        questionBlocksContainer.on('change', '.lesson-select', function() {
            let block = $(this).closest('.question-block');
            let questionSelect = block.find('.question-select');
            questionSelect.val(null).trigger('change');
        });

        questionBlocksContainer.on('select2:select', '.question-select', function (e) {
            const data = e.params.data;
            let block = $(this).closest('.question-block');
            block.find('.question-score').val(data.score || 1);

            block.find('.question-text-display').text(data.text);
            block.find('.question-score-display').text(data.score || 1);
            block.find('.question-difficulty-display').text(data.difficulty);
            block.find('.question-creator-display').html(`<i class="ki-outline ki-user fs-7 me-1"></i>${data.creator}`);

            block.find('.question-select-wrapper').hide();
            block.find('.selected-question-details').show();
        });

        questionBlocksContainer.on('click', '.edit-question-btn', function() {
            let block = $(this).closest('.question-block');
            block.find('.selected-question-details').hide();
            block.find('.question-select-wrapper').show();
        });

        questionBlocksContainer.on('click', '.remove-question-block', function() {
            $(this).closest('.question-block').remove();
            updateQuestionNumbers();
        });

        $('#add-question').click(function() {
            createNewQuestionBlock();
        });

        $('#cancel-btn').click(function() {
            questionBlocksContainer.empty();
            createNewQuestionBlock();
        });

        $('#quiz-form').on('submit', function() {
            updateQuestionNumbers();
        });

        createNewQuestionBlock();
    });
</script>
@endsection