<?php
session_start();

$name  = $_SESSION['student_name'] ?? 'Student';
$class = $_SESSION['student_class'] ?? '';
$topic_id = $_GET['topic_id'] ?? 1;

/* 🔥 PROJECT QUESTIONS (TOPIC BASED) */
$projects = [
    1 => [
        "title" => "Student Grade Calculator",
        "desc"  => "Take 3 subject marks and print grade based on average.",
        "rules" => [
            "Take 3 inputs",
            "Find average",
            ">=90 → A",
            ">=75 → B",
            ">=50 → C",
            "<50 → Fail"
        ],
        "example" => "Input: 80 90 70\nOutput: Grade B"
    ],
    2 => [
        "title" => "Even or Odd Analyzer",
        "desc"  => "Take a number and print whether it is Even or Odd.",
        "rules" => [
            "Take input",
            "Use condition",
            "Print result"
        ],
        "example" => "Input: 5\nOutput: Odd"
    ]
];

$project = $projects[$topic_id] ?? $projects[1];
?>

<!DOCTYPE html>
<html>
<head>
<title>Mini Project | RS Learning Lab</title>

<style>
body{
background: radial-gradient(circle at top,#020617,#0f172a);
color:#e5e7eb;
font-family:'Segoe UI', Arial;
margin:0;
}

/* 🔥 HEADER */
.header{
width:85%;
margin:20px auto;
color:#94a3b8;
font-size:14px;
}

.container{
width:85%;
margin:20px auto;
display:flex;
gap:30px;
}

.left{
width:42%;
background: rgba(15,23,42,0.7);
backdrop-filter: blur(10px);
padding:28px;
border-radius:18px;
box-shadow:0 0 25px rgba(0,0,0,0.5);
}

.right{
width:58%;
background: rgba(2,6,23,0.8);
padding:28px;
border-radius:18px;
box-shadow:0 0 25px rgba(0,0,0,0.6);
}

h2{
margin-top:0;
font-size:24px;
}

textarea{
width:100%;
height:320px;
background:#020617;
color:#22c55e;
border:1px solid #1f2937;
padding:15px;
border-radius:12px;
font-family:monospace;
font-size:14px;
outline:none;
}

textarea:focus{
border:1px solid #22c55e;
box-shadow:0 0 10px rgba(34,197,94,0.3);
}

button{
margin-top:20px;
padding:14px 40px;
border:none;
border-radius:999px;
font-weight:bold;
font-size:15px;
background:linear-gradient(135deg,#22c55e,#06b6d4);
color:#020617;
cursor:pointer;
transition:0.3s;
}

button:hover{
transform:scale(1.05);
box-shadow:0 0 20px rgba(34,197,94,0.4);
}

.rule{
margin-bottom:10px;
}

/* 🔥 TIMER */
.timer{
color:#facc15;
margin-bottom:10px;
}
</style>

</head>
<body>

<!-- 🔥 STUDENT HEADER -->
<div class="header">
👤 <?= htmlspecialchars($name) ?> | 🎓 Class <?= htmlspecialchars($class) ?>
</div>

<div class="container">

<!-- 🔥 LEFT SIDE -->
<div class="left">
<h2>🚀 <?= $project['title'] ?></h2>

<p><?= $project['desc'] ?></p>

<h3>📌 Requirements:</h3>
<?php foreach($project['rules'] as $r): ?>
<div class="rule">✔ <?= $r ?></div>
<?php endforeach; ?>

<h3>🧪 Example:</h3>
<pre><?= $project['example'] ?></pre>

</div>

<!-- 🔥 RIGHT SIDE -->
<div class="right">

<h2>💻 Write Your Code</h2>

<div class="timer" id="timer">
⏳ Time Left: 10:00
</div>

<div style="margin-bottom:10px;color:#22c55e;">
💻 Language: Python
</div>
<input type="hidden" name="start_time" id="start_time">
<form method="POST" action="/rs_lab/coding/submit_project.php">

<textarea name="code" placeholder="Write your code here..." required></textarea>

<input type="hidden" name="topic_id" value="<?= $topic_id ?>">

<button type="submit">🚀 Submit Project</button>

</form>

</div>

</div>

<!-- 🔥 TIMER SCRIPT -->
<script>
let time = 600;
setInterval(()=>{
let m = Math.floor(time/60);
let s = time%60;
document.getElementById("timer").innerText =
"⏳ Time Left: " + m + ":" + (s<10?"0":"") + s;
time--;
},1000);
</script>
<script>
document.getElementById("start_time").value = Date.now();
</script>

</body>
</html>