<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Executive Functioning Self-Monitoring Quiz</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <style>
        .reflection-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
            padding: 2rem;
            margin: 2rem 0;
        }
        .biblical-anchor {
            background: rgba(255, 255, 255, 0.1);
            border-left: 4px solid #ffd700;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 8px;
            font-style: italic;
        }
        .self-check-card {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin: 1rem 0;
        }
        .reflection-prompt {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 1rem;
            margin: 0.5rem 0;
        }
        .faith-integration {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin: 1rem 0;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <!-- Header -->
        <div class="text-center mb-5">
            <h1 class="display-4 text-primary">
                <i class="fas fa-cross me-3"></i>
                Executive Functioning Self-Monitoring Quiz
            </h1>
            <p class="lead text-muted">Assess your self-monitoring skills across key executive functioning areas with biblical integration</p>
        </div>

        <!-- Student Information Form -->
        <div id="studentForm" class="card shadow-lg mb-5">
            <div class="card-header bg-primary text-white">
                <h3 class="mb-0"><i class="fas fa-user-graduate me-2"></i>Student Information</h3>
            </div>
            <div class="card-body">
                <form id="studentInfoForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="studentName" class="form-label">Full Name *</label>
                            <input type="text" class="form-control" id="studentName" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="studentEmail" class="form-label">Email Address *</label>
                            <input type="email" class="form-control" id="studentEmail" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="studentGrade" class="form-label">Grade Level *</label>
                            <select class="form-select" id="studentGrade" required>
                                <option value="">Select Grade</option>
                                <option value="6">6th Grade</option>
                                <option value="7">7th Grade</option>
                                <option value="8">8th Grade</option>
                                <option value="9">9th Grade</option>
                                <option value="10">10th Grade</option>
                                <option value="11">11th Grade</option>
                                <option value="12">12th Grade</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-play me-2"></i>Start Quiz
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Quiz Container -->
        <div id="quizContainer" class="d-none">
            <!-- Progress Bar -->
            <div class="progress mb-4" style="height: 25px;">
                <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" 
                     role="progressbar" style="width: 0%">
                    <span id="progressText">0% Complete</span>
                </div>
            </div>

            <!-- Quiz Form -->
            <form id="quizForm">
                <!-- Questions will be dynamically inserted here -->
                <div id="questionsContainer"></div>

                <!-- Navigation Buttons -->
                <div class="d-flex justify-content-between mt-4">
                    <button type="button" id="prevBtn" class="btn btn-secondary" onclick="navigateQuestion(-1)" disabled>
                        <i class="fas fa-chevron-left me-2"></i>Previous
                    </button>
                    <span id="questionCounter" class="align-self-center fw-bold">Question 1 of 24</span>
                    <button type="button" id="nextBtn" class="btn btn-primary" onclick="navigateQuestion(1)">
                        Next<i class="fas fa-chevron-right ms-2"></i>
                    </button>
                    <button type="button" id="selfCheckBtn" class="btn btn-info d-none" onclick="showSelfCheckSection()">
                        <i class="fas fa-pray me-2"></i>Reflection Section
                    </button>
                    <button type="submit" id="submitBtn" class="btn btn-success d-none">
                        <i class="fas fa-check me-2"></i>Submit Quiz
                    </button>
                </div>
            </form>

            <!-- Self-Check Reflection Section -->
            <div id="selfCheckSection" class="d-none">
                <div class="reflection-section">
                    <h3 class="text-center mb-4">
                        <i class="fas fa-heart me-3"></i>
                        Spiritual Self-Check & Reflection
                    </h3>
                    <p class="text-center mb-4">Take a moment to reflect on your day through the lens of faith and character development.</p>
                    
                    <!-- Self-Check Categories will be inserted here -->
                    <div id="selfCheckContainer"></div>
                    
                    <div class="text-center mt-4">
                        <button type="button" id="backToQuizBtn" class="btn btn-outline-light me-2" onclick="backToQuiz()">
                            <i class="fas fa-arrow-left me-2"></i>Back to Quiz
                        </button>
                        <button type="button" id="completeReflectionBtn" class="btn btn-light" onclick="completeReflection()">
                            <i class="fas fa-check me-2"></i>Complete Reflection
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Results Container -->
        <div id="resultsContainer" class="d-none">
            <div class="card shadow-lg">
                <div class="card-header bg-success text-white">
                    <h3 class="mb-0"><i class="fas fa-chart-line me-2"></i>Quiz Results</h3>
                </div>
                <div class="card-body">
                    <div id="resultsContent"></div>
                    <div class="text-center mt-4">
                        <button onclick="window.print()" class="btn btn-outline-primary me-2">
                            <i class="fas fa-print me-2"></i>Print Results
                        </button>
                        <button onclick="retakeQuiz()" class="btn btn-primary">
                            <i class="fas fa-redo me-2"></i>Retake Quiz
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Spinner -->
    <div id="loadingSpinner" class="d-none position-fixed top-50 start-50 translate-middle">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="enhancedQuizData.js"></script>
    <script src="googleSheetsConfig.js"></script>
    <script src="googleSheetsService.js"></script>
    <script src="enhancedQuizEngine.js"></script>
    <script src="emailService.js"></script>
    <script src="enhancedApp.js"></script>
</body>
</html>