<?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;
}

// Fetch all subjects and classes
$subjects = array();
$classes = array();
try {
    $subjects = $pdo->query("SELECT id, name FROM subjects ORDER BY name")->fetchAll(PDO::FETCH_ASSOC);
    $classes = $pdo->query("SELECT id, class_name FROM classes ORDER BY class_name")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log("Error fetching data: " . $e->getMessage());
    $_SESSION['error'] = "Failed to load required data";
    header("Location: questions.php");
    exit;
}

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $subjectId = $_POST['subject_id'];
    $classId = $_POST['class_id'];
    $questions = $_POST['questions'];
    
    try {
        $pdo->beginTransaction();
        
        // Get next question number
        $stmt = $pdo->prepare("
            SELECT COALESCE(MAX(question_number), 0) + 1 
            FROM questions 
            WHERE subject_id = ? AND class_id = ?
        ");
        $stmt->execute(array($subjectId, $classId));
        $nextQuestionNumber = $stmt->fetchColumn();
        
        // Insert each question 
        $questionStmt = $pdo->prepare("
            INSERT INTO questions (
                subject_id,
                class_id,
                question_number,
                question_text,
                option_a,
                option_b,
                option_c,
                option_d,
                correct_option,
                marks,
                picture_url
            ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
        ");
        
        foreach ($questions as $q) {
            // Handle question image upload
            $questionImage = '';
            if (!empty($_FILES['questions']['name'][$q['index']]['image'])) {
                $uploadDir = '../uploads/questions/';
                if (!is_dir($uploadDir)) {
                    mkdir($uploadDir, 0755, true);
                }
                
                $ext = pathinfo($_FILES['questions']['name'][$q['index']]['image'], PATHINFO_EXTENSION);
                $filename = 'q_' . uniqid() . '.' . $ext;
                $destination = $uploadDir . $filename;
                
                if (move_uploaded_file($_FILES['questions']['tmp_name'][$q['index']]['image'], $destination)) {
                    $questionImage = $filename;
                }
            }
            
            $questionStmt->execute(array(
                $subjectId,
                $classId,
                $nextQuestionNumber++,
                $q['text'],
                $q['options']['A'],
                $q['options']['B'],
                $q['options']['C'],
                $q['options']['D'],
                $q['correct_option'],
                1, // Default marks
                $questionImage
            ));
        }
        
        $pdo->commit();
        $_SESSION['success'] = "Questions added successfully";
        header("Location: questions.php");
        exit;
        
    } catch (PDOException $e) {
        $pdo->rollBack();
        error_log("Error saving questions: " . $e->getMessage());
        $_SESSION['error'] = "Failed to save questions";
        header("Location: question_form.php");
        exit;
    }
}

// Fetch admin username for the navbar
$admin_name = 'Admin';
try {
    $stmt = $pdo->prepare("SELECT username FROM admins WHERE id = ?");
    $stmt->execute(array($_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>Add Questions - British Entrance 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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        :root {
            --primary: #28a745; /* Light green */
            --secondary: #6c757d;
            --success: #28a745;
            --info: #17a2b8;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --light-green: #d4edda;
        }
        
        body {
            background-color: #f8f9fc;
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        .dashboard-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);
        }
        
        .btn-primary {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        .btn-primary:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }
        
        .btn-outline-primary {
            color: var(--primary);
            border-color: var(--primary);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        .question-row {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
        }
        
        .question-row:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        .question-number {
            font-weight: bold;
            color: var(--primary);
            margin-right: 10px;
        }
        
        .option-label {
            font-weight: bold;
            margin-right: 5px;
            color: var(--dark);
        }
        
        .option-input {
            flex-grow: 1;
            margin-right: 15px;
        }
        
        .correct-option {
            background-color: rgba(40, 167, 69, 0.1);
            border-left: 4px solid var(--success);
        }
        
        .question-image-preview {
            max-width: 200px;
            max-height: 150px;
            margin-top: 10px;
            border-radius: 5px;
        }
        
        .remove-question-btn {
            color: var(--danger);
            margin-left: 15px;
        }
        
        .option-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <!-- Top Navigation Bar -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="admin_dashboard.php" style="color: var(--primary);">
                <i class="bi bi-mortarboard me-2"></i>British Entrance Exam Portal
            </a>
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <span class="text-muted">Welcome,</span>
                    <span class="fw-bold ms-1"><?php echo htmlspecialchars($admin_name); ?></span>
                </div>
                <div class="user-avatar me-2">
                    <?php echo strtoupper(substr($admin_name, 0, 1)); ?>
                </div>
                <a href="../logout.php" class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-box-arrow-right"></i>
                </a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <!-- Dashboard Header -->
        <div class="dashboard-header animate__animated animate__fadeIn">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="h3 fw-bold text-dark mb-2">
                        <i class="bi bi-question-circle me-2" style="color: var(--primary);"></i>
                        Add Questions
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="admin_dashboard.php"><i class="bi bi-house-door"></i> Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="questions.php">Questions</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Add</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6 text-md-end">
                    <a href="questions.php" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i> Back to Questions
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Error Messages -->
        <?php if (isset($_SESSION['error'])): ?>
            <div class="alert alert-danger animate__animated animate__shakeX mb-4">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <?php echo htmlspecialchars($_SESSION['error']); unset($_SESSION['error']); ?>
            </div>
        <?php endif; ?>

        <!-- Question Form -->
        <form method="POST" enctype="multipart/form-data" id="questions-form">
            <div class="card shadow-sm animate__animated animate__fadeIn mb-4">
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label for="subject_id" class="form-label">Subject</label>
                            <select class="form-select" id="subject_id" name="subject_id" required>
                                <option value="">Select Subject</option>
                                <?php foreach ($subjects as $subject): ?>
                                    <option value="<?php echo $subject['id']; ?>">
                                        <?php echo htmlspecialchars($subject['name']); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        
                        <div class="col-md-6">
                            <label for="class_id" class="form-label">Class</label>
                            <select class="form-select" id="class_id" name="class_id" required>
                                <option value="">Select Class</option>
                                <?php foreach ($classes as $class): ?>
                                    <option value="<?php echo $class['id']; ?>">
                                        <?php echo htmlspecialchars($class['class_name']); ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="questions-container">
                <!-- Questions will be added here dynamically -->
            </div>
            
            <div class="d-flex justify-content-between mb-4">
                <button type="button" class="btn btn-primary" id="add-question-btn">
                    <i class="bi bi-plus-circle me-1"></i> Add Question
                </button>
                
                <button type="submit" class="btn btn-success" id="save-all-btn" style="display: none;">
                    <i class="bi bi-save me-1"></i> Save All Questions
                </button>
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let questionCount = 0;
            const questionsContainer = document.getElementById('questions-container');
            const saveAllBtn = document.getElementById('save-all-btn');
            
            // Add first question
            addQuestion();
            
            // Add question button click handler
            document.getElementById('add-question-btn').addEventListener('click', addQuestion);
            
            function addQuestion() {
                questionCount++;
                const questionIndex = questionCount - 1;
                
                const questionRow = document.createElement('div');
                questionRow.className = 'question-row animate__animated animate__fadeIn';
                questionRow.dataset.index = questionIndex;
                questionRow.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center">
                            <span class="question-number">${questionCount}.</span>
                            <input type="text" class="form-control" name="questions[${questionIndex}][text]" 
                                   placeholder="Enter question text" required>
                        </div>
                        <button type="button" class="btn btn-link remove-question-btn" onclick="removeQuestion(this)">
                            <i class="bi bi-trash"></i> Remove
                        </button>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Question Image (Optional)</label>
                        <input type="file" class="form-control" name="questions[${questionIndex}][image]" accept="image/*">
                        <div class="image-preview-container mt-2" id="image-preview-${questionIndex}"></div>
                    </div>
                    
                    <div class="options-container">
                        <div class="option-container">
                            <span class="option-label">A:</span>
                            <input type="text" class="form-control option-input" name="questions[${questionIndex}][options][A]" 
                                   placeholder="Option A" required>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="questions[${questionIndex}][correct_option]" 
                                       value="A" required>
                            </div>
                        </div>
                        
                        <div class="option-container">
                            <span class="option-label">B:</span>
                            <input type="text" class="form-control option-input" name="questions[${questionIndex}][options][B]" 
                                   placeholder="Option B" required>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="questions[${questionIndex}][correct_option]" 
                                       value="B">
                            </div>
                        </div>
                        
                        <div class="option-container">
                            <span class="option-label">C:</span>
                            <input type="text" class="form-control option-input" name="questions[${questionIndex}][options][C]" 
                                   placeholder="Option C">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="questions[${questionIndex}][correct_option]" 
                                       value="C">
                            </div>
                        </div>
                        
                        <div class="option-container">
                            <span class="option-label">D:</span>
                            <input type="text" class="form-control option-input" name="questions[${questionIndex}][options][D]" 
                                   placeholder="Option D">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="questions[${questionIndex}][correct_option]" 
                                       value="D">
                            </div>
                        </div>
                    </div>
                `;
                
                questionsContainer.appendChild(questionRow);
                saveAllBtn.style.display = 'block';
                
                // Add event listener for image preview
                const fileInput = questionRow.querySelector('input[type="file"]');
                fileInput.addEventListener('change', function(e) {
                    const previewContainer = document.getElementById(`image-preview-${questionIndex}`);
                    previewContainer.innerHTML = '';
                    
                    if (e.target.files.length > 0) {
                        const file = e.target.files[0];
                        const reader = new FileReader();
                        
                        reader.onload = function(event) {
                            const img = document.createElement('img');
                            img.src = event.target.result;
                            img.className = 'question-image-preview';
                            previewContainer.appendChild(img);
                        };
                        
                        reader.readAsDataURL(file);
                    }
                });
                
                // Highlight correct option when selected
                questionRow.querySelectorAll('input[type="radio"]').forEach(radio => {
                    radio.addEventListener('change', function() {
                        this.closest('.option-container').classList.add('correct-option');
                        
                        // Remove highlight from other options
                        const allOptions = questionRow.querySelectorAll('.option-container');
                        allOptions.forEach(opt => {
                            if (opt !== this.closest('.option-container')) {
                                opt.classList.remove('correct-option');
                            }
                        });
                    });
                });
            }
            
            window.removeQuestion = function(button) {
                const questionRow = button.closest('.question-row');
                const questionIndex = parseInt(questionRow.dataset.index);
                
                // Confirm before removing
                if (!confirm('Are you sure you want to remove this question?')) {
                    return;
                }
                
                // Remove the question
                questionRow.classList.remove('animate__fadeIn');
                questionRow.classList.add('animate__fadeOut');
                
                setTimeout(() => {
                    questionRow.remove();
                    
                    // Reindex remaining questions
                    const remainingQuestions = document.querySelectorAll('.question-row');
                    if (remainingQuestions.length === 0) {
                        document.getElementById('save-all-btn').style.display = 'none';
                        questionCount = 0;
                        return;
                    }
                    
                    remainingQuestions.forEach((row, index) => {
                        row.dataset.index = index;
                        const questionNumber = row.querySelector('.question-number');
                        questionNumber.textContent = `${index + 1}.`;
                        
                        // Update all names in inputs
                        const inputs = row.querySelectorAll('input');
                        inputs.forEach(input => {
                            const name = input.name.replace(/questions\[\d+\]/, `questions[${index}]`);
                            input.name = name;
                        });
                    });
                    
                    questionCount = remainingQuestions.length;
                }, 300);
            };
        });
    </script>
</body>
</html>