@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: #f5f5f5;
        color: blue;
      }
      .nav-tabs .nav-link{
        background-color: white;
        color:black;
        border-bottom: 1px solid #ddd;
      }

      .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: 0px;
    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;
}


    .slider-wrapper {
        width: 500px;
        height: 110px;
        }

    .image-container {
        width: 445px;
        height: 120px;
        overflow: hidden;
        position: absolute;
        display: flex;
        padding: 28px;
    }

    .image-container img {
        width: 50%;
        height: 100%;
        object-fit: contain;
        display: none; /* Images are hidden until loaded */
        padding: 10px;
    }

    .image-container img.active {
        display: block;
    }

    .slider-buttons {
        position: relative;
        width: 480px;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        top: 30px;
        right: 5px;
    }

    .slider-buttons button {

        color: #02458f;
        border: none;
        padding: 10px;
        cursor: pointer;
        background: #ffffff;


    }

    .slider-buttons button:hover {
        opacity: 1;
    }

    .newarrowclass{
        color: #ffffff !important;
    }

    .custom-icon-arrow{
        font-size: 30px;
        border: 2px solid #025192;
        border-radius: 50%;
        padding: 15px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .fa-angle-right:before{
        margin-left: 3px !important;
    }
    .fa-angle-left:before{
        margin-left: 0px !important;
    }

    #proMainImageDiv{
        max-height: 300px;
    }

    .recTitle{
        position: absolute;
        top: -13px;
        background: #F5F5F5;
        padding: 0 10px;
        border-radius: 3px;
        border: 1px solid #dbd7d7;
        font-weight: 600;
        padding-top: 2px;
        padding-bottom: 2px;

    }

    .qty-input {
            text-align: center;
            border-left: 0;
            border-right: 0;
            height: 30px; /* Smaller height */
            font-size: 14px; /* Adjust text size */
            padding: 2px;
            border-top: 1px solid #6c757d;
            border-bottom: 1px solid #6c757d;
        }
        .minus-btn {
            border-right: 0 !important;
            height: 30px;
            font-size: 14px;
        }
        .plus-btn {
            border-left: 0 !important;
            height: 30px;
            font-size: 14px;
        }
        .input-group-rec button {
            width: 32px;
           padding: 0px;
        }
        .nav-tabs .nav-link {
    font-size: 12px;  /* Smaller text */
    padding: 5px 10px; /* Adjust padding */
    font-weight: 600;
}

.replacementDescription h1{
    font-size: 16px;
}
.replacementDescriptionMobile h1{
    font-size: 16px;
}


:not(.btn-check) + .plus-btn:hover {
    background-color: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}
.minus-btn:first-child:hover{
    background-color: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}

/* Custom scrollbar for the specific div */
.replacementFitModelsContentDivScroll::-webkit-scrollbar {
    width: 6px;
}

.replacementFitModelsContentDivScroll::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 10px;
}

.replacementFitModelsContentDivScroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.replacementFitModelsContentDivScroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}
    </style>
    <!-- Preload critical resources -->
<link rel="preload" as="image" href="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($pin) ? $pin->ProductCode : '' }}-2.jpg">
<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.css" onload="this.onload=null;this.rel='stylesheet'">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.min.js" defer integrity="sha512-0N/5ZOjfsh3niel+5dRD40HQkFOWaxoVzqMVAHnmAO2DC3nY/TFB7OYTaPRAFJ571IRS/XRsXGb2XyiFLFeu1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.css"></noscript>

