<?php
declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| Obstacle Removal System
|--------------------------------------------------------------------------
*/

require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/../includes/db.php';
require_once __DIR__ . '/../includes/functions.php';
require_once __DIR__ . '/../includes/student-auth.php';

$pdo = db();

requireStudent();

$student = currentStudent($pdo);
$courseId = (int)($_GET['course_id'] ?? 0);

if ($courseId <= 0) {
    redirectTo('student/my-courses.php');
}

if (!$student) {

    studentLogout();

    redirectTo('login.php');
}

$stmt = $pdo->prepare("
    SELECT c.*
    FROM core_courses c
    INNER JOIN core_course_students cs
        ON cs.course_id = c.id
    WHERE c.id = ?
      AND cs.student_id = ?
      AND cs.status = 'active'
    LIMIT 1
");

$stmt->execute([
    $courseId,
    (int)$student['id']
]);

$course = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$course) {
    redirectTo('student/my-courses.php');
}

/*
|--------------------------------------------------------------------------
| Steps
|--------------------------------------------------------------------------
*/

$steps = [];

if (
    tableExists(
        $pdo,
        'core_obstacle_steps'
    )
) {

    $stmt = $pdo->prepare("
        SELECT s.*, s.instructions AS description,
               COALESCE(NULLIF(s.resource_url,''), o.resource_link) AS resource_link
        FROM core_obstacle_steps s
        INNER JOIN core_obstacles o ON o.id = s.obstacle_id
        WHERE o.course_id = ? AND o.is_active = 1 AND s.is_active = 1
        ORDER BY s.step_order ASC
    ");

    $stmt->execute([$courseId]);

    $steps = $stmt->fetchAll();
}

/*
|--------------------------------------------------------------------------
| Completed Steps
|--------------------------------------------------------------------------
*/

$completedSteps = [];

if (
    tableExists(
        $pdo,
        'core_obstacle_submissions'
    )
) {

    $submissionStmt = $pdo->prepare("

      SELECT os.step_id
FROM core_obstacle_submissions os

INNER JOIN core_obstacle_steps s ON s.id = os.step_id
INNER JOIN core_obstacles o ON o.id = s.obstacle_id

WHERE os.student_id = ?
  AND o.course_id = ?

    ");

    $submissionStmt->execute([

    (int)$student['id'],
    $courseId

]);

    $completedSteps =
        array_column(
            $submissionStmt->fetchAll(),
            'step_id'
        );
}

?>

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta
name="viewport"
content="width=device-width, initial-scale=1.0">

<title>
Obstacle Removal System
</title>

<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet">

<style>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter',sans-serif;

    background:#f3f6fb;

    color:#0f172a;
}

.page{

    padding:35px;
}

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;
}

.page-title{

    font-size:42px;

    font-weight:900;
}

.back-btn{

    text-decoration:none;

    background:#eff6ff;

    color:#2563eb;

    padding:14px 20px;

    border-radius:18px;

    font-weight:800;
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero{

   background:
linear-gradient(135deg,#0f172a,#7c3aed,#4f46e5);

    color:#fff;

    border-radius:34px;

    padding:42px;

    margin-bottom:30px;

    box-shadow:
    0 35px 70px rgba(79,70,229,0.18);
}

.hero h1{

    font-size:46px;

    margin-bottom:16px;

    font-weight:900;
}

.hero p{

    color:#ede9fe;

    line-height:2;
}

/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(360px,1fr));

    gap:24px;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    border:1px solid #e2e8f0;

    box-shadow:
    0 15px 40px rgba(15,23,42,0.05);
}

