@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <!-- breadcrumb area start here  -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Product Collections') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('shop') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Product Collections') }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end here  -->

    <!-- Product Area Start -->
    <div class="product-area section">
        <div class="container">
            {{-- <div class="rscnProductBox">
                <img src="{{asset('frontend/assets/images/treatment.png')}}" class="rscnProductImg">
                <div class="rscnProductContentBox">
                    <div class="rscnProductTit">Soap</div>
                    <div class="rscnProductTxt">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus.</div>
                </div>
            </div> --}}
            <div class="row">
                <div class="product-section-top">
                    <div class="row align-items-center">
                        <div class="col-md-3">
                            <div class="product-section-top-left">
                                <button class="sidebar-filter d-block d-lg-none" id="showCanvasSearch" type="button" data-bs-toggle="offcanvas"
                                    data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                                    Filter <img src=" {{ asset('/frontend/assets/images/angle-down.svg') }}"
                                        alt="angle-down">
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4">
                    <div class="sidebar-widget-area mobile-sidebar">
                        <div class="sidebar-widget-header d-block d-lg-none">
                            <div class="widget-header-wrap">
                                <h5 class="offcanvas-title">{{ __('Filter') }}</h5>
                                <button type="button" class="btn-close text-reset sidebar-close"></button>
                            </div>
                        </div>

                        {{-- to be worked on the following search field after a time of period depending on Melhem's request --}}

                        <div class="single-widget categories-widget pb-5">
                            <div class="widget-title rscnUpdatedWidget-title">{{ __('Search Here') }}</div>
                            <div class="input-group rounded">
                                <input type="text" name="search" id="search" class="form-control rounded"
                                    placeholder="Search..." aria-label="Search" aria-describedby="search-addon" />
                            </div>
                        </div>
                        <div class="single-widget categories-widget">
                            <h3 class="widget-title rscnUpdatedWidget-title">{{ __('Categories') }}</h3>
                            <div class="categories-list">
                                @foreach ($category as $cateogories)
                                    @if (productCategoryCount($cateogories->id) > 0)
                                        <div class="single-categorie">
                                            <div class="categorie-left">
                                                <input class="form-check-input catIds" name="catIds[]"
                                                    id="cat-{{ $cateogories->id }}" type="checkbox"
                                                    value="{{ $cateogories->id }}">
                                                <label for="cat-{{ $cateogories->id }}"
                                                    class="form-check-label rscnUpdatedLabel">{{ langConverter($cateogories->en_Category_Name, $cateogories->fr_Category_Name) }}</label>
                                            </div>
                                            <span
                                                class="categories-count">{{ productCategoryCount($cateogories->id) }}</span>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        <div class="single-widget price-widget">
                            <h3 class="widget-title rscnUpdatedWidget-title">{{ __('Price') }}</h3>
                            <form>
                                <div class="price-wrap">
                                    <div class="price-wrap-left">
                                        <div class="single-price">
                                            <input type="number" class="form-control" id="minPrice" name="min_price"
                                                placeholder="{{ __('$ Min') }}" min="0.00" step="0.1" />
                                        </div>
                                        <div class="single-price">
                                            <input type="number" class="form-control" id="maxPrice" name="max_price"
                                                min="1" placeholder="{{ __('$ Max') }}" step="0.1" />
                                        </div>
                                        {{-- <button type="button" class="price-submit PriceSubmit {{ (app()->getLocale() == 'en') ? '' : 'me-3' }}"><i class="fas fa-play"></i></button> --}}
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{-- to be worked on the following filer btn after a time of period depending on Melhem's request --}}

                        <button type="submit" class="filter-btn-1 border-0 productSubmit">{{ __('Filter') }}</button>



                    </div>
                </div>
                <div class="col-xl-9 col-lg-8">
                    <div id="filterProduct">
                        <div class="product-list">
                            <div class="row">
                                @foreach ($products as $product)
                                    <div class="col-xl-4 col-lg-6 col-md-4 col-sm-6">
                                        <div class="single-grid-product">
                                            <div class="product-top rscnUpdatedProduct-top rscnUpdatedProduct2-top">
                                                {{-- <a href="{{ route('single.product', $product->en_Product_Slug) }}"
                                                    class="rscnUpdatedProduct-img"><img
                                                        class="product-thumbnal rscnUpdatedProduct-thumbnal"
                                                        src="{{ asset(ProductImage() . $product->Primary_Image) }}"
                                                        alt="product" /></a> --}}
                                                <a href="{{ route('single.product', $product->en_Product_Slug) }}"
                                                    class="rscnUpdatedProduct-img"><img
                                                        class="product-thumbnal rscnUpdatedProduct-thumbnal updated-product-img-slider"
                                                        src="{{ asset($product->primary_image_medium) }}"
                                                        alt="product" /></a>
                                                <ul class="prdouct-btn-wrapper rscnUpdatedPrdouct-btn-wrapper">
                                                    <li class="single-product-btn">
                                                        <a class="product-btn rscnUpdatedPrdouct-btn CompareList"
                                                            data-id="{{ $product->id }}"
                                                            title="{{ __('Add To Compare') }}"><i
                                                                class="far fa-eye"></i></a>
                                                    </li>
                                                    <li class="single-product-btn">
                                                        <a class="product-btn rscnUpdatedPrdouct-btn MyWishList"
                                                            data-id="{{ $product->id }}"
                                                            title="{{ __('Add To Wishlist') }}"><i
                                                                class="icon flaticon-like"></i></a>
                                                    </li>
                                                </ul>

                                                    @if ($product->Quantity != 0)
                                                        <a href="javascript:void(0)" title="{{ __('Add to cart') }}"
                                                            class="add-cart rscnUpdatedAddCart addCart"
                                                            data-id="{{ $product->id }}">
                                                            <i class="icon fas fa-plus"></i>
                                                            {{ __('Add To Cart') }}
                                                    @else
                                                        <a href="javascript:void(0)" title="{{ __('Add to cart') }}"
                                                            class="add-cart rscnUpdatedAddCart addCart"
                                                            style="pointer-events: none; cursor: default; color: #848484;"
                                                            data-id="{{ $product->id }}">
                                                            {{ __('Out Of Stock') }}
                                                    @endif
                                                </a>

                                                <div class="product-info rscnUpdatedProduct-info text-center">
                                                    <input type="hidden" name="quantity" value="1"
                                                        id="product_quantity">
                                                    <h3 class="product-name rscnUpdatedProduct-name mb-3">
                                                        <a class="product-link"
                                                            href="{{ route('single.product', $product->en_Product_Slug) }}">{{ langConverter($product->en_Product_Name, $product->fr_Product_Name) }}</a>
                                                    </h3>
                                                    <!-- This is server side code. User can not modify it. -->
                                                    {!! productReview($product->id) !!}
                                                    <div class="product-price mb-4">
                                                        <span
                                                            @if ($product->Discount > 0) class="regular-price rscnUpdatedProductPrice" @else class="price rscnUpdatedProductPrice" @endif>{{ currencyConverter($product->Price) }}
                                                        </span>
                                                        @if ($product->Discount > 0)
                                                            <span
                                                                class="price rscnUpdatedProductPrice">{{ currencyConverter($product->Discount_Price) }}</span>
                                                        @endif
                                                    </div>

                                                    <input type="hidden" name="quantity" value="1"
                                                        id="product_quantity">

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            {{ $products->links('vendor.pagination.careers') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- For Mobile Filter Sidebar Start -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">{{ __('Filter') }}</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="sidebar-widget-area">
                <div class="single-widget categories-widget pb-5">
                    <div class="widget-title rscnUpdatedWidget-title">{{ __('Search Here') }}</div>
                    <div class="input-group rounded">
                        <input type="text" name="search" id="searchMobile" class="form-control rounded"
                            placeholder="Search..." aria-label="Search" aria-describedby="search-addon" />
                    </div>
                </div>
                <div class="single-widget categories-widget">
                    <h3 class="widget-title rscnUpdatedWidget-title">{{ __('Categories') }}</h3>
                    <div class="categories-list">
                        @foreach ($category as $cateogories)
                            @if (productCategoryCount($cateogories->id) > 0)
                                <div class="single-categorie">
                                    <div class="categorie-left">
                                        <input class="form-check-input catIds" name="catIds[]"
                                            id="cat-{{ $cateogories->id }}" type="checkbox"
                                            value="{{ $cateogories->id }}">
                                        <label for="cat-{{ $cateogories->id }}"
                                            class="form-check-label rscnUpdatedLabel">{{ langConverter($cateogories->en_Category_Name, $cateogories->fr_Category_Name) }}</label>
                                    </div>
                                    <span class="categories-count">{{ productCategoryCount($cateogories->id) }}</span>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
                <div class="single-widget price-widget">
                    <h3 class="widget-title rscnUpdatedWidget-title">{{ __('Price') }}</h3>
                        <div class="price-wrap">
                            <div class="price-wrap-left">
                                <div class="single-price">
                                    <input type="number" class="form-control" id="minPriceMobile" name="min_price"
                                        placeholder="{{ __('$ Min') }}" min="0.00" step="0.1" />
                                </div>
                                <div class="single-price">
                                    <input type="number" class="form-control" id="maxPriceMobile" name="max_price"
                                        min="1" placeholder="{{ __('$ Max') }}" step="0.1" />
                                </div>
                                {{-- <button type="button" class="price-submit PriceSubmit {{ (app()->getLocale() == 'en') ? '' : 'me-3' }}"><i class="fas fa-play"></i></button> --}}
                            </div>
                        </div>
                </div>
                <button type="submit" class="filter-btn-1 border-0 productSubmit" data-bs-dismiss="offcanvas">{{ __('Filter') }}</button>

            </div>
        </div>
    </div>
    <!-- For Mobile Filter Sidebar End -->

    <!-- Product Area End -->
    <div id="shortingUrl" data-url="{{ route('product.shorting') }}"></div>
    <div id="checkCategoryFilter" data-url="{{ route('product.filtering') }}"></div>

    <div id="checkCategoryFilter" data-url="{{ route('product.filtering') }}"></div>
    {{-- <div id="checkColorFilter" data-url="{{ route('product.filtering') }}"></div> --}}
    {{-- <div id="checkBrandFilter" data-url="{{ route('product.filtering') }}"></div> --}}
    {{-- <div id="checkSizeFilter" data-url="{{ route('product.filtering') }}"></div> --}}
    <div id="searchWidgetFilter" data-url="{{ route('product.filtering') }}"></div>
    <div id="minMaxPriceFilter" data-url="{{ route('product.filtering') }}"></div>

    <div id="AddToCompareItemUrl" data-url="{{ route('compare.add') }}"></div>
    <div id="AddToCartIntoSession" data-url="{{ route('add.to.cart') }}"></div>
    <div id="productWishlistUrl" data-url="{{ route('wishlist.add') }}"></div>
    <div id="productImgAsset" data-url="{{ asset(ProductImage()) }}"></div>
    <script type="text/javascript">
        $(document).ready(function() {
            //shared variable
            var max = 0,
                $els = $('.product-area .product-name');
            console.log($els);
            $els.each(function() {
                max = Math.max($(this).height(), max); //use height method from jQuery
                console.log(max)
            });
            $els.height(max)
        });
    </script>
    @push('post_script')
        <script src="{{ asset('frontend/assets/js/pages/product.js') }}"></script>
    @endpush()
@endsection