@extends('public.layout.app')
@section('title', 'Courses')

@section('body')
<section class="section pt-5">
    <div class="container">
        <div class="glass shadow-soft p-4 p-lg-5 mb-4">
            <div class="row g-4 align-items-end">
                <div class="col-lg-7">
                    <div class="badge-soft d-inline-flex align-items-center gap-2 mb-2">
                        <i class="fa-solid fa-book-open"></i> Course Catalogue
                    </div>
                    <h1 class="fw-bold mb-2">Courses connected to programs and semesters</h1>
                    <p class="text-muted2 mb-0">Browse course codes, credits, program relations, learning materials, assignments, and quizzes.</p>
                </div>
                <div class="col-lg-5">
                    <form method="GET" action="{{ route('front.courses.index') }}" class="row g-2">
                        <div class="col-sm-6"><input name="q" value="{{ $q }}" class="form-control" placeholder="Search course or code"></div>
                        <div class="col-sm-4">
                            <select name="program_id" class="form-select">
                                <option value="">All programs</option>
                                @foreach($programs as $program)
                                    <option value="{{ $program->id }}" @selected((string) $programId === (string) $program->id)>{{ $program->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-2 d-grid"><button class="btn btn-accent"><i class="fa-solid fa-filter"></i></button></div>
                    </form>
                </div>
            </div>
        </div>

        <div class="academic-showcase">
            <div class="academic-feature-card">
                <div class="academic-feature-image" style="background-image:url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=900&q=80')"></div>
                <div class="academic-feature-body">
                    <div class="academic-feature-icon"><i class="fa-solid fa-laptop-file"></i></div>
                    <h2>Online Courses</h2>
                    <p>Study through LMS materials, assignments, quizzes, and faculty guidance from anywhere.</p>
                    <ul class="academic-feature-list">
                        @foreach($courses->take(5) as $course)
                            <li>{{ $course->title }}</li>
                        @endforeach
                    </ul>
                    <a class="academic-feature-link" href="#course-list">Learn more <i class="fa-solid fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="academic-feature-card">
                <div class="academic-feature-image" style="background-image:url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=900&q=80')"></div>
                <div class="academic-feature-body">
                    <div class="academic-feature-icon"><i class="fa-solid fa-users"></i></div>
                    <h2>Guided Learning</h2>
                    <p>Courses connect students with teachers, assessments, downloadable resources, and academic progress tracking.</p>
                    <ul class="academic-feature-list">
                        <li>Course materials</li>
                        <li>Assignments</li>
                        <li>Quizzes</li>
                        <li>Teacher support</li>
                    </ul>
                    <a class="academic-feature-link" href="#course-list">Learn more <i class="fa-solid fa-arrow-right"></i></a>
                </div>
            </div>
        </div>

        <div class="row g-4" id="course-list">
            @forelse($courses as $course)
                <div class="col-md-6 col-xl-4">
                    <div class="card-soft shadow-soft p-4 h-100 hover-lift">
                        <div class="d-flex justify-content-between align-items-start gap-2 mb-3">
                            <span class="badge-soft">{{ $course->code ?? 'Course' }}</span>
                            <span class="text-muted2 small">{{ $course->credit_hours ? $course->credit_hours . ' credits' : 'Credits TBA' }}</span>
                        </div>
                        <h5 class="fw-bold">{{ $course->title }}</h5>
                        <p class="text-muted2 small mb-3">
                            {{ $course->semester?->program?->name ?? 'Program' }}
                            @if($course->semester) | {{ $course->semester->name }} @endif
                        </p>
                        @if($course->information)
                            <p class="text-muted2 small mb-3">{{ \Illuminate\Support\Str::limit(strip_tags($course->information), 130) }}</p>
                        @endif
                        <div class="d-flex gap-2">
                            <a href="{{ route('front.courses.show', $course->id) }}" class="btn btn-success-soft btn-sm">
                                Details <i class="fa-solid fa-arrow-right ms-1"></i>
                            </a>
                            @if($course->semester?->program)
                                <a href="{{ route('front.programs.show', $course->semester->program->id) }}" class="btn btn-info-soft btn-sm">Program</a>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12"><div class="alert alert-soft">No public courses found yet.</div></div>
            @endforelse
        </div>

        @if($courses->hasPages())
            <div class="d-flex justify-content-center mt-4">{{ $courses->links('pagination::bootstrap-4') }}</div>
        @endif
    </div>
</section>
@endsection