@extends('frontend.frontend_layout')
@section('menu') active @endsection
@section('content')
<section class="pt-150 menu shop-menu" id="shopmenutopbar" style="padding-bottom: 0px">
    <div class="text-center">
        <div class="row">
            <div class="col-lg-12 d-flex justify-content-center">
                <ul >
                    <li class="shop-menu-li"><a href="#popular-items">Popular Items</a></li>
                    @foreach ($categories as $category)
                    <li class="shop-menu-li"><a href="#{{ $category->slug }}">{{ $category->name }}</a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>
<main id="main">
    <!-- ======= Section ======= -->
    
    
    <section class="populer-section category-box pb-0" id="popular-items">
        <div class="container">     
            <h5 style="font-weight: 700; margin-bottom: 40px;">Popular Items</h5>       
            <div class="row menu-container" id="">                   
                @foreach ($popular_products as $product)
                <div class="col-lg-6 menu-item filter-{{ $product->category_id }} mb-4">
                    <div class="menu-main-content">
                        <div class="row">
                            <div class="col-md-8 col-8 m-auto">
                                <div class="menu-content">
                                    <a class="custom-product-name" href="{{ route('frontend.product-details', $product->slug) }}">{{ $product->name }}</a>
                                </div>
                                <div class="menu-ingredients mt-2">
                                    {!! $product->description !!}
                                </div>
                                <strong class="menu-price"><button type="button" product_id="{{ $product->id }}" quantity="1" class="quick-button addToCart" data-bs-toggle="modal" data-bs-target="#quickAddToCartModel">+ Quick Add</button> ${{ $product->price }}</strong>
                            </div>
            
                            <div class="col-md-4 col-4 m-auto">
                                @if (!empty($product->image) && file_exists($product->image))
                                <img src="{{ asset($product->image) }}" width="100%" class="single-product-image">
                                @else
                                <img src="{{ asset('common/no-image.jpg') }}" width="100%">
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- <section class="main-shop-box category-box pb-0" id="popular-items">
        <div class="container">     
            <h5 style="font-weight: 700; margin-bottom: 40px; margin-top: 20px">Popular Items</h5>       
            <div class="row menu-container" id="">                   
                @foreach ($popular_products as $product)
                <div class="col-lg-6 menu-item filter-{{ $product->category_id }} mb-4">
                    <div class="menu-main-content">
                        <div class="row">
                            <div class="col-md-8 col-8 m-auto">
                                <div class="menu-content">
                                    <a class="custom-product-name" href="{{ route('frontend.product-details', $product->slug) }}">{{ $product->name }}</a>
                                </div>
                                <div class="menu-ingredients mt-2">
                                    {!! $product->description !!}
                                </div>
                                <strong class="menu-price"><button type="button" product_id="{{ $product->id }}" quantity="1" class="quick-button addToCart" data-bs-toggle="modal" data-bs-target="#quickAddToCartModel">+ Quick Add</button> ${{ $product->price }}</strong>
                            </div>
            
                            <div class="col-md-4 col-4 m-auto">
                                @if (!empty($product->image) && file_exists($product->image))
                                <img src="{{ asset($product->image) }}" width="100%" class="single-product-image">
                                @else
                                <img src="{{ asset('common/no-image.jpg') }}" width="100%">
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="main-shop-box category-box pb-0" id="popular-items">
        <div class="container">     
            <h5 style="font-weight: 700; margin-bottom: 40px; margin-top: 20px">Popular Items</h5>       
            <div class="row menu-container" id="">                   
                @foreach ($popular_products as $product)
                <div class="col-lg-6 menu-item filter-{{ $product->category_id }} mb-4">
                    <div class="menu-main-content">
                        <div class="row">
                            <div class="col-md-8 col-8 m-auto">
                                <div class="menu-content">
                                    <a class="custom-product-name" href="{{ route('frontend.product-details', $product->slug) }}">{{ $product->name }}</a>
                                </div>
                                <div class="menu-ingredients mt-2">
                                    {!! $product->description !!}
                                </div>
                                <strong class="menu-price"><button type="button" product_id="{{ $product->id }}" quantity="1" class="quick-button addToCart" data-bs-toggle="modal" data-bs-target="#quickAddToCartModel">+ Quick Add</button> ${{ $product->price }}</strong>
                            </div>
            
                            <div class="col-md-4 col-4 m-auto">
                                @if (!empty($product->image) && file_exists($product->image))
                                <img src="{{ asset($product->image) }}" width="100%" class="single-product-image">
                                @else
                                <img src="{{ asset('common/no-image.jpg') }}" width="100%">
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section> --}}

    @foreach ($categories as $category)
    <section class="main-shop-box category-box pb-0" id="{{ $category->slug }}">
        <div class="container">            
                <h5 style="font-weight: 700; margin-bottom: 40px;">{{ $category->name }}</h5>
                <div class="row menu-container" id="">
                    @php
                        $categoryProducts = App\Models\Product::where('category_id', $category->id)->orderBy('id', 'desc')->get();
                    @endphp
                    @foreach ($categoryProducts as $product)
                    <div class="col-lg-6 menu-item filter-{{ $product->category_id }} mb-4">
                        <div class="menu-main-content">
                            <div class="row">
                                <div class="col-md-8 col-8 m-auto">
                                    <div class="menu-content">
                                        <a class="custom-product-name" href="{{ route('frontend.product-details', $product->slug) }}">{{
                                            $product->name }}</a>
                                    </div>
                                    <div class="menu-ingredients mt-2">
                                        {!! $product->description !!}
                                    </div>
                                    <strong class="menu-price"><button type="button" product_id="{{ $product->id }}" quantity="1" class="quick-button addToCart" data-bs-toggle="modal" data-bs-target="#quickAddToCartModel">+ Quick Add</button> ${{ $product->price }}</strong>
                                </div>
                
                                <div class="col-md-4 col-4 m-auto">
                                    @if (!empty($product->image) && file_exists($product->image))
                                    <img src="{{ asset($product->image) }}" width="100%" class="single-product-image">
                                    @else
                                    <img src="{{ asset('common/no-image.jpg') }}" width="100%">
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endforeach
    <!-- End Section -->
</main>
<!-- End #main -->
@endsection