<?php
// student/instructions.php
require_once '../config/config.php';
if (!isset($_SESSION['student_id'])) {
    redirect('student/register.php');
}
$student_id = $_SESSION['student_id'];
$exam_id = $_SESSION['exam_id'];
// Get student and exam details
$stmt = $pdo->prepare("SELECT * FROM students WHERE id = ?");
$stmt->execute([$student_id]);
$student = $stmt->fetch();
$stmt = $pdo->prepare("SELECT * FROM exams WHERE id = ?");
$stmt->execute([$exam_id]);
$exam = $stmt->fetch();
// Count questions
$stmt = $pdo->prepare("SELECT COUNT(*) FROM exam_questions WHERE exam_id = ?");
$stmt->execute([$exam_id]);
$total_questions = $stmt->fetchColumn();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assessment Instructions - <?php echo escape($exam->title); ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-blue-500 to-purple-600 min-h-screen">
    <!-- Header with Logo -->
    <div class="bg-white shadow-md">
        <div class="max-w-4xl mx-auto px-4 py-4">
            <div class="flex items-center justify-between">
                <img src="https://assessment.edoxi.cyradrive.com/assets/01.png" 
                     alt="Edoxi Training Center" 
                     class="h-12">
                <div class="text-right">
                    <p class="text-sm text-gray-600">Participant</p>
                    <p class="font-semibold text-gray-800"><?php echo escape($student->full_name); ?></p>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-4xl mx-auto px-4 py-8">
        <div class="bg-white rounded-2xl shadow-2xl p-8 md:p-10">
            <!-- Welcome Section -->
            <div class="text-center mb-8">
                <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
                    <i class="fas fa-clipboard-list text-blue-600 text-3xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-gray-800 mb-2">
                    Assessment Instructions
                </h1>
                <h2 class="text-xl text-blue-600 font-semibold">
                    <?php echo escape($exam->title); ?>
                </h2>
            </div>
            
            <!-- Assessment Details Card -->
            <div class="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-xl p-6 mb-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-info-circle text-blue-600 mr-2"></i> Assessment Details
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-white rounded-lg p-4 shadow-sm">
                        <div class="flex items-center">
                            <div class="bg-blue-100 p-3 rounded-lg mr-3">
                                <i class="fas fa-clock text-blue-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Duration</p>
                                <p class="text-lg font-bold text-gray-800"><?php echo $exam->duration; ?> minutes</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-4 shadow-sm">
                        <div class="flex items-center">
                            <div class="bg-purple-100 p-3 rounded-lg mr-3">
                                <i class="fas fa-question-circle text-purple-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Total Questions</p>
                                <p class="text-lg font-bold text-gray-800"><?php echo $total_questions; ?></p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-4 shadow-sm">
                        <div class="flex items-center">
                            <div class="bg-green-100 p-3 rounded-lg mr-3">
                                <i class="fas fa-star text-green-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Total Marks</p>
                                <p class="text-lg font-bold text-gray-800"><?php echo $exam->total_marks; ?></p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-4 shadow-sm">
                        <div class="flex items-center">
                            <div class="bg-yellow-100 p-3 rounded-lg mr-3">
                                <i class="fas fa-trophy text-yellow-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Passing Marks</p>
                                <p class="text-lg font-bold text-gray-800"><?php echo $exam->passing_marks; ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <?php if ($exam->instructions): ?>
            <div class="mb-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                    <i class="fas fa-list-ul text-purple-600 mr-2"></i> Special Instructions
                </h2>
                <div class="bg-gray-50 border border-gray-200 p-5 rounded-lg text-gray-700 leading-relaxed">
                    <?php echo nl2br(escape($exam->instructions)); ?>
                </div>
            </div>
            <?php endif; ?>
            
            <!-- Important Notes -->
            <div class="bg-yellow-50 border-l-4 border-yellow-500 rounded-lg p-6 mb-8">
                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-exclamation-triangle text-yellow-600 mr-2"></i> Important Notes
                </h2>
                <ul class="space-y-3 text-gray-700">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-3 mt-1"></i>
                        <span>Timer will start automatically when you click "Start Assessment"</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-3 mt-1"></i>
                        <span>The assessment will auto-submit when time expires</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-3 mt-1"></i>
                        <span>Ensure you have a stable internet connection throughout</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-3 mt-1"></i>
                        <span>Do not refresh or close the browser during the assessment</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-600 mr-3 mt-1"></i>
                        <span>All answers are automatically saved as you progress</span>
                    </li>
                </ul>
            </div>
            
            <!-- Start Button -->
            <div class="text-center">
                <a href="<?php echo base_url('student/exam.php'); ?>" 
                   class="inline-flex items-center bg-gradient-to-r from-green-500 to-green-600 text-white text-xl font-bold px-12 py-4 rounded-xl hover:from-green-600 hover:to-green-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                    <i class="fas fa-play-circle mr-3 text-2xl"></i> 
                    Start Assessment Now
                </a>
                <p class="text-sm text-gray-500 mt-4">Good luck with your assessment!</p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="text-center py-6">
        <p class="text-white text-sm">© <?php echo date('Y'); ?> Edoxi Training Center. All rights reserved.</p>
    </div>
</body>
</html>