document.addEventListener('DOMContentLoaded', function () {
    const addQuestionButtons = document.querySelectorAll('.add-question-btn');
    const questionsContainer = document.getElementById('questions-container');
    let questionCounter = 0;

    addQuestionButtons.forEach(button => {
        button.addEventListener('click', function () {
            const type = this.dataset.type;
            addQuestion(type);
        });
    });

    function addQuestion(type) {
        questionCounter++;
        const questionId = `question-${questionCounter}`;
        let questionHtml = `
            <div class="card question-card" id="${questionId}">
                <div class="card-header">
                    <span>Question ${questionCounter}</span>
                    <button type="button" class="btn-close" aria-label="Close" onclick="document.getElementById('${questionId}').remove()"></button>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="${questionId}-text" class="form-label">Question Text</label>
                        <input type="text" class="form-control" id="${questionId}-text" name="questions[${questionCounter}][text]" required>
                    </div>
                    <input type="hidden" name="questions[${questionCounter}][type]" value="${type}">
        `;

        switch (type) {
            case 'text':
                questionHtml += `<p class="text-muted">A short text answer will be collected.</p>`;
                break;
            case 'multiple-choice':
            case 'checkboxes':
                questionHtml += `
                    <div class="mb-3">
                        <label class="form-label">Options</label>
                        <div id="${questionId}-options-container">
                            <div class="input-group mb-2">
                                <input type="text" class="form-control" name="questions[${questionCounter}][options][]">
                                <button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()">Remove</button>
                            </div>
                        </div>
                        <button class="btn btn-sm btn-outline-primary" type="button" onclick="addOption('${questionId}', ${questionCounter})">Add Option</button>
                    </div>
                `;
                break;
        }

        questionHtml += `</div></div>`;
        questionsContainer.insertAdjacentHTML('beforeend', questionHtml);
    }

    window.addOption = function(questionId, questionIndex) {
        const optionsContainer = document.getElementById(`${questionId}-options-container`);
        const optionHtml = `
            <div class="input-group mb-2">
                <input type="text" class="form-control" name="questions[${questionIndex}][options][]">
                <button class="btn btn-outline-danger" type="button" onclick="this.parentElement.remove()">Remove</button>
            </div>
        `;
        optionsContainer.insertAdjacentHTML('beforeend', optionHtml);
    }
});