@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">
          {{ langConverter($category_m->en_Category_Name, $category_m->fr_Category_Name) }}
        </h2>
        <ul class="breadcrumb-pages">
          <li class="page-item"><a class="page-item-link" href="{{ route('shop') }}">{{ __('Home') }}</a>
          </li>
          <li class="page-item">
            {{ langConverter($category_m->en_Category_Name, $category_m->fr_Category_Name) }}
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- breadcrumb area end here  -->

  <!-- Product Area Start -->
  <div class="product-area section">
    <div class="container">
        <div class="rscnCategory-container" style='background-image: url("{{ asset($category_m->image_larg) }}");''>
            <div class="rscnCategory-box">
                <h2 class="rscnCategory-tit">
                    {{ langConverter($category_m->en_Category_Name, $category_m->fr_Category_Name) }}
                </h2>
                <p class="rscnCategory-txt mb-0">
                    {{ langConverter($category_m->en_Description, $category_m->fr_Description) }}
                </p>
            </div>
        </div>

        {{-- Category Slider --}}
        <div class="mb-5">
            <div class="six-sildes-slider">
                @foreach (Category_Des_Icon() as $item)
                    <a href="{{ route('category.product', $item->id) }}">
                        <div class="rscnCategorieWrap categorie-wrap">
                            <div class="categoryImgBox">
                                <img src="{{ asset(IMG_CATEGORY_PATH . $item->Category_Icon) }}" alt="{{ __('product') }}" class="rscnCategoryImg" />
                            </div>
                            <h3 class="categoryName">{{ langConverter($item->en_Category_Name, $item->fr_Category_Name) }}</h3>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
        {{-- /Category Slider --}}

        <div>
        {{-- <div class="product-section-top">
          <div class="row align-items-center">
            <div class="col-md-12">
              <div class="product-filter">
                <form>
                  <select class="form-select sortingFilter">
                    <option value="{{ route('all.product') }}">{{ __('Categories') }}</option>
                    @foreach (Category() as $item)
                      @if ($item->id == request()->id)
                        <option selected value="stop">
                          {{ langConverter($item->en_Category_Name, $item->fr_Category_Name) }}
                        </option>
                      @else
                        <option  value="{{ route('category.product', $item->id) }}">
                          {{ langConverter($item->en_Category_Name, $item->fr_Category_Name) }}
                        </option>
                      @endif
                    @endforeach
                  </select>
                </form>
              </div>
            </div>
          </div>
        </div> --}}
      <div class="sidebar-widget-area">
        {{-- <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> --}}
        {{-- <div class="single-widget categories-widget">
          <h3 class="widget-title rscnUpdatedWidget-title">{{ __('Categories') }}</h3>
          <div class="categories-list">
            @foreach ($category as $cateogories)
              <div class="single-categorie">
                <div class="categorie-left">
                  <input class="form-check-input CheckCategory" type="checkbox" value="{{ $cateogories->en_Category_Name }}">
                  <label 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>
            @endforeach
          </div>
        </div> --}}
        <div class="single-widget price-widget">
          <form>
            <div class="price-wrap row align-items-center">
                
                {{-- to be worked on the following commented search filed after a time of period depending on Melhem's request --}}

                {{-- <div class="col-md-3 col-12">
                    <div class="input-group rounded mb-2">
                        <input type="search" class="form-control rounded" placeholder="Search..." aria-label="Search" aria-describedby="search-addon" />
                    </div>
                </div> --}}
                <div class="col-1 rscn-price-title text-end mb-2">
                    <h3 class="widget-title rscnUpdatedWidget-title mb-0">{{ __('Price') }}</h3>    
                </div>
                <div class="col-md-3 col-sm-5">
                    <div class="single-price mb-2">
                      <input type="number" class="form-control" id="minPrice" name="min_price" placeholder="{{ __('Minimum') }}" min="0.1" />
                    </div>                    
                </div>
                <div class="col-md-3 col-sm-6"> 
                    <div class="single-price mb-2">
                      <input type="number" class="form-control" id="maxPrice" name="max_price" placeholder="{{ __('Maximum') }}" min="1" />
                    </div>
                </div>
                <div class="col-md-2 flex-content-jc mb-2 text-end">
                    <button type="button" class="updated-price-submit price-submit PriceSubmit px-3 py-2">{{__('Filter')}}</button>
                </div>
            </div>
          </form>
        </div>

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

        {{-- Number of results found --}}
        {{-- <div class="search-txt-1">8 Result Found ….</div> --}}
        {{-- / --}}

        {{-- If the search filter doesn’t have any result --}}
        {{-- <div class="text-center">
            <img src="{{ asset('frontend/assets/images/result-notFound.svg') }}">
            <div class="search-txt-1 mt-5">No Result Found ….</div>
        </div> --}}
        {{-- / --}}

      </div>
      <div id="filterProduct">
        <div class="product-list">
          <div class="row">
            @foreach ($products as $product)
              <div class="col-xl-3 col-lg-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>
                    <a href="javascript:void(0)" title="{{ __('Add to cart') }}"
                      class="add-cart rscnUpdatedAddCart addCart" data-id="{{ $product->id }}">{{ __('Add To Cart') }} </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>


    <!-- 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 search-widget p-0 bg-transparent">
                    <h3 class="widget-title">{{ __('Search Here') }}</h3>
                    <form action="#">
                        <div class="form-group">
                            <input type="text" class="form-control bg-color" id="searchWidgetMobile"
                                name="searchWidgetMobile" placeholder="{{ __('Product Store') }}" />
                            <button type="button" class="search-btn searchWidgetMobile"><i
                                    class="flaticon-search"></i></button>
                        </div>
                    </form>
                </div>
                <div class="single-widget categories-widget p-0 bg-transparent">
                    <h3 class="widget-title">{{ __('Categories') }}</h3>
                    <div class="categories-list">
                        @foreach ($category as $cateogories)
                            <div class="single-categorie">
                                <div class="categorie-left">
                                    <input class="form-check-input CheckCategoryMobile" type="checkbox"
                                        value="{{ $cateogories->en_Category_Name }}">
                                    <label class="form-check-label">{{ langConverter($cateogories->en_Category_Name, $cateogories->fr_Category_Name) }}</label>
                                </div>
                                <span class="categories-count">{{ productCategoryCount($cateogories->id) }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="single-widget price-widget p-0 bg-transparent">
                    <h3 class="widget-title">{{ __('Price') }}</h3>
                    <form>
                        <div class="price-wrap">
                            <div class="price-wrap-left">
                                <div class="single-price">
                                    <input type="number" class="form-control" id="minPriceMobile" name="minprice1"
                                        placeholder="{{ __('$ Min') }}" min="0.1"/>
                                </div>
                                <div class="single-price">
                                    <input type="number" class="form-control" id="maxPriceMobile" name="maxprice1"
                                        placeholder="{{ __('$ Max') }}" />
                                </div>
                            </div>
                            <button type="button" class="price-submit PriceSubmitMobile">Filter</button>
                        </div>
                    </form>
                </div>
                {{-- <div class="single-widget colors-widget p-0 bg-transparent">
                    <h3 class="widget-title">{{ __('Colors') }}</h3>
                    <div class="colors-list">
                        @foreach ($colors as $color)
                            <div class="single-colors">
                                <div class="colors-left">
                                    <input style="background: {{ $color->ColorCode }}"
                                        class="form-check-input checkColorMobile" type="checkbox"
                                        id="{{ $color->ColorCode }}" value="{{ $color->Name }}">
                                    <label class="form-check-label"
                                        for="{{ $color->ColorCode }}">{{ $color->Name }}</label>
                                </div>
                                <span class="colors-count">{{ productColorCount($color->id) }}</span>
                            </div>
                        @endforeach
                    </div>
                </div> --}}
                {{-- <div class="single-widget size-widget p-0 bg-transparent">
                    <h3 class="widget-title">{{ __('Size') }}</h3>
                    <div class="size-list">

                        @foreach ($sizes as $size)
                            <div class="single-size">
                                <input class="form-check-input checkSizeMobile" type="checkbox" id="{{ $size->id }}"
                                    value="{{ $size->Size }}">
                                <label class="form-check-label" for="{{ $size->id }}">{{ $size->Size }}</label>
                            </div>
                        @endforeach

                    </div>
                </div> --}}
                {{-- <div class="single-widget brand-widget p-0 bg-transparent">
                    <h3 class="widget-title">{{ __('Brand') }}</h3>
                    <div class="brand-list">
                        @foreach ($brands as $brand)
                            <div class="single-brand">
                                <div class="brand-left">
                                    <input class="form-check-input CheckBrandMobile" type="checkbox"
                                        value="{{ $brand->en_BrandName }}">
                                    <label class="form-check-label" for="Renuar">{{ $brand->en_BrandName }}</label>
                                </div>
                                <span class="brand-count">{{ productBrandCount($brand->id) }}</span>
                            </div>
                        @endforeach
                    </div>
                </div> --}}
            </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