{% extends 'atlas/exams.html' %}



{% block content %}

    {% include 'atlas/partials/_viewing_case_as_part_of_collection.html' with nav_link_view="atlas:collection_case_questions" %}

    <h2>Case: <a href="{% url 'atlas:case_detail' casedetail.case.pk %}">{{casedetail.case.title}}</a></h2>

    {% if casedetail.question_schema is not None and not casedetail.question_answers %}


        <div class="alert alert-danger" role="alert">
            <h4 class="alert-heading">Answers not defined!</h4>
            <p>A question schema has been defined but no question answers are found. Please set them below.</p>
        </div>
    {% endif %}

    <details class="help-text">
        <summary><i class="bi bi-info-circle"></i> Help</summary>
        <p>This form allows you to add questions to a case. A example of how the quesiton will be displayed is shown below.</p>
        <p>If answers are supplied the question will be automarked</p>

        <p>The question system is built using https://github.com/json-editor/json-editor, this allows for highly flexible forms / question design at a cost of some complexity. To help with this a number of preset questions are avalible to choose from (these can then be edited if needed). It is also possible to copy questions from other cases in the collection. </p>

        <p>In most cases it is not necessary to edit the JSON schema directly as questions can be added / edited via the GUI.</p>

        <p>To save the question schema you need to click the "Save Questions" button at the bottom of the page. The page will then refresh and you can see how questions will be displayed at the bottom of the page.</p>

    </details>

    Import schema from:
    <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"
            hx-get="{% url 'atlas:collection_question_schemas' casedetail.collection.id %}"
            hx-target=".offcanvas-body"
    >Collection questions</button>
    <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"
            hx-get="{% url 'atlas:question_schema_schemas' %}"
            hx-target=".offcanvas-body"
    >Preset questions</button>

    <details><summary>
        Question Block Title
    </summary>
        <p>Title of the question block.</p>
        <input id="question_block_title_input" type="text" name="title" value="{{casedetail.question_schema.title}}" class="form-control" placeholder="Question title" aria-label="Question title">
    </details>
    <details><summary>Modify Questions</summary>
        <div id="questions-container" style="margin-top: 20px;">
    <!-- Questions will be dynamically rendered here -->
        </div>
    </details>
    <details open id="add-question-block"><summary>Add/Edit Question</summary>
        <div>
            <label for="question-type-select">Select Question Type:</label>
            <select id="question-type-select" class="form-select">
                <option value="radio">Multiple Choice (Radio)</option>
                <option value="dropdown">Multiple Choice (Dropdown)</option>
                <option value="dropdown-select">Multiple Choice (Dropdown - Select2)</option>
                <option value="text">Text Input</option>
                <option value="textarea">Text Area</option>
                <option value="multiselect">Multiselect</option>
                <option value="yesno">Yes/No</option>
                <option value="truefalse">True/False</option>
                <option value="number">Number</option>
                <option value="range">Range</option>

            </select>
        </div>

        <div id="options-configurator" style="margin-top: 10px; ">
            <label>Enter Options:</label>
            <div id="question-options-container">
        <!-- Individual option input fields will be added here -->
            </div>
            <button type="button" class="btn btn-secondary btn-sm" id="add-option-button" style="margin-top: 10px;">Add Option</button>
        </div>
        <div style="margin-top: 10px;">
            <label for="question-title-input">Question Title:</label>
            <input id="question-title-input" type="text" class="form-control" placeholder="Enter question title">
        </div>

        <div style="margin-top: 10px;">
            <label for="question-description-input">Question Description:</label>
            <input id="question-description-input" type="text" class="form-control" placeholder="Enter question description">
        </div>

        <button class="btn btn-primary btn-sm" id="add-new-question">Add New Question</button>
        <button class="btn btn-secondary btn-sm" id="reset-question-options">Reset</button>
    </details>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"
    >
        <div class="offcanvas-header">
            <h5 id="offcanvasRightLabel">Question schemas</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            ...
        </div>
    </div>

    <form method="POST">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" value="save" name="submit">Save Questions</button>
    </form>