<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) && $pin->Hidden != 'Y')

        <div class="row d-lg-none">
            <div class="col-sm-12">
                <div class="text-black font-weight-bold">
                    <h1 class="fs-2 mobile-fontsize18" style="word-wrap: break-word;margin: auto;font-size: 25px !important;">{{ $pin->Name }} #{{ !empty($pin) ? $pin->SKU: "" }} {{ !empty($pin->Brands) ? "for ".$pin->Brands : "" }}</h1>
                    {{--  <p class="fs-6 m-0" style="color: #7a7a7a;" id="modelno">Product Code: {{ !empty($pin) ? $pin->SKU: "" }} @if(!empty($vendor_map->MFG_SKU) && empty($alternativProductData))| Mfr # {{ $vendor_map->MFG_SKU }} @endif</p>  --}}
                                    </div>
            </div>
        </div>

        <div class="row">
            @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="col-md-4" id="proMainImageDiv">
                <link rel="preload" as="image" href="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($pin) ? $pin->ProductCode : '' }}-2.jpg">
                <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" style="height: 300px;">
                                        <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($pin) ? $pin->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" width="280" height="280" loading="eager" decoding="async">
                                    </div>

                                    <div class="image text-center d-lg-none" style="height: 300px;">
                                        @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($pin) ? $pin->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" loading="eager" decoding="async">
                                        @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="..." loading="lazy">
                                            </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="..." loading="lazy">
                                        </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="..." loading="lazy">
                                            </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($pin) ? $pin->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" loading="lazy" decoding="async">

                                    @endif

                                @endif

                            @else

                            <div class="image text-center d-lg-none"><span style="padding: 20px;font-size: 20px"><b>NO
                                IMAGE</b></span></div>
                                <div class="image text-center">
                        <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.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:200px; min-width:200px;float: inline-end;" loading="lazy">
                                </div>




                            @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 ">
                                    <h1 class="fs-2 mobile-fontsize18">{{ $pin->Name }} #{{ !empty($pin) ? $pin->SKU: "" }} {{ !empty($pin->Brands) ? "for ".$pin->Brands : "" }}</h1>

                                    @if($pin->Discontinued == 'Y')
                                    <p class="fs-6 m-0" style="color: #7a7a7a;">Product Code: {{ (!empty($pin) ? $pin->ProductCode : '') }} | SKU: {{ (!empty($pin) ? $pin->SKU : '') }}</p>
                                    @endif
                                    @if($pin->Discontinued != 'Y')
                                                                        @endif
                                </div>
                                @if($pin->Discontinued != 'Y')
                                    @if(!empty($pin->Brands))
                                        @php
                                            $brandArray = explode(',', $pin->Brands);

                                        $baseUrl = 'https://s3.us-central-1.wasabisys.com/partswarehouse/Brand-Logos/';

                                        // Process each brand
                                        $imageUrls = array_map(function($brand) use ($baseUrl) {
                                            // Trim whitespace and normalize brand name
                                            $normalizedBrand = preg_replace('/[^a-zA-Z0-9]+/', '_', trim($brand));
                                            // Generate the URL
                                            return $baseUrl . $normalizedBrand . '.jpg';
                                        }, $brandArray);
                                        @endphp
                                    @endif

                                    @if(!empty($imageUrls))
                                        @if(count($imageUrls) > 2)
                                            <div class="slider-wrapper d-none d-md-block d-lg-block">
                                                <div class="image-container">
                                                    @php
                                                        $b=0;
                                                    @endphp
                                                    @foreach ($imageUrls as $imgu)
                                                        <img @if($b == 0 || $b == 1) src="{{ $imgu }}" @else data-src="{{ $imgu }}" @endif onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg&quot;" class="@if($b == 0 || $b == 1) active @endif" alt="..." width="200px" loading="lazy">
                                                        @php
                                                            $b++;
                                                        @endphp
                                                    @endforeach

                                                </div>

                                                <div class="slider-buttons">
                                                    <button id="prev-btn" class="newarrowclass"><i class="fa fa-angle-left"></i></button>
                                                    <button id="next-btn"><i class="fa fa-angle-right custom-icon-arrow"></i></button>
                                                </div>
                                            </div>
                                        @else
                                            <div style="height: 110px;">
                                                <div class="slider-wrapper d-none d-md-block d-lg-block">
                                                    <div class="image-container">
                                                        @foreach ($imageUrls as $imgu)
                                                            <img  src="{{ $imgu }}" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg&quot;" class="active" alt="..." width="200px" loading="lazy">
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                @endif
                                @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="removeElement(this);"
                                    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="removeElement(this);"
                                    id="productimage" class="img-fluid rounded-start d-md-none d-lg-none mt-3" alt="...">  --}}
                                @endif
                                @endif
                            </div>
                            @if($pin->Availability && $pin->Discontinued != 'Y')
                            <div class="mt-3 mb-1" 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> @if($pin->Discontinued != 'Y') {{$pin->Availability  }} @else Discontinued by the Manufacturer @endif</div>

                                @if ($pin->Discontinued != 'Y')
                                    @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->Discontinued != 'Y')
                                        <div id="modelreplaces" class="mt-2"><span class="text-danger productAvailability" onclick="showAvail()">{{ $replaces_label }} : </span>{{$ParentClientMap->ProductCode  }}</div>
                                    @endif



                                @endif

                            </div>
                            @endif
                            @if($pin->Discontinued == 'Y')
                                <div class="mt-2"><h5 class="text-danger">DISCONTINUED BY MANUFACTURER</h5></div>

                            @endif
                            <div class="row">
                                <div class="col-md-12 productpriceisstock">
                                    @if ($pin->Discontinued != 'Y')
                                    <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>
                                                @php
                                                    $offrate = round((($pin->SalePriceAfterRatio/$pin->SalePrice)-1)*100);
                                                @endphp
                                                @if(!empty($offrate))
                                                    <span aria-label="..." role="main" class="text-red font-weight-bolder"
                                                        id="modelstickamount" style="color: #dc3545;margin-left: 5px;font-weight: 700;">{{ $offrate }}% {{ !empty($setting->product_discount_label) ? $setting->product_discount_label : "Off" }}</span>
                                                @endif
                                        @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-xl-2 col-md-3 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->Discontinued != 'Y')

                                            <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($pin) ? $pin->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($pin) ? $pin->ProductCode: '' }}"
                                                name="modelno" id="textmodelno">
                                        </form>
                                    </div>
                                    @if ($pin->Discontinued != 'Y')
                                    <div style="margin: auto;margin-top: 10px;" class="d-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>
                                    @endif
                                </div>

                                @if ($pin->Discontinued != 'Y')
                                <div class="col-9 col-xl-4 col-md-5 mmobiledivpadding">
                                    <div class="row">
                                        <div class="col-10 col-xl-7 col-md-7 mobileFavChange">
                                            <div class="text-center mt-3 d-none" style="font-size: 20px;">
                                                @if($whishlist_status == 1)
                                                    <a href="javascript:void(0)" aria-label="Wishlist Save" data-part-id="{{ !empty($pin) ? $pin->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="Wishlist Save" data-part-id="{{ !empty($pin) ? $pin->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->Discontinued != 'Y')
                                                <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-xl-5 col-md-5">
                                            <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="Wishlist Save" data-part-id="{{ !empty($pin) ? $pin->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="Wishlist Save" data-part-id="{{ !empty($pin) ? $pin->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="Wishlist Save" data-part-id="{{ !empty($pin) ? $pin->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="Wishlist Save" data-part-id="{{ !empty($pin) ? $pin->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" >




                                        @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="card mt-5" >
                                            <div class="card-body">
                                                <p class='recTitle'>@if(!empty($a['Type'])) {{ $a['Type'] }} @else Replacement @endif</p>
                                                <div class="row" >
                                                    <div class="col-md-2 col-4">
                                                        <div class="item-card-image text-center mt-3" >
                                                            <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="100px"
                                                                    class="partImg hrefproductdetails" loading="lazy">
                                                            </a>

                                                        </div>

                                                    </div>
                                                    <div class="col-md-7 col-8">

                                                        <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['availability'] }}</span>
                                                        </div>
                                                        <div class="d-lg-none mt-2">
                                                            <div class="row">
                                                                <div class="col-12">
                                                                @if($a['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>
                                                                
                                                                @endif
                                                                </div>
                                                                <div class="col-6">
                                                                    <p class="fs-5 text-danger fw-bold mt-2" id="modelamount1">${{ $a['productprice'] }}</p>
                                                                </div>
                                                                <div class="col-6 mt-2">
                                                                    <div class="input-group input-group-rec" style="width: 95px;margin: auto;">
                                                                        <button class="btn btn-outline-secondary minus-btn">−</button>
                                                                        <input type="text" class="form-control qty-input" value="1" id="qty-input-mobile-{{ $a['sku'] }}">
                                                                        <button class="btn btn-outline-secondary plus-btn">+</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-10">
                                                                    <a href="javascript:void(0)"  onclick="addToCartPartReplacementMobile(this)" data-sku="{{ $a['sku'] }}" 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: 16px;width: 170px;margin-left: 2px;"><span><i class="fa fa-shopping-cart"></i>  Add To Cart</span></a>

                                                                </div>
                                                                <div class="col-2">
                                                                    @if($a['whishlist_status'] == 1)
                                                                    <a href="javascript:void(0)" aria-label="Wishlist Save" data-part-id="{{ !empty($a['productcode']) ? $a['productcode']: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                                        <span><i class="far fa-heart" style="margin-top: 17px;"></i></span>
                                                                    </a>
                                                                    @else
                                                                    <a href="javascript:void(0)" aria-label="Wishlist Save" data-part-id="{{ !empty($a['productcode']) ? $a['productcode']: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                                        <span><i class="fa fa-heart" style="margin-top: 17px;"></i></span>
                                                                    </a>
                                                                    @endif

                                                                </div>



                                                            </div>
                                                        </div>
                                                        <div class="d-none d-md-block">
                                                            <div class="row mt-3 ">
                                                                <ul class="nav nav-tabs">
                                                                    <li class="nav-item">
                                                                      <a class="nav-link active" aria-current="page" data-bs-toggle="tab" data-bs-target="#replacementDescription{{ $loop->index }}" href="#">Description</a>
                                                                    </li>

                                                                    <li class="nav-item">
                                                                      <a class="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#replacementFitModels{{ $loop->index }}" onclick="fitTheseModelLoadReplacement('{{ $a['productcode'] }}','{{ $a['sku'] }}')">@if($a['Type'] == 'Whole Good') Parts List @else Fit models @endif </a>
                                                                    </li>

                                                                  </ul>
                                                                  <div class="tab-content mt-3 replacementFitModelsContentDivScroll" id="replacementFitModelsContent_{{ $a['sku'] }}" style="height: 65px;overflow: auto;">
                                                                    <div class="tab-pane fade show active replacementDescription" id="replacementDescription{{ $loop->index }}" role="tabpanel">
                                                                        <p class="m-0" style="color: #7a7a7a;">Product Code: {{ (!empty($a['productcode']) ? $a['productcode'] : '') }} | SKU: {{ (!empty($a) ? $a['sku'] : '') }}</p>
                                                                        {!! $a['description'] !!}
                                                                    </div>
                                                                    <div class="tab-pane fade" id="replacementFitModels{{ $loop->index }}" class="fitTheseModelLoadReplacementDiv_{{ $a['sku'] }}" role="tabpanel">
                                                                        <p>No data</p>
                                                                    </div>

                                                                </div>
                                                                <div class="text-center">
                                                                    <img src="{{ asset('assets/web') }}/images/chevrons-down.svg" width="20px" data-status="0" data-sku="{{ $a['sku'] }}" class="replacementUpDown" alt="" srcset="">
                                                                </div>
                                                            </div>
                                                        </div>


                                                    </div>
                                                    <div class="d-lg-none mt-3">

                                                        <div class="row mt-3 p-2">
                                                            <ul class="nav nav-tabs">
                                                                <li class="nav-item">
                                                                  <a class="nav-link active" aria-current="page" data-bs-toggle="tab" data-bs-target="#replacementDescriptionMobile{{ $loop->index }}" href="#">Description</a>
                                                                </li>

                                                                <li class="nav-item">
                                                                  <a class="nav-link" href="#" data-bs-toggle="tab" data-bs-target="#replacementFitModelsMobile{{ $loop->index }}" onclick="fitTheseModelLoadReplacementMobile('{{ $a['productcode'] }}','{{ $a['sku'] }}')">@if($a['Type'] == 'Whole Good') Parts List @else Fit models @endif </a>
                                                                </li>

                                                              </ul>
                                                              <div class="tab-content mt-3" id="replacementFitModelsContentMobile_{{ $a['sku'] }}" style="height: 65px;overflow: auto;">
                                                                <div class="tab-pane fade show active replacementDescription" id="replacementDescriptionMobile{{ $loop->index }}" role="tabpanel">
                                                                    <p class="m-0" style="color: #7a7a7a;font-size: 14px;">Product Code: {{ (!empty($a['productcode']) ? $a['productcode'] : '') }} | SKU: {{ (!empty($a) ? $a['sku'] : '') }}</p>
                                                                    {!! $a['description'] !!}
                                                                </div>
                                                                <div class="tab-pane fade" id="replacementFitModelsMobile{{ $loop->index }}" class="fitTheseModelLoadReplacementDiv_{{ $a['sku'] }}" role="tabpanel">
                                                                    <p>No data</p>
                                                                </div>

                                                            </div>
                                                            <div class="text-center">
                                                                <img src="{{ asset('assets/web') }}/images/chevrons-down.svg" width="20px" data-status="0" data-sku="{{ $a['sku'] }}" class="replacementUpDownMobile" alt="" srcset="">
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <div class="col-md-3 d-none d-md-block">
                                                        <hr style="border-left: 1px solid #909090;height: 140px;position: absolute;top: 5px;" />
                                                        <div class="row text-center">
                                                        @if($a['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>
                                                           
                                                        @endif
                                                            <p class="fs-5 text-danger fw-bold mt-2" id="modelamount1">${{ $a['productprice'] }}</p>
                                                            <div class="input-group input-group-rec" style="width: 110px;margin: auto;">
                                                                <button class="btn btn-outline-secondary minus-btn">−</button>
                                                                <input type="text" class="form-control qty-input" value="1" id="qty-input-{{ $a['sku'] }}">
                                                                <button class="btn btn-outline-secondary plus-btn">+</button>
                                                            </div>



                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="col-md-10">
                                                                <a href="javascript:void(0)"  onclick="addToCartPartReplacement(this)" data-sku="{{ $a['sku'] }}" 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;width: 130px;margin-left: 33px;"><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="col-md-2">
                                                                @if($a['whishlist_status'] == 1)
                                                                <a href="javascript:void(0)" aria-label="Wishlist Save" data-part-id="{{ !empty($a['productcode']) ? $a['productcode']: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                                    <span><i class="far fa-heart" style="margin-top: 15px;"></i></span>
                                                                </a>
                                                                @else
                                                                <a href="javascript:void(0)" aria-label="Wishlist Save" data-part-id="{{ !empty($a['productcode']) ? $a['productcode']: '' }}" @if(auth()->check())  onclick="wishlistSave(this,1)" @else  onclick="loginModel()" @endif style="text-decoration: none;color: #5f5f5f;">
                                                                    <span><i class="fa fa-heart" style="margin-top: 15px;"></i></span>
                                                                </a>
                                                                @endif

                                                            </div>



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

                                        @endforeach



                                </div>
                                @endif
                                @if ($pin->Discontinued != 'Y')

                                @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">
                                            <div class="text-black font-weight-bold">
                                                <p class="fs-6 m-0" style="color: #7a7a7a;" id="modelno">Product Code: {{ !empty($pin) ? $pin->ProductCode: "" }} | SKU: {{ !empty($pin) ? $pin->SKU: "" }} </p>

                                            </div>
                                            <br/>

                                            {!! $pin->Description !!}
                                            <br/>
                                            @if(!empty($pin) && $pin->Prop65 == 'Y')
                                            <strong><img alt="warning" src=" https://www.p65warnings.ca.gov/sites/default/files/warning.svg " style="width: 20px; height: 18px; margin-bottom: 6px;" loading="lazy"> WARNING</strong>: Cancer and Reproductive Harm - <a href=" https://www.p65warnings.ca.gov " target="_blank"> www.P65Warnings.ca.gov</a> .

                                            @endif
                                        </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('{{ $pin->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">{{ $pin->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;">

                                @if (($pin->Discontinued == 'Y' && !empty($alternativProductData) && !empty($isWholeModel)) || ($pin->Discontinued == 'Y' && empty($alternativProductData)))

                                <div class="accordion" id="productFNLAtab">
                                    <div class="accordion-item" style="word-wrap: break-word;border: 0px;">
                                    <h2 class="accordion-header d-lg-none" id="headingOne">
                                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#fnlaForm" aria-expanded="true" aria-controls="fnlaForm">
                                        <b>Rarely Order Request</b>
                                        </button>
                                    </h2>
                                    <div id="fnlaForm" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#productFNLAtab">
                                        <div class="accordion-body">
                                            <form id="discountinueProductForm" action="{{ route('rarely-ordered-add-process') }}" method="post">
                                                @csrf
                                                <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ !empty($pin) ? $pin->ProductCode: '' }}" name="productcode" >

                                                <div class="row">
                                                    <div class="col-md-12 mt-2">
                                                        <div style="margin-bottom: 13px;" class="mt-2">
                                                            <h5 class="m-0" style="font-weight: 600;">Submit the following form to have our research team find any remaining stock, alternates, substitutes or even used options and report back to you.</h5>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row mt-4">
                                                    <div class="col-md-4 mt-2">
                                                       <div class="form-group">
                                                           <label for="label">Brand:</label>
                                                       </div>
                                                    </div>
                                                    <div class="col-md-8">
                                                       <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-4 mt-2">
                                                       <div class="form-group">
                                                           <label for="label">Model Number:</label>
                                                       </div>
                                                   </div>
                                                   <div class="col-md-8">
                                                       <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-4 mt-2">
                                                        <div class="form-group">
                                                            <label for="label">Part Number:</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-8">
                                                        <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" readonly>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-4 mt-2">
                                                        <div class="form-group">
                                                            <label for="label">Additional Information: </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-8">
                                                        <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-4 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-8">
                                                        <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-4 mt-2">
                                                        <div class="form-group">
                                                            <label for="label">Phone Number: </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-8">
                                                        <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-4 mt-2">

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

                                                    </div>
                                                    <div class="col-md-8">
                                                        <div class="form-group mb-4">
                                                            <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha" required>
                                                        </div>
                                                        <button role="button" tabindex="0" aria-labelledby="SUBMIT" type="submit" class="btn btn-danger w-50 mb-3">SUBMIT</button>

                                                    </div>
                                                </div>



                                            </form>

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

                                @endif
                            </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" loading="lazy"> </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;" loading="lazy">
                    </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; cursor: pointer;" loading="lazy">
                    <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; cursor: pointer;" loading="lazy">
                    <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($pin) ? $pin->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" readonly>
            </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">
            <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" loading="lazy">

        </div>
        <div class="col-md-8">
            <p>Text your data tag and email address to <span aria-label="..." role="main" class="text-danger">972-383-9129</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) && $pin->Discontinued != 'Y')
<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->Discontinued != 'Y')
                        @if ($pin->Discontinued != "Y")
                            <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($pin) ? $pin->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>
$(document).ready(function() {
    $(".plus-btn").click(function() {
        var input = $(this).siblings(".qty-input");
        var currentValue = parseInt(input.val());
        if (!isNaN(currentValue)) {
            input.val(currentValue + 1);
        }
    });

    $(".minus-btn").click(function() {
        var input = $(this).siblings(".qty-input");
        var currentValue = parseInt(input.val());
        if (!isNaN(currentValue) && currentValue > 1) {
            input.val(currentValue - 1);
        }
    });
});
         $(document).ready(function() {
        let currentIndex = 0;
        const images = $('.image-container img');
        const imagesPerView = 2; // Show 2 images at a time
        const totalImages = images.length;

        // Function to lazy load images
        function lazyLoadImage(image) {
            const src = image.attr('data-src');
            if (!image.attr('src')) {
                image.attr('src', src);
                image.on('load', function() {
                    image.addClass('active'); // Show the image only when it has loaded
                });
            }
        }

        // Load the first two images initially
        lazyLoadImage($(images[0]));
        lazyLoadImage($(images[1]));

        // Function to switch images
        function switchImage(index) {
            images.removeClass('active');
            for (let i = 0; i < imagesPerView; i++) {
                const imageIndex = index + i;
                if (imageIndex < totalImages) {
                    const nextImage = $(images[imageIndex]);
                    lazyLoadImage(nextImage); // Lazy load the image
                    nextImage.addClass('active');
                }
            }

            // Hide the 'prev' button if on the first image
            if (index === 0) {
                $('#prev-btn').addClass('newarrowclass');
                $('#prev-btn').find('i').removeClass('custom-icon-arrow');
            } else {
                $('#prev-btn').removeClass('newarrowclass');
                $('#prev-btn').find('i').addClass('custom-icon-arrow');
            }

            // Hide the 'next' button if at the end of the image list
            if (index + imagesPerView >= totalImages) {
                $('#next-btn').addClass('newarrowclass');
                $('#next-btn').find('i').removeClass('custom-icon-arrow');
            } else {
                $('#next-btn').removeClass('newarrowclass');
                $('#next-btn').find('i').addClass('custom-icon-arrow');

            }
        }

        $('#next-btn').click(function() {
            if (currentIndex + imagesPerView < totalImages) {
                currentIndex += imagesPerView;
                switchImage(currentIndex);
            }
        });

        $('#prev-btn').click(function() {
            if (currentIndex - imagesPerView >= 0) {
                currentIndex -= imagesPerView;
                switchImage(currentIndex);
            }
        });

    });
        $('#proquantitynew').change(function(){

            $('#itemID_proquantity').val($(this).val());
        });

        function removeElement(element) {
            element.remove();
       }
        function showAlternativeProduct(){
        $("#alternativeProductDiv").focus();

        }
        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');
            @if(!empty($isWholeModel))
                var productcode = "{{ (!empty($pin) ? $pin->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>
        @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 showRecommendedAvail(){
                $('#productRecommendedAvailModal').modal('show');
            }
        function showOrHideDiv(p) {
           if(p == 1){
               $('#RarelyOrderedForm').show();
               $('#RarelyOrderedText').hide();
           }else{
               $('#RarelyOrderedForm').hide();
               $('#RarelyOrderedText').show();
           }
        }
     </script>
     <script type="text/javascript">
        $('#reload').click(function () {
            $.ajax({
                type: 'GET',
                url: '{{ route("reload-captcha") }}',
                dataType:"json",
                success: function (data) {
                    $(".captcha span").html(data.captcha);
                }
            });
        });
    </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($pin) ? $pin->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);
                // }



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


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


        var partid = "{{ (!empty($pin) ? $pin->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);
        }
    });

    function fitTheseModelLoadReplacement(productcode,sku) {
        $.ajax({
            type: 'get',
            url: MODEL_SEARCH_API_URL,
            data: { subcat: '|@' + productcode },
            dataType: "json",
            success: function(fitthesemodel) {
                var resultData = [];
                var mcount = 0;
                $('.fitTheseModelLoadReplacementDiv_'+sku).empty();
                if (fitthesemodel.error) {
                    $('.fitTheseModelLoadReplacementDiv_'+sku).append('<p>No Model Found</p>');
                }
                var resSubCat = [];
                $.each(fitthesemodel.list, function(key, brand) {
                    if (key >= 0) {
                        // var subcat = brand.subcat;
                        // subcat = subcat.replace('|', '');
                        // resSubCat.push(subcat);
                        var subcat = brand.subcat;
                        subcat = subcat.replace('|', '');
                        var brandname = brand.Name;
                        brandname = brandname.replace('*', '').trim();



                        resultData.push({ id: subcat, text: brandname });
                        brandname = brandname.replace(/[^A-Za-z0-9]/, '-').replace(/\W+(?!$)/g, '-').replace(/\W$/, '');

                        if (brand.url_text) {
                            var model_url = base_url + '/' + brand.url_text + '-s/' + subcat + '.htm';;
                        } else {
                            var model_url = base_url + '/' + brandname + '-s/' + subcat + '.htm';
                        }

                        $('.fitTheseModelLoadReplacementDiv_'+sku).append('<label class="list-group-item text-primary fittheselabel"><i class="fa fa-arrow-right" aria-hidden="true" style="color: #0b58ca;"></i> &nbsp;&nbsp;&nbsp;<a href="' + model_url + '">' + brand.Name + '</a></label>');

                    }

                });
                var allSubURL = [];


                $('.fitTheseModelLoadReplacementDiv_'+sku).pagify(6, ".fittheselabel");

            }
        });



    }

    $('.replacementUpDown').click(function(){
        var sku = $(this).attr('data-sku');
        var status = $(this).attr('data-status');

        if(status == 0){
            var imgUrl = "{{ asset('assets/web') }}/images/chevrons-up.svg";
            $(this).attr('data-status', 1);
            $('#replacementFitModelsContent_'+sku).attr("style", "height: auto;overflow: none;");
        }else{
            var imgUrl = "{{ asset('assets/web') }}/images/chevrons-down.svg";
            $(this).attr('data-status', 0);
            $('#replacementFitModelsContent_'+sku).attr("style", "height: 65px;overflow: auto;");
        }


        $(this).attr('src', imgUrl);

    });
    $('.replacementUpDownMobile').click(function(){
        var sku = $(this).attr('data-sku');
        var status = $(this).attr('data-status');

        if(status == 0){
            var imgUrl = "{{ asset('assets/web') }}/images/chevrons-up.svg";
            $(this).attr('data-status', 1);
            $('#replacementFitModelsContentMobile_'+sku).attr("style", "height: auto;overflow: none;");
        }else{
            var imgUrl = "{{ asset('assets/web') }}/images/chevrons-down.svg";
            $(this).attr('data-status', 0);
            $('#replacementFitModelsContentMobile_'+sku).attr("style", "height: 65px;overflow: auto;");
        }


        $(this).attr('src', imgUrl);

    });

    function addToCartPartReplacement(t) {
        var productimage = $(t).attr('data-productimage');
        var modelamount = $(t).attr('data-modelamount');
        var modelstickamount = $(t).attr('data-modelstickamount');
        var modeltitle = $(t).attr('data-modeltitle');
        var modelno = $(t).attr('data-modelno');
        var sku = $(t).attr('data-sku');

        var qtyinput = $('#qty-input-'+sku).val();
        $.ajax({
            type: 'post',
            url: addCartUrl,
            data: { "_token": csrf_token, 'productimage': productimage, 'modelamount': modelamount, 'modelstickamount': modelstickamount, 'modeltitle': modeltitle, 'modelno': modelno, 'proquantity': qtyinput },
            dataType: "json",
            success: function(responce) {

                if (responce.totalcart > 0) {
                    $('#notificationCounterBadge').html('<span class="badge">' + responce.totalcart + '</span>');
                    $('.notificationCounterBadge2').html('<span class="badge">' + responce.totalcart + '</span>');
                    $('.cartcountstac').text(responce.totalcart);
                } else {
                    $('#notificationCounterBadge').html('');
                    $('.notificationCounterBadge2').html('');
                    $('.cartcountstac').html(0);
                }

                $('#modelPartDetail').modal('hide');
                cartModal(1);

            }
        });
    }
    function addToCartPartReplacementMobile(t) {
        var productimage = $(t).attr('data-productimage');
        var modelamount = $(t).attr('data-modelamount');
        var modelstickamount = $(t).attr('data-modelstickamount');
        var modeltitle = $(t).attr('data-modeltitle');
        var modelno = $(t).attr('data-modelno');
        var sku = $(t).attr('data-sku');

        var qtyinput = $('#qty-input-mobile-'+sku).val();
        $.ajax({
            type: 'post',
            url: addCartUrl,
            data: { "_token": csrf_token, 'productimage': productimage, 'modelamount': modelamount, 'modelstickamount': modelstickamount, 'modeltitle': modeltitle, 'modelno': modelno, 'proquantity': qtyinput },
            dataType: "json",
            success: function(responce) {

                if (responce.totalcart > 0) {
                    $('#notificationCounterBadge').html('<span class="badge">' + responce.totalcart + '</span>');
                    $('.notificationCounterBadge2').html('<span class="badge">' + responce.totalcart + '</span>');
                    $('.cartcountstac').text(responce.totalcart);
                } else {
                    $('#notificationCounterBadge').html('');
                    $('.notificationCounterBadge2').html('');
                    $('.cartcountstac').html(0);
                }

                $('#modelPartDetail').modal('hide');
                cartModal(1);

            }
        });
    }
</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($pin) ? $pin->ProductCode: '' }}" }
);
</script>
<!-- END Criteo Product Tag -->

@endsection