@extends('web.layout.master')

@section('content')
<style>
    .previous {
        background-color: #f1f1f1;
        color: black;
      }

      .productAvailability{
        cursor: pointer;
    }

      .round {
        border-radius: 50%;
      }
    .productdesctiption h1{
        font-size: 20px;
        text-transform: none;
        font-weight: 400;
        margin: 0;
        display: inline-block;
    }

    .loupe {
        display: none;
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid black;
        box-shadow: 5px 5px 12px black;
        background: rgba(0, 0, 0, 0.25);
        cursor: crosshair;
        overflow: hidden;
        z-index: 999;
      }

      .loupe img {
        position: absolute;
        right; 0;
      }


      .image img {
        max-width: 100%;
      }

      .nav-tabs .nav-link.active{
        background-color: #b92128;
        color:white;
      }
      .nav-tabs .nav-link{
        background-color: white;
        color:black;
      }
      .star-rating {
        line-height:32px;
        font-size:1.25em;
        }

        .star-rating .fa-star{
            color: #b92128;
            border-color: black;
            }

        .rating-header {
            margin-top: -10px;
            margin-bottom: 10px;
        }
        .list-group-item{
            border: 1px solid #ddd !important;
        }

        @media only screen and (max-width: 776px) {
            .mobile-fontsize18 {
                font-size: 28px !important;
                font-weight: 600 !important;
        }
        #modelamount{
            color: black !important;
        }
        .mobileh4{
            font-size: 18px !important;
        }
    }
    .abbtocartbtndbl{
        filter: opacity(0.5);
        cursor: auto;
      }

      .activeIMG{
        box-shadow:0px 0px 10px #cba3a7 !important;
      }

</style>

