@extends('frontend.v2.layout.app')
@section('content')
    <div class="container my-5">
        
        <!-- Page Header -->
        <div class="row">
            <div class="col-12">
                <div class="card text-white bg-white shadow text-center mb-4">
                    <div class="card-body">
                        <h1 class="display-5">Courses</h1>
                    </div>
                </div>
            </div>
        </div>

        <!-- Courses Grid -->
        <div class="row">
            @forelse($courses as $course)
                <div class="col-md-4 mb-4">
                    <div class="card h-100 shadow">
                        <img src="{{ asset($course->image ?? 'default-course.jpg') }}" class="card-img-top" alt="{{ $course->title }}" style="height: 200px; object-fit: cover;">
                        <div class="card-body text-center">
                            <h5 class="card-title">{{ $course->title }}</h5>
                            <p class="mb-1 text-muted"><del>Regular Fee: {{ number_format($course->regular_course_fee, 2) }} Tk</del></p>
                            <p class="mb-1 text-danger">Discount: {{ number_format($course->discount_fee ?? 0, 2) }} Tk</p>
                            <p class="mb-3 fw-bold text-success">
                                Current Fee: {{ number_format(($course->regular_course_fee ?? 0) - ($course->discount_fee ?? 0), 2) }} Tk
                            </p>
                                                        <a href="{{ route('show.admission') }}" class="btn btn-primary">Enroll Now</a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center">
                    <p>No courses available at the moment.</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection