<x-main.header />

<main class="shop-main">
    <section class="banner-inner" style="background-image: url({{ asset('storage/images/'.$banner->banner_image) }});">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-11 col-12">
                    <div class="banner-txt">
                        <div class="col-lg-7 col-12 pe-lg-5">
                            <h1 class="theme-h1">{!! $banner->banner_description !!}</h1>
                            <ul>
                                <li><a href="{{ url('/') }}">Home</a></li>
                                <li>{{ $banner->banner_heading }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="shop-sec sec-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-11 col-12">
                    <div class="row align-items-center">
                        <div class="col-md-3 col-12">
                            <!-- <h4 class="shop-h4">price filter</h4> -->
                        </div>
                        <div class="col-md-9 col-12">
                            <ul class="layout-setup">
                                <li>{{ count($products) }} products found</li>
                                <!-- <li>sort by</li>
                                <li>
                                    <select>
                                        <option value="Default">Default</option>
                                        <option value="Default">Default</option>
                                        <option value="Default">Default</option>
                                        <option value="Default">Default</option>
                                    </select>
                                </li> -->
                                <!-- <li>Show:
                                    <ul>
                                        <li><a class="active" href="javascript:;">12</a></li>
                                        <li><a href="javascript:;">24</a></li>
                                        <li><a href="javascript:;">36</a></li>
                                    </ul>
                                </li>
                                <li>viewport:
                                    <ul>
                                        <li>
                                            <a title="grid view" class="active" href="javascript:;"><i
                                                    class="fa-solid fa-grid"></i></a>
                                        </li>
                                        <li>
                                            <a title="grid view" href="javascript:;"><i
                                                    class="fa-solid fa-grid-2"></i></a>
                                        </li>
                                        <li>
                                            <a title="list view" href="javascript:;"><i
                                                    class="fa-solid fa-list"></i></a>
                                        </li>
                                    </ul>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 col-12 pe-xl-5 pe-lg-3">
                            <!-- <div class="price-range"></div> -->
                            <!-- <label class="prc-lbl">Range: <span></span></label> -->
                            <h5 class="shop-h5">shop by category</h5>
                            <ul class="categories">
                                <li><a href="{{ url('/shop') }}">All</a></li>
                                @foreach($shopbycat as $key => $cat)
                                <!-- <li><a class="active" href="javascript:;">All</a></li> -->
                                <li><a href="{{ url('/shop_category/'.$cat->category_id) }}">{{ $cat->category_heading }}</a></li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="col-md-9 col-12">
                            <div class="products-listing">
                                <div class="row gx-3 gy-4">
                                    @foreach($products as $key => $pro)
                                    <div class="col-lg-4 col-md-6 col-12">
                                        <a href="{{ url('/product_detail'.$pro->product_id) }}">
                                            <div class="product-card">
                                                <div class="prd-img">
                                                    @if($pro->product_category_id == 3)
                                                        <img class="img-fluid" id="salebadgeshop" src="{{ asset('asset/front_asset/images/sale.png') }}" alt="">
                                                    @elseif($pro->product_category_id == 5)
                                                        <img class="img-fluid" id="comingsoonshop" src="{{ asset('storage/images/coming_soon.png') }}" alt="">
                                                    @endif
                                                    <img class="img-fluid" src="{{ asset('storage/images/'.$pro->product_image) }}" alt="">
                                                </div>
                                                <div class="prd-cntnt">
                                                    <h5 class="theme-h5">{{ $pro->product_front_title }}</h5>
                                                    @if(auth::user())
                                                        @if($pro->product_category_id == 3 || $pro->product_category_id == 5)
                                                            <h5 class="prd-prc">${{ $pro->product_selling_price }}.00</h5>
                                                        @else
                                                            <!--<h5 class="prd-prc">Starting at ${{ $pro->product_selling_price }}</h5>-->
                                                            <h5 class="prd-prc">{{ $pro->product_sub_heading }}</h5>
                                                        @endif
                                                    @else
                                                        @if($pro->product_category_id == 3 || $pro->product_category_id == 5)
                                                            <h5 class="prd-prc">${{ $pro->product_selling_price }}.00</h5>
                                                        @else
                                                            <!--<h5 class="prd-prc">Starting at ${{ $pro->product_origional_price }}</h5>-->
                                                            <h5 class="prd-prc">{{ $pro->product_sub_heading }}</h5>
                                                        @endif
                                                    @endif
                                                    <a href="{{ url('/product_detail'.$pro->product_id) }}" class="theme-btn">view details</a>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<x-main.footer />