var examEditQuestionsData = @json($questionsData);

    function escapeAttr(str){
        return String(str == null ? '' : str)
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    function examEditOptionLetter(idx){
        return String.fromCharCode(65 + idx);
    }

    function markExamEditOptionCorrect(radio){
        var row = radio.closest('.opt-row');
        var wrap = row.parentElement;
        wrap.querySelectorAll('.opt-row').forEach(function(r){ r.classList.remove('is-correct'); });
        row.classList.add('is-correct');
    }

    function examEditOptionRowHtml(qId, idx, value, checked, canRemove){
        return '<div class="opt-row mc-row' + (checked ? ' is-correct' : '') + '">' +
            '<input type="radio" name="questions[' + qId + '][correct]" value="' + idx + '" ' + (checked ? 'checked' : '') + ' onchange="markExamEditOptionCorrect(this)">' +
            '<span class="opt-letter">' + examEditOptionLetter(idx) + '</span>' +
            '<input type="text" name="questions[' + qId + '][options][]" value="' + escapeAttr(value) + '" placeholder="{{ trans('admin.Option') }} ' + (idx + 1) + '" required>' +
            '<button type="button" class="opt-remove" title="{{ trans('admin.Remove option') }}" ' + (canRemove ? '' : 'disabled') + ' onclick="removeExamEditOption(' + qId + ', this)">&times;</button>' +
        '</div>';
    }

    function examEditTfRowHtml(qId, idx, label, checked){
        return '<div class="opt-row tf-row' + (checked ? ' is-correct' : '') + '">' +
            '<input type="radio" name="questions[' + qId + '][correct]" value="' + idx + '" ' + (checked ? 'checked' : '') + ' onchange="markExamEditOptionCorrect(this)">' +
            '<span class="opt-fixed-label">' + label + '</span>' +
            '<input type="hidden" name="questions[' + qId + '][options][]" value="' + label + '">' +
        '</div>';
    }

    function renderExamEditOptions(qId, type, options, correctIndex){
        var wrap = document.getElementById('opts-e' + qId);
        var addBtn = document.getElementById('addOptBtn-e' + qId);
        if (!wrap) return;

        if (type === 'true_false') {
            wrap.innerHTML = examEditTfRowHtml(qId, 0, "{{ trans('admin.True') }}", correctIndex !== 1) +
                              examEditTfRowHtml(qId, 1, "{{ trans('admin.False') }}", correctIndex === 1);
            if (addBtn) addBtn.style.display = 'none';
        } else {
            var opts = (options && options.length >= 2) ? options : ['', '', '', ''];
            var html = '';
            for (var i = 0; i < opts.length; i++) {
                html += examEditOptionRowHtml(qId, i, opts[i], i === correctIndex, opts.length > 2);
            }
            wrap.innerHTML = html;
            if (addBtn) addBtn.style.display = '';
        }
    }

    function reindexExamEditOptions(qId){
        var wrap = document.getElementById('opts-e' + qId);
        if (!wrap) return;
        var rows = wrap.querySelectorAll('.opt-row');
        var hasChecked = false;

        rows.forEach(function(row, i){
            var radio = row.querySelector('input[type=radio]');
            radio.value = i;
            if (radio.checked) hasChecked = true;
            var letter = row.querySelector('.opt-letter');
            if (letter) letter.textContent = examEditOptionLetter(i);
            var removeBtn = row.querySelector('.opt-remove');
            if (removeBtn) removeBtn.disabled = rows.length <= 2;
        });

        if (!hasChecked && rows.length) {
            rows[0].querySelector('input[type=radio]').checked = true;
        }

        rows.forEach(function(row){
            row.classList.toggle('is-correct', row.querySelector('input[type=radio]').checked);
        });
    }

    function addExamEditOption(qId){
        var wrap = document.getElementById('opts-e' + qId);
        if (!wrap) return;
        var idx = wrap.querySelectorAll('.opt-row').length;
        wrap.insertAdjacentHTML('beforeend', examEditOptionRowHtml(qId, idx, '', false, true));
        reindexExamEditOptions(qId);
    }

    function removeExamEditOption(qId, btn){
        var wrap = document.getElementById('opts-e' + qId);
        if (!wrap || wrap.querySelectorAll('.opt-row').length <= 2) return;
        btn.closest('.opt-row').remove();
        reindexExamEditOptions(qId);
    }

    function changeExamEditQuestionType(qId, select){
        renderExamEditOptions(qId, select.value);
    }

    var EXAM_ATTACHMENT_ACCEPT = 'image/*,.pdf,.doc,.docx,.xls,.xlsx';

    function examEditAttachmentBoxHtml(qId, attachment){
        var labelHtml = attachment
            ? '<a href="' + attachment.url + '" target="_blank" rel="noopener" onclick="event.stopPropagation()">' + escapeAttr(attachment.name) + '</a>'
            : "{{ trans('admin.Click to upload or drag and drop') }}";

        return '<div class="field" style="margin-top:12px;">' +
            '<label>{{ trans('admin.Attachment') }}</label>' +
            '<div class="upload-attach-row">' +
                '<div class="upload-box compact" onclick="document.getElementById(\'attachFile-e' + qId + '\').click()">' +
                    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 16v3a2 2 0 002 2h12a2 2 0 002-2v-3"/></svg>' +
                    '<div class="upload-file-info">' +
                        '<b id="attachLabel-e' + qId + '">' + labelHtml + '</b>' +
                        '<span>{{ trans('admin.Attachment types hint') }}</span>' +
                    '</div>' +
                '</div>' +
                '<button type="button" class="opt-remove" id="attachRemoveBtn-e' + qId + '" style="' + (attachment ? '' : 'display:none;') + '" title="{{ trans('admin.Remove attachment') }}" onclick="removeExamEditAttachment(' + qId + ')">&times;</button>' +
            '</div>' +
            '<input type="file" id="attachFile-e' + qId + '" name="questions[' + qId + '][attachment]" accept="' + EXAM_ATTACHMENT_ACCEPT + '" style="display:none;" onchange="examEditAttachmentChanged(' + qId + ')">' +
            '<input type="hidden" id="removeAttach-e' + qId + '" name="questions[' + qId + '][remove_attachment]" value="0">' +
        '</div>';
    }

    function examEditAttachmentChanged(qId){
        var input = document.getElementById('attachFile-e' + qId);
        if (!input.files.length) return;
        document.getElementById('attachLabel-e' + qId).textContent = input.files[0].name;
        document.getElementById('removeAttach-e' + qId).value = '0';
        var removeBtn = document.getElementById('attachRemoveBtn-e' + qId);
        if (removeBtn) removeBtn.style.display = '';
    }

    function removeExamEditAttachment(qId){
        var input = document.getElementById('attachFile-e' + qId);
        if (input) input.value = '';
        document.getElementById('attachLabel-e' + qId).textContent = "{{ trans('admin.Click to upload or drag and drop') }}";
        document.getElementById('removeAttach-e' + qId).value = '1';
        var removeBtn = document.getElementById('attachRemoveBtn-e' + qId);
        if (removeBtn) removeBtn.style.display = 'none';
    }

    var examEditQCount = 0;
    function addExamEditQuestion(prefill){
        examEditQCount++;
        var n = examEditQCount;
        var id = 'eq' + n;
        var wrap = document.getElementById('examEditQuestions');
        var div = document.createElement('div');
        div.className = 'q-card'; div.id = id;

        var type = (prefill && prefill.type) ? prefill.type : 'multiple_choice';

        div.innerHTML =
            '<div class="q-card-head"><b>{{ trans('admin.Question') }} ' + n + '</b><button type="button" class="remove-q" onclick="document.getElementById(\'' + id + '\').remove()">{{ trans('admin.Remove') }}</button></div>' +
            '<input type="hidden" name="questions[' + n + '][id]" value="' + (prefill && prefill.id ? prefill.id : '') + '">' +
            '<div class="field q-type-row"><label>{{ trans('admin.Question type') }}</label><select name="questions[' + n + '][type]" onchange="changeExamEditQuestionType(' + n + ', this)">' +
                '<option value="multiple_choice" ' + (type === 'multiple_choice' ? 'selected' : '') + '>{{ trans('admin.Multiple choice') }}</option>' +
                '<option value="true_false" ' + (type === 'true_false' ? 'selected' : '') + '>{{ trans('admin.True / False') }}</option>' +
            '</select></div>' +
            '<div class="field" style="margin-bottom:12px;"><input type="text" name="questions[' + n + '][question]" value="' + escapeAttr(prefill ? prefill.question : '') + '" placeholder="{{ trans('admin.Type the question') }}…" required></div>' +
            '<div id="opts-e' + n + '"></div>' +
            '<button type="button" class="btn btn-soft btn-sm add-opt-btn" id="addOptBtn-e' + n + '" onclick="addExamEditOption(' + n + ')">＋ {{ trans('admin.Add option') }}</button>' +
            '<div class="hint">{{ trans('admin.Select the correct answer hint') }}</div>' +
            examEditAttachmentBoxHtml(n, prefill ? prefill.attachment : null);
        wrap.appendChild(div);

        renderExamEditOptions(n, type, prefill ? prefill.options : null, prefill ? prefill.correct : 0);
    }

    function openExamEditModal(){
        $('#examEditErrors').html('');
        $('#examEditQuestions').html('');
        examEditQCount = 0;
        if (examEditQuestionsData.length) {
            examEditQuestionsData.forEach(function(q){ addExamEditQuestion(q); });
        } else {
            addExamEditQuestion();
        }
        openModal('examEditModal');
    }

    $('#examEditForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#examEditSubmitBtn');
        $('#examEditErrors').html('');
        $btn.prop('disabled', true);

        $.ajax({
            url: "{{ url('dashboard/exams') }}/{{ $exam->id }}/edit",
            method: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(){
                dashToast('✓', "{{ trans('admin.success') }}");
                setTimeout(function(){ location.reload(); }, 400);
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#examEditErrors').html(html);
                } else {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}";
                    dashToast('✕', msg);
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
            }
        });
    });