.card-header{

    background:
    linear-gradient(135deg,#7c3aed,#4f46e5);

    color:#fff;

    padding:28px;
}

.card-header h2{

    font-size:30px;

    margin-bottom:12px;

    font-weight:900;
}

.card-header p{

    color:#ede9fe;

    line-height:1.9;
}

.card-body{

    padding:28px;
}

.status{

    display:inline-block;

    padding:10px 16px;

    border-radius:999px;

    font-size:12px;
    font-weight:900;

    margin-bottom:20px;
}

.status.completed{

    background:#dcfce7;

    color:#16a34a;
}

.status.locked{

    background:#fef2f2;

    color:#dc2626;
}

.status.available{

    background:#ede9fe;

    color:#7c3aed;
}

/*
|--------------------------------------------------------------------------
| Action
|--------------------------------------------------------------------------
*/

.video-btn{

    display:block;

    text-align:center;

    text-decoration:none;

    background:
linear-gradient(135deg,#7c3aed,#4f46e5);

    color:#fff;

    padding:18px;

    border-radius:18px;

    font-weight:900;

    margin-bottom:18px;
}

.form textarea{

    width:100%;

    min-height:120px;

    border-radius:18px;

    border:1px solid #ddd6fe;

    padding:18px;

    resize:vertical;

    margin-bottom:16px;

    font-family:inherit;
}

.form button{

    width:100%;

    border:none;

    background:
    linear-gradient(135deg,#7c3aed,#4f46e5);

    color:#fff;

    padding:18px;

    border-radius:18px;

    font-size:15px;
    font-weight:900;

    cursor:pointer;
}

.locked-box{

    text-align:center;

    padding:35px;

    background:#fef2f2;

    border-radius:22px;

    color:#dc2626;

    font-weight:800;
}

.empty{

    background:#fff;

    border-radius:30px;

    padding:70px;

    text-align:center;

    border:1px dashed #cbd5e1;
}

.empty h2{

    font-size:34px;

    margin-bottom:18px;
}

.empty p{

    color:#64748b;

    line-height:1.9;
}

@media(max-width:700px){

    .page{

        padding:20px;
    }

    .page-title{

        font-size:32px;
    }

    .hero h1{

        font-size:34px;
    }
}

</style>

</head>

<body>

<div class="page">

    <div class="topbar">

        <h1 class="page-title">

            Obstacle Removal

        </h1>

        <a
       href="my-courses.php"
        class="back-btn">

← My Courses

        </a>

    </div>

 <div class="hero">

    <h1>

        Obstacle Removal System

    </h1>

    <p>

        Complete the obstacle-removal stages for
        <?php echo e((string)$course['title']); ?>.
        Unlock each level gradually,
        eliminate hesitation,
        improve confidence,
        and strengthen your learning performance.

    </p>

</div>

    <?php if($steps): ?>

        <div class="grid">

            <?php foreach($steps as $index => $step): ?>

                <?php

                $completed =
                    in_array(
                        $step['id'],
                        $completedSteps
                    );

                $previousCompleted =
                    $index === 0
                    ||
                    in_array(
                        $steps[$index - 1]['id'],
                        $completedSteps
                    );

                $locked =
                    !$previousCompleted;

                ?>

                <div class="card">

                    <div class="card-header">

                        <h2>

                            Step
                            <?php
                            echo e(
                                $step['step_order']
                            );
                            ?>

                        </h2>

                        <p>

                            <?php
                            echo e(
                                $step['description']
                            );
                            ?>

                        </p>

                    </div>

                    <div class="card-body">

                        <?php if($completed): ?>

                            <div class="status completed">

                                Completed

                            </div>

                        <?php elseif($locked): ?>

                            <div class="status locked">

                                Locked

                            </div>

                        <?php else: ?>

                            <div class="status available">

                                Available

                            </div>

                        <?php endif; ?>

                        <?php if(!$locked): ?>

                            <a
                            href="<?php echo e($step['resource_link']); ?>"
                            target="_blank"
                            class="video-btn">

                                Open Step Resource

                            </a>

                            <?php if(!$completed): ?>

                                <form
                                method="POST"
                                action="../ajax/submit-obstacle.php"
                                class="form">

                                    <?php echo csrfField(); ?>

                                    <input
                                    type="hidden"
                                    name="step_id"
                                    value="<?php echo e($step['id']); ?>">

                                    <textarea
                                    name="student_note"
                                    placeholder="Write what you learned or paste your proof link..."
                                    required></textarea>

                                    <button type="submit">

                                        Submit Step

                                    </button>

                                </form>

                            <?php endif; ?>

                        <?php else: ?>

                            <div class="locked-box">

                                Complete the previous
                                step first to unlock
                                this stage.

                            </div>

                        <?php endif; ?>

                    </div>

                </div>

            <?php endforeach; ?>

        </div>

    <?php else: ?>

        <div class="empty">

            <h2>

                No Obstacle Steps Yet

            </h2>

            <p>

                Your teacher has not added
                obstacle-removal stages yet.

            </p>

        </div>

    <?php endif; ?>

</div>

</body>
</html>