<style>

    .product-image-thumbs {
        -ms-flex-align: stretch;
        align-items: stretch;
        display: -ms-flexbox;
        /* display: flex; */
        /* margin-top: 2rem */
    }


    .setmobileViewCss {
        -ms-flex-align: stretch;
        align-items: stretch;
        display: -ms-flexbox;
        display: flex;
        margin-left: 17%;
        /* margin-top: 2rem */
    }


    .product-image-thumb {
        box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
        border-radius: .25rem;
        background-color: #fff;
        border: 1px solid #dee2e6;
        display: -ms-flexbox;
        display: flex;
        margin-right: 1rem;
        max-width: 4rem;
        padding: .5rem
    }

    .product-image-thumb img {
        max-width: 100%;
        height: auto;
        -ms-flex-item-align: center;
        align-self: center
    }

    .product-image-thumb:hover {
        opacity: .5
    }

    .carousel-indicators > button {
        border-radius: 50%;
        width: 12px !important;
        height: 12px !important;
        background-color: #000000;
    }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.min.js" integrity="sha512-0N/5ZOjfsh3niel+5dRD40HQkFOWaxoVzqMVAHnmAO2DC3nY/TFB7OYTaPRAFJ571IRS/XRsXGb2XyiFLFeu1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.css" integrity="sha512-3OuH/9eh0Sx9s/c23ZFG5SJb3GvBluF9cdGgQXhZyMyId4GP87W9QBgkHmocx+8kZaCZmXQUUuLOD4Q4f5PaWQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
    @if(!empty($pin))
    @php
    $options = [
        'http' => [
          'timeout' => 3, // 3 seconds
        ],
        'ssl' => [
          'verify_peer' => false,
          'verify_peer_name' => false,
          'allow_self_signed' => true,
        ],
      ];
      $context = stream_context_create($options);
    @endphp
    <div class="row">
        <div class="col-sm-12">
            <div class="mt-3">
                @if(!empty($pin->Manufacturer))
                    @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/Desktop/".$pin->Manufacturer.".png",0, $context, 0, 1))
                        @php $is_manufacturer_horizontal=1; @endphp
                        <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/Desktop/{{ $pin->Manufacturer }}.png"
                            onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                            id="productimage" class="img-fluid rounded-start d-none d-md-block d-lg-block " alt="...">
                    @endif
                    @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/".$pin->Manufacturer.".png",0, $context, 0, 1))
                        @php $is_manufacturer_horizontal_mobile=1; @endphp
                        <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/{{ $pin->Manufacturer }}.png"
                        onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                        id="productimage" class="img-fluid rounded-start d-md-none d-lg-none" alt="...">
                    @endif
                @endif
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="text-black  font-weight-bold">
                <label class="fs-1 mobile-fontsize18">{{ $pin->Name }}</label>
                            </div>


        </div>
    </div>
    <div class="row mt-4">
        <div class="card mb-3 border-0">


            <div class="row g-0">

                @if($pin->HasPhoto > 0)

                    @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/photos/".(!empty($ClientMap) ? $ClientMap->ProductCode: '')."-2.jpg",0, $context, 0, 1))

                        @php $is_image[2]=1; @endphp
                        @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/photos/".(!empty($ClientMap) ? $ClientMap->ProductCode: '')."-3.jpg",0, $context, 0, 1))
                        <div class="col-lg-1 col-md-1 text-center d-none d-lg-block">
                            <div class="product-image-thumbs">


                                <div class="product-image-thumb activeIMG"><img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg" alt="Product Image"></div>
                                <div class="product-image-thumb mt-2"><img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-3.jpg" alt="Product Image"></div>
                                @php $is_image[2]=1; @endphp
                                @php $is_image[3]=1; @endphp
                                @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/photos/".(!empty($ClientMap) ? $ClientMap->ProductCode: '')."-4.jpg",0, $context, 0, 1))
                                    @php $is_image[4]=1; @endphp
                                    <div class="product-image-thumb mt-2"><img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-4.jpg" alt="Product Image"></div>
                                @endif
                            </div>
                            </div>
                        @endif

                    @endif

                @endif

                <div class="col-lg-3 col-md-3 text-center">

                    @if($pin->HasPhoto > 0)
                        @if(!empty($is_image[2]))

                            <div class="image text-center d-none d-lg-block">
                                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                                id="productimage" class="img-fluid rounded-start mt-4 product-image" alt="Product Image" style="max-width:280px; min-width:280px">
                            </div>

                            <div class="image text-center d-lg-none">
                            @if(!empty($is_image[3]))



                                <div class="swiper-container" style="overflow: hidden;">
                                    <div class="swiper-wrapper">
                                        <!-- Add multiple slides here with product images -->
                                        @if(!empty($is_image[2]))
                                        <div class="swiper-slide">
                                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg" alt="Image 1">
                                        </div>
                                        @endif
                                        @if(!empty($is_image[3]))
                                        <div class="swiper-slide">
                                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-3.jpg" alt="Image 2">
                                        </div>
                                        @endif
                                        @if(!empty($is_image[4]))
                                        <div class="swiper-slide">
                                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-4.jpg" alt="Image 2">
                                        </div>
                                        @endif

                                        <!-- Add more slides as needed -->
                                    </div>
                                    <div class="swiper-pagination" style="bottom: 210px;padding-bottom: 20px;"></div>
                                </div>


                            @else
                                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                                id="productimage" class="img-fluid rounded-start mt-4 product-image" alt="Product Image" style="max-width:280px; min-width:280px">
                            @endif
                            </div>

                        @else
                                @if(!empty($pin->Manufacturer))
                                    @if(!empty($is_manufacturer_horizontal))
                                    <div class="d-none d-md-block d-lg-block" style="height: 100%;">
                                        <div class="image text-center" style="display:grid; place-items:center;height:100%;">
                                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/Desktop/{{ $pin->Manufacturer }}.png"
                                            onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                                                class="img-fluid rounded-start  " alt="...">
                                        </div>

                                    </div>

                                    @else
                                        <div class="image text-center">
                                            <img src="{{ asset('assets/web') }}/images/NO-MANUFACTURER.png" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;" class="img-fluid rounded-start d-none d-lg-block" alt="..."  style="">
                                        </div>
                                    @endif
                                    @if(!empty($is_manufacturer_horizontal_mobile))
                                    <div class="d-lg-none" style="height: 100%;">
                                        <div class="image text-center" style="display:grid; place-items:center;height:100%;">
                                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/{{ $pin->Manufacturer }}.png"
                                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                                                class="img-fluid rounded-start " alt="...">
                                        </div>
                                    </div>
                                @else
                                    <div class="image text-center d-lg-none"><h5 style="padding: 20px;font-size: 20px"><b class="text-danger">Image:</b> No image yet.</h5></div>

                                @endif

                            @else
                                <div class="image text-center d-lg-none"><span style="padding: 20px;font-size: 20px"><b>NO IMAGE</b></span></div>
                                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                                id="productimage" class="img-fluid rounded-start mt-4 product-image d-none d-lg-block" alt="Product Image" style="max-width:280px; min-width:280px">

                            @endif

                        @endif

                     @else



                        @if(!empty($pin->Manufacturer))
                            @if(!empty($is_manufacturer_horizontal))
                            <div class="d-none d-md-block d-lg-block" style="height: 100%;">
                                <div class="image text-center" style="display:grid; place-items:center;height:100%;">
                                    <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/Desktop/{{ $pin->Manufacturer }}.png"
                                    onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                                     class="img-fluid rounded-start  " alt="...">
                                </div>

                            </div>

                            @else
                                <div class="image text-center">
                                    <img src="{{ asset('assets/web') }}/images/NO-MANUFACTURER.png" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;" class="img-fluid rounded-start d-none d-lg-block" alt="..."  style="">
                                </div>
                            @endif
                            @if(!empty($is_manufacturer_horizontal_mobile))
                            <div class="d-lg-none" style="height: 100%;">
                                <div class="image text-center" style="display:grid; place-items:center;height:100%;">
                                    <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/{{ $pin->Manufacturer }}.png"
                                        onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                                        class="img-fluid rounded-start " alt="...">
                                </div>
                            </div>
                        @else
                         <div class="image text-center d-lg-none"><h5 style="padding: 20px;font-size: 20px"><b class="text-danger">Image:</b> No image yet.</h5></div>

                        @endif


                        @else
                                <div class="image text-center d-lg-none"><span style="padding: 20px;font-size: 20px"><b>NO IMAGE</b></span></div>
                                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                                id="productimage" class="img-fluid rounded-start mt-4 product-image d-none d-lg-block" alt="Product Image" style="max-width:280px; min-width:280px">

                        @endif


                    @endif
                </div>

                <div class="col-lg-8 col-md-8">

                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-12" id="modelDetails">
                                @if($pin->Availability)
                                <div class=" mb-3" id="modelavarepdiv">
                                    <h5 id="modelavailability"><b class="text-danger productAvailability" onclick="showAvail()">Availability :
                                        </b>{{$pin->Availability  }}</h5>
                                    @if(!empty($ParentClientMap) && !empty($ParentClientMap->ProductCode))
                                        <h5 id="modelreplaces"><b class="text-danger productAvailability" onclick="showAvail()">Replaces :
                                        </b>{{$ParentClientMap->ProductCode  }}</h5>
                                    @endif
                                    {{-- @if($pin->ShippingSurcharge > 0)
                                        <h5 id="modelavailability"><b class="text-danger productAvailability" onclick="showAvail()">Shipping Surcharge :
                                        </b>${{$pin->ShippingSurcharge  }}</h5>
                                    @endif --}}
                                </div>
                                @endif
                                @if ($pin->Availability != "No Longer Available" && $pin->Availability != 'Discontinued by the Manufacturer')
                                <span aria-label="..." role="main" class="fs-4 text-red text-decoration-line-through d-none d-lg-block d-md-block"
                                    id="modelstickamount">${{ $pin->ProductPrice }}</span> <p
                                    class="fs-3 text-danger fw-bold" id="modelamount">${{ $pin->SalePrice }}</p>
                                <p class="card-text fs-5 mt-2 d-none d-lg-block d-md-block" id="modelno"><b>You save ${{  number_format(($pin->ProductPrice-$pin->SalePrice), 2) }}!</b></p>
                                @endif
                                <p class="card-text fs-5 mt-2 d-none d-lg-block d-md-block" id="modelno">Product Code: {{ !empty($ClientMap) ? $ClientMap->ProductCode: "" }}</p>

                                <div class="row mt-2">

                                    <div class="col-md-2 mb-2" id="qtycartdiv" style="margin-top: 5px">
                                        <form action="#" id="addcartForm">
                                            @csrf
                                            @if ($pin->Availability != "No Longer Available" && $pin->Availability != 'Discontinued by the Manufacturer')
                                            <div style="width: 125px;">
                                                <div class="input-group">
                                                    <span aria-label="..." role="main" class="input-group-prepend">
                                                        <button role="button" tabindex="0" aria-labelledby="proquantity1" id="proquantity1" type="button" class="btn btn-outline-secondary btn-number" disabled="disabled" item-id="proquantity" data-type="minus" data-field="proquantity" style="height: 38px;border-radius: 0px;">
                                                            <span aria-label="..." role="main" class="fa fa-minus"></span>
                                                        </button>
                                                    </span>
                                                    <input aria-labelledby="itemID_proquantity" type="text" name="proquantity" id="itemID_proquantity" item-id="proquantity" class="form-control input-number" value="1" min="1" max="100" readonly>
                                                    <span aria-label="..." role="main" class="input-group-append">
                                                        <button role="button" tabindex="0" aria-labelledby="proquantity2" id="proquantity2" type="button" class="btn btn-outline-secondary btn-number" data-type="plus" item-id="proquantity" data-field="proquantity" style="height: 38px;border-radius: 0px;">
                                                            <span aria-label="..." role="main" class="fa fa-plus"></span>
                                                        </button>
                                                    </span>
                                                </div>
                                            </div>
                                            @endif
                                            {{--  <input aria-labelledby="PartsWarehouse" type="number" name="proquantity" class="form-control w-100" value="1"
                                                id="proquantity" min="1" max="100" style="height: 50px;">  --}}


                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg" name="productimage" id="textproductimage">
                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ $pin->SalePrice }}" name="modelamount" id="textmodelamount">
                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ $pin->ProductPrice }}" name="modelstickamount" id="textmodelstickamount">
                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ $pin->Name }}" name="modeltitle" id="textmodeltitle">
                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" name="modelno" id="textmodelno">
                                        </form>
                                    </div>
                                    @if ($pin->Availability != "No Longer Available" && $pin->Availability != 'Discontinued by the Manufacturer')
                                    <div class="col-md-8">
                                        @if ($pin->Availability != "No Longer Available")
                                            @if ($pin->DaysToShip != 99)
                                                {{-- <a href="javascript:void(0)" id="cartAddBtn" onclick="addToCart()"><img
                                                    src="{{ asset('assets/web') }}/images/add-to-cart.png"
                                                    height="60px" aria-label=""></a> --}}

                                                <a href="javascript:void(0)" id="cartAddBtn" onclick="addToCart()" class="btn btn-block btn-danger btn-lg setHeaderLargeBtnStyle"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>

                                            @else
                                                {{-- <a href="javascript:void(0)" id="cartAddBtn2"><img
                                                    src="{{ asset('assets/web') }}/images/add-to-cart.png" class="abbtocartbtndbl"
                                                    height="60px" aria-label=""></a> --}}

                                                <a href="javascript:void(0)" id="cartAddBtn2" class="btn btn-block btn-danger btn-sm setHeaderBtnStyle" style="display: none;"><i class="fa fa-shopping-cart"></i>Add To Cart</a>
                                            @endif
                                            @endif
                                        @if($whishlist_status == 1)
                                            {{-- <a href="javascript:void(0)" aria-label="" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" @if(auth()->check())  onclick="wishlistSave(this)" @else  onclick="loginModel()" @endif><img alt="..." src="{{ asset('assets/web') }}/images/save-cart.png" height="50px"></a> --}}
                                            <a href="javascript:void(0)" aria-label="" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" @if(auth()->check())  onclick="wishlistSave(this)" @else  onclick="loginModel()" @endif><div class="btn btn-block btn-danger btn-sm setHeaderBtnStyle" style="min-width:100px;" ><i class="fa fa-cogs"></i> Save</div></a>

                                        @else
                                            <a href="javascript:void(0)" aria-label="Remove from My Gear" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" onclick="wishlistSave(this)" class=" mt-4">Remove from My Gear</a>
                                        @endif


                                        {{--  <span aria-label="..." role="main" class="text-danger fs-4 mt-2" id="alreadyInCartBtn"  @if(!empty($cartItems)) style="display: block" @endif>Already In Cart</span>  --}}

                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <ul class="nav nav-tabs" id="partDetailTab" role="list">
            <li class="nav-item" role="listitem">
            <button role="button" tabindex="0" aria-labelledby="home-tab" class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">Description</button>
            </li>
            <li class="nav-item d-none d-lg-block" role="listitem">
            <button role="button" tabindex="0" aria-labelledby="profile-tab1" class="nav-link" id="profile-tab1" data-bs-toggle="tab" data-bs-target="#fits_these_models" type="button" role="tab" aria-controls="fits_these_models" aria-selected="false" onclick="fitTheseModelLoad('{{ $ClientMap->ProductCode }}')">Fits these Models</button>
            </li>
            <li class="nav-item d-lg-none" role="listitem">
                <button role="button" tabindex="0" aria-labelledby="profile-tab2" class="nav-link" id="profile-tab2" data-bs-toggle="tab" data-bs-target="#fits_these_models" type="button" role="tab" aria-controls="fits_these_models" aria-selected="false" onclick="fitTheseModelLoad('{{ $ClientMap->ProductCode }}')">Fits Models</button>
            </li>
            @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/Manuals/".$pin->BaseSKU.".pdf",0, NULL, 0, 1))
                <li class="nav-item" role="listitem">
                    <button role="button" tabindex="0" aria-labelledby="contact-tab" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#manual" type="button" role="tab" aria-controls="manual" aria-selected="false">Manual</button>
                </li>
            @endif
            <li class="nav-item" role="listitem">
                <button role="button" tabindex="0" aria-labelledby="contact-tab" class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">Reviews</button>
            </li>
        </ul>
        <div class="tab-content border" id="partDetailTabContent">
            <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description">
                <div class="productdesctiption p-4">{!! $pin->Description !!}</div>
            </div>
            <div class="tab-pane fade" id="fits_these_models" role="tabpanel" aria-labelledby="fits_these_models-tab" style="max-height: 500px;overflow: auto">
                <div class="list-group p-2" id="fitTheseModelList">
                    Loading....
                </div>
            </div>
            <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                <div class="p-4">
                    @if(!$reviews->isEmpty())
                    <div class="row">
                        <div class="col-md-8">
                            <h5>Average Customer Rating: <span aria-label="..." role="main" class="ratings">
                                @for($i=1;$i <= $reviewavg;$i++)
                                    <i class="fa fa-star text-warning"></i>
                                @endfor
                            </span> {{ intval($reviewavg) }} of 5 <br/> Total Reviews: {{ intval(count($reviews)) }}</h5>
                        </div>
                        <div class="col-md-4 text-end">
                            <a class="text-danger" data-bs-toggle="modal" @if(auth()->check())  data-bs-target="#productReviewModal" @else  onclick="loginModel()" @endif style="cursor: pointer;" aria-label="Write a review">Write a review</a>
                        </div>

                    </div>

                        @foreach ($reviews as $review)
                            <div class="row mt-5">
                                <div class="col-md-10">
                                        <h5>
                                            <span aria-label="..." role="main" class="ratings">
                                                @for($i=1;$i <= $review->rate;$i++)
                                                    <i class="fa fa-star text-warning"></i>
                                                @endfor
                                            </span> {{ $review->reviewtitle }}
                                        </h5>
                                        <p class="mb-0">Reviewer: {{ $review->name }} for {{ $review->location }}</p>
                                        <p class="fs-5 mb-2">{{ $review->reviewdescription }}</p class="fs-4">
                                        {{--  <h6>Was this review helpful to you? &nbsp; <a class="btn btn-sm btn-success">Yes</a> &nbsp;&nbsp;<a class="btn btn-sm btn-success">No</a></h6>  --}}


                                </div>
                                <div class="col-md-2 text-end">
                                    <p>{{ date('M d,Y',strtotime($review->lastmodified)) }}</p>
                                </div>
                            </div>
                        @endforeach
                    @else

                    <div class="row">
                        <h5>No product reviews yet</h5>
                    </div>
                    <div class="row">
                        <a class="text-danger" data-bs-toggle="modal" @if(auth()->check())  data-bs-target="#productReviewModal" @else  onclick="loginModel()" @endif style="cursor: pointer;" aria-label="Write a review">Write a review</a>
                    </div>
                    {{-- <div class="row">
                        <div class="col-md-8">
                            <h5>Customer Review</h5>
                        </div>
                        <div class="col-md-4 text-end">
                            <a class="text-danger" data-bs-toggle="modal" @if(auth()->check())  data-bs-target="#productReviewModal" @else  onclick="loginModel()" @endif style="cursor: pointer;" aria-label="Write a review">Write a review</a>
                        </div>

                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h5>10/6/22</h5>
                            <p class="mb-2">I received my part & it works great! Thank you.</p>
                            <p><b>Jennifer (Baraboo, WI)</b></p>
                        </div>

                    </div>
                    <div class="card mt-2">
                        <div class="card-body">
                            <h5>10/5/22</h5>
                            <p class="mb-2">I got everything I needed and you did great!!!</p>
                            <p><b>Lynn (Phoenixville, PA)</b></p>
                        </div>

                    </div>
                    <div class="card mt-2">
                        <div class="card-body">
                            <h5>10/4/22</h5>
                            <p class="mb-2">6 stars fast, right part, fair price.</p>
                            <p><b>Keith (Sumner, ME)</b></p>
                        </div>

                    </div>

                    <div class="card mt-2">
                        <div class="card-body">
                            <h5>10/4/22</h5>
                            <p class="mb-2">You guys did good and impressed me on the service!</p>
                            <p><b>Bart (Salineville, OH)</b></p>
                        </div>

                    </div>


                    <div class="card mt-2">
                        <div class="card-body">
                            <h5>10/4/22</h5>
                            <p class="mb-2">You guys did good and impressed me on the service!</p>
                            <p><b>Bart (Salineville, OH)</b></p>
                        </div>

                    </div>

                    <div class="card mt-2">
                        <div class="card-body">
                            <h5>10/3/22</h5>
                            <p class="mb-2">Thank You! Everything good, time and good Condition.</p>
                            <p><b>Yolanda (Midland, TX)</b></p>
                        </div>

                    </div>

                    <div class="card mt-2">
                        <div class="card-body">
                            <h5>10/3/22</h5>
                            <p class="mb-2">I was very pleased with the order. Thank you.</p>
                            <p><b>Deborah (East Falmouth, MA)</b></p>
                        </div>

                    </div>

                    <div class="card mt-2">
                        <div class="card-body">
                            <h5>10/3/22</h5>
                            <p class="mb-2">You guys are amazing!!! I’m super thankful you had my parts to replace on my Oreck hand vacuum!!!</p>
                            <p><b>Deborah (Windsor, CO)</b></p>
                        </div>

                    </div>

                    <div class="card mt-2">
                        <div class="card-body">
                            <h5>10/3/22</h5>
                            <p class="mb-2">Exactly the part I needed.</p>
                            <p><b>Danny (Humeston, IA)</b></p>
                        </div>

                    </div> --}}
                    @endif


                </div>

            </div>
            <div class="tab-pane fade" id="manual" role="tabpanel" aria-labelledby="manual">
                <div class="p-4">
                   <a href="https://s3.us-central-1.wasabisys.com/partswarehouse/Manuals/.pdf" target="_blank">{{ $ClientMap->ProductCode }} Manual</a>
                </div>
            </div>
        </div>
    </div>

    @else

    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
    @if(Session::has('alert-' . $msg))

    <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}</p>
    @endif
    @endforeach
    <div class="row">
        <div class="col-sm-12">
            <div class=" mt-4 mb-2 text-black  font-weight-bold">
                <label class="fs-1"><b>SPECIAL ORDER:</b></label>
            </div>
            <div class="col-md-8">
                <p class="fs-3"><b>Please contact us so that we can verify part price and availability.</b></p>
            </div>
        </div>
    </div>

     {{-- <div class="row mt-4">
         <div class="col-md-8">
             <p class="fs-3">Please contact us tso that we can verify part price and availablility.</p>
         </div>
         <div class="col-md-4">
            <a href="{{ url()->previous() }}" class="btn border-0 text-blue" aria-label=""><img src="{{ asset('assets/web') }}/images/keep_shopping.png" class="disabled" alt="..." srcset="" width="150px"> </a>
         </div>
     </div> --}}
     <div class="row mt-4">
        <div class="col-md-6">
            <div class="row">
                <div class="col-4 text-center">
                    <a href="tel:866.243.2721" class="text-decoration-none text-black">
                    <img src="{{ asset('assets/web') }}/images/call.png" alt="logo" class="main-logo" style="width: 80px;">
                    </a>
                   <h3>Call Us</h3>

                </div>
                <div class="col-4 text-center">
                    <img src="{{ asset('assets/web') }}/images/chat.png" onclick="showOrHideDiv('2')" alt="logo" class="main-logo" style="width: 80px;">
                    <h3>Send us a text</h3>

                </div>
                <div class="col-4 text-center">
                    <img src="{{ asset('assets/web') }}/images/email.png" onclick="showOrHideDiv('1')" alt="logo" class="main-logo" style="width: 80px;">
                    <h3>Email us</h3>
                </div>
            </div>

        </div>


            <div class="col-md-6">
                {{-- <a href="{{ url()->previous() }}" class="btn border-0 text-blue" aria-label=""><img src="{{ asset('assets/web') }}/images/keep_shopping.png" class="disabled" alt="..." srcset="" width="150px"> </a> --}}
                <a href="{{ url()->previous() }}" class="btn btn-block btn-danger btn-sm setWebSiteBtnStyle" aria-label="" width="150px"><i class="fas fa-chevron-circle-left"></i>  Keep Shopping</a>

            </div>


    </div>
     <form id="RarelyOrderedForm" action="{{ route('rarely-ordered-add-process') }}"
     method="post">
     @csrf
     <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" name="productcode" >
     <div class="row mt-4">
         <div class="col-md-3 mt-2">
            <div class="form-group">
                <label for="label">Brand?</label>
            </div>
         </div>
         <div class="col-md-5">
            <div class="form-group">
                <input aria-labelledby="PartsWarehouse" type="text" class="form-control" value="{{ old('brand') }}"
                    name="brand" id="brand" placeholder="Enter brand" autocomplete="off">
            </div>
        </div>
     </div>

     <div class="row">
        <div class="col-md-3 mt-2">
            <div class="form-group">
                <label for="label">Model Description?</label>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group mt-2">
                <input aria-labelledby="PartsWarehouse" type="text" class="form-control" value="{{ old('model_description') }}"
                    name="model_description" id="model_description" placeholder="Enter model description" autocomplete="off">
            </div>
       </div>
     </div>

     <div class="row">
        <div class="col-md-3 mt-2">
            <div class="form-group">
                <label for="label">Model Number?</label>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group mt-2">
                <input aria-labelledby="PartsWarehouse" type="text" class="form-control" value="{{ old('model_number') }}"
                    name="model_number" id="model_number" placeholder="Enter model number" autocomplete="off">
            </div>
       </div>
    </div>

    <div class="row">
        <div class="col-md-3 mt-2">
            <div class="form-group">
                <label for="label">Part Number?</label>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group mt-2">
                <input aria-labelledby="PartsWarehouse" type="text" class="form-control" name="part_number" id="part_number" value="{{ $partid }}" placeholder="Enter part number" autocomplete="off">
            </div>
       </div>
    </div>

    <div class="row">
        <div class="col-md-3 mt-2">
            <div class="form-group">
                <label for="label">Additional Information? </label>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group mt-2">
                <textarea class="form-control" rows="4" name="additional_information" placeholder="Enter Additional Information ..."
                    spellcheck="false"></textarea>
            </div>
       </div>
    </div>


    <div class="row">
        <div class="col-md-3 mt-2">
            <div class="form-group">
                <label for="label"><b>Email address:</b><span aria-label="..." role="main" class="text-danger">(*Required)</span> </label>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group mt-2">
                <input aria-labelledby="PartsWarehouse" type="email" class="form-control" value="{{ old('email') }}"
                    name="email" id="email" placeholder="Enter email" autocomplete="off">
            </div>
       </div>
    </div>


    <div class="row">
        <div class="col-md-3 mt-2">
            <div class="form-group">
                <label for="label">Phone Number: </label>
            </div>
        </div>
        <div class="col-md-5">
            <div class="form-group mt-2">
                <input aria-labelledby="PartsWarehouse" type="text" class="form-control" value="{{ old('phone') }}"
                    name="phone" id="phone" placeholder="Enter phone" autocomplete="off">
            </div>
       </div>
    </div>


     <div class="row mt-4">
        <div class="col-md-4">
            <button role="button" tabindex="0" aria-labelledby="SUBMIT" type="submit" class="btn btn-danger w-75 mb-3">SUBMIT</button>
        </div>


    </div>

    </form>

    <div class="row mt-4" id="RarelyOrderedText">
        <div class="col-md-8">
            <img src="{{ asset('assets/web') }}/images/rarely_ordered.png" class="disabled" alt="..." srcset="" width="500px">

        </div>
        <div class="col-md-8">
            <p>Text your data tag and email address to <span aria-label="..." role="main" class="text-danger">972-381-4644</span> and we'll send you a link to the right parts for your model!</p>
            <p>Model numbers are usually found on data label attached to the machine. On vacuums, power tools, and pool equipment, they are usually located on the back or bottom of the unit. On appliances, they are usually located on the back or inside the unit.</p>
        </div>
    </div>
    @endif
</div>


</div>
<div class="loupe"></div>

    <div class="modal fade" id="productReviewModal" tabindex="-1" aria-labelledby="productReviewModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="productReviewModalLabel">Product Review</h5>
            <button role="button" tabindex="0" aria-labelledby="Close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="Productreview" action="{{ route('part-details-review-add-process') }}"
                method="post">
                @csrf

                <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" name="productcode" id="productcode">
                <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ !empty($pin->Name) ? $pin->Name: '' }}" name="part_name" id="part_name">

                <div class="form-group">
                    <div class="mb-3">
                        <span aria-label="..." role="main" class="field-label-info"></span>
                            <label for="title" class="col-form-label">Review</label>

                            <input aria-labelledby="PartsWarehouse" type="hidden" id="product_review" name="product_review" value="" required="required">

                            <h2 class="bold rating-header" style="">

                            </h2>
                            <button role="button" tabindex="0" aria-labelledby="rating-star-1" type="button" class="btnrating btn btn-secondary btn-sm" data-attr="1" id="rating-star-1">
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </button>
                            <button role="button" tabindex="0" aria-labelledby="rating-star-2" type="button" class="btnrating btn btn-secondary btn-sm" data-attr="2" id="rating-star-2">
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </button>
                            <button role="button" tabindex="0" aria-labelledby="rating-star-3" type="button" class="btnrating btn btn-secondary btn-sm" data-attr="3" id="rating-star-3">
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </button>
                            <button role="button" tabindex="0" aria-labelledby="rating-star-4" type="button" class="btnrating btn btn-secondary btn-sm" data-attr="4" id="rating-star-4">
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </button>
                            <button role="button" tabindex="0" aria-labelledby="rating-star-5" type="button" class="btnrating btn btn-secondary btn-sm" data-attr="5" id="rating-star-5">
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </button>

                      </div>
                </div>

                    <div class="form-group">
                        <div class="mb-3">
                            <label for="title" class="col-form-label">Title</label>
                            <input aria-labelledby="PartsWarehouse" type="text" class="form-control" id="title" name="title">
                          </div>
                    </div>

                    <div class="form-group">
                        <div class="mb-3">
                        <label for="message-text" class="col-form-label">Description</label>
                        <textarea class="form-control" id="message-text" name="description"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="modal-footer">
                            <button role="button" tabindex="0" aria-labelledby="Close" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button role="button" tabindex="0" aria-labelledby="Save" type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>

                  </form>
            </div>

        </div>
        </div>
    </div>


    <div class="modal fade" id="productAvailModal" tabindex="-1" aria-labelledby="productAvailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-body">
                <div class="text-end">

                    <button role="button" tabindex="0" aria-labelledby="Close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                <h2>Availability</h2>
                <ul role="list">
                    <li role="listitem"><b>Ships Same Day/Next Day</b> &mdash; Part is in stock and will ship within 1 business day.
                    </li>
                    <li role="listitem"><b>Usually Ships within X Days</b> &mdash; Part is in stock and should ship within X business
                        days.</li>
                    <li role="listitem"><b>Usually Available within 10 Days</b> &mdash; Part is available and usually ships from our
                        warehouse within 10 to 14 business days.</li>
                    <li role="listitem"><b>Factory out of stock</b> &mdash; This part is currently on backorder from the manufacturer.
                        For earliest fulfillment, place your order now.</li>
                    <li role="listitem"><b>No Longer Available</b> &mdash; The manufacturer no longer makes the part and all stock has
                        been sold.</li>
                </ul>
                <h2>Replaces</h2>
                <ul role="list">
                    <li role="listitem">This part replaces the items listed.</li>
                </ul>
                <h2>Shipping Surcharge</h2>
                <ul role="list">
                    <li role="listitem">Due to size, weight or point of origin, a shipping surcharge will be applied at checkout.</li>
                </ul>
            </div>

        </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
          let touchStartX = 0;
          let touchEndX = 0;

          $("#carouselExampleIndicators").on("touchstart", function(event) {
            touchStartX = event.touches[0].clientX;
          });

          $("#carouselExampleIndicators").on("touchend", function(event) {
            touchEndX = event.changedTouches[0].clientX;
            handleSwipe();
          });

          function handleSwipe() {
            const SWIPE_THRESHOLD = 50;
            if (touchEndX - touchStartX > SWIPE_THRESHOLD) {
              // Swipe left (previous slide)
              $("#carouselExampleIndicators").carousel("prev");
            } else if (touchStartX - touchEndX > SWIPE_THRESHOLD) {
              // Swipe right (next slide)
              $("#carouselExampleIndicators").carousel("next");
            }
          }
        });
      </script>

    <script>
        $(document).ready(function() {
          $('.product-image-thumb').on('click', function () {
            var $image_element = $(this).find('img')
            $('.product-image').prop('src', $image_element.attr('src'))
            $('.product-image-thumb.activeIMG').removeClass('activeIMG')
            $(this).addClass('activeIMG')
          })
        })
      </script>

    <script>

            $('#RarelyOrderedForm').hide();
            $('#RarelyOrderedText').hide();
            $(document).ready(function() {
                $('#phone').inputmask("(999) 999-9999");
            });

            function showAvail(){
                $('#productAvailModal').modal('show');
            }
        function showOrHideDiv(p) {
           if(p == 1){
               $('#RarelyOrderedForm').show();
               $('#RarelyOrderedText').hide();
           }else{
               $('#RarelyOrderedForm').hide();
               $('#RarelyOrderedText').show();
           }
        }
     </script>
     <script>
        document.addEventListener("DOMContentLoaded", function () {
            var mySwiper = new Swiper(".swiper-container", {
                // Optional parameters
                loop: true,
                slidesPerView: 1,
                spaceBetween: 10,
                pagination: {
                    el: ".swiper-pagination",
                  },
                // More options can be added as needed
            });
        });
    </script>
    <script>

        jQuery(document).ready(function($){

            $('#RarelyOrderedForm').validate({
                rules: {
                    email: {
                        required: true
                    },

                },
                messages: {
                    email: {
                        required: "Please enter a email",
                    },

                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
    </script>

    <script>

        jQuery(document).ready(function($){

            $('#Productreview').validate({
                rules: {
                    product_review: {
                        required: true
                    },
                    title: {
                        required: true,
                    },
                    description: {
                        required: true,
                    },

                },
                messages: {
                    product_review: {
                        required: "Please enter a review",
                    },
                    title: {
                        required: "Please enter a title",
                    },
                    description: {
                        required: "Please enter a description",
                    },

                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
    </script>
    <script>
          jQuery(document).ready(function($){

        $(".btnrating").on('click',(function(e) {

        var previous_value = $("#product_review").val();

        var selected_value = $(this).attr("data-attr");
        $("#product_review").val(selected_value);

        $(".selected-rating").empty();
        $(".selected-rating").html(selected_value);

        for (i = 1; i <= selected_value; ++i) {
        $("#rating-star-"+i).toggleClass('btn-warning');
        $("#rating-star-"+i).toggleClass('btn-default');
        }

        for (ix = 1; ix <= previous_value; ++ix) {
        $("#rating-star-"+ix).toggleClass('btn-warning');
        $("#rating-star-"+ix).toggleClass('btn-default');
        }

        }));

    });

    </script>
<script>


    var $loupe = $(".loupe"),
    loupeWidth = $loupe.width(),
    loupeHeight = $loupe.height();

$(document).on("mouseenter", ".image", function (e) {
    var $currImage = $(this),
        $img = $('<img/>')
        .attr('src', $('img', this).attr("src"));

    $loupe.html($img).fadeIn(100);

    $(document).on("mousemove",moveHandler);

    function moveHandler(e) {
        var imageOffset = $currImage.offset(),
            fx = imageOffset.left - loupeWidth / 2,
            fy = imageOffset.top - loupeHeight / 2,
            fh = imageOffset.top + $currImage.height() + loupeHeight / 2,
            fw = imageOffset.left + $currImage.width() + loupeWidth / 2;

        $loupe.css({
            'left': e.pageX - 75,
            'top': e.pageY - 75
        });

        var loupeOffset = $loupe.offset(),
            lx = loupeOffset.left,
            ly = loupeOffset.top,
            lw = lx + loupeWidth,
            lh = ly + loupeHeight,
            bigy = (ly - loupeHeight / 4 - fy) * 2,
            bigx = (lx - loupeWidth / 4 - fx) * 2;

        $img.css({ 'left': -bigx, 'top': -bigy });

        if (lx < fx || lh > fh || ly < fy || lw > fw) {
            $img.remove();
            $(document).off("mousemove",moveHandler);
            $loupe.fadeOut(100);
        }
    }
});




</script>

<!-- Criteo Product Tag -->
<script>
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
    { event: "setAccount", account: 15727 },
    { event: "setEmail", email: "{{ (auth()->check()) ? Auth::user()->emailaddress : '' }}"},
    { event: "setSiteType", type: deviceType},
    { event: "setZipcode", zipcode: "{{ (auth()->check()) ? Auth::user()->postalcode : '' }}" },
    { event: "viewItem", item: "{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" }
);
</script>
<!-- END Criteo Product Tag -->

@endsection