@extends('frontend.frontend_layout')
@section('home') active @endsection

@section('content')
<!-- ======= Hero Section ======= -->
<section id="hero">
    <div class="hero-container">
        <div id="heroCarousel" data-bs-interval="5000" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

            <div class="carousel-inner" role="listbox">
                <!-- Slide item -->
                @foreach ($sliders as $key => $slider)
                <div class="carousel-item  @if ($key == 0) active @endif"
                    style="background-image: url({{ asset($slider->image) }})">
                    <div class="carousel-container">
                        <div class="carousel-content">
                            <h2 class="animate__animated animate__fadeInDown">
                                <span>@isset($slider->title) {{ $slider->title }} @endisset</span>
                                @isset($slider->subtitle) {{ $slider->subtitle }}
                                @endisset
                            </h2>
                            <p class="animate__animated animate__fadeInUp">
                                @isset($slider->description)
                                {{ $slider->description }}
                                @endisset
                            </p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
            </a>

            <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
            </a>
        </div>
    </div>
</section>
<!-- End Hero -->

<main id="main">
    <!-- ======= Menu Section ======= -->
    <section id="menu" class="menu">
        <div class="container">
            <div class="section-title">
                <h2>Check our tasty <span>Menu</span></h2>
            </div>

            <div class="row">
                <div class="col-lg-12 d-flex justify-content-center">
                    <ul id="menu-flters">
                        <li class="getCategoryProducts filter-active" category_id="popular">Popular Items</li>
                        @foreach ($categories as $category)
                        <li class="getCategoryProducts" category_id="{{ $category->id }}">{{ $category->name }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="show_category_products">
                @include('frontend.show_category_products')
            </div>
    </section>
    <!-- End Menu Section -->

    <!-- ======= About Section ======= -->
    <section id="about" class="about">
        @include('frontend.includes.about-content')
    </section>
    <!-- End About Section -->

    <!-- ======= Specials Section ======= -->
    <section id="specials" class="specials">
        @include('frontend.includes.specials-content')
    </section>
    <!-- End Specials Section -->

    <!-- ======= Whu Us Section ======= -->
    <section id="why-us" class="why-us">
        <div class="container">
            <div class="section-title mb-2">
                <h2>Featuring</h2>
            </div>

            <div class="row">
                @foreach ($features as $key => $feature)
                <div class="col-lg-4">
                    <div class="box">
                        <span>0{{ $key + 1 }}</span>
                        <h4>{{ $feature->title }}</h4>
                        <p>
                            {{ $feature->description }}
                        </p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- End Whu Us Section -->

    <!-- ======= Testimonials Section ======= -->
    <section id="testimonials" class="testimonials">
        <div class="container position-relative">
            <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
                <div class="swiper-wrapper">
                    @foreach ($products as $product)
                    <div class="swiper-slide">
                        <div class="testimonial-item">
                            <div class="" style="width: 120px; height: 100px; border-radius: 100%; margin: 0 auto">
                                @if (!empty($product->image) && file_exists($product->image))
                                <img src="{{ asset($product->image) }}" class="testimonial-img"
                                    alt="{{ $product->name }}" width="100%" height="100%" />
                                @else
                                <img src="{{ asset('common/no-image.jpg') }}" class="testimonial-img"
                                    alt="{{ $product->name }}" width="100%" height="100%"  />
                                @endif
                            </div>
                            <h3>{{ $product->name }}</h3>
                            <div class="menu-ingredients mt-3">
                                {!! $product->description !!}
                            </div>
                            <div class="stars">
                                <strong class="menu-price text-white"> Price ${{ $product->price }}</strong>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    <!-- End testimonial item -->
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <!-- End Testimonials Section -->

    <!-- ======= Gallery Section ======= -->
    <section id="gallery" class="gallery">
        @include('frontend.includes.gallery-content')
    </section>
    <!-- End Gallery Section -->

    <!-- ======= Contact Section ======= -->
    <section id="contact" class="contact">
        <div class="container">
            <div class="section-title mb-2">
                <h2><span>Google</span> Map</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="map">
                        {!! $websiteSetting->google_map !!}
                    </div>
                </div>                
            </div>
        </div>
    </section>
    <!-- End Contact Section -->
</main>
<!-- End #main -->
@endsection