{% comment %}     <h2>Blank form</h2>
    <form>
        {{ blank_form}}
    </form> {% endcomment %}


    {% if casedetail.question_schema %}
        <h2>Question display</h2>
        This shows the form as it will be displayed (with the correct answers). If you wish to edit a correct answer you can change it below.

        <form method="POST" class="post-form">
            {% csrf_token %}
            {# Show example_form non-field errors first #}
            {% if example_form.non_field_errors %}
                <div class="alert alert-danger">
                    <strong>Errors:</strong>
                    <ul class="mb-0">
                        {% for err in example_form.non_field_errors %}
                            <li>{{ err }}</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
            {# Render example_form fields explicitly so we can improve error UX for json_answer #}
            {% for field in example_form %}
                {% if field.name == 'json_answer' %}
                    <div class="mb-3">
                        {% if field.errors %}
                            <div class="alert alert-warning" role="alert">
                                <strong>Answer required.</strong>
                                <div>Some questions do not have a default answer, please select below.</div>
                                <details style="margin-top:8px;">
                                    <summary class="small">Validation details</summary>
                                    <ul class="mb-0">
                                        {% for err in field.errors %}
                                            <li class="small text-muted">{{ err }}</li>
                                        {% endfor %}
                                    </ul>
                                </details>
                            </div>
                        {% endif %}
                        {{ field }} {# hidden/JS-bound field stays rendered #}
                    </div>
                {% else %}
                    <div class="mb-3">
                        {{ field.label_tag }} {{ field }}
                        {% if field.errors %}
                            {% for err in field.errors %}
                                <div class="text-danger small">{{ err }}</div>
                            {% endfor %}
                        {% endif %}
                        {% if field.help_text %}
                            <small class="form-text text-muted">{{ field.help_text }}</small>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}
            {# Debug: list all example_form.errors (field -> [errors]) in a collapsed block so nothing is missed #}
            {% if example_form.errors %}
                <details style="margin-top:8px;">
                    <summary class="small">All example form errors (debug)</summary>
                    <ul class="mb-0">
                        {% for name, errs in example_form.errors.items %}
                            <li><strong>{{ name }}</strong>
                                <ul>
                                    {% for e in errs %}
                                        <li class="small text-muted">{{ e }}</li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endfor %}
                    </ul>
                </details>
            {% endif %}
            <button type="submit" value="answer" name="submit">Save Correct Answers</button>
        </form>
    {% endif %}

{% endblock %}

{% block js %}

    {% comment %} {{ example_form.media }} {% endcomment %}
    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
    <script src="/static/django_jsonforms/jsoneditor_init.js"></script>
    <script>
        document.addEventListener('htmx:afterRequest', function(evt) {
    // Put the JS code that you want to execute here
            console.log($('.use-layout').each((n, el) => {
                el.addEventListener('click', (e) => {
                    console.log(e.target.parentElement.querySelector('.schema').dataset.schema);
                    window.jsoneditor_id_question_schema.set(
                        {
                            json: JSON.parse(e.target.parentElement.querySelector('.schema').dataset.schema)
                        }
                    )
                });
            }))
        });


        $(document).ready(function() {
            const question_editor = window.jsoneditor_id_question_schema;
            const questionBlockTitleInput = document.getElementById('question_block_title_input');
            // Wrap the existing onChange handler
            const originalOnChange = question_editor.$$.ctx[question_editor.$$.props.onChange];
            const addNewQuestionButton = document.getElementById('add-new-question');
            const optionsConfigurator = document.getElementById('options-configurator');
            const questionOptionsContainer = document.getElementById('question-options-container');
            const addOptionButton = document.getElementById('add-option-button');
            const questionTypeSelect = document.getElementById('question-type-select');
            const questionTitleInput = document.getElementById('question-title-input');
            const questionDescriptionInput = document.getElementById('question-description-input');
            const resetQuestionOptionsButton = document.getElementById('reset-question-options');
            const questionsContainer = document.getElementById('questions-container');

            // Helper: get options array from a question regardless of schema shape
            function getQuestionOptions(question) {
                if (!question) return [];
                if (Array.isArray(question.enum)) return question.enum.slice();
                if (question.items && Array.isArray(question.items.enum)) return question.items.enum.slice();
                return [];
            }

            // Helper: infer a UI questionType from the schema if question.questionType is not present
            function inferQuestionType(question) {
                if (!question) return 'text';
                if (question.type === 'array') return 'multiselect';
                if (question.format === 'select2' && question.type === 'string' && Array.isArray(getQuestionOptions(question))) return 'dropdown-select';
                if (question.format === 'select' && question.type === 'string') return 'dropdown';
                if (question.format === 'radio' && question.type === 'string') return 'radio';
                if (question.format === 'textarea') return 'textarea';
                if (question.type === 'number') return 'number';
                if (question.type === 'range') return 'range';
                if (question.enum && Array.isArray(question.enum) && question.enum.length === 2) {
                    const opts = question.enum.map(String).map(s => s.toLowerCase());
                    if ((opts.includes('yes') && opts.includes('no'))) return 'yesno';
                    if ((opts.includes('true') && opts.includes('false'))) return 'truefalse';
                }
                return 'text';
            }

            // Helper: apply an options array to a question object according to the selected UI type
            function applyOptionsToQuestion(question, optionsArray, selectedType) {
                optionsArray = (optionsArray || []).filter(o => o !== '');
                if (selectedType === 'multiselect') {
                    question.type = 'array';
                    question.items = question.items || { type: 'string', enum: [] };
                    question.items.enum = optionsArray.length ? optionsArray : (question.items.enum || []);
                    question.uniqueItems = true;
                    question.format = 'select2';
                    delete question.enum;
                } else {
                    // convert array->single if present
                    if (question.type === 'array' && question.items && Array.isArray(question.items.enum)) {
                        question.enum = question.items.enum.slice();
                        delete question.items;
                        delete question.uniqueItems;
                    }
                    if (optionsArray.length) {
                        question.enum = optionsArray;
                    }
                    // ensure string type for single-select/other
                    if (question.enum && Array.isArray(question.enum)) {
                        question.type = 'string';
                    }
                    // set formats for some known selected types
                    if (selectedType === 'dropdown-select') question.format = 'select2';
                    else if (selectedType === 'dropdown') question.format = 'select';
                    else if (selectedType === 'radio') question.format = 'radio';
                }
                // always store the UI mapping
                question.questionType = selectedType;
            }

            question_editor.updateProps({
                onChange: (updatedContent, previousContent, context) => {
                    // Call the original onChange handler if it exists
                    if (typeof originalOnChange === 'function') {
                        originalOnChange(updatedContent, previousContent, context);
                    }

                    const value = updatedContent.json ? updatedContent.json.title : '';
                    if (value !== questionBlockTitleInput.value) {
                        questionBlockTitleInput.value = value; // Update the input field
                    }
                }
            });

        // Sync changes from the input field to the editor
        // Yes this is a bit backwards but it works
            questionBlockTitleInput.addEventListener('input', () => {
                try {
                    currentContent = JSON.parse(question_editor.get().text);
                }
                catch {
                    currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
                }
                if (currentContent) {
                    currentContent.title = questionBlockTitleInput.value; // Update the title in the editor
                    question_editor.update({json: currentContent}); // Apply the changes to the editor
                }
            });



    // Show or hide the options configurator based on the selected question type
            questionTypeSelect.addEventListener('change', () => {
                const selectedType = questionTypeSelect.value;
                if (selectedType === 'radio' || selectedType === 'dropdown' || selectedType === 'multiselect') {
                    optionsConfigurator.style.display = 'block';
                } else {
                    optionsConfigurator.style.display = 'none';
                }
            });

    // Add a new option input field
            addOptionButton.addEventListener('click', () => {
                const optionIndex = questionOptionsContainer.children.length + 1;
                const optionInput = document.createElement('div');
                optionInput.className = 'option-input';
                optionInput.style.marginBottom = '5px';
                optionInput.innerHTML = `
            <input type="text" class="form-control option-field" placeholder="Option ${optionIndex}" style="display: inline-block; width: 90%;">
            <button type="button" class="btn btn-danger btn-sm remove-option-button" style="display: inline-block; width: 8%;">&times;</button>
        `;
                questionOptionsContainer.appendChild(optionInput);

        // Add event listener to remove the option
                optionInput.querySelector('.remove-option-button').addEventListener('click', () => {
                    questionOptionsContainer.removeChild(optionInput);
                });
            });

            // Reset the question options
            resetQuestionOptionsButton.onclick = resetQuestion;

            function resetQuestion() {

                // Clear the title and description fields
                questionTitleInput.value = '';
                questionDescriptionInput.value = '';

                // Clear all option input fields
                while (questionOptionsContainer.firstChild) {
                    questionOptionsContainer.removeChild(questionOptionsContainer.firstChild);
                }

                // Reset the question type to the default value
                questionTypeSelect.value = 'radio';

                // Hide the options configurator if necessary
                optionsConfigurator.style.display = 'block';

                // Reset the "Add New Question" button
                addNewQuestionButton.textContent = 'Add New Question';
                addNewQuestionButton.onclick = addNewQuestion;

                toastr.success('Question options have been reset.');
            }
    // Add a new question
            addNewQuestionButton.onclick = addNewQuestion;

            function addNewQuestion() {
        // Get the current content from the editor
                try {
                    currentContent = JSON.parse(question_editor.get().text);
                } catch {
                    currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
                }

                if (!currentContent) {
                    currentContent = {
                        title: questionBlockTitleInput.value || "Case Questions",
                        type: "object",
                        properties: {}
                    };
                }

                if (!currentContent.properties) {
                    currentContent.properties = {};
                    current_question_number = 1;
                } else {
                    current_question_number = Object.keys(currentContent.properties).length + 1;
                }

        // Get the selected question type
                const selectedType = questionTypeSelect.value;

        // Collect options from individual input fields
                const options = Array.from(questionOptionsContainer.querySelectorAll('.option-field'))
                    .map(input => input.value.trim())
                    .filter(option => option !== ""); // Exclude empty options

        // Get the title and description
                const title = questionTitleInput.value || `Question ${current_question_number}`;
                const description = questionDescriptionInput.value || "Enter the question description here.";

             // Define the new question template based on the selected type
                let newQuestion;
                if (selectedType === 'radio') {
                    newQuestion = {
                        enum: options.length > 0 ? options : ["Option 1", "Option 2", "Option 3"], // Default options if none provided
                        type: "string",
                        title: title,
                        format: "radio",
                        description: description,
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'text') {
                    newQuestion = {
                        type: "string",
                        title: title,
                        format: "text",
                        description: description,
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'dropdown') {
                    newQuestion = {
                        enum: options.length > 0 ? options : ["Option 1", "Option 2", "Option 3"], // Default options if none provided
                        type: "string",
                        title: title,
                        format: "select",
                        description: description,
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'dropdown-select') {
                    newQuestion = {
                        enum: options.length > 0 ? options : ["Option 1", "Option 2", "Option 3"], // Default options if none provided
                        type: "string",
                        title: title,
                        format: "select2",
                        description: description,
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'multiselect') {
                    newQuestion = {
                        type: "array",
                        items: {
                            enum: options.length > 0 ? options : ["Option 1", "Option 2", "Option 3"], // Default options if none provided
                            type: "string",
                        },
                        title: title,
                        format: "select2", // Multiselect format
                        description: description,
                        uniqueItems: true, // Ensure unique selections
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'yesno') {
                    newQuestion = {
                        enum: ["Yes", "No"],
                        type: "string",
                        title: title,
                        format: "radio",
                        description: description,
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'truefalse') {
                    newQuestion = {
                        enum: ["True", "False"],
                        type: "string",
                        title: title,
                        format: "radio",
                        description: description,
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'textarea') {
                    newQuestion = {
                        type: "string",
                        title: title,
                        format: "textarea", // Use textarea format
                        description: description,
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'number') {
                    newQuestion = {
                        type: "number",
                        title: title,
                        description: description,
                        questionType: selectedType, // Add questionType property
                    };
                } else if (selectedType === 'range') {
                    newQuestion = {
                        type: "range",
                        title: title,
                        description: description,
                        minimum: 0, // Default minimum value
                        maximum: 100, // Default maximum value
                        questionType: selectedType, // Add questionType property
                    };
                }


                newQuestion.propertyOrder = current_question_number; // Set the property order
        // Add the new question to the properties
                currentContent.properties[`question_${current_question_number}`] = newQuestion;

        // Update the editor with the new question
                question_editor.update({ json: currentContent });
                toastr.success(`New question added: ${title}`);
                renderQuestions(); // Re-render the questions list
            }

            function renderQuestions() {
                questionsContainer.innerHTML = ''; // Clear the container

                try {
                    let currentContent;
                    try {
                        currentContent = JSON.parse(question_editor.get().text);
                    } catch {
                        currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
                    }
                    if (!currentContent || !currentContent.properties) {
                        console.warn('No properties found in the current content.');
                        return;
                    }
                    const properties = currentContent.properties || {};

                        // Sort questions by propertyOrder
                    const sortedKeys = Object.keys(properties).sort((a, b) => {
                        const orderA = properties[a].propertyOrder !== undefined ? properties[a].propertyOrder : 1000;
                        const orderB = properties[b].propertyOrder !== undefined ? properties[b].propertyOrder : 1000;
                        return orderA - orderB;
                    });

                    sortedKeys.forEach((key, index) => {
                        const question = properties[key];
                        const questionElement = document.createElement('div');
                        questionElement.className = 'question-item';
                        questionElement.style.marginBottom = '10px';
                        questionElement.setAttribute('draggable', 'true'); // Make the element draggable
                        questionElement.setAttribute('data-question-key', key);
                        questionElement.setAttribute('data-index', index);

                        questionElement.innerHTML = `
                <strong>${question.title || key}</strong>
                <button type="button" class="btn btn-warning btn-sm edit-question-button" data-question-key="${key}" style="margin-left: 10px;">Edit</button>
                <button type="button" class="btn btn-danger btn-sm delete-question-button" data-question-key="${key}" style="margin-left: 10px;">Delete</button>
            `;
                        questionsContainer.appendChild(questionElement);

            // Add event listener to delete the question
                        questionElement.querySelector('.delete-question-button').addEventListener('click', (e) => {
                            const questionKey = e.target.getAttribute('data-question-key');
                            deleteQuestion(questionKey);
                        });

            // Add event listener to edit the question
                        questionElement.querySelector('.edit-question-button').addEventListener('click', (e) => {
                            const questionKey = e.target.getAttribute('data-question-key');
                            editQuestion(questionKey);
                        });

            // Add drag-and-drop event listeners
                        questionElement.addEventListener('dragstart', handleDragStart);
                        questionElement.addEventListener('dragover', handleDragOver);
                        questionElement.addEventListener('drop', handleDrop);
                        questionElement.addEventListener('dragend', handleDragEnd);
                    });
                } catch (error) {
                    console.error('Error rendering questions:', error);
                }
            }

    // Drag-and-drop event handlers
            let draggedElement = null;

            function handleDragStart(e) {
                draggedElement = this;
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/html', this.outerHTML);
                this.classList.add('dragging');
            }

            function handleDragOver(e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
            }


            function handleDrop(e) {
                e.preventDefault();
                if (draggedElement !== this) {
                    const draggedIndex = parseInt(draggedElement.getAttribute('data-index'));
                    const targetIndex = parseInt(this.getAttribute('data-index'));

                    try {
                        let currentContent;
                        try {
                            currentContent = JSON.parse(question_editor.get().text);
                        } catch {
                            currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
                        }
                        const properties = currentContent.properties || {};
                        const keys = Object.keys(properties);

            // Sort keys by propertyOrder
                        const sortedKeys = keys.sort((a, b) => {
                            const orderA = properties[a].propertyOrder !== undefined ? properties[a].propertyOrder : Infinity;
                            const orderB = properties[b].propertyOrder !== undefined ? properties[b].propertyOrder : Infinity;
                            return orderA - orderB;
                        });

            // Move the dragged question to the target position
                        const draggedKey = sortedKeys.splice(draggedIndex, 1)[0]; // Remove dragged key
                        sortedKeys.splice(targetIndex, 0, draggedKey); // Insert dragged key at target position

            // Reassign propertyOrder to ensure uniqueness and correct order
                        sortedKeys.forEach((key, index) => {
                            properties[key].propertyOrder = index + 1;
                        });

            // Assign propertyOrder to any questions without it
                        keys.forEach((key) => {
                            if (properties[key].propertyOrder === undefined) {
                                properties[key].propertyOrder = sortedKeys.length + 1;
                                sortedKeys.push(key);
                            }
                        });

                        currentContent.properties = properties;
                        question_editor.update({ json: currentContent });
                        toastr.success('Questions reordered successfully.');
                        renderQuestions(); // Re-render the questions list
                    } catch (error) {
                        console.error('Error reordering questions:', error);
                        toastr.error('Failed to reorder questions.');
                    }
                }
            }

            function handleDragEnd() {
                this.classList.remove('dragging');
            }

    // Function to delete a question
            function deleteQuestion(questionKey) {
                try {
                    try {
                        currentContent = JSON.parse(question_editor.get().text);
                    } catch {
                        currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
                    }
                    if (currentContent.properties && currentContent.properties[questionKey]) {
                        delete currentContent.properties[questionKey]; // Remove the question
                        question_editor.update({ json: currentContent }); // Update the editor
                        toastr.success(`Question "${questionKey}" has been deleted.`);
                        renderQuestions(); // Re-render the questions list
                    }
                } catch (error) {
                    console.error('Error deleting question:', error);
                    toastr.error('Failed to delete the question.');
                }
            }
    // Initial render of questions
            renderQuestions();

            function editQuestion(questionKey) {
                try {
                    let currentContent;
                    try {
                        currentContent = JSON.parse(question_editor.get().text);
                    } catch {
                        currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
                    }
                    const properties = currentContent.properties || {};
                    const question = properties[questionKey];

                    if (question) {
            // Populate the form fields with the question's data
                        questionTitleInput.value = question.title || '';
                        questionDescriptionInput.value = question.description || '';
                        questionTypeSelect.value = question.questionType || 'text';

            // Clear existing options and populate them if applicable
                        while (questionOptionsContainer.firstChild) {
                            questionOptionsContainer.removeChild(questionOptionsContainer.firstChild);
                        }
                            // Support both single-select (question.enum) and multiselect (question.items.enum)
                        const enumList = getQuestionOptions(question) || [];
                        if (enumList.length) {
                            enumList.forEach((option, index) => {
                                const optionInput = document.createElement('div');
                                optionInput.className = 'option-input';
                                optionInput.style.marginBottom = '5px';
                                optionInput.innerHTML = `
                        <input type="text" class="form-control option-field" value="${option}" placeholder="Option ${index + 1}" style="display: inline-block; width: 90%;">
                        <button type="button" class="btn btn-danger btn-sm remove-option-button" style="display: inline-block; width: 8%;">&times;</button>
                    `;
                                questionOptionsContainer.appendChild(optionInput);
                                    // Add event listener to remove the option
                                optionInput.querySelector('.remove-option-button').addEventListener('click', () => {
                                    questionOptionsContainer.removeChild(optionInput);
                                });
                            });
                            optionsConfigurator.style.display = 'block';
                        } else {
                            optionsConfigurator.style.display = 'none';
                        }
                            // If questionType is not set, infer it from the schema
                        questionTypeSelect.value = question.questionType || inferQuestionType(question);

            // Update the "Add New Question" button to save changes
                        addNewQuestionButton.textContent = 'Save Changes';
                        addNewQuestionButton.onclick = () => {
                            saveEditedQuestion(questionKey);
                        };
                        document.getElementById('add-question-block').open = true; // Open the question block
                        document.getElementById('add-question-block').scrollIntoView({ behavior: 'smooth', block: "center" }); // Scroll to the question block

                    }
                } catch (error) {
                    console.error('Error editing question:', error);
                    toastr.error('Failed to edit the question.');
                }
            }

            function saveEditedQuestion(questionKey) {
                try {
                    let currentContent;
                    try {
                        currentContent = JSON.parse(question_editor.get().text);
                    } catch {
                        currentContent = JSON.parse(JSON.stringify(question_editor.get().json));
                    }
                    const properties = currentContent.properties || {};
                    const question = properties[questionKey];

                    if (question) {
            // Update the question with the new values from the form
                        question.title = questionTitleInput.value || `Question ${questionKey}`;
                        question.description = questionDescriptionInput.value || '';
                        question.format = questionTypeSelect.value;

            // Update the options if applicable
                        const newOptions = questionOptionsContainer ? Array.from(questionOptionsContainer.querySelectorAll('.option-field')).map((input) => input.value.trim()).filter((option) => option !== '') : [];
                        const selectedType = questionTypeSelect ? questionTypeSelect.value : null;
                        applyOptionsToQuestion(question, newOptions, selectedType);

                            // Update the editor with the modified question
                        currentContent.properties[questionKey] = question;
                        try { question_editor.update({ json: currentContent }); } catch (e) { console.warn('Failed to update editor after saveEditedQuestion', e); }

                        toastr.success(`Question "${question.title}" updated successfully.`);
                        renderQuestions(); // Re-render the questions list

            // Reset the "Add New Question" button
                        addNewQuestionButton.textContent = 'Add New Question';
                        addNewQuestionButton.onclick = addNewQuestion;
                        resetQuestion(); // Reset the question options
                    }
                } catch (error) {
                    console.error('Error saving edited question:', error);
                    toastr.error('Failed to save the question.');
                }
            }
        });




    </script>
    <style>
/* Style the <details> block */
        details {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color:rgba(13, 8, 8, 0.86);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

/* Style the <summary> element */
        details summary {
            font-weight: bold;
            font-size: 1.1em;
            cursor: pointer;
            margin-bottom: 10px;
            color: #333;
        }

/* Add hover effect to <summary> */
        details summary:hover {
            color: #007bff;
        }

/* Add padding to the content inside <details> */
        details > *:not(summary) {
            margin-top: 10px;
            padding-left: 10px;
        }

/* Add a border to the expanded <details> */
        details[open] {
            border-color: #007bff;
            background-color: black;
        }
    </style>

{% endblock %}