@extends('layouts.studentportalnav')

@section('title', 'Course Modules')

@section('content')

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

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

.module-header {
    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%);
    color: var(--white);
    border-radius: 16px; 
    padding: 30px;
    margin-bottom: 25px;
    border-left: 5px solid var(--theme-red);
}

.module-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.module-card:hover {
    transform: translateY(-2px);
    border-color: var(--theme-navy);
}

.semester-badge {
    background-color: var(--theme-navy);
    color: #fff;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
}
</style>

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

        <!-- Back Button -->
        <a href="{{ route('mycourse') }}" class="btn btn-outline-secondary btn-sm mb-3">
            <i class="fa fa-arrow-left me-1"></i> Back to My Courses
        </a>

        <!-- Course Header -->
        <div class="module-header">
            <h2 class="fw-bold mb-1">{{ $course->title ?? $course->name ?? 'Course Modules' }}</h2>
            <p class="mb-0 opacity-75">{{ $course->course_code ?? '' }} {{ isset($course->desc) ? '| '.$course->desc : '' }}</p>
        </div>

        <h4 class="fw-bold mb-4" style="color: var(--theme-navy);">Modules List</h4>

        @if(isset($modules) && count($modules) > 0)
            <div class="row g-3">
                @foreach($modules as $index => $module)
                    <div class="col-12">
                        <div class="card module-card p-4">
                            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                                <div>
                                    @if(!empty($module->semester))
                                        <span class="semester-badge mb-2 d-inline-block">
                                            Semester {{ $module->semester }}
                                        </span>
                                    @endif
                                    
                                    <h5 class="fw-bold text-dark mb-2">
                                        Module {{ $index + 1 }}: {{ $module->title }}
                                    </h5>

                                    <p class="text-muted small mb-0">
                                        {{ $module->description ?? 'No description provided.' }}
                                    </p>
                                </div>
                                <div>
                                    <a href="#" class="btn btn-sm text-white px-3 py-2" style="background-color: var(--theme-red); border-radius: 6px;">
                                        View Content <i class="fa fa-chevron-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <!-- Empty State -->
            <div class="bg-white p-5 text-center rounded-3 border">
                <i class="fas fa-book-open fa-3x text-muted mb-3"></i>
                <h5 class="fw-bold">No Modules Found</h5>
                <p class="text-muted mb-0">There are no modules found for this course.</p>
            </div>
        @endif

    </div>
</div>

@endsection