@extends('layouts.app')

@section('title', env('APP_NAME') . ' - ' . __('shop.shop_title'))

@section('content')
<!-- Breadcrumb -->
<div class="ht__bradcaump__area mb-5" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap_small">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h2 class="bradcaump-title">{{ __('shop.shop') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Shop content -->
<section class="htc__shop__sidebar bg__white ptb--30">
    <div class="container">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-lg-3 col-xl-3 col-md-12 col-12">
                @include('shop.partials.sidebar', ['categories' => $categories])
            </div>

            <!-- Product list -->
            <div class="col-lg-9 col-xl-9 col-md-12 col-12 smt-30">
                <div class="shop__grid__view__wrap another-product-style">
                    <div role="tabpanel" id="grid-view" class="single-grid-view tab-pane fade show active clearfix">
                        @include('shop.partials.product-list', ['products' => $products])
                    </div>
                </div>
                <div class="mt-4 d-flex justify-content-center">
                    {{ $products->links('vendor.pagination.bootstrap-5') }}
                </div>
            </div>
        </div>

    </div>

</section>

<div id="quickview-wrapper">
    <!-- Modal -->
    <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg modal-dialog-centered modal__container1" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="modal-product1 row">
                        <!-- Start product images -->
                        <div class="col-md-5 product-images1">
                            <div class="main-image images">
                                <img alt="" src="">
                            </div>
                        </div>
                        <!-- end product images -->
                        <div class="col-md-7 product-info">
                            <div class="price-box-3">
                                <div class="s-price-box">
                                    <span class="new-price"></span>
                                    <span class="old-price"></span>
                                </div>
                            </div>
                            <div class="quick-desc">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                            <div class="addtocart-btn">
                                <a href="#">Add to cart</a>
                            </div>
                        </div><!-- .product-info -->
                    </div><!-- .modal-product -->
                </div><!-- .modal-body -->
            </div><!-- .modal-content -->
        </div><!-- .modal-dialog -->
    </div>
    <!-- END Modal -->
</div>

<x-site.toasts message="{{ __('shop.product_added') }}" />

@endsection

@section('scripts')
<script src="{{ asset('assets/js/product.js') }}"></script>
@endsection