@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;
        }
 #modelamount{
    color: black !important;
}
 #modelamount1{
    color: black !important;
}
        @media only screen and (max-width: 776px) {
            .mobile-fontsize18 {
                font-size: 28px !important;
                font-weight: 600 !important;
        }
        #modelamount{
            color: black !important;
        }
         #modelamount1{
            color: black !important;
        }
        .mobileh4{
            font-size: 18px !important;
        }
        .mobileFavChange{
            margin-top: -45px !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;
    }

    #cartAddBtn{
        width: 100%;
        background-color: #409b5e;
        border-color: #409b5e;
        font-size: 20px;
    }

     #cartAddBtn22{
        width: 100%;
        background-color: #409b5e;
        border-color: #409b5e;
        font-size: 20px;
    }
 .cartAddBtnAltPart{
    background-color: #409b5e;
    border-color: #409b5e;

}
    #modelavailability{
        font-size: 20px;
    }
    #modelavailability span{
        font-weight: 600;
    }
    #fitthismodel{
        font-size: 20px;
    }
    #fitthismodel span{
        font-weight: 600;
    }
     #modelreplaces{
        font-size: 20px;
    }
    #modelreplaces span{
        font-weight: 600;
    }
    .accordion-item{
        border-right: 0px;
        border-left: 0px;
        border-radius: 0px !important;
    }
    .accordion-button:not(.collapsed){
        color:#21252b !important;
        background-color:#ffff !important;
        box-shadow:none !important;
    }
    .accordion{
        --bs-accordion-btn-focus-border-color:none !important;
        --bs-accordion-btn-focus-box-shadow:none!important;
        --bs-accordion-active-color:none !important;
        --bs-accordion-active-bg:none !important;
    }
    .accordion-button{
        font-size: 18px;
    }
    .accordion-button b{
        margin-left: -18px;
    }
    .accordion-body{
        padding: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    }
.setHeaderLargeBtnStyle{
        margin-top: 5px !important;
    }
    @media (max-width: 766px){
 .mmobiledivpadding{
            padding-left: 0px;
        }
        #cartAddBtn{
           margin-top: 51px !important;
        }
        .accordion-item:nth-child(1){
            border-top:0px;
        }
        .accordion-item:last-child{
            border-bottom:0px;
        }
        .accordion{
            margin-top:0px !important;
        }

           #cartAddBtn{
            width: 100%;
            background-color: #409b5e;
            border-color: #409b5e;
            font-size: 20px;
             border-radius: 5px;
        }
          #cartAddBtn22{
            width: 100%;
            background-color: #409b5e;
            border-color: #409b5e;
            font-size: 20px;
            
        }
    }
.cartAddBtnAltPart:not(.btn-check)+.btn:active
    {
    background-color: #409b5e !important;
    border-color: #409b5e !important;
    font-size: 20px;
    }
    .cartAddBtnAltPart:active
    {
    background-color: #409b5e !important;
    border-color: #409b5e !important;
    font-size: 20px;
    }
    .cartAddBtnAltPart:hover
    {
    background-color: #409b5e !important;
    border-color: #409b5e !important;
    font-size: 20px;
    }
#fitTheseModelLoadDiv:focus {
    outline: none; /* Remove default focus outline */
}

#alternativeProductDiv{
    outline: none;
    border: none;
    background: none;
}
    </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">
    @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
    @if(!empty($pin))
        <div class="row d-lg-none">
            <div class="col-sm-12">
                <div class="text-black font-weight-bold">
                    <p class="fs-2 mobile-fontsize18" style="word-wrap: break-word;margin: auto;font-size: 25px !important;">{{ $pin->Name }}</p>
                    <p class="fs-6 m-0" style="color: #7a7a7a;" id="modelno">Product Code: {{ !empty($ClientMap) ? $ClientMap->ProductCode: "" }} @if(!empty($vendor_map->MFG_SKU) && empty($alternativProductData))| Mfr # {{ $vendor_map->MFG_SKU }} @endif</p>
                                    </div>
            </div>
        </div>
@foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))

        <div class="alert alert-{{ $msg }} mt-2"><p>{{ Session::get('alert-' . $msg) }}</p></div>
        @endif
    @endforeach
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
        <div class="row">
            <div class="col-md-4" id="proMainImageDiv">
                <div class="row">
                    @php
                $userAgent = $_SERVER['HTTP_USER_AGENT'];
                $isMobile = false;
                $defaultClick=0;
                // Check if the user agent indicates a mobile device
                if (strpos($userAgent, 'Mobile') !== false) {
                $isMobile = true;
                }
                $coln = 12;
                @endphp
                    @if(!empty($pin))
                    @if($pin->HasPhoto > 0)
                    @if($pin->HasPhoto > 0)
                    @php $is_image[2]=1; @endphp
                    @if($pin->HasPhoto > 1)
                    @php $coln = 9; @endphp

                    <div class="col-lg-3 col-md-3 text-center d-none d-lg-block">
                        <div class="product-image-thumbs">


                                                        
                        </div>
                    </div>
                    @endif

                    @endif

                    @endif

                    <div class="col-lg-{{ $coln }} col-md-{{ $coln }} 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 -->
                                                                        

                                    <!-- 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: 250px;">
                            <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 d-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: 250px;">
                            <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 d-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>
                    @endif
                </div>
            </div>


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

                <div class="card-body">

                    <div class="row">
                        <div class="col-md-12" id="modelDetails">

                            <div class="mt-3 d-none d-lg-block">
                                <div class="text-black  font-weight-bold ">
                                    <label class="fs-2 mobile-fontsize18">{{ $pin->Name }}</label>
                                    <p class="fs-5 d-none d-lg-block d-md-block m-0" style="color: #7a7a7a;" id="modelno">Product Code: {{ !empty($ClientMap) ? $ClientMap->ProductCode: "" }} @if(!empty($vendor_map->MFG_SKU) && empty($alternativProductData))| Mfr # {{ $vendor_map->MFG_SKU }} @endif</p>
                                                                    </div>
                                @if(!empty($pin->Manufacturer))
                                @if($isMobile != 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 mt-3"  alt="...">
                                @else
                                @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 mt-3"  alt="...">
                                @endif
                                @endif
                            </div>
                            @if($pin->Availability)
                            <div class="mt-3 mb-3" id="modelavarepdiv">
                                <div id="modelavailability"><span class="text-danger productAvailability" onclick="showAvail()">Availability <i class="fa fa-info-circle" style="color: #1273de;" aria-hidden="true"></i>
                                    </span>{{$pin->Availability  }}</div>
                                     @if ($pin->Availability != "No Longer Available" && $pin->Availability != 'Discontinued by the Manufacturer')
                                     @if(!empty($alternativProductData))
                                    <div id="modelavailability" class="mt-2"><span class="text-danger" onclick="showAlternativeProduct()">Recommended: </span>&nbsp;&nbsp;<a href="javascript:void(0);" class="showAlternativeProduct" onclick="showAlternativeProduct()">View</a></div>
                                    @endif
                            @if(empty($isWholeModel))
                                <div id="fitthismodel" class="mt-2"><span class="text-danger productAvailability" onclick="showFitThese()">Fits Models: </span>&nbsp;&nbsp;<a href="javascript:void(0);" class="productAvailability" onclick="showFitThese()">View List</a></div>
                                @endif
                                 @if(!empty($ParentClientMap) && !empty($ParentClientMap->ProductCode) && $pin->DaysToShip != 99)
                                    <div id="modelreplaces" class="mt-2"><span class="text-danger productAvailability" onclick="showAvail()">{{ $replaces_label }} : </span>{{$ParentClientMap->ProductCode  }}</div>
                                @endif
                            @endif
                            </div>
                            @endif

                            <div class="row">
                                <div class="col-md-12 productpriceisstock">
                                    @if ($pin->Availability != "No Longer Available" && $pin->Availability != 'Discontinued by the Manufacturer')
                                    <span
                                        class="fs-3 text-danger fw-bold mt-2" id="modelamount">${{ $pin->SalePrice }}</span>
                                        @if($pin->SalePrice < $pin->SalePriceAfterRatio)
                                            <span aria-label="..." role="main" class="text-red text-decoration-line-through "
                                                id="modelstickamount" style="color: gray;margin-left: 5px;">${{ $pin->SalePriceAfterRatio }}</span>
                                            <span aria-label="..." role="main" class="text-red font-weight-bolder"
                                                id="modelstickamount" style="color: #dc3545;margin-left: 5px;font-weight: 700;">{{ round((($pin->SalePriceAfterRatio/$pin->SalePrice)-1)*100) }}% {{ !empty($setting->product_discount_label) ? $setting->product_discount_label : "Off" }}</span>
                                        @endif
                                    @endif
                                    @if($inStockCheck == 1)
                                        <p style="color: green;font-size: 18px;margin: 0px;margin-top: 10px;"><i class="fa fa-check-circle" aria-hidden="true"></i> In Stock</p>
                                        {{--  <div>
                                            <img src="{{ asset('assets/web') }}/images/instock.png" alt="" srcset="" width="80px">
                                        </div>  --}}
                                    @endif
                                </div>

                            </div>


                            <div class="row">

                                <div class="col-3 col-md-2 mb-2" id="qtycartdiv">
                                    <div style="width: 125px;margin: auto;margin-top: 10px;" class="d-none d-lg-block">
                                        <form action="#" id="addcartForm">
                                            @csrf
                                            @if ($pin->Availability != "No Longer Available" && $pin->Availability !=
                                            'Discontinued by the Manufacturer')

                                            <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>

                                            @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>
                                    <div style="margin: auto;margin-top: 10px;" class="d-lg-none">

                                        <select class="form-select" name="proquantitynew" id="proquantitynew" style="height: 44px;">
                                            <option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option><option value='16'>16</option><option value='17'>17</option><option value='18'>18</option><option value='19'>19</option><option value='20'>20</option><option value='21'>21</option><option value='22'>22</option><option value='23'>23</option><option value='24'>24</option><option value='25'>25</option><option value='26'>26</option><option value='27'>27</option><option value='28'>28</option><option value='29'>29</option><option value='30'>30</option><option value='31'>31</option><option value='32'>32</option><option value='33'>33</option><option value='34'>34</option><option value='35'>35</option><option value='36'>36</option><option value='37'>37</option><option value='38'>38</option><option value='39'>39</option><option value='40'>40</option><option value='41'>41</option><option value='42'>42</option><option value='43'>43</option><option value='44'>44</option><option value='45'>45</option><option value='46'>46</option><option value='47'>47</option><option value='48'>48</option><option value='49'>49</option><option value='50'>50</option><option value='51'>51</option><option value='52'>52</option><option value='53'>53</option><option value='54'>54</option><option value='55'>55</option><option value='56'>56</option><option value='57'>57</option><option value='58'>58</option><option value='59'>59</option><option value='60'>60</option><option value='61'>61</option><option value='62'>62</option><option value='63'>63</option><option value='64'>64</option><option value='65'>65</option><option value='66'>66</option><option value='67'>67</option><option value='68'>68</option><option value='69'>69</option><option value='70'>70</option><option value='71'>71</option><option value='72'>72</option><option value='73'>73</option><option value='74'>74</option><option value='75'>75</option><option value='76'>76</option><option value='77'>77</option><option value='78'>78</option><option value='79'>79</option><option value='80'>80</option><option value='81'>81</option><option value='82'>82</option><option value='83'>83</option><option value='84'>84</option><option value='85'>85</option><option value='86'>86</option><option value='87'>87</option><option value='88'>88</option><option value='89'>89</option><option value='90'>90</option><option value='91'>91</option><option value='92'>92</option><option value='93'>93</option><option value='94'>94</option><option value='95'>95</option><option value='96'>96</option><option value='97'>97</option><option value='98'>98</option><option value='99'>99</option><option value='100'>100</option>                                        </select>
                                    </div>
                                </div>
                                @if ($pin->Availability != "No Longer Available" && $pin->Availability != 'Discontinued by the Manufacturer')
                                <div class="col-9 col-md-4 mmobiledivpadding">
                                    <div class="row">
                                        <div class="col-10 col-md-6 mobileFavChange">
                                            <div class="text-center mt-3 d-none" style="font-size: 20px;">
                                                @if($whishlist_status == 1)
                                                    <a href="javascript:void(0)" aria-label="" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                        <span><i class="far fa-heart"></i> Save</span>
                                                    </a>
                                                @else
                                                    <a href="javascript:void(0)" aria-label="" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                        <span><i class="fa fa-heart"></i> Remove from My Gear</span>
                                                    </a>
                                                @endif
                                            </div>
                                            @if ($pin->Availability != "No Longer Available")
                                            @if ($pin->DaysToShip != 99)
                                                 <a href="javascript:void(0)" id="cartAddBtn" onclick="addToCart()" class="btn btn-block btn-danger btn-lg setHeaderLargeBtnStyle mt-3" style="margin-top: 5px;">Add to Cart</a>
                                            @else
                                                 <a href="javascript:void(0)" id="cartAddBtn2" class="btn btn-block btn-danger btn-sm setHeaderBtnStyle mt-3" style="display: none;margin-top: 5px;" >Add to Cart</a>
                                            @endif
                                            @endif



                                        </div>
                                        <div class="col-2 col-md-6">
                                            <div class="text-left mt-3 d-none d-lg-block" style="font-size: 20px;">
                                                @if($whishlist_status == 1)
                                                    <a href="javascript:void(0)" aria-label="" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                        <span><i class="far fa-heart"></i> Save</span>
                                                    </a>
                                                @else
                                                    <a href="javascript:void(0)" aria-label="" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                        <span><i class="fa fa-heart"></i> Save</span>
                                                    </a>
                                                @endif
                                            </div>
                                            <div class="text-left mt-3 d-lg-none" style="font-size: 20px;">
                                                @if($whishlist_status == 1)
                                                    <a href="javascript:void(0)" aria-label="" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                        <span><i class="far fa-heart"></i></span>
                                                    </a>
                                                @else
                                                    <a href="javascript:void(0)" aria-label="" data-part-id="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                        <span><i class="fa fa-heart"></i></span>
                                                    </a>
                                                @endif
                                            </div>

                                        </div>
                                    </div>


                                </div>
                                @endif
                                 @if(!empty($alternativProductData))
                                <div class="mt-3 mb-2" >
                                    <hr style="margin-top: 15px;border: 1px solid;" class="d-none d-md-block" />
                                    <h5 style="font-weight: 600;">Recommended:</h5>
                                    <div class="card mt-2" >

                                        @foreach ($alternativProductData as $a)
                                        @php
                                            $originalText = $a['productname'];
                                            if (($lastHashPos = strrpos($originalText, '#')) !== false) {
                                                // Replace the text after the last '#' with red-colored text
                                                $newText = substr($originalText, 0, $lastHashPos + 1) .
                                                        "<span style='color: #dc3545;'>" . substr($originalText, $lastHashPos + 1) . "</span>";
                                                $proname = $newText;
                                            } else {
                                                $proname = $originalText;
                                            }
                                            $pname = preg_replace("/[^A-Za-z0-9\s]/", "", $a['productname']);
                                            $pname1 = str_replace(" ","-",$pname);
                                        @endphp

                                            <div class="row card-body" >
                                                <div class="col-md-2 col-2">
                                                    <div class="item-card-image text-center" >
                                                        <a href="{{ route('part-details-new',[$pname1.'-p',$a['productcode'].'.html']) }}" class="text-decoration-none " aria-label="">
                                                            <img alt="..."
                                                                src="{{ $a['productimage'] }}"
                                                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg&quot;"
                                                                width="50px" height="50px"
                                                                class="partImg hrefproductdetails">
                                                        </a>

                                                    </div>

                                                </div>
                                                <div class="col-md-10 col-10">

                                                    <a href="{{ route('part-details-new',[$pname1.'-p',$a['productcode'].'.html']) }}"
                                                        class="text-decoration-none text-black " aria-label="">
                                                        {!! $proname !!}
                                                    </a>
                                                    <div class="mt-1" @if($loop->index == 0) tabindex="0" id="alternativeProductDiv" @endif>

                                                        <span aria-label="..." role="main" class="fs-6 text-black " onclick="showRecommendedAvail()"><span class="text-danger fw-bold">Availability</span> <i class="fa fa-info-circle" style="color: #1273de;" aria-hidden="true"></i> {{ $a['DaysToShipDays'] }}</span>
                                                    </div>
                                                    <div class="mt-1">
                                                        <a href="{{ route('part-details-new',[$pname1.'-p',$a['productcode'].'.html']) }}" class="text-decoration-none " aria-label="">
                                                            <span aria-label="..." role="main" class="fs-5 text-black fw-bold">${{ $a['productprice'] }}</span>
                                                        </a>

                                                            <a href="javascript:void(0)"  onclick="addToCartAltPart(this)" data-productimage="{{ $a['productimage'] }}" data-modelamount="{{ $a['productprice'] }}" data-modelstickamount="{{ $a['productstickprice'] }}" data-modeltitle="{{ $a['productname'] }}" data-modelno="{{ $a['productcode'] }}" class="mt-2 btn btn-block btn-danger btn-sm cartAddBtnAltPart d-lg-none m-2" style="font-size: 14px;"><span class="d-none d-md-block"><i class="fa fa-shopping-cart"></i>  Add To Cart</span><span class="d-lg-none">Add <i class="fa fa-shopping-cart"></i></span></a>

                                                    </div>
                                                    <div class="d-none d-md-block">
                                                        <a href="javascript:void(0)"  onclick="addToCartAltPart(this)" data-productimage="{{ $a['productimage'] }}" data-modelamount="{{ $a['productprice'] }}" data-modelstickamount="{{ $a['productstickprice'] }}" data-modeltitle="{{ $a['productname'] }}" data-modelno="{{ $a['productcode'] }}" class="mt-2 btn btn-block btn-danger btn-sm cartAddBtnAltPart" style="font-size: 14px;"><span class="d-none d-md-block"><i class="fa fa-shopping-cart"></i>  Add To Cart</span><span class="d-lg-none">Add <i class="fa fa-shopping-cart"></i></span></a>
                                                    </div>

                                                </div>

                                            </div>
                                            <hr class="m-0">
                                        @endforeach


                                    </div>
                                </div>
                                @endif
                                @if ($pin->Availability != "No Longer Available" && $pin->Availability != 'Discontinued by the Manufacturer')
                                @if(!empty($pin->SalePrice) && $pin->SalePrice >= $setting->affirm_enable_amount && $setting->is_enable_affirm == 1)
                                            <div class="mt-3">
                                                <p class="affirm-as-low-as" data-page_type="product" data-amount="{{ ($pin->SalePrice*100) }}" style="font-size: 18px;"></p>
                                            </div>
                                        @endif
                                <hr class="d-lg-none" style="border: 2.5px solid #ddd;margin-top: 20px;margin-bottom: 0px;">
                                <div class="accordion mt-4" id="productDescTab">
                                    <div class="accordion-item" style="word-wrap: break-word;">
                                    <h2 class="accordion-header" id="headingOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#PartDesc" aria-expanded="true" aria-controls="PartDesc">
                                        <b>Description</b>
                                        </button>
                                    </h2>
                                    <div id="PartDesc" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#productDescTab">
                                        <div class="accordion-body productdesctiption">
                                            {!! $pin->Description !!}
                                        </div>
                                    </div>
                                    </div>
                                    <div class="accordion-item " id="fitTheseModelLoadDiv" tabindex="-1">
                                    <h2 class="accordion-header" id="headingTwo">
                                        <button class="accordion-button collapsed fitTheseModelLoadBtn" type="button" data-bs-toggle="collapse" data-bs-target="#PartFitsModels" aria-expanded="false" aria-controls="PartFitsModels" onclick="fitTheseModelLoad('{{ $ClientMap->ProductCode }}')">
                                            @if(!empty($isWholeModel))
                                                <b>Parts List</b>
                                            @else
                                                <b>Fits Models</b>
                                            @endif
                                        </button>
                                    </h2>
                                    <div id="PartFitsModels" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#productDescTab">
                                        <div class="accordion-body">
                                            @if(!empty($isWholeModelName))
                                                <div class="list-group p-2">
                                                    <label class="list-group-item text-primary fittheselabel"><i class="fa fa-arrow-right" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp;<a class="text-primary" href=""></a></label>
                                                </div>
                                            @else
                                                <div class="list-group p-2" id="fitTheseModelList">
                                                    Loading....
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    </div>
                                    @if(!empty($isWholeModel))
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingTwo">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#PartManual" aria-expanded="false" aria-controls="PartManual">
                                            <b>Manual</b>
                                        </button>
                                        </h2>
                                        <div id="PartManual" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#productDescTab">
                                        <div class="accordion-body">
                                            <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>
                                    @endif
                                    <div class="accordion-item">
                                    <h2 class="accordion-header" id="headingThree">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#PartReview" aria-expanded="false" aria-controls="PartReview">
                                            <b>Review</b>
                                        </button>
                                    </h2>
                                    <div id="PartReview" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#productDescTab">
                                        <div class="accordion-body">
                                            @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 product review">Write a product 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 product review">Write a product review</a>
                                            </div>

                                            @endif
                                        </div>
                                    </div>
                                    </div>
                                </div>
                                @endif
                                <hr class="d-lg-none" style="border: 2.5px solid #ddd;margin-top: 5px;margin-bottom: 0px;">

                            </div>
                        </div>
                    </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">
    <div class="col-md-3 mt-2">

    </div>
    <div class="col-md-5 text-start">
        <div class="form-group mt-2">
            <div class="captcha">
                <span>{!! captcha_img() !!}</span>
                <button type="button" class="btn btn-danger" class="reload" id="reload">
                    &#x21bb;
                </button>
            </div>
        </div>
    </div>
</div>
<div class="row mt-2">
    <div class="col-md-3 mt-2">

    </div>
    <div class="col-md-5">
        <div class="form-group mb-4">
            <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha" required>
        </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>
@if(!empty($pin))
<div class="slicyfooterpart container d-md-none d-lg-none bg-white" style="position: fixed;bottom: 0;">
    <div class="row mt-2 mb-2">
        <div class="col-5 text-start">
            <p class="fs-4 text-danger fw-bold mt-2" id="modelamount1">${{ $pin->SalePrice }}</p>
        </div>
        <div class="col-7 text-end">
                @if ($pin->Availability != "No Longer Available" && $pin->Availability != 'Discontinued by the Manufacturer')
                        @if ($pin->DaysToShip != 99)
                            <a href="javascript:void(0)" id="cartAddBtn22" onclick="addToCart()" class="btn btn-block btn-danger btn-lg setHeaderLargeBtnStyle">Add to Cart</a>
                        @else
                            <a href="javascript:void(0)" id="cartAddBtn23" class="btn btn-block btn-danger btn-sm setHeaderBtnStyle" style="display: none;">Add to Cart</a>
                        @endif
                @endif
        </div>

    </div>
</div>
@endif
<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="mb-3">
                            <label for="message-text" class="col-form-label">This form is for product reviews only. For customer support please contact us at 866-243-2721 or email at <a href="mailto:info@partswarehouse.com">info@partswarehouse.com.</a></label>
                         </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 on its way to our warehouse and will ship out within X business days.</li>
                    <li role="listitem"><b>Usually Available within 10 Days</b> &mdash; Part is usually available and ships from our warehouse within 10 business days.</li>
                    <li role="listitem"><b>Special Order</b> &mdash; Manufacturer is currently out of stock and awaiting replenishment. Usually ships within 2 to 6 weeks. (You can still cancel at any time prior to shipment.)</li>
                    <li role="listitem"><b>Discontinued</b> &mdash; Discontinued by the manufacturer.</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>
      <div class="modal fade" id="productRecommendedAvailModal" tabindex="-1" aria-labelledby="productRecommendedAvailModalLabel" 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>
                {!! $setting->recommended_parts_availability !!}
            </div>

        </div>
        </div>
    </div>
<script type="text/javascript">
 $('#proquantitynew').change(function(){

            $('#itemID_proquantity').val($(this).val());
        });
function showRecommendedAvail(){
                $('#productRecommendedAvailModal').modal('show');
            }
function showAlternativeProduct(){
        $("#alternativeProductDiv").focus();

        }
    $('#reload').click(function () {
        $.ajax({
            type: 'GET',
            url: '{{ route("reload-captcha") }}',
            dataType:"json",
            success: function (data) {
                $(".captcha span").html(data.captcha);
            }
        });
    });
</script>
    <script>
        function showFitThese(){
            $('.fitTheseModelLoadBtn').trigger('click');
            document.getElementById('fitTheseModelLoadDiv').focus();
        }
        $(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>
        @if(!empty($pin->SalePrice) && $pin->SalePrice >= $setting->affirm_enable_amount && $setting->is_enable_affirm == 1)
        var _affirm_config = {
            public_api_key: "9QOFVJA86B1JTZP2", /* replace with public api key */
            script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
            locale: "en_US",
            country_code: "USA",
        };

    (function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a<c.length;a++)f[c[a]]=l(b,d,c[a]);a=0;for(c=["get","token","url","items"];a<c.length;a++)f[c[a]]=function(){};k.async=
      !0;k.src=g[e];p.parentNode.insertBefore(k,p);delete g[e];f(g);m[n]=b})(window,_affirm_config,"affirm","checkout","ui","script","ready","jsReady");
        @endif
            $('#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($){


                // var partid = "{{ (!empty($ClientMap) ? $ClientMap->ProductCode: '') }}";
                // var manufacturer = "{{ (!empty($pin->Manufacturer) ? $pin->Manufacturer: '') }}";

                // $('#proMainImageDiv').load("{{ url('/part-details-image-new') }}/"+partid);
                // if(manufacturer != ""){
                // //    $('#proHeaderImageDiv').load("{{ url('/part-details-header-image-new') }}/"+manufacturer);
                // }




            $('#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');
        }

        }));

        @if(!empty($isWholeModel))
                var productcode = "{{ (!empty($ClientMap) ? $ClientMap->ProductCode: '') }}";
                $.ajax({
                    type: 'get',
                    url: MODEL_SEARCH_API_URL,
                    data: { subcat: '|@' + productcode },
                    dataType: "json",
                    success: function(fitthesemodel) {
                        if (fitthesemodel.error) {
                            $('.fitTheseModelLoadBtn').hide();
                        }
                    }
                });
        @endif
    });

    </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>
<script>


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


        var partid = "{{ (!empty($ClientMap) ? $ClientMap->ProductCode: '') }}";
        var manufacturer = "{{ (!empty($pin->Manufacturer) ? $pin->Manufacturer: '') }}";

        //$('#proMainImageDiv').load("{{ url('/part-details-image-new') }}/"+partid);
        if(manufacturer != ""){
        //    $('#proHeaderImageDiv').load("{{ url('/part-details-header-image-new') }}/"+manufacturer);
        }
    });
</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