@extends('layouts.studentportalnav')

@section('title', 'Module Details')

@section('content')

<style>
:root {
    --theme-navy: #2D355B;
    --theme-navy-dark: #1F2541;
    --theme-red: #822424;
    --theme-red-hover: #df2c3e;
    --theme-yellow: #FFEA85;
    --bg-light: #F6F6F6;
    --white: #ffffff;
}

body {
    background: var(--bg-light);
    font-family: 'Segoe UI', sans-serif;
}

.main-portal-content {
    padding: 10px 5px;
    min-height: 100vh;
}

/* Header styling */
.module-header {
    background: var(--theme-navy);
    color: var(--white);
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 25px;
    border-left: 5px solid var(--theme-red);
}

/* Video Wrapper */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Card Styling */
.content-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin-bottom: 20px;
}

/* Lesson List */
.lesson-list .list-group-item {
    border: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 14px 20px;
    transition: all 0.2s;
}

.lesson-list .list-group-item:hover {
    background-color: #f8fafc;
}

.lesson-list .list-group-item.active {
    background-color: rgba(130, 36, 36, 0.08);
    color: var(--theme-red);
    font-weight: 600;
    border-left: 4px solid var(--theme-red);
}

.btn-theme-red {
    background-color: var(--theme-red) !important;
    border-color: var(--theme-red) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
}

.btn-theme-red:hover {
    background-color: var(--theme-red-hover) !important;
}

@media (min-width: 768px) {
    .main-portal-content { padding: 15px; }
}
</style>

<div class="main-portal-content">
    <div class="container-fluid">

        <!-- Back Button & Header -->
        <div class="mb-3">
            <a href="{{ route('mycourse') }}" class="text-decoration-none text-muted small fw-semibold">
                <i class="fa fa-arrow-left me-1"></i> Back to My Course
            </a>
        </div>

        <div class="module-header d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div>
                <span class="badge bg-danger mb-2">Module {{ $moduleId ?? 1 }}</span>
                <h2 class="fw-bold mb-1">Introduction & Fundamentals</h2>
                <p class="mb-0 opacity-75 small">Learn the basic concepts, core principles, and foundational theories.</p>
            </div>
            <div>
                <button class="btn btn-outline-light btn-sm px-3">
                    <i class="fa-solid fa-check-circle me-1"></i> Mark as Complete
                </button>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="row g-4">
            
            <!-- LEFT: Video Player & Module Details -->
            <div class="col-lg-8 col-12">
                
                <!-- Video Container -->
                <div class="content-card p-2">
                    <div class="video-container">
                        <!-- Sample Video URL (replace with actual video stream/iframe) -->
                        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Lesson Video" allowfullscreen></iframe>
                    </div>
                </div>

                <!-- Module Description Card -->
                <div class="content-card p-4">
                    <h4 class="fw-bold mb-3" style="color: var(--theme-navy);">Overview & Description</h4>
                    <p class="text-secondary lh-base">
                        In this module, you will explore the essential foundational topics. We will cover step-by-step concepts to help you build a strong understanding before moving on to the advanced practical modules.
                    </p>

                    <hr class="my-4" style="color: #cbd5e1;">

                    <h5 class="fw-bold mb-3" style="color: var(--theme-navy);">Resources & Downloads</h5>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="#" class="btn btn-light border btn-sm text-dark">
                            <i class="fa-solid fa-file-pdf text-danger me-2"></i> Lecture Notes.pdf
                        </a>
                        <a href="#" class="btn btn-light border btn-sm text-dark">
                            <i class="fa-solid fa-file-lines text-primary me-2"></i> Assignment Guide.docx
                        </a>
                    </div>
                </div>

                <!-- Navigation Buttons -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <button class="btn btn-secondary btn-sm px-4 py-2" disabled>
                        <i class="fa fa-chevron-left me-1"></i> Previous Module
                    </button>
                    <a href="#" class="btn btn-theme-red btn-sm px-4 py-2">
                        Next Module <i class="fa fa-chevron-right ms-1"></i>
                    </a>
                </div>

            </div>

            <!-- RIGHT: Lesson Playlist Sidebar -->
            <div class="col-lg-4 col-12">
                <div class="content-card overflow-hidden">
                    <div class="p-3 border-bottom bg-light">
                        <h6 class="fw-bold mb-0" style="color: var(--theme-navy);">
                            <i class="fa-solid fa-list-ul me-2" style="color: var(--theme-red);"></i> Course Playlist
                        </h6>
                    </div>
                    
                    <ul class="list-group list-group-flush lesson-list">
                        <li class="list-group-item active d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fa-solid fa-circle-play me-2"></i>
                                <span>1. Introduction to Course</span>
                            </div>
                            <span class="badge bg-danger rounded-pill">10 mins</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fa-regular fa-circle-play me-2 text-muted"></i>
                                <span>2. Core Concepts Explained</span>
                            </div>
                            <span class="badge bg-secondary rounded-pill">15 mins</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fa-regular fa-circle-play me-2 text-muted"></i>
                                <span>3. Practical Application</span>
                            </div>
                            <span class="badge bg-secondary rounded-pill">20 mins</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fa-solid fa-lock me-2 text-muted"></i>
                                <span class="text-muted">4. Summary & Quiz</span>
                            </div>
                            <span class="badge bg-light text-dark border">Locked</span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

    </div>
</div>

@endsection