@extends('backend.layout.app')

@section('content')
<div class="page-content">
  <div class="container-fluid">

    <div class="card shadow-md border-0 rounded-4">
      <div class="card-header bg-primary d-flex justify-content-between align-items-center">
        <h4 class="mb-0 text-white"><i class="ri-questionnaire-line me-2"></i>Create Quiz</h4>
        <a href="{{ route('admin.quiz.index') }}" class="btn btn-sm btn-light">
          <i class="ri-arrow-left-line me-1"></i> Back
        </a>
      </div>

      <div class="card-body p-4">
        {{-- Backend Validation Errors Alert --}}
        @if ($errors->any())
          <div class="alert alert-danger alert-dismissible fade show rounded-3 mb-4" role="alert">
            <ul class="mb-0">
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        @endif

        <form action="{{ route('admin.quiz.store') }}" method="POST" id="quizForm">
          @csrf

          <div class="row mb-3">
            {{-- Course --}}
            <div class="col-md-6">
              <label class="form-label">Course <span class="text-danger">*</span></label>
              <select id="course_id" name="course_id"
                class="form-select select2 @error('course_id') is-invalid @enderror">
                <option value="">-- Choose Course --</option>
                @foreach($courses as $course)
                  <option value="{{ $course->id }}" {{ old('course_id') == $course->id ? 'selected' : '' }}>
                    {{ $course->title }}
                  </option>
                @endforeach
              </select>
              @error('course_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>

            {{-- Module --}}
            <div class="col-md-6">
              <label class="form-label">Module <span class="text-danger">*</span></label>
              <select id="module_id" name="module_id"
                class="form-select select2 @error('module_id') is-invalid @enderror" required>
                <option value="">First select a course</option>
              </select>
              @error('module_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
            </div>
          </div>

          {{-- Quiz Title --}}
          <div class="mb-4">
            <label class="form-label">Quiz Title <span class="text-danger">*</span></label>
            <input type="text" name="title" class="form-control"
                   placeholder="Enter quiz title" value="{{ old('title') }}" required>
          </div>

          {{-- ─── Question Bank Selector ──────────────────────────────── --}}
          <div class="card border-0 bg-light rounded-4 p-4 mb-4">
            <h5 class="fw-bold mb-3"><i class="ri-database-2-line text-primary me-2"></i>Select Questions from Bank</h5>

            <div class="row g-3 mb-3">
              <div class="col-md-6">
                <label class="form-label">Step 1: Select Category</label>
                <select id="selectCategory" class="form-select select2">
                  <option value="">-- Choose Category --</option>
                  <option value="uncategorized">-- Uncategorized Banks (ক্যাটাগরি ছাড়া) --</option>
                  @foreach($categories as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                    @foreach($cat->children as $child)
                      <option value="{{ $child->id }}">&nbsp;&nbsp;&nbsp;↳ {{ $child->name }}</option>
                      @foreach($child->allChildren as $gc)
                        <option value="{{ $gc->id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↳ {{ $gc->name }}</option>
                      @endforeach
                    @endforeach
                  @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label">Step 2: Select Question Bank</label>
                <select id="selectBank" class="form-select" disabled>
                  <option value="">-- Choose Bank --</option>
                </select>
              </div>
            </div>

            {{-- Hidden inputs for ALL selected questions across multiple banks --}}
            <div id="hiddenQuestionInputs"></div>

            <div id="questionListWrapper" class="d-none">
              <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2" style="background: #e0efff; padding: 8px 10px; border-radius: 8px;">
                <div class="d-flex align-items-center gap-2">
                  <label class="form-label mb-0 fw-semibold">Step 3: Select Questions</label>
                  <span id="selectedCount" class="badge bg-primary">0 selected</span>
                  <button type="button" id="btnToggleTray" class="btn btn-sm btn-primary py-0 px-2" style="font-size: 11px; display: none;">
                    <i class="ri-list-check-2 me-1"></i> View Selected (<span id="trayBtnCount">0</span>)
                  </button>
                </div>
                <div class="d-flex align-items-center gap-2">
                  <button type="button" id="btnSelectAll" class="btn btn-sm btn-outline-primary">Select All</button>
                  <button type="button" id="btnDeselectAll" class="btn btn-sm btn-outline-secondary">Deselect All</button>
                </div>
              </div>

              {{-- Selected Questions Drawer / Basket across multiple banks --}}
              <div id="selectedTray" class="card border border-primary-subtle rounded-3 p-3 mb-3 bg-white shadow-sm" style="display: none;">
                <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                  <div>
                    <strong class="text-primary"><i class="ri-checkbox-multiple-line me-1"></i> All Selected Questions (<span id="trayHeaderCount">0</span>)</strong>
                    <span class="text-muted small ms-2">(Combined from all question banks)</span>
                  </div>
                  <div class="d-flex align-items-center gap-2">
                    <button type="button" id="btnClearAllSelected" class="btn btn-sm btn-outline-danger py-0 px-2" style="font-size: 11px;">
                      <i class="ri-delete-bin-line me-1"></i> Clear All
                    </button>
                    <button type="button" id="btnCloseTray" class="btn-close btn-sm" aria-label="Close"></button>
                  </div>
                </div>
                <div id="selectedTrayItems" class="row g-2" style="max-height: 240px; overflow-y: auto;">
                  {{-- Populated via JS --}}
                </div>
              </div>

              <div id="questionListItems" class="row g-2" style="max-height: 600px; overflow-y: auto;"></div>
            </div>

            <div id="bankLoadingSpinner" class="text-center py-3 d-none">
              <div class="spinner-border text-primary" role="status"></div>
              <p class="small text-muted mt-2">Loading questions...</p>
            </div>
            <div id="noQuestionsNotice" class="alert alert-warning d-none">
              <i class="ri-information-line me-1"></i> <span id="noQuestionsNoticeText">This bank has no questions yet.</span>
              <a href="{{ route('admin.question-bank.index') }}" target="_blank" class="ms-1 fw-bold">Manage Question Banks</a>
            </div>
          </div>

          <div class="d-flex justify-content-between">
            <a href="{{ route('admin.quiz.index') }}" class="btn btn-outline-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary px-5">
              <i class="ri-save-line me-1"></i> Save Quiz
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
@endsection

@push('js')
<script>
const ajaxBase = '{{ url("ivis-dashboard") }}';
// Map of questionId => { id, question, bank_name, marks, difficulty }
let selectedQuestions = new Map();
let currentBankName = '';

function syncHiddenInputs() {
    const container = $('#hiddenQuestionInputs');
    container.empty();
    selectedQuestions.forEach((q, id) => {
        container.append(`<input type="hidden" name="question_ids[]" value="${id}">`);
    });
    updateSelectedCountUI();
}

function updateSelectedCountUI() {
    const count = selectedQuestions.size;
    $('#selectedCount').text(`${count} selected`);
    $('#trayBtnCount').text(count);
    $('#trayHeaderCount').text(count);
    if (count > 0) {
        $('#btnToggleTray').show();
    } else {
        $('#btnToggleTray').hide();
        $('#selectedTray').slideUp();
    }
}

function renderTrayItems() {
    const list = $('#selectedTrayItems');
    if (selectedQuestions.size === 0) {
        list.html('<div class="col-12 text-muted small py-2 text-center">No questions selected yet.</div>');
        return;
    }
    let html = '';
    selectedQuestions.forEach((q, id) => {
        const diffClass = q.difficulty === 'easy' ? 'success' : (q.difficulty === 'hard' ? 'danger' : 'warning');
        html += `
          <div class="col-12" id="tray_item_${id}">
            <div class="d-flex align-items-center justify-content-between p-2 rounded border bg-light">
              <div class="flex-grow-1 pe-2 text-truncate">
                <span class="badge bg-secondary-subtle text-dark border me-1">${q.bank_name || 'Bank'}</span>
                <span class="badge bg-${diffClass}-subtle text-${diffClass} me-1">${q.difficulty}</span>
                <span class="small fw-semibold text-dark">${q.question}</span>
              </div>
              <button type="button" class="btn btn-sm btn-outline-danger py-0 px-2 btn-remove-selected" data-id="${id}" title="Remove question">
                <i class="ri-close-line"></i>
              </button>
            </div>
          </div>`;
    });
    list.html(html);
}

// Course → Modules AJAX
$('#course_id').on('change', function () {
    const courseId = $(this).val();
    const moduleSel = $('#module_id');
    if (!courseId) {
        moduleSel.html('<option value="">First select a course</option>').trigger('change');
        return;
    }

    moduleSel.html('<option value="">Loading...</option>').trigger('change');

    $.getJSON(`${ajaxBase}/module/by-course/${courseId}`, function (modules) {
        if (!modules || modules.length === 0) {
            moduleSel.html('<option value="">No modules found for this course</option>').trigger('change');
            return;
        }

        let opts = '<option value="">-- Choose Module --</option>';
        modules.forEach(m => { opts += `<option value="${m.id}">${m.title}</option>`; });
        moduleSel.html(opts);

        const oldModuleId = '{{ old("module_id") }}';
        if (oldModuleId) {
            moduleSel.val(oldModuleId);
        }
        moduleSel.trigger('change');
    }).fail(function () {
        moduleSel.html('<option value="">Failed to load modules</option>').trigger('change');
    });
});

if ($('#course_id').val()) {
    $('#course_id').trigger('change');
}

// Step 1: Category → Banks
$('#selectCategory').on('change', function () {
    const catId = $(this).val();
    const bankSel = $('#selectBank');
    bankSel.html('<option value="">-- Choose Bank --</option>').prop('disabled', true);
    $('#questionListWrapper').addClass('d-none');
    $('#noQuestionsNotice').addClass('d-none');
    if (!catId) return;

    $('#bankLoadingSpinner').removeClass('d-none');

    $.getJSON(`${ajaxBase}/question-bank/by-category/${catId}`, function (res) {
        $('#bankLoadingSpinner').addClass('d-none');

        if (!res.banks || !res.banks.length) {
            bankSel.html('<option value="">No banks in this category</option>');
            $('#noQuestionsNoticeText').text('এই ক্যাটাগরিতে এখনো কোনো কোশ্চেন ব্যাংক পাওয়া যায়নি।');
            $('#noQuestionsNotice').removeClass('d-none');
            return;
        }

        let opts = '';
        res.banks.forEach(b => opts += `<option value="${b.id}">${b.name} (${b.questions_count} Q)</option>`);
        bankSel.html(opts).prop('disabled', false);

        // Auto select first question bank and trigger loading questions
        bankSel.val(res.banks[0].id).trigger('change');
    }).fail(function () {
        $('#bankLoadingSpinner').addClass('d-none');
        bankSel.html('<option value="">Failed to load banks</option>');
    });
});

// Step 2: Bank → Questions
$('#selectBank').on('change', function () {
    const bankId = $(this).val();
    $('#questionListWrapper').addClass('d-none');
    $('#noQuestionsNotice').addClass('d-none');
    if (!bankId) return;

    currentBankName = $('#selectBank option:selected').text().replace(/\(\d+\s*Q\)/, '').trim();
    $('#bankLoadingSpinner').removeClass('d-none');

    $.getJSON(`${ajaxBase}/question-bank/${bankId}/questions`, function (res) {
        $('#bankLoadingSpinner').addClass('d-none');
        if (!res.questions || !res.questions.length) {
            $('#noQuestionsNoticeText').text('এই কোশ্চেন ব্যাংকে এখনো কোনো প্রশ্ন যুক্ত করা হয়নি।');
            $('#noQuestionsNotice').removeClass('d-none');
            return;
        }

        let html = '';
        res.questions.forEach((q, i) => {
            const isChecked = selectedQuestions.has(Number(q.id));
            const diffClass = q.difficulty === 'easy' ? 'success' : (q.difficulty === 'hard' ? 'danger' : 'warning');
            html += `
              <div class="col-12 question-card-col" data-text="${q.question.toLowerCase()}">
                <label class="d-block border rounded-3 p-3 mb-0 question-item cursor-pointer ${isChecked ? 'border-primary bg-primary-subtle' : ''}"
                       style="${isChecked ? '' : 'background-color: #f0f0f0;'}"
                       for="qcheck_${q.id}">
                  <div class="d-flex align-items-start gap-2">
                    <input class="form-check-input question-checkbox mt-1" type="checkbox"
                           id="qcheck_${q.id}"
                           data-id="${q.id}"
                           data-question="${encodeURIComponent(q.question)}"
                           data-bank="${encodeURIComponent(currentBankName)}"
                           data-marks="${q.marks}"
                           data-difficulty="${q.difficulty}"
                           ${isChecked ? 'checked' : ''}>
                    <div class="flex-grow-1">
                      <div class="d-flex gap-2 mb-1">
                        <span class="badge bg-${diffClass}">${q.difficulty}</span>
                        <span class="badge bg-light text-muted border">${currentBankName}</span>
                      </div>
                      <div class="fw-semibold small">${i+1}. ${q.question}</div>
                      <div class="row g-1 mt-1">
                        ${['option_1','option_2','option_3','option_4'].map((opt,idx) => {
                          const isCorrect = q.correct_answer === opt;
                          return `<div class="col-6"><span class="d-block px-2 py-1 rounded small ${isCorrect?'bg-success-subtle text-success fw-bold border border-success':'bg-light'}">${String.fromCharCode(65+idx)}. ${q[opt]} ${isCorrect?'✓':''}</span></div>`;
                        }).join('')}
                      </div>
                    </div>
                  </div>
                </label>
              </div>`;
        });
        $('#questionListItems').html(html);
        $('#questionListWrapper').removeClass('d-none');
        updateSelectedCountUI();
    });
});

// Checkbox toggle
$(document).on('change', '.question-checkbox', function () {
    const id = Number($(this).data('id'));
    const label = $(this).closest('label');

    if ($(this).is(':checked')) {
        label.addClass('border-primary bg-primary-subtle').css('background-color', '');
        selectedQuestions.set(id, {
            id: id,
            question: decodeURIComponent($(this).data('question') || ''),
            bank_name: decodeURIComponent($(this).data('bank') || ''),
            marks: $(this).data('marks'),
            difficulty: $(this).data('difficulty')
        });
    } else {
        label.removeClass('border-primary bg-primary-subtle').css('background-color', '#f0f0f0');
        selectedQuestions.delete(id);
    }
    syncHiddenInputs();
    if ($('#selectedTray').is(':visible')) {
        renderTrayItems();
    }
});

// Remove single question from tray
$(document).on('click', '.btn-remove-selected', function () {
    const id = Number($(this).data('id'));
    selectedQuestions.delete(id);
    const cb = $(`.question-checkbox[data-id="${id}"]`);
    if (cb.length) {
        cb.prop('checked', false);
        cb.closest('label').removeClass('border-primary bg-primary-subtle').css('background-color', '#f0f0f0');
    }
    syncHiddenInputs();
    renderTrayItems();
});

// Clear all
$('#btnClearAllSelected').click(function () {
    if (!confirm('Are you sure you want to deselect all questions?')) return;
    selectedQuestions.clear();
    $('.question-checkbox').prop('checked', false);
    $('.question-item').removeClass('border-primary bg-primary-subtle').css('background-color', '#f0f0f0');
    syncHiddenInputs();
    renderTrayItems();
});

// Toggle tray
$('#btnToggleTray').click(function () {
    renderTrayItems();
    $('#selectedTray').slideToggle(200);
});
$('#btnCloseTray').click(function () {
    $('#selectedTray').slideUp(200);
});

// Select / Deselect all in current bank
$('#btnSelectAll').click(function () {
    $('.question-checkbox').each(function () {
        if (!$(this).is(':checked')) {
            $(this).prop('checked', true).trigger('change');
        }
    });
});
$('#btnDeselectAll').click(function () {
    $('.question-checkbox').each(function () {
        if ($(this).is(':checked')) {
            $(this).prop('checked', false).trigger('change');
        }
    });
});
</script>
@endpush