@extends('layouts.studentportalnav')

@section('title', 'My Courses & Modules')

@section('content')

<style>
:root {
    --theme-navy: #2D355B;
    --theme-red: #822424;
    --bg-light: #F6F6F6;
    --white: #ffffff;
}
body { background: var(--bg-light); font-family: 'Segoe UI', sans-serif; }
.course-header {
    background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%);
    color: var(--white);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 5px solid var(--theme-red);
}
.module-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: var(--white);
    transition: all 0.3s ease;
}
.semester-badge {
    background-color: var(--theme-navy);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
}
</style>

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

        <h3 class="fw-bold mb-4" style="color: var(--theme-navy);">My Assigned Courses</h3>

        @if(count($courses) > 0)
            @foreach($courses as $courseId => $courseItems)
                @php 
                    $firstItem = $courseItems->first(); 
                @endphp

                <!-- Course Title Block -->
                <div class="course-header mt-4">
                    <h3 class="fw-bold mb-1">{{ $firstItem->course_title }}</h3>
                    <p class="mb-0 opacity-75">{{ $firstItem->course_code }}</p>
                </div>

                <!-- Modules List under this Course -->
                <h5 class="fw-bold mb-3 ms-2" style="color: var(--theme-navy);">Modules</h5>
                
                <div class="row g-3">
                    @foreach($courseItems as $index => $module)
                        @if($module->module_id)
                            <div class="col-12">
                                <div class="card module-card p-3 shadow-sm">
                                    <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
                                            
                                            <h6 class="fw-bold text-dark mb-1">
                                                Module {{ $index + 1 }}: {{ $module->module_title }}
                                            </h6>

                                            <p class="text-muted small mb-0">
                                                {{ $module->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>
                        @else
                            <div class="col-12">
                                <div class="alert alert-light border">No modules found for this course.</div>
                            </div>
                        @endif
                    @endforeach
                </div>
            @endforeach
        @else
            <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 Courses Assigned</h5>
                <p class="text-muted mb-0">There are no courses currently assigned to your profile.</p>
            </div>
        @endif

    </div>
</div>

@endsection