@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($products->en_Product_Name, $products->fr_Product_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($products->en_Product_Name, $products->fr_Product_Name) }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end here  -->

    <!-- product-single-area start here  -->
    <div class="product-single-area section-top">
        <div class="container">
            <div class="product-single-details">
                <div class="row">
                    <div class="col-12 col-lg-4 col-md-6">
                        <div class="product-single-left me-0">
                            <div class="product-slier-big-image">
                                <div class="product-priview-slide-v2">
                                    <div class="single-slide">
                                        <button type="button" onclick="showModal()"
                                            class="btn border-0 p-0 productPreviewBtn updated-productPreviewBtn"
                                            data-bs-toggle="modal" data-bs-target="#productModal">
                                            {{-- <img class="slide-image magnifiedImg"
                                                src="{{ asset(ProductImage() . $products->Primary_Image) }}"
                                                alt="{{ __('product') }}" /> --}}

                                            <img class="slide-image magnifiedImg updated-magnifiedImg"
                                                src="{{ asset($products->primary_image_medium_1) }}"
                                                alt="{{ __('product') }}" />
                                        </button>
                                    </div>
                                    @if ($products->Image4)
                                        <div class="single-slide">
                                            <button type="button" onclick="showModal()"
                                                class="btn border-0 p-0 productPreviewBtn" data-bs-toggle="modal"
                                                data-bs-target="#productModal">
                                                {{-- <img class="slide-image magnifiedImg"
                                                    src="{{ asset(ProductImage() . $products->Image4) }}"
                                                    alt="{{ __('product') }}" /> --}}
                                                <img class="slide-image magnifiedImg"
                                                    src="{{ asset($products->image4_medium) }}" alt="{{ __('product') }}" />
                                            </button>
                                        </div>
                                    @endif
                                    @if ($products->Image3)
                                        <div class="single-slide">
                                            <button type="button" onclick="showModal()"
                                                class="btn border-0 p-0 productPreviewBtn" data-bs-toggle="modal"
                                                data-bs-target="#productModal">
                                                {{-- <img class="slide-image magnifiedImg"
                                                    src="{{ asset(ProductImage() . $products->Image3) }}"
                                                    alt="{{ __('product') }}" /> --}}
                                                <img class="slide-image magnifiedImg"
                                                    src="{{ asset($products->image3_medium) }}" alt="{{ __('product') }}" />
                                            </button>
                                        </div>
                                    @endif
                                    @if ($products->Image5)
                                        <div class="single-slide">
                                            <button type="button" onclick="showModal()"
                                                class="btn border-0 p-0 productPreviewBtn" data-bs-toggle="modal"
                                                data-bs-target="#productModal">
                                                {{-- <img class="slide-image magnifiedImg"
                                                    src="{{ asset(ProductImage() . $products->Image5) }}"
                                                    alt="{{ __('product') }}" /> --}}
                                                <img class="slide-image magnifiedImg"
                                                    src="{{ asset($products->image5_medium) }}"
                                                    alt="{{ __('product') }}" />
                                            </button>
                                        </div>
                                    @endif
                                    @if ($products->Image2)
                                        <div class="single-slide">
                                            <button type="button" onclick="showModal()"
                                                class="btn border-0 p-0 productPreviewBtn" data-bs-toggle="modal"
                                                data-bs-target="#productModal">
                                                {{-- <img class="slide-image magnifiedImg"
                                                    src="{{ asset(ProductImage() . $products->Image2) }}"
                                                    alt="{{ __('product') }}" /> --}}
                                                <img class="slide-image magnifiedImg"
                                                    src="{{ asset($products->image2_medium) }}"
                                                    alt="{{ __('product') }}" />
                                            </button>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            @if ($products->Image5 || $products->Image2 || $products->Image3 || $products->Image4)
                                <div class="product-thumbnail-image">
                                    <ul class="product-thumb-silide-v2">

                                        <li class="single-item">
                                            {{-- <img class="single-item-image"
                                                src="{{ asset(ProductImage() . $products->Primary_Image) }}"
                                                alt="{{ __('product') }}" /> --}}
                                            <img class="single-item-image"
                                                src="{{ asset($products->primary_image_x_small) }}"
                                                alt="{{ __('product') }}" />
                                        </li>
                                        @if ($products->Image4)
                                            <li class="single-item">
                                                {{-- <img class="single-item-image"
                                                    src="{{ asset(ProductImage() . $products->Image4) }}"
                                                    alt="{{ __('product') }}" /> --}}
                                                <img class="single-item-image" src="{{ asset($products->image4_x_small) }}"
                                                    alt="{{ __('product') }}" />
                                            </li>
                                        @endif
                                        @if ($products->Image3)
                                            <li class="single-item">
                                                {{-- <img class="single-item-image"
                                                    src="{{ asset(ProductImage() . $products->Image3) }}"
                                                    alt="{{ __('product') }}" /> --}}
                                                <img class="single-item-image" src="{{ asset($products->image3_x_small) }}"
                                                    alt="{{ __('product') }}" />
                                            </li>
                                        @endif
                                        @if ($products->Image5)
                                            <li class="single-item">
                                                {{-- <img class="single-item-image"
                                                    src="{{ asset(ProductImage() . $products->Image5) }}"
                                                    alt="{{ __('product') }}" /> --}}
                                                <img class="single-item-image" src="{{ asset($products->image5_x_small) }}"
                                                    alt="{{ __('product') }}" />
                                            </li>
                                        @endif
                                        @if ($products->Image2)
                                            <li class="single-item">
                                                {{-- <img class="single-item-image"
                                                    src="{{ asset(ProductImage() . $products->Image2) }}"
                                                    alt="{{ __('product') }}" /> --}}
                                                <img class="single-item-image" src="{{ asset($products->image2_x_small) }}"
                                                    alt="{{ __('product') }}" />
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-12 col-lg-8 col-md-6">
                        <div class="product-single-right">
                            <div class="product-info">
                                <h3 class="product-name">
                                    {{ langConverter($products->en_Product_Name, $products->fr_Product_Name) }}</h3>
                                <!-- This is server side code. User can not modify it. -->

                                <div class="product-price">
                                    @if (currencyConverter($products->Price) == currencyConverter($products->Discount_Price))
                                        <span class="price">{{ currencyConverter($products->Discount_Price) }}</span>
                                    @else
                                        <span class="price">{{ currencyConverter($products->Discount_Price) }}</span>
                                        <span class="regular-price">{{ currencyConverter($products->Price) }}</span>
                                    @endif
                                </div>

                                <p class="note-text">{{ langConverter($products->en_About, $products->fr_About) }}
                                </p>
                                {{-- {!! productReview($products->id) !!} --}}

                                {{-- Commented to review --}}
                                {{-- <div class="prdouct-btn-wrapper d-flex align-items-center">
                                    <div class="cart-plus-minus">
                                        <div class="dec qtybutton btn">-</div>
                                        <input class="cart-plus-minus-box" type="text" name="qtybutton"
                                            id="product_quantity" min="1" max="{{ $products->Quantity }}"
                                            value="1" />
                                        <div class="inc qtybutton btn">{{ __('+') }}</div>
                                    </div>
                                    <a href="javascript:void(0)" title="{{ __('Add To Cart') }}"
                                        class="add-cart addCart" data-id="{{ $products->id }}"><i
                                            class="icon fas fa-plus"></i>{{ __('Add To Cart') }}
                                    </a>
                                </div> --}}
                                {{-- /Commented to review --}}
                                <div class="prdouct-btn-wrapper d-flex align-items-center">
                                    <div class="cart-quantity rscnCartQuantity input-group">
                                        <div class="dec qtybutton rscnQtybutton rscnQtyUpBtn rscnMb-2 btn"
                                            data-id="{{ $products->id }}"><i class="fas fa-sort-down"></i></div>
                                        <input class="qty-input cart-plus-minus-box qty_value rscnQty_value text-center"
                                            type="text" name="qtybutton" id="product_quantity" min="1"
                                            max="{{ $products->Quantity }}" value="1">
                                        <div class="inc qtybutton btn rscnQtybutton rscnQtyDownBtn"
                                            data-id="{{ $products->id }}"><i class="fas fa-sort-up"></i></div>
                                    </div>
                                    @if($products->Quantity != 0)
                                        <a href="javascript:void(0)" title="{{ __('Add To Cart') }}"
                                        class="add-cart addCart updated-addTo-cart"
                                        data-id="{{ $products->id }}">{{ __('Add To Cart') }}
                                    @else
                                        <a href="javascript:void(0)" title="{{ __('Add To Cart') }}"
                                        class=" disabled add-cart updated-addTo-cart"
                                        style="pointer-events: none; cursor: default; color: #848484 !important; text-decoration: none; border: 1px solid #f8b98f !important;"
                                        data-id="{{ $products->id }}">{{ __('Out Of Stock') }}
                                    @endif
                                    </a>
                                </div>
                                <div class="product-bottom-button d-flex">
                                    @if($products->Quantity != 0)
                                    <a href="javascript:void(0)" class="primary-btn buyNow updated-buyNow-btn"
                                        data-id="{{ $products->id }}">{{ __('Buy Now') }}
                                    @else
                                    <a href="javascript:void(0)" class="primary-btn updated-buyNow-btn"
                                    style="pointer-events: none; cursor: default; background-color: #848484 !important; text-decoration: none; border: none !important;"
                                    data-id="{{ $products->id }}">{{ __('Buy Now') }}
                                    @endif
                                    </a>
                                    <a class="product-btn CompareList" data-id="{{ $products->id }}"
                                        title="{{ __('Add To Compare') }}"><i class="icon flaticon-bar-chart"></i></a>
                                    <a class="product-btn MyWishList mx-0" data-id="{{ $products->id }}"
                                        title="{{ __('Add To Wishlist') }}"><i class="icon flaticon-like"></i></a>

                                </div>
                            </div>
                            <div class="product-right-bottom">
                                <ul class="features">
                                    <li class="single-feature"><img class="icon"
                                            src="{{ asset('frontend/assets/images/delivery-van-icon.svg') }}"
                                            alt="icon" /><strong
                                            class="feature-title">{{ __('Estimated Delivery:') }}</strong><span
                                            class="feature-text">{{ allsetting()['estimating_delivery'] }}</span></li>
                                    <li class="single-feature"><img class="icon"
                                            src="{{ asset('frontend/assets/images/shipping-return.svg') }}"
                                            alt="icon" /><strong
                                            class="feature-title">{{ __('Shipping Charge:') }}</strong><span
                                            class="feature-text">{{ __('On all orders over') }}
                                            </span>
                                    </li>
                                    <li class="single-feature">
                                        <span class="feature-title">{{ __('Guarantee Safe & Secure Checkout') }}</span>
                                    </li>
                                </ul>

                                <div class="share-area mt-30">
                                    <h3 class="share-title">{{ __('Share :') }}</h3>
                                    <ul class="social-media a2a_kit">
                                        <li class="media-item"><a class="media-link facebook a2a_button_facebook"
                                                href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
                                        <li class="media-item"><a class="media-link twitter a2a_button_twitter"
                                                href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
                                        <li class="media-item"><a class="media-link linkedin a2a_button_linkedin"
                                                href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
                                        <li class="media-item"><a class="media-link pinterest a2a_button_pinterest"
                                                href="javascript:void(0)"><i class="fab fa-pinterest-p"></i></a></li>
                                    </ul>
                                    <script async src="https://static.addtoany.com/menu/page.js"></script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </li>
            </ul>
        </div>
    </div>
    </div>
    </div>
    <!-- product-single-area end here  -->

    <!-- Featured Products area start here  -->
    <div class="featured-productss-area section-top pb-100">
        <div class="container">
            <div class="section-header-area">
                <div class="row">
                    <div class="col-12">
                        <div class="text-center">
                            @if (app()->getLocale() == 'en')
                                <h2 class="section-title"><span>{{ __('Related') }}</span> <span
                                        class="title-green">{{ __('Products') }}</span></h2>
                            @else
                                <h2 class="section-title"><span class="title-green">{{ __('Products') }}
                                    </span><span>{{ __('Related') }}</span></h2>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($similar_product as $product)
                    <div class="col-lg-3 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 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 }}"><i
                                        class="icon fas fa-plus"></i>{{ __('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>
                @empty
                    <h1>{{ __('No related product found!') }}</h1>
                @endforelse
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            //shared variable
            var max = 0,
                $els = $('.featured-productss-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>

    {{-- Product Modal --}}
    @if ($products->Primary_Image && ($products->Image4 || $products->Image3 || $products->Image5 || $products->Image2))
      <div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
          <div class="modal-dialog rscnProductModal">
              <div class="modal-content border-0">
                  <div class="modal-header border-bottom-0">
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                      <div class="product-single-left">
                          <div class="product-slier-big-image mb-5">
                              <div class="product-modal-preview">
                                  <div class="single-slide">
                                      {{-- <img class="slide-image" src="{{ asset(ProductImage() . $products->Primary_Image) }}"
                                          alt="{{ __('product') }}" /> --}}
                                      <img class="slide-image" src="{{ asset($products->primary_image_larg) }}"
                                          alt="{{ __('product') }}" />
                                  </div>
                                  @if ($products->Image4)
                                      <div class="single-slide">
                                          {{-- <img class="slide-image" src="{{ asset(ProductImage() . $products->Image4) }}"
                                              alt="{{ __('product') }}" /> --}}
                                          <img class="slide-image" src="{{ asset($products->image4_larg) }}"
                                              alt="{{ __('product') }}" />
                                      </div>
                                  @endif
                                  @if ($products->Image3)
                                      <div class="single-slide">
                                          {{-- <img class="slide-image" src="{{ asset(ProductImage() . $products->Image3) }}"
                                              alt="{{ __('product') }}" /> --}}
                                          <img class="slide-image" src="{{ asset($products->image3_larg) }}"
                                              alt="{{ __('product') }}" />
                                      </div>
                                  @endif
                                  @if ($products->Image5)
                                      <div class="single-slide">
                                          {{-- <img class="slide-image" src="{{ asset(ProductImage() . $products->Image5) }}"
                                              alt="{{ __('product') }}" /> --}}
                                          <img class="slide-image" src="{{ asset($products->image5_larg) }}"
                                              alt="{{ __('product') }}" />
                                      </div>
                                  @endif
                                  @if ($products->Image2)
                                      <div class="single-slide">
                                          {{-- <img class="slide-image" src="{{ asset(ProductImage() . $products->Image2) }}"
                                              alt="{{ __('product') }}" /> --}}
                                          <img class="slide-image" src="{{ asset($products->image2_larg) }}"
                                              alt="{{ __('product') }}" />
                                      </div>
                                  @endif
                              </div>
                          </div>
                          @if ($products->Image5 || $products->Image2 || $products->Image3 || $products->Image4)
                              <div class="product-thumbnail-image">
                                  <ul class="product-slider-nav">

                                      <li class="single-item">
                                          {{-- <img class="single-item-image"
                                              src="{{ asset(ProductImage() . $products->Primary_Image) }}"
                                              alt="{{ __('product') }}" /> --}}
                                          <img class="single-item-image" src="{{ asset($products->primary_image_small) }}"
                                              alt="{{ __('product') }}" />
                                      </li>
                                      @if ($products->Image4)
                                          <li class="single-item">
                                              {{-- <img class="single-item-image"
                                                  src="{{ asset(ProductImage() . $products->Image4) }}"
                                                  alt="{{ __('product') }}" /> --}}
                                              <img class="single-item-image" src="{{ asset($products->image4_small) }}"
                                                  alt="{{ __('product') }}" />
                                          </li>
                                      @endif
                                      @if ($products->Image3)
                                          <li class="single-item">
                                              {{-- <img class="single-item-image"
                                                  src="{{ asset(ProductImage() . $products->Image3) }}"
                                                  alt="{{ __('product') }}" /> --}}
                                              <img class="single-item-image" src="{{ asset($products->image3_small) }}"
                                                  alt="{{ __('product') }}" />
                                          </li>
                                      @endif
                                      @if ($products->Image5)
                                          <li class="single-item">
                                              {{-- <img class="single-item-image"
                                                  src="{{ asset(ProductImage() . $products->Image5) }}"
                                                  alt="{{ __('product') }}" /> --}}
                                              <img class="single-item-image" src="{{ asset($products->image5_small) }}"
                                                  alt="{{ __('product') }}" />
                                          </li>
                                      @endif
                                      @if ($products->Image2)
                                          <li class="single-item">
                                              {{-- <img class="single-item-image"
                                                  src="{{ asset(ProductImage() . $products->Image2) }}"
                                                  alt="{{ __('product') }}" /> --}}
                                              <img class="single-item-image" src="{{ asset($products->image2_small) }}"
                                                  alt="{{ __('product') }}" />
                                          </li>
                                      @endif
                                  </ul>
                              </div>
                          @endif
                      </div>
                  </div>
              </div>
          </div>
      </div>
    @endif
    {{-- /Product Modal --}}

@endsection
@push('post_script')
    <script type="text/javascript">
        function showModal() {
            $('#productModal').modal('show');
        }
    </script>
    <script type="text/javascript">
        $("#product_quantity").keyup(function(event) {
            if (this.value == "0") $("#product_quantity").val("1");
            qty = "{{ $products->Quantity }}"
            qty = parseInt(qty)
            currentQty = parseInt(this.value)
            if (currentQty > qty) $("#product_quantity").val(qty)
        });
        $(".qtybutton").click(function(event) {
            qty = "{{ $products->Quantity }}"
            qty = parseInt(qty)
            currentQty = parseInt($("#product_quantity").val())
            if (currentQty > qty) $("#product_quantity").val(qty)
            if (isNaN(currentQty)) $("#product_quantity").val("1")
        });
        /*Size is  set in pixels... supports being written as: '250px' */
        var magnifierSize = 120;

        /*How many times magnification of image on page.*/
        var magnification = 2;

        function magnifier() {

            this.magnifyImg = function(ptr, magnification, magnifierSize) {
                var $pointer;
                if (typeof ptr == "string") {
                    $pointer = $(ptr);
                } else if (typeof ptr == "object") {
                    $pointer = ptr;
                }

                if (!($pointer.is('.magnifiedImg'))) {
                    alert('Object must be image.');
                    return false;
                }

                magnification = +(magnification);

                $pointer.hover(function() {
                    $(this).css('cursor', 'none');
                    $('.magnify').show();
                    //Setting some variables for later use
                    var width = $(this).width();
                    var height = $(this).height();
                    var src = $(this).attr('src');
                    var imagePos = $(this).offset();
                    var image = $(this);

                    if (magnifierSize == undefined) {
                        magnifierSize = '100px';
                    }

                    $('.magnify').css({
                        'background-size': width * magnification + 'px ' + height * magnification +
                            "px",
                        'background-image': 'url("' + src + '")',
                        'width': magnifierSize,
                        'height': magnifierSize
                    });

                    //Setting a few more...
                    var magnifyOffset = +($('.magnify').width() / 2);
                    var rightSide = +(imagePos.left + $(this).width());
                    var bottomSide = +(imagePos.top + $(this).height());

                    $(document).mousemove(function(e) {
                        if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide +
                                magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e
                            .pageY > +(bottomSide + magnifyOffset / 6)) {
                            $('.magnify').hide();
                            $(document).unbind('mousemove');
                        }
                        var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification -
                            magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification -
                            magnifyOffset) + "px";
                        $('.magnify').css({
                            'left': e.pageX - magnifyOffset,
                            'top': e.pageY - magnifyOffset,
                            'background-position': backgroundPos
                        });
                    });
                }, function() {

                });
            };

            this.init = function() {
                $('body').prepend('<div class="magnify"></div>');
            }

            return this.init();
        }

        var magnify = new magnifier();
        magnify.magnifyImg('.magnifiedImg', magnification, magnifierSize);
    </script>
@endpush