@extends('frontend.layouts.app')


@section('content')
<style>
    .demo-back {
        background-image: url("{{ asset('/frontend/assets/images/back.jpg') }}");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 600px;
        opacity: 90%;
    }

</style>


<section class="space-top space-extra2-bottom demo-back">
    <div class="container" style="margin-top: -90px;">
        @php
        $courses = \App\Models\Course::get();
        @endphp

        <div class="row justify-content-center p-0">
            <div class="col-xl-8 col-lg-8 col-md-12 mt-5" 
                style="margin: 0 auto; background: #fff; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 10px;">
                <!-- Header Section -->
                <div class="text-center d-flex flex-column align-items-center justify-content-center" style="height: auto;">
                    <img src="{{ asset('/frontend/assets/images/learning.png') }}" width="80px" class="mb-0" />
                    <h5 class="mt-1 mb-1">Check out our course</h5>
                    <p>Check out our website features, how our revision course works, and what to expect once you are signed up. This main courses contains the following...</p>
                </div>

                <!-- Courses Section -->
                <div class="row justify-content-center mb-3">
                    @forelse ($courses as $course)
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 mt-2 text-center">
                        <div style="padding: 10px; border: 1px solid #ddd; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; display: flex; justify-content: center; align-items: center;">
    <p style="margin: 0; text-align: center;">
        <a href="{{ route('frontend.pricing', ['name' => $course->name]) }}?id={{ $course->id }}" 
           style="text-decoration: none; color: #007bff;">
            {{ $course->name }}
        </a>
    </p>
</div>

                    </div>
                    @empty
                    <div class="col-12 mt-4 text-center">
                        <p>No courses available at the moment.</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>

@endsection