@extends('website.layout.master')

@section('title')
    Shop
@endsection

@section('content')

    <!-- Start Page Title -->
    <div class="page-title-area">
        <div class="container">
            <div class="page-title-content">
                <h2>Shop</h2>
                <ul>
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li>Shop</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- End Page Title -->

    <!-- Start Products Area -->
    <section class="products-area pt-100 pb-70">
        <div class="container">
            <!--<div class="products-filter-options">-->
            <!--    <div class="row align-items-center justify-content-center">-->
            <!--        <div class="col-lg-4 col-md-4">-->
            <!--            <div class="d-lg-flex d-md-flex align-items-center">-->
            <!--                <span class="sub-title"><a href="#" data-bs-toggle="modal" data-bs-target="#productsFilterModal"><i class='bx bx-filter-alt'></i> Filter</a></span>-->

            <!--                <span class="sub-title d-none d-lg-block d-md-block">View:</span>-->

            <!--                <div class="view-list-row d-none d-lg-block d-md-block">-->
            <!--                    <div class="view-column">-->
            <!--                        <a href="#" class="icon-view-two">-->
            <!--                            <span></span>-->
            <!--                            <span></span>-->
            <!--                        </a>-->

            <!--                        <a href="#" class="icon-view-three active">-->
            <!--                            <span></span>-->
            <!--                            <span></span>-->
            <!--                            <span></span>-->
            <!--                        </a>-->

            <!--                        <a href="#" class="icon-view-four">-->
            <!--                            <span></span>-->
            <!--                            <span></span>-->
            <!--                            <span></span>-->
            <!--                            <span></span>-->
            <!--                        </a>-->

            <!--                        <a href="#" class="view-grid-switch">-->
            <!--                            <span></span>-->
            <!--                            <span></span>-->
            <!--                        </a>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </div>-->

            <!--        <div class="col-lg-4 col-md-4">-->
            <!--            <p>Showing 1 – 18 of 100</p>-->
            <!--        </div>-->

            <!--        <div class="col-lg-4 col-md-4">-->
            <!--            <div class="products-ordering-list">-->
            <!--                <select>-->
            <!--                    <option>Sort by Price: Low to High</option>-->
            <!--                    <option>Default Sorting</option>-->
            <!--                    <option>Sort by Popularity</option>-->
            <!--                    <option>Sort by Average Rating</option>-->
            <!--                    <option>Sort by Latest</option>-->
            <!--                    <option>Sort by Price: High to Low</option>-->
            <!--                </select>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->

            <div id="products-collections-filter" class="row">

                @forelse($products as $product)

                    <div class="col-lg-4 col-md-6 col-sm-6 products-col-item">
                        <div class="products-box">
                            <div class="products-image">
                                <a href="{{route('details',[$product->slug])}}">
                                    <img src="{{ URL::asset('admin/assets/uploads/'.$product->image) }}"
                                         class="main-image"
                                         alt="image" style="width: 100%;min-height: 430px;max-height: 430px">
                                    <img src="{{ URL::asset('admin/assets/uploads/'.$product->image) }}"
                                         class="hover-image" alt="image"
                                         style="width: 100%;min-height: 430px;max-height: 430px">
                                </a>

                                <div class="products-button">
                                    <ul>
                                        <li>
                                            <div class="quick-view-btn">
                                                <a href="{{route('details',[$product->slug])}}">
                                                    <i class='bx bx-search-alt'></i>
                                                    <span class="tooltip-label">View Detail</span>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="products-content">
                                <span class="category">{{ $product->category->name }}</span>
                                <h3><a href="{{route('details',[$product->slug])}}">{{ $product->name }}</a></h3>

                                <div class="price">
                                    @if(!empty($product->cut_price))
                                        <span class="old-price">{{ "$".$product->cut_price }}</span>
                                    @endif
                                    <span class="new-price">{{ "$".$product->price }}</span>
                                </div>
                                <a href="{{route('details',[$product->slug])}}" class="add-to-cart">View Details</a>
                            </div>
                        </div>
                    </div>

                @empty
                    <center><h1 style="color: red">No Products Added.</h1></center>
                @endforelse
            </div>

            <div class="pagination-area text-center">
                @if ($products->lastPage() > 1)
                    @if($products->currentPage() == 1)
                        <a style="cursor: not-allowed" disabled="" class="prev page-numbers"><span
                                    class="fa bx bx-chevron-left"></span></a>
                    @else
                        <a href="{{ $products->url(1) }}" class="page-numbers"><span
                                    class="bx bx-chevron-left"></span></a>
                    @endif

                    @for ($i = 1; $i <= $products->lastPage(); $i++)
                        @if($products->currentPage() == $i)
                            <span class="page-numbers current" aria-current="page">{{ $i }}</span>
                        @else
                            <a href="{{ $products->url($i) }}" class="page-numbers">{{ $i }}</a>
                        @endif
                    @endfor

                    @if($products->currentPage() == $products->lastPage())
                        <a style="cursor: not-allowed" disabled="" class="next page-numbers"><i
                                    class='bx bx-chevron-right'></i></a>
                    @else
                        <a href="{{ $products->url($products->currentPage()+1) }}" class="next page-numbers"><i
                                    class='bx bx-chevron-right'></i></a>
                    @endif

                @endif
            </div>
        </div>
    </section>
    <!-- End Products Area -->


    <!-- Start Facility Area -->
    <section class="facility-area ">
        <div class="container">
            <div class="facility-slides owl-carousel owl-theme">
                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-tracking'></i>
                    </div>
                    <h3>Free Shipping</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-return'></i>
                    </div>
                    <h3>Easy Online Booking</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-shuffle'></i>
                    </div>
                    <h3>Authentic Moroccan Styles</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-sale'></i>
                    </div>
                    <h3>Flexible Rental Options</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-credit-card'></i>
                    </div>
                    <h3>Expert Style Assistance</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-location'></i>
                    </div>
                    <h3>Quality Guarantee Assured</h3>
                </div>

                <div class="single-facility-box">
                    <div class="icon">
                        <i class='flaticon-customer-service'></i>
                    </div>
                    <h3>Seamless Return Process</h3>
                </div>
            </div>
        </div>
    </section>
    <!-- End Facility Area -->

@endsection

@section('script')
    <script src="{{ URL::asset('website/js/vendor/waypoints.js') }}"></script>

@endsection