@extends("Site.Layouts.blank")
@section ("content")

    <section class="relative">
        <img src="{{asset('site_assets/images/home_banner.webp')}}" alt="home_banner" class="w-full max-h-[300px] object-cover brightness-75">

        <div class="absolute inset-0 center-by-flex">
            <h2 class="text-white font-semibold text-4xl"> Chefshub Classes </h2>
        </div>

        <div class="absolute bottom-0 end-0  flex gap-4  mb-4 me-4">
            <a href="https://apps.apple.com/eg/app/chefshub/id6471243561" target="_blank">
                <img src="{{asset('site_assets/images/app_store.svg')}}" alt="app store" class="w-[130px] hover:scale-110 transition-all ">
            </a>
            <a href="https://play.google.com/store/apps/dev?id=7218349571555835639&hl=en" target="_blank">
                <img src="{{asset('site_assets/images/play_store.svg')}}" alt="play store" class="w-[130px] hover:scale-110 transition-all ">
            </a>
        </div>

    </section>

    <div class="bg-green-dark  ">

        <main class=" pt-5    ">

            <!-- *=*=*=*=*=*=*=*=*=* Section NEW COLLECTION *=*=*=*=*=*=*=*=*=* -->



            <section class="x-container">

                <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4">
                    @foreach($courses as $course)

                        <course-cart :course="{{$course}}"></course-cart>
                    @endforeach
                </div>

                <div class="text-center mx-auto table  my-10">
                    {{$courses->onEachSide(5)->links('pagination::tailwind')}}
                </div>
                <br><br>

            </section>

{{--            @include("Site.Layouts.footer_cart")--}}


        </main>
    </div> <!-- End bg-[....] -->

@endsection
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@if(session('error'))
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: "{{ session('error') }}"
            });
        });
    </script>
@endif