@extends('web.layout.master')

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

      .productAvailability{
        cursor: pointer;
    }

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

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

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


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

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

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

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

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

</style>
<div class="container " >
    @if(!empty($pin))

    <div class="row">
        <div class="col-sm-12">
            <div class="mt-3">
                @if(!empty($pin->Manufacturer))
                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/Desktop/{{ $pin->Manufacturer }}.png"
                    onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                    id="productimage" class="img-fluid rounded-start d-none d-md-block d-lg-block " alt="...">

                    <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/{{ $pin->Manufacturer }}.png"
                    onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                    id="productimage" class="img-fluid rounded-start d-md-none d-lg-none" alt="...">
                @endif
            </div>
        </div>
    </div>

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


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

            <div class="row g-0">

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

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

                </div>

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

                    <div class="card-body">

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

                                <div class="row mt-2">

                                    <div class="col-md-2 mb-2" id="qtycartdiv" style="margin-top: 5px">
                                        <form action="#" id="addcartForm">
                                            @csrf

                                            <div style="width: 125px;">
                                                <div class="input-group">
                                                    <span class="input-group-prepend">
                                                        <button aria-labelledby="..." 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 class="fa fa-minus"></span>
                                                        </button>
                                                    </span>
                                                    <input aria-labelledby="PartsWarehouse" type="text" name="proquantity" id="itemID_proquantity" item-id="proquantity" class="form-control input-number" value="1" min="1" max="100" readonly>
                                                    <span class="input-group-append">
                                                        <button aria-labelledby="..." 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 class="fa fa-plus"></span>
                                                        </button>
                                                    </span>
                                                </div>
                                            </div>
                                            {{--  <input aria-labelledby="PartsWarehouse" type="number" name="proquantity" class="form-control w-100" value="1"
                                                id="proquantity" min="1" max="100" style="height: 50px;">  --}}


                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg" name="productimage" id="textproductimage">
                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ $pin->SalePrice }}" name="modelamount" id="textmodelamount">
                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ $pin->ProductPrice }}" name="modelstickamount" id="textmodelstickamount">
                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ $pin->Name }}" name="modeltitle" id="textmodeltitle">
                                            <input aria-labelledby="PartsWarehouse" type="hidden" value="{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}" name="modelno" id="textmodelno">
                                        </form>
                                    </div>

                                    <div class="col-md-8">
                                        @if ($pin->Availability != "No Longer Available")
                                            @if ($pin->DaysToShip != 99)
                                                {{-- <a href="javascript:void(0)" id="cartAddBtn" onclick="addToCart()"><img
                                                    src="{{ asset('assets/web') }}/images/add-to-cart.png"
                                                    height="60px" aria-label=""></a> --}}

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

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

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

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


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

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

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

                    </div>

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


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

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

                    </div>

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

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

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

                    </div>

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

                    </div>


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

                    </div>

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

                    </div>

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

                    </div>

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

                    </div>

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

                    </div> --}}
                    @endif


                </div>

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

    @else

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

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

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

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

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

        </div>


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

            </div>


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

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

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

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

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


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


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


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


    </div>

    </form>

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

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


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

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

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

                <div class="form-group">
                    <div class="mb-3">
                        <span 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 aria-labelledby="..." 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 aria-labelledby="..." 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 aria-labelledby="..." 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 aria-labelledby="..." 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 aria-labelledby="..." type="button" class="btnrating btn btn-secondary btn-sm" data-attr="5" id="rating-star-5">
                                <i class="fa fa-star" aria-hidden="true"></i>
                            </button>

                      </div>
                </div>

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

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

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

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

    <script>

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

            function showAvail(){
                $('#productAvailModal').modal('show');
            }
        function showOrHideDiv(p) {
           if(p == 1){
               $('#RarelyOrderedForm').show();
               $('#RarelyOrderedText').hide();
           }else{
               $('#RarelyOrderedForm').hide();
               $('#RarelyOrderedText').show();
           }
        }
     </script>
    <script>

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

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

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

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

    <script>

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

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

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

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

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

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

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

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

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

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

        }));

    });

    </script>
<script>


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

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

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

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

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

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

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

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

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




</script>

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

@endsection