<?php
// Enable error reporting 
ini_set('display_errors', 0);
ini_set('log_errors', 1);
ini_set('error_log', '../logs/php_errors.log');

require_once '../includes/db_connect.php';

// Check admin session
if (!isset($_SESSION['user_id']) || $_SESSION['role'] != 'admin') {
    header("Location: ../login.php");
    exit;
}

// Check if exam_id is provided
if (!isset($_GET['exam_id']) || !is_numeric($_GET['exam_id'])) {
    die("Invalid exam ID");
}

$exam_id = (int)$_GET['exam_id'];

// Fetch exam details
$exam = [];
try {
    $stmt = $pdo->prepare("SELECT * FROM exams WHERE id = ?");
    $stmt->execute([$exam_id]);
    $exam = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if (!$exam) {
        die("Exam not found");
    }
} catch (PDOException $e) {
    error_log("Error fetching exam: " . $e->getMessage());
    die("Failed to load exam details");
}

// Fetch all questions for this exam with subject names
$questions = [];
try {
    $stmt = $pdo->prepare("
        SELECT q.*, s.name as subject_name 
        FROM questions q
        JOIN subjects s ON q.subject_id = s.id
        WHERE q.exam_id = ?
        ORDER BY s.name, q.question_number
    ");
    $stmt->execute([$exam_id]);
    $questions = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log("Error fetching questions: " . $e->getMessage());
    die("Failed to load questions");
}

// Fetch all subjects for the form
$subjects = [];
try {
    $subjects = $pdo->query("SELECT id, name FROM subjects ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log("Error fetching subjects: " . $e->getMessage());
}

// Get next question number
$next_question_number = 1;
if (!empty($questions)) {
    $stmt = $pdo->prepare("SELECT MAX(question_number) as max_number FROM questions WHERE exam_id = ?");
    $stmt->execute([$exam_id]);
    $max_number = $stmt->fetch(PDO::FETCH_ASSOC);
    $next_question_number = $max_number['max_number'] + 1;
}

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        $pdo->beginTransaction();
        
        if (isset($_POST['update_questions'])) {
            // Update existing questions
            $updateStmt = $pdo->prepare("
                UPDATE questions 
                SET question_text = ?, option_a = ?, option_b = ?, option_c = ?, option_d = ?, 
                    correct_option = ?, marks = ?, subject_id = ?, question_number = ?
                WHERE id = ?
            ");
            
            foreach ($_POST['questions'] as $questionId => $questionData) {
                if (is_numeric($questionId)) { // Only update existing questions (numeric IDs)
                    $updateStmt->execute([
                        $questionData['text'],
                        $questionData['options']['A'],
                        $questionData['options']['B'],
                        $questionData['options']['C'],
                        $questionData['options']['D'],
                        $questionData['correct_option'],
                        $questionData['marks'],
                        $questionData['subject_id'],
                        $questionData['question_number'],
                        $questionId
                    ]);
                }
            }
        }
        
        if (isset($_POST['add_questions'])) {
            // Add new questions
            $insertStmt = $pdo->prepare("
                INSERT INTO questions 
                (exam_id, subject_id, question_number, question_text, option_a, option_b, option_c, option_d, correct_option, marks, created_at)
                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, NOW())
            ");
            
            $new_question_number = $next_question_number;
            
            foreach ($_POST['new_questions'] as $newQuestionData) {
                if (!empty($newQuestionData['text'])) {
                    $insertStmt->execute([
                        $exam_id,
                        $newQuestionData['subject_id'],
                        $new_question_number++,
                        $newQuestionData['text'],
                        $newQuestionData['options']['A'],
                        $newQuestionData['options']['B'],
                        $newQuestionData['options']['C'],
                        $newQuestionData['options']['D'],
                        $newQuestionData['correct_option'],
                        $newQuestionData['marks']
                    ]);
                }
            }
        }
        
        $pdo->commit();
        $success = "Questions updated successfully";
        
        // Refresh questions
        $stmt = $pdo->prepare("
            SELECT q.*, s.name as subject_name 
            FROM questions q
            JOIN subjects s ON q.subject_id = s.id
            WHERE q.exam_id = ?
            ORDER BY s.name, q.question_number
        ");
        $stmt->execute([$exam_id]);
        $questions = $stmt->fetchAll(PDO::FETCH_ASSOC);
        
        // Update next question number
        $stmt = $pdo->prepare("SELECT MAX(question_number) as max_number FROM questions WHERE exam_id = ?");
        $stmt->execute([$exam_id]);
        $max_number = $stmt->fetch(PDO::FETCH_ASSOC);
        $next_question_number = $max_number['max_number'] + 1;
        
    } catch (PDOException $e) {
        $pdo->rollBack();
        error_log("Error updating questions: " . $e->getMessage());
        $error = "Failed to update questions: " . $e->getMessage();
    }
}

// Fetch admin username
$admin_name = 'Admin';
try {
    $stmt = $pdo->prepare("SELECT username FROM admins WHERE id = ?");
    $stmt->execute([$_SESSION['user_id']]);
    $admin = $stmt->fetch(PDO::FETCH_ASSOC);
    if ($admin) {
        $admin_name = $admin['username'];
    }
} catch (PDOException $e) {
    error_log("Error fetching admin username: " . $e->getMessage());
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Questions - <?= htmlspecialchars($exam['exam_name']) ?> - Exam Portal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <!-- Quill Rich Text Editor -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <style>
        :root {
            --primary: #28a745;
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
        }
        
        body {
            background-color: #f8f9fc;
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            padding: 20px;
        }
        
        .header {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            border-left: 5px solid var(--primary);
        }
        
        .card {
            border-radius: 15px;
            border: none;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            margin-bottom: 1.5rem;
        }
        
        .question-card {
            border-left: 4px solid var(--primary);
            margin-bottom: 2rem;
        }
        
        .new-question-card {
            border-left: 4px solid var(--info);
            margin-bottom: 2rem;
        }
        
        .subject-header {
            background: linear-gradient(135deg, var(--primary) 0%, #218838 100%);
            color: white;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .new-questions-header {
            background: linear-gradient(135deg, var(--info) 0%, #138496 100%);
            color: white;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .option-container {
            margin-bottom: 0.5rem;
        }
        
        .correct-option {
            background-color: #d4edda;
            border-left: 4px solid var(--success);
        }
        
        .btn-save-all {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
        
        .add-question-btn {
            margin-bottom: 1rem;
        }
        
        .new-question-template {
            display: none;
        }
        
        /* Rich Text Editor Styles */
        .editor-container {
            height: 200px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .formatting-toolbar {
            background-color: #f8f9fa;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
        }
        
        .drawing-canvas {
            border: 1px solid #ddd;
            margin-top: 10px;
            border-radius: 5px;
        }
        
        .ql-editor {
            font-size: 16px;
            line-height: 1.6;
        }
        
        .drawing-modal .modal-dialog {
            max-width: 90%;
        }
        
        .tool-btn {
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
        .question-text-display {
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 10px;
            min-height: 100px;
            margin-bottom: 15px;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- Header -->
        <div class="header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="h3 fw-bold text-dark mb-2">
                        <i class="bi bi-pencil-square me-2 text-primary"></i>
                        Edit Questions - <?= htmlspecialchars($exam['exam_name']) ?>
                    </h1>
                    <p class="text-muted mb-0">
                        <strong>Total Questions:</strong> <?= count($questions) ?> | 
                        <strong>Next Question #:</strong> <?= $next_question_number ?> |
                        <strong>Exam Date:</strong> <?= date('F j, Y', strtotime($exam['exam_date'])) ?>
                    </p>
                </div>
                <div class="col-md-4 text-md-end">
                    <a href="question_form.php?exam_id=<?= $exam_id ?>&add_more=true" class="btn btn-info me-2">
                        <i class="bi bi-plus-circle me-1"></i> Add Single Question
                    </a>
                    <button onclick="window.close()" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle me-1"></i> Close
                    </button>
                </div>
            </div>
        </div>

        <!-- Success/Error Messages -->
        <?php if (isset($success)): ?>
            <div class="alert alert-success mb-4">
                <i class="bi bi-check-circle-fill me-2"></i>
                <?= $success ?>
            </div>
        <?php endif; ?>
        
        <?php if (isset($error)): ?>
            <div class="alert alert-danger mb-4">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <?= $error ?>
            </div>
        <?php endif; ?>

        <form method="POST" id="questionsForm">
            <?php if (!empty($questions)): ?>
                <!-- Existing Questions -->
                <div class="card">
                    <div class="card-body">
                        <div class="subject-header">
                            <h3 class="h5 mb-0">
                                <i class="bi bi-pencil me-2"></i>
                                Edit Existing Questions
                                <span class="badge bg-light text-dark ms-2"><?= count($questions) ?> questions</span>
                            </h3>
                        </div>

                        <!-- Questions by Subject -->
                        <?php
                        // Group questions by subject
                        $questionsBySubject = [];
                        foreach ($questions as $question) {
                            $subjectName = $question['subject_name'];
                            if (!isset($questionsBySubject[$subjectName])) {
                                $questionsBySubject[$subjectName] = [];
                            }
                            $questionsBySubject[$subjectName][] = $question;
                        }
                        ?>

                        <?php foreach ($questionsBySubject as $subjectName => $subjectQuestions): ?>
                            <div class="subject-header" style="background: linear-gradient(135deg, #6c757d 0%, #495057 100%);">
                                <h4 class="h6 mb-0">
                                    <i class="bi bi-book me-2"></i>
                                    <?= htmlspecialchars($subjectName) ?>
                                    <span class="badge bg-light text-dark ms-2"><?= count($subjectQuestions) ?> questions</span>
                                </h4>
                            </div>

                            <?php foreach ($subjectQuestions as $question): ?>
                                <div class="card question-card">
                                    <div class="card-body">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">Question Number</label>
                                                <input type="number" class="form-control" 
                                                       name="questions[<?= $question['id'] ?>][question_number]"
                                                       value="<?= $question['question_number'] ?>" min="1" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Subject</label>
                                                <select class="form-select" 
                                                        name="questions[<?= $question['id'] ?>][subject_id]" required>
                                                    <option value="">Select Subject</option>
                                                    <?php foreach ($subjects as $subject): ?>
                                                        <option value="<?= $subject['id'] ?>" 
                                                            <?= $subject['id'] == $question['subject_id'] ? 'selected' : '' ?>>
                                                            <?= htmlspecialchars($subject['name']) ?>
                                                        </option>
                                                    <?php endforeach; ?>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Question Text</label>
                                            <div class="editor-container" id="editor-<?= $question['id'] ?>">
                                                <?= $question['question_text'] ?>
                                            </div>
                                            <input type="hidden" name="questions[<?= $question['id'] ?>][text]" 
                                                   value="<?= htmlspecialchars($question['question_text']) ?>" 
                                                   id="hidden-input-<?= $question['id'] ?>">
                                        </div>
                                        
                                        <!-- Formatting Toolbar -->
                                        <div class="formatting-toolbar mb-3">
                                            <div class="btn-group btn-group-sm me-2" role="group">
                                                <button type="button" class="btn btn-outline-secondary" onclick="formatText(<?= $question['id'] ?>, 'bold')" title="Bold">
                                                    <i class="bi bi-type-bold"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary" onclick="formatText(<?= $question['id'] ?>, 'italic')" title="Italic">
                                                    <i class="bi bi-type-italic"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary" onclick="formatText(<?= $question['id'] ?>, 'underline')" title="Underline">
                                                    <i class="bi bi-type-underline"></i>
                                                </button>
                                            </div>
                                            
                                            <div class="btn-group btn-group-sm me-2" role="group">
                                                <input type="color" class="btn-color-picker" id="color-picker-<?= $question['id'] ?>" 
                                                       onchange="changeTextColor(<?= $question['id'] ?>, this.value)" title="Text Color">
                                            </div>
                                        </div>

                                        <?php if (!empty($question['picture_url'])): ?>
                                            <div class="mb-3">
                                                <label class="form-label">Current Image</label>
                                                <div>
                                                    <img src="../uploads/questions/<?= htmlspecialchars($question['picture_url']) ?>" 
                                                         class="img-fluid rounded" style="max-height: 150px;">
                                                    <small class="text-muted d-block mt-1">Note: Images cannot be changed here. Use individual question edit.</small>
                                                </div>
                                            </div>
                                        <?php endif; ?>

                                        <div class="row mb-3">
                                            <div class="col-md-2">
                                                <label class="form-label">Marks</label>
                                                <input type="number" class="form-control" 
                                                       name="questions[<?= $question['id'] ?>][marks]"
                                                       value="<?= $question['marks'] ?>" min="1" required>
                                            </div>
                                        </div>

                                        <h6 class="mb-3">Options</h6>
                                        <?php foreach (['A', 'B', 'C', 'D'] as $option): ?>
                                            <div class="option-container <?= $question['correct_option'] == $option ? 'correct-option' : '' ?>">
                                                <div class="input-group">
                                                    <span class="input-group-text"><?= $option ?></span>
                                                    <input type="text" class="form-control" 
                                                           name="questions[<?= $question['id'] ?>][options][<?= $option ?>]"
                                                           value="<?= htmlspecialchars($question['option_' . strtolower($option)]) ?>">
                                                    <div class="input-group-text">
                                                        <input class="form-check-input" type="radio" 
                                                               name="questions[<?= $question['id'] ?>][correct_option]"
                                                               value="<?= $option ?>" 
                                                               <?= $question['correct_option'] == $option ? 'checked' : '' ?> required>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php endforeach; ?>
                    </div>
                </div>
            <?php endif; ?>

            <!-- Add New Questions Section -->
            <div class="card">
                <div class="card-body">
                    <div class="new-questions-header">
                        <h3 class="h5 mb-0">
                            <i class="bi bi-plus-circle me-2"></i>
                            Add New Questions
                            <span class="badge bg-light text-dark ms-2" id="newQuestionsCount">0 questions</span>
                        </h3>
                    </div>

                    <div id="newQuestionsContainer">
                        <!-- New questions will be added here -->
                    </div>

                    <button type="button" class="btn btn-primary add-question-btn" onclick="addNewQuestion()">
                        <i class="bi bi-plus-circle me-1"></i> Add Another Question
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- New Question Template (Hidden) -->
    <div class="new-question-template">
        <div class="card new-question-card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="mb-0">New Question <span class="question-number-badge"></span></h6>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeQuestion(this)">
                        <i class="bi bi-trash"></i> Remove
                    </button>
                </div>

                <input type="hidden" name="new_questions[][question_number]" class="question-number-input" value="">

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Subject</label>
                        <select class="form-select" name="new_questions[][subject_id]" required>
                            <option value="">Select Subject</option>
                            <?php foreach ($subjects as $subject): ?>
                                <option value="<?= $subject['id'] ?>">
                                    <?= htmlspecialchars($subject['name']) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Marks</label>
                        <input type="number" class="form-control" name="new_questions[][marks]" value="1" min="1" required>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Question Text</label>
                    <div class="editor-container" id="editor-new-{index}"></div>
                    <input type="hidden" name="new_questions[][text]" value="" id="hidden-input-new-{index}">
                </div>
                
                <!-- Formatting Toolbar -->
                <div class="formatting-toolbar mb-3">
                    <div class="btn-group btn-group-sm me-2" role="group">
                        <button type="button" class="btn btn-outline-secondary" onclick="formatTextNew('{index}', 'bold')" title="Bold">
                            <i class="bi bi-type-bold"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="formatTextNew('{index}', 'italic')" title="Italic">
                            <i class="bi bi-type-italic"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="formatTextNew('{index}', 'underline')" title="Underline">
                            <i class="bi bi-type-underline"></i>
                        </button>
                    </div>
                    
                    <div class="btn-group btn-group-sm me-2" role="group">
                        <input type="color" class="btn-color-picker" id="color-picker-new-{index}" 
                               onchange="changeTextColorNew('{index}', this.value)" title="Text Color">
                    </div>
                </div>

                <h6 class="mb-3">Options</h6>
                <?php foreach (['A', 'B', 'C', 'D'] as $option): ?>
                    <div class="option-container">
                        <div class="input-group">
                            <span class="input-group-text"><?= $option ?></span>
                            <input type="text" class="form-control" 
                                   name="new_questions[][options][<?= $option ?>]" required>
                            <div class="input-group-text">
                                <input class="form-check-input" type="radio" 
                                       name="new_questions[][correct_option]"
                                       value="<?= $option ?>" required>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

    <!-- Save Buttons -->
    <div class="btn-save-all">
        <?php if (!empty($questions)): ?>
            <button type="submit" name="update_questions" form="questionsForm" class="btn btn-primary me-2">
                <i class="bi bi-save me-1"></i> Save Changes
            </button>
        <?php endif; ?>
        <button type="submit" name="add_questions" form="questionsForm" class="btn btn-success">
            <i class="bi bi-plus-circle me-1"></i> Add New Questions
        </button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Quill Rich Text Editor -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
        // Store Quill editors
        const quillEditors = {};
        let newQuestionCount = 0;
        let nextQuestionNumber = <?= $next_question_number ?>;
        let newQuestionIndex = 0;

        // Initialize Quill editors for existing questions
        document.querySelectorAll('.editor-container').forEach((container) => {
            const id = container.id.split('-')[1];
            const quill = new Quill(container, {
                theme: 'snow',
                modules: {
                    toolbar: false // We'll use our custom toolbar
                }
            });
            
            quillEditors[id] = quill;
            
            // Update hidden input with HTML content when editor changes
            quill.on('text-change', function() {
                document.getElementById(`hidden-input-${id}`).value = quill.root.innerHTML;
            });
        });

        // Format text in Quill editor
        function formatText(id, format) {
            const quill = quillEditors[id];
            const range = quill.getSelection();
            
            if (range) {
                if (format === 'bold' || format === 'italic' || format === 'underline') {
                    const formatValue = quill.getFormat(range.index, range.length)[format] ? false : true;
                    quill.formatText(range.index, range.length, format, formatValue);
                }
            }
        }
        
        // Change text color in Quill editor
        function changeTextColor(id, color) {
            const quill = quillEditors[id];
            const range = quill.getSelection();
            
            if (range) {
                quill.formatText(range.index, range.length, 'color', color);
            }
        }
        
        // Format text in new Quill editor
        function formatTextNew(index, format) {
            const quill = quillEditors[`new-${index}`];
            if (quill) {
                const range = quill.getSelection();
                
                if (range) {
                    if (format === 'bold' || format === 'italic' || format === 'underline') {
                        const formatValue = quill.getFormat(range.index, range.length)[format] ? false : true;
                        quill.formatText(range.index, range.length, format, formatValue);
                    }
                }
            }
        }
        
        // Change text color in new Quill editor
        function changeTextColorNew(index, color) {
            const quill = quillEditors[`new-${index}`];
            if (quill) {
                const range = quill.getSelection();
                
                if (range) {
                    quill.formatText(range.index, range.length, 'color', color);
                }
            }
        }

        function addNewQuestion() {
            const template = document.querySelector('.new-question-template');
            const newQuestion = template.cloneNode(true);
            newQuestion.classList.remove('new-question-template');
            newQuestion.style.display = 'block';
            
            // Replace placeholder with actual index
            const questionIndex = newQuestionIndex++;
            const htmlContent = newQuestion.innerHTML.replace(/{index}/g, questionIndex);
            newQuestion.innerHTML = htmlContent;
            
            // Update question number
            const questionNumberBadge = newQuestion.querySelector('.question-number-badge');
            const questionNumberInput = newQuestion.querySelector('.question-number-input');
            questionNumberBadge.textContent = '#' + nextQuestionNumber;
            questionNumberInput.value = nextQuestionNumber;
            
            // Add to container
            document.getElementById('newQuestionsContainer').appendChild(newQuestion);
            
            // Initialize Quill editor for the new question
            const editorContainer = newQuestion.querySelector(`#editor-new-${questionIndex}`);
            const hiddenInput = newQuestion.querySelector(`#hidden-input-new-${questionIndex}`);
            
            const quill = new Quill(editorContainer, {
                theme: 'snow',
                modules: {
                    toolbar: false // We'll use our custom toolbar
                }
            });
            
            quillEditors[`new-${questionIndex}`] = quill;
            
            // Update hidden input with HTML content when editor changes
            quill.on('text-change', function() {
                hiddenInput.value = quill.root.innerHTML;
            });
            
            // Update counters
            newQuestionCount++;
            nextQuestionNumber++;
            updateNewQuestionsCount();
            
            // Add event listeners for radio buttons
            addOptionListeners(newQuestion);
        }

        function removeQuestion(button) {
            const questionCard = button.closest('.new-question-card');
            const editorId = questionCard.querySelector('.editor-container').id;
            const index = editorId.split('-')[2];
            
            // Remove the editor from our storage
            delete quillEditors[`new-${index}`];
            
            questionCard.remove();
            newQuestionCount--;
            updateNewQuestionsCount();
        }

        function updateNewQuestionsCount() {
            document.getElementById('newQuestionsCount').textContent = newQuestionCount + ' questions';
        }

        function addOptionListeners(questionElement) {
            const radios = questionElement.querySelectorAll('input[type="radio"]');
            radios.forEach(radio => {
                radio.addEventListener('change', function() {
                    // Remove highlight from all options in this question
                    const questionCard = this.closest('.new-question-card');
                    questionCard.querySelectorAll('.option-container').forEach(container => {
                        container.classList.remove('correct-option');
                    });
                    
                    // Highlight the selected option
                    this.closest('.option-container').classList.add('correct-option');
                });
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Add first question automatically if none exist
            if (<?= empty($questions) ? 'true' : 'false' ?>) {
                addNewQuestion();
            }

            // Add listeners for existing questions
            document.querySelectorAll('input[type="radio"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    const questionCard = this.closest('.question-card, .new-question-card');
                    questionCard.querySelectorAll('.option-container').forEach(container => {
                        container.classList.remove('correct-option');
                    });
                    this.closest('.option-container').classList.add('correct-option');
                });
            });

            // Form change detection
            let formChanged = false;
            const form = document.getElementById('questionsForm');
            const inputs = form.querySelectorAll('input, textarea, select');
            
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    formChanged = true;
                });
            });

            window.addEventListener('beforeunload', function(e) {
                if (formChanged) {
                    e.preventDefault();
                    e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
                }
            });

            form.addEventListener('submit', function() {
                formChanged = false;
            });
        });
    </script>
</body>
</html>