@extends('layout.app')

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

@section('content')
<section class="container">
    <nav class="pt-4 mt-lg-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ url('/') }}"><i class="bx bx-home-alt fs-lg me-1"></i>Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$course->name}} Course Details</li>
        </ol>
    </nav>

    <div class="d-lg-flex align-items-center justify-content-between py-4 mt-lg-2">
        <h1 class="me-3">Lectures</h1>
    </div>

    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 gx-3 gx-md-4 mt-n2 mt-sm-0">
        @forelse($lectures as $lecture)
        <div class="col pb-1 pb-lg-3 mb-4">
            <article class="card h-100 border-0 shadow-sm">
                <div class="position-relative">
                    <a href="{{ route('lecturePage',['courseId'=>$course->id,'lectureId'=>$lecture->id]) }}" class="d-block position-absolute w-100 h-100 top-0 start-0"></a>
                    <img src="{{ asset('storage/' . $lecture->lecture_img) }}" class="card-img-top" alt="{{ $lecture->title }}">
                </div>
                <div class="card-body pb-3">
                    <h3 class="h5 mb-2"><a href="{{ route('lecturePage',['courseId'=>$course->id,'lectureId'=>$lecture->id]) }}">{{ $lecture->title }}</a></h3>
                    <p class="fs-sm mb-2">By {{ $lecture->teacher->name }}</p>
                    <p class="fs-lg fw-semibold text-primary mb-0">${{ $course->price }}</p>
                </div>
                <div class="card-footer d-flex align-items-center fs-sm text-muted py-4">
                    <div class="d-flex align-items-center me-4">
                        <i class="bx bx-time fs-xl me-1"></i> {{ $lecture->duration }} hours
                    </div>
                    <div class="d-flex align-items-center">
                        <i class="bx bx-like fs-xl me-1"></i> {{ $lecture->likes }} Likes
                    </div>
                </div>
            </article>
        </div>
        @empty
        <p>No lectures available for this course.</p>
        @endforelse
    </div>
</section>
@endsection