@extends('web.layout.master')

@section('content')

@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;
}

@endphp

<style>
    .sticky-top1{
        position: sticky;
        top: 160px;
        z-index: 999;
    }
    .hrefproductdetails{
        cursor: pointer;
    }
    .modal-backdrop {
        display: block;
    }
    .code-no{

        height: 26px;
        background: #03458f;
        color: #fff;
        text-align: center;
        line-height: 21px;
        border-radius: 5px;
        font-size: 14px;
        padding: 2px;
    }

    .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;
      }

      .highlight{
        background:#00FF00;
        padding:1px;
        border:#00CC00 dotted 1px;
      }
      .abbtocartbtndbl{
        filter: opacity(0.5);
        cursor: auto;
      }
      #cartAddBtn2{
        display:none;
      }

      .ellipsisstring{
        display: -webkit-box;
        margin: 0 auto;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .form-control:focus{
        box-shadow:none !important;
      }

.setWebSiteBtnStyle2{

  background-color: #409b5e;
  border-color: #409b5e;
  font-size: 20px;
    }

        .setWebSiteBtnStyle2:first-child:active
      {
      background-color: #409b5e;
      border-color: #409b5e;
      font-size: 20px;
        }
        .setWebSiteBtnStyle2:first-child:hover
      {
      background-color: #409b5e;
      border-color: #409b5e;
      font-size: 20px;
        }
        .setWebSiteBtnStyle4{

    background-color: #409b5e;
    border-color: #409b5e;
    font-size: 20px;
      }
      .setWebSiteBtnStyle4:not(.btn-check)+.btn:active
    {
    background-color: #409b5e !important;
    border-color: #409b5e !important;
    font-size: 20px;
    }
          .setWebSiteBtnStyle4:active
          {
          background-color: #409b5e !important;
          border-color: #409b5e !important;
          font-size: 20px;
            }
            .setWebSiteBtnStyle4:hover
          {
          background-color: #409b5e !important;
          border-color: #409b5e !important;
          font-size: 20px;
            }
             @media only screen and (max-width: 776px) {

            .mobileFavChange{
                margin-top: -28px !important;
            }
        }
</style>
<section>
    <div class="container" style="margin-top:10px; margin-bottom: 60px;">
       
        <div class="">
            <nav aria-label="Breadcrumb" class="breadcrumb" style="font-size: 18px;">
                <ul>
                    <li><a href="{{ url('/') }}">Home</a></li>
                    @if(!empty($breadcrumbsModel))
                    @php
                    $breadcrumbsModel = array_reverse($breadcrumbsModel);

                    @endphp
                    @foreach ($breadcrumbsModel as $k => $b)
                            @if($loop->last && !empty(request()->asymID))
                                <li><span aria-label="..." role="main" aria-current="page">{{ $b['title'] }}</span></li>
                            @else
                                <li><a href="{{ $b['url'] }}">{{ $b['title'] }}</a></li>
                            @endif
                    @endforeach
                        @if(empty(request()->asymID))
                            {{--  <li><span aria-label="..." role="main" aria-current="page">{{ $modeldata['modelName'] }}</span></li>  --}}
                         @endif
                    @endif


                </ul>
            </nav>
        </div>
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                @if(Session::has('alert-' . $msg))

                <div class="alert alert-{{ $msg }} mt-2"><p>{{ Session::get('alert-' . $msg) }}</p></div>
                @endif
            @endforeach
            @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="row mb-4">
            <div class="col-md-4 text-center d-md-none d-lg-none" >

                <img id="modelImage" src="{{ $modeldata['thumbnail'] }}" alt="product name" style="max-width: 250px;">
                @if($is_buy_new_pin == 1)
                <div style="max-width: 300px;margin-left: 35px;margin-top: -30px;margin-bottom: 20px;">

                    <a href="#" class="btn btn-block btn-danger btn-sm setWebSiteBtnStyle" style="font-size: 20px;background: #04458f;border-color: #04458f;" data-model-id="{{ $buy_new_pin['Description'] }}"
                            data-title="{{ $buy_new_pin['Description'] }} #{{ $buy_new_pin['ProductCode'] }}"
                            data-product-code="{{ $buy_new_pin['ProductCode'] }}"
                            data-image-url="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $buy_new_pin['ProductCode'] }}-2.jpg"
                            onclick="hrefproductdetails(this)" class="text-decoration-none text-black hrefproductdetails">Buy New ${{ $buy_new_pin->pin->SalePrice }}</a>

                </div>
                @endif
            </div>
            <div class="col-md-8">
                <h1 id="modelName">{{ $modeldata['modelName'] }}</h1>
                <p id="name" class="mygearsavetext h5">Model: {{ $modeldata['modelNumber'] }}</p>
                @if($isMobile != 1)
                    @if(!empty(request()->asymID))
                    <p style="font-size: 18px;"><a href="{{ url('/model-subcat-z/'.$subcat) }}" class="" aria-label=""><i class="fas fa-chevron-left"></i> Back To Assemblies</a></p>
                    @endif
                @endif

                @if($whishlist_status == 1)
                    <a href="javascript:void(0)" aria-label="" data-model-id="{{ $modid }}" data-subcat-id="{{ $subcat }}" data-part-id="0" @if(auth()->check())  onclick="wishlistSave(this)" @else  onclick="loginModel()" @endif data-model-id="{{ $modeldata['modelNumber'] }}" class="mygearsavebtn mt-4"><div class="btn btn-block btn-info btn-sm setHeaderBtnStyle" style="min-width:100px; background-color:#f1f1f1 !important; border-color:#f1f1f1 !important; color:#4a4a4a; height:50px !important;  padding:10px !important;" ><i class="far fa-heart"></i> Save</div></a>
                @else
                    <a href="javascript:void(0)" aria-label="Remove from My Gear" data-model-id="{{ $modid }}" data-subcat-id="{{ $subcat }}" data-part-id="0" onclick="wishlistSave(this)" class="mygearsavebtn btn btn-block btn-danger btn-sm setWebSiteBtnStyle" data-model-id="{{ $modeldata['modelNumber'] }}" style="height:50px !important;  padding:10px !important;">Remove from My Gear</a>
                @endif

                <a href="javascript:void(0)" id="notlistedBtn2"  class="btn btn-block btn-success btn-sm setWebSiteBtnStyle " aria-label="" style="margin-left:20px; background-color:#3e9b5a !important; border-color:#3e9b5a !important; height:50px !important;  padding:10px !important;"><span class="d-none d-lg-block">Part Not Listed?</span><span class="d-lg-none">Part Not Listed?</span></a>


            </div>
            @if(!empty($modeldata['popularParts']) || ($checkasymID != 0))
            <hr class="d-lg-none" style="border: 2.5px solid #ddd;margin-top: 40px;margin-bottom: 0px;">
            @endif
            <div class="col-md-4 text-end d-none d-md-block d-lg-block">

                <img id="modelImage2" src="{{ $modeldata['thumbnail'] }}" alt="product name" style="max-width: 210px;">

                @if($is_buy_new_pin == 1)
                <div style="">
                    <a href="#" class="btn btn-block btn-danger btn-sm setWebSiteBtnStyle" style="font-size: 20px;background: #04458f;border-color: #04458f;" data-model-id="{{ $buy_new_pin['Description'] }}"
                            data-title="{{ $buy_new_pin['Description'] }} #{{ $buy_new_pin['ProductCode'] }}"
                            data-product-code="{{ $buy_new_pin['ProductCode'] }}"
                            data-image-url="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $buy_new_pin['ProductCode'] }}-2.jpg"
                            onclick="hrefproductdetails(this)" class="text-decoration-none text-black hrefproductdetails">Buy New ${{ $buy_new_pin->pin->SalePrice }}</a>

                </div>
                @endif
            </div>
        </div>
        @if(!empty($modeldata['popularParts']) || ($checkasymID != 0))
        <div class="row mt-4" id="modelPopularList">

            @if($checkasymID != 0)

                @foreach($modeldata['partsLists'] as $mpkey => $mp)
                    @php
                    $CurrentURL = request()->url();
                    if (!empty($newURLs[$mp['asymID']])) {
                        $model_url = $CurrentURL.'?asymID='. $mp['asymID'];
                    } else {
                        $model_url = $CurrentURL.'?asymID='. $mp['asymID'];
                    }
                    @endphp
                    <div class="col-md-3 p-2 col-sm-6 col-xs-6 text-center">
                        <a href="{{ $model_url }}" class="text-decoration-none text-black">
                            <div class="card-wraptocenter" style="">
                                <div class="wraptocenter-margin">
                                    <div class="wraptocenter" style="height: 201px;"><img alt="..."
                                            src="{{ $mp['schematics'][0] }}"></div>
                                </div>
                                <p class="text-center prod-title-3line">{{ $mp['ListName'] }}</p>
                                </div>
                        </a>
                    </div>
                @endforeach

            @else
                @if(!empty($modeldata['popularParts']))
                <h2 class="d-none d-lg-block">Popular Parts</h2>
                    <div class="row d-lg-none" onclick="collapseContent()">
                        <div class="col-8">
                            <h2>Popular Parts</h2>
                        </div>
                        <div class="col-4 text-end">
                            <i class="fa fa-chevron-down faicon"></i>
                        </div>

                    </div>
                @endif
                <div class="collapse mt-3 row" id="collapsePromoCode">
                @foreach($modeldata['popularParts'] as $ppkey => $pp)

                    <div class="col-md-3 col-sm-6 p-2 col-xs-6 text-center" >
                        <a href="#" data-model-id="{{ $pp['Description'] }}"
                            data-title="{{ $pp['Description'] }} #{{ $pp['ProductCode'] }}"
                            data-product-code="{{ $pp['ProductCode'] }}"
                            data-image-url="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $pp['ProductCode'] }}-2.jpg"
                            onclick="hrefproductdetails(this)" class="text-decoration-none text-black hrefproductdetails">
                            <div class="card p-2 align-items-center nonselpartpopular partselctpopular-{{ str_replace(' ', '-', $pp['ProductCode']) }}" style="height: 175px;">

                                    <img alt="..."
                                    src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $pp['ProductCode'] }}-2.jpg"
                                    onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-2.jpg&quot;"
                                    class="mt-2" style="width:50px;height: 50px;">
                                <span aria-label="..." role="main" class="text-center mt-4 ellipsisstring">{{ $pp['Description'] }}</span>
                                <span aria-label="..." role="main" class="text-center text-danger mt-2 ">{{ $pp['ProductCode'] }}</span>


                                </div>
                        </a>
                    </div>
                @endforeach
                </div>

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

            @endif

        </div>
        @endif
        @php
        $partsall = [];
        $partsallonly = [];
   @endphp

        @if($checkasymID == 0)
        <div class="mt-4 mb-4" id="modelPartsList">
            @php
                $mk = 0;
            @endphp
            @foreach($modeldata['partsLists'] as $mpkey => $mp)

            <div class="row mt-4 mb-4">
                <div class="col-md-6">
                    <div class="sticky-top1">
                        <h2></h2>
                            @if($mk == 0)
                            @if($isMobile == 1)
                            <div class="justify-content-center mt-3 my-2" >
                                @if($checkasymID == 0)
                                <div class="input-group  align-self-end" style="border:3px solid #b90700; border-radius:10px;">
                                    <span aria-label="..." role="main"  style="border:0;padding: 7px;font-size: 20px;padding-left: 10px;" id="basic-addon2"><i
                                            class="fa fa-search fw-bold"></i></span>
                                    <input aria-labelledby="searchModelParts" type="text" id="searchModelParts1" class="form-control" style="border:0;border-radius: 10px;"
                                        placeholder="Search {{ $modeldata['modelName'] }} Parts"
                                        aria-describedby="basic-addon2" autocomplete="off">
                                        <span onclick="closeSearchModelDetails()" aria-label="..." role="main"  style="border: 0px;padding: 2px 7px;font-size: 26px; display:none;" id="basic-addon2" class="backArrowSearch"><i
                                            class="fa fa-backspace fw-bold"></i></span>

                                </div>
                                <div class="searchtexthighlightdivnotres" id="searchtexthighlightdividnotres" style="border: 2px solid #ddd;border-radius: 10px 10px 10px 10px;padding: 10px;display: none;margin-top: 5px;">
                                    <!-- <button onclick="closeSearchModelDetails()" class="btn-close float-end"></button> -->
                                    <div class="searchchntentdivnotres" style="max-height: 240px;overflow: auto;">
                                        <span>No Search Results Found</span>
                                    </div><hr/>

                                    <a href="javascript:void(0)" onclick="wholesitesearch()" style="font-size: 18px;">Search Entire Site?</a>

                                </div>
                                <div class=" searchtexthighlightdiv" id="searchtexthighlightdivid" style="border: 2px solid #ddd;border-radius: 10px 10px 10px 10px;padding: 10px;display: none;margin-top: 5px;">
                                    {{--  <div class="text-end">

                                        <button onclick="closeSearchModelDetails()" class="btn-close float-end"></button>

                                    </div>  --}}
                                    <div class="row d-lg-none">
                                        <div class="col-6">
                                            <a href="javascript:void(0)" onclick="scrollToHighlightDiv()" class="d-lg-none  mt-2 searchdivtitle" style="font-size: 16px;"></a>
                                        </div>
                                        <div class="col-6 text-end">
                                            <a href="javascript:void(0)" class="d-lg-none ms-2 mt-2 text-end" onclick="wholesitesearch()" style="font-size: 16px;">Search Entire Site?</a>
                                        </div>
                                    </div>
                                    <!-- <a href="javascript:void(0)" class="d-lg-none ms-2 mt-2" onclick="wholesitesearch()" style="font-size: 16px;">Search Entire Site?</a> -->

                                    <div class="row">
                                        <div class="col-md-6">
                                            <a href="javascript:void(0)" onclick="scrollToHighlightDiv()" class="d-none d-lg-block ms-2 mt-2 searchdivtitle" style="font-size: 18px;"></a>
                                        </div>
                                        <div class="col-md-6">
                                            <a href="javascript:void(0)" class="d-none d-lg-block ms-2 mt-2 text-end" onclick="wholesitesearch()" style="font-size: 18px;">Search Entire Site?</a>
                                        </div>
                                    </div>

                                    <hr/>
                                    <div class="searchchntentdiv" style="max-height: 240px;overflow: auto;">

                                    </div>



                                    {{--  <input type="checkbox" name="highlight_res" id="highlight_res" onchange="highlightres()" checked> Highlight Results  --}}
                                </div>
                                @endif

                            </div>
                        @endif
                        @endif

                        <div class="image"> <img alt="..." src="{{ !empty($mp['schematics'][0]) ? $mp['schematics'][0] : 'https://s3.us-central-1.wasabisys.com/partswarehouse/assets/images/NO_SCHEMATIC_IMAGE-2.jpg' }}"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/assets/images/NO_SCHEMATIC_IMAGE-2.jpg&quot;"
                                class="section_image p-img small lazyload mt-4" alt="product name" style="width: 100%;"></div>
                        </div>
                </div>

                <div class="col-md-6">
                    @if($mk == 0)
                    @if($isMobile != 1)
                    <div class="justify-content-center my-2 d-none d-md-block d-lg-block" >
                        @if($checkasymID == 0)
                            <div class="input-group  align-self-end" style="border:3px solid #b90700; border-radius:10px;">
                                <span aria-label="..." role="main"  style="border:0;padding: 7px;font-size: 20px;padding-left: 10px;" id="basic-addon2"><i
                                        class="fa fa-search fw-bold"></i></span>
                                <input aria-labelledby="searchModelParts" type="text" id="searchModelParts1" class="form-control" style="border:0;border-radius: 10px;"
                                    placeholder="Search {{ $modeldata['modelName'] }} Parts"
                                    aria-describedby="basic-addon2" autocomplete="off">
                                    <span onclick="closeSearchModelDetails()" aria-label="..." role="main"  style="border: 0px;padding: 2px 7px;font-size: 26px; display:none;" id="basic-addon2" class="backArrowSearch"><i
                                        class="fa fa-backspace fw-bold"></i></span>

                            </div>
                            <div class="searchtexthighlightdivnotres" id="searchtexthighlightdividnotres" style="border: 2px solid #ddd;border-radius: 10px 10px 10px 10px;padding: 10px;display: none;margin-top: 5px;">
                                <!-- <button onclick="closeSearchModelDetails()" class="btn-close float-end"></button> -->
                                <div class="searchchntentdivnotres" style="max-height: 240px;overflow: auto;">
                                    <span>No Search Results Found</span>
                                </div><hr/>

                                <a href="javascript:void(0)" onclick="wholesitesearch()" style="font-size: 18px;">Search Entire Site?</a>

                            </div>
                            <div class=" searchtexthighlightdiv" id="searchtexthighlightdivid" style="border: 2px solid #ddd;border-radius: 10px 10px 10px 10px;padding: 10px;display: none;margin-top: 5px;">
                                {{--  <div class="text-end">

                                    <button onclick="closeSearchModelDetails()" class="btn-close float-end"></button>

                                </div>  --}}
                                <div class="row d-lg-none">
                                    <div class="col-6">
                                        <a href="javascript:void(0)" onclick="scrollToHighlightDiv()" class="d-lg-none  mt-2 searchdivtitle" style="font-size: 16px;"></a>
                                    </div>
                                    <div class="col-6 text-end">
                                        <a href="javascript:void(0)" class="d-lg-none ms-2 mt-2 text-end" onclick="wholesitesearch()" style="font-size: 16px;">Search Entire Site?</a>
                                    </div>
                                </div>
                                <!-- <a href="javascript:void(0)" class="d-lg-none ms-2 mt-2" onclick="wholesitesearch()" style="font-size: 16px;">Search Entire Site?</a> -->

                                <div class="row">
                                    <div class="col-md-6">
                                        <a href="javascript:void(0)" onclick="scrollToHighlightDiv()" class="d-none d-lg-block ms-2 mt-2 searchdivtitle" style="font-size: 18px;"></a>
                                    </div>
                                    <div class="col-md-6">
                                        <a href="javascript:void(0)" class="d-none d-lg-block ms-2 mt-2 text-end" onclick="wholesitesearch()" style="font-size: 18px;">Search Entire Site?</a>
                                    </div>
                                </div>

                                <hr/>
                                <div class="searchchntentdiv" style="max-height: 240px;overflow: auto;">

                                </div>



                                {{--  <input type="checkbox" name="highlight_res" id="highlight_res" onchange="highlightres()" checked> Highlight Results  --}}
                            </div>
                            @endif

                    </div>
                    @endif
                    @endif

                    <div class="card mt-4">
                        <div class="card-body ">
                            @php
                                $cm = 0;
                            @endphp
                            @foreach($mp['parts'] as $mppkey => $mppart)
                                @php
                                $partsallonly[] = $mppart['Description'].' '.$mppart['ProductCode'];
                                    $partsall[] = '<div class="d-flex partselc " data-parent-id="'.$mk.'" data-proid ="'.$mppart['ProductCode'].'"><img alt="..."
                                    src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/'.$mppart['ProductCode'] .'-2.jpg"
                                    onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-2.jpg&quot;"
                                    width="50px" height="50px" class="partImg hrefproductdetails" data-product-code="'.$mppart['ProductCode'] .'"><div data-model-id="'. $mp['ListName'] .'"
                                    data-title="'. $mppart['Description'] .' #'. $mppart['ProductCode'] .'"
                                    data-product-code="'. $mppart['ProductCode'] .'"
                                    data-image-url="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/'.$mppart['ProductCode'] .'-2.jpg"
                                    class="text-decoration-none hrefproductdetails d-flex ms-2 mt-2 data-product-code-'.$mppart['ProductCode'] .'"
                                    onclick="hrefproductdetails(this)"><span aria-label="..." role="main" class="code-no me-2">'.$mppart['KeyNum'] .'</span>
                                        <div class="" data-part-list-count="">'.$mppart['Description'] .'
                                                <a class="text-danger text-decoration-none hrefproductdetails"> '. $mppart['ProductCode'] .'</a></div><div style="display: none">'.$mppart['Description'].' '.$mppart['ProductCode'].'</div></div>';
                                @endphp
                                <div class="d-flex nonselpart partselct-{{ str_replace(' ', '', $mppart['ProductCode']) }}" >
                                    <img alt="..."
                                        src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $mppart['ProductCode'] }}-2.jpg"
                                        onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-2.jpg&quot;"
                                        width="50px" height="50px" class="partImg hrefproductdetails" data-product-code="{{ $mppart['ProductCode'] }}">
                                    <div data-model-id="{{ $mp['ListName'] }}"
                                    data-title="{{ $mppart['Description'] }} #{{ $mppart['ProductCode'] }}"
                                    data-product-code="{{ $mppart['ProductCode'] }}"
                                    data-image-url="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ $mppart['ProductCode'] }}-2.jpg"
                                    class="text-decoration-none hrefproductdetails d-flex ms-2 mt-2 data-product-code-{{ $mppart['ProductCode'] }}"
                                    onclick="hrefproductdetails(this)"><span aria-label="..." role="main" class="code-no me-2">{{ $mppart['KeyNum'] }}</span>
                                        <div class="partListSearchCon" data-part-list-count="' + mkey + '"> {{ $mppart['Description'] }}
                                                <a class="text-danger text-decoration-none hrefproductdetails"> {{ $mppart['ProductCode'] }}</a></div>
                                    </div>
                                </div>
                                @php
                                     $cm++;
                                @endphp
                                @if($cm != count($mp['parts']))
                                    <hr>
                                @endif

                            @endforeach
                            @if($cm == 0)
                                    <p>No Parts Available for this Schematic</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @php
                $mk++;
            @endphp
            @endforeach
        </div>
        @endif
        @if(!empty($description_main))
        <div class="row m-3">
            {!! $description_main !!}
        </div>
        @endif
    </div>

    <div class="modal fade" id="modelPartDetail"  aria-labelledby="modelPartDetailLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg cartmodelcs" >
          <div class="modal-content">

            <div class="modal-body">
                <button role="button" tabindex="0" aria-labelledby="Close" type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="row">
                    <div class="card mb-3 border-0">
                        <div class="row g-0">
                          <div class="col-md-4 text-center m-auto">
                            <img src="{{ asset('assets/web') }}/images/1AHF08390-1.png" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-2.jpg&quot;" id="productimage" class="img-fluid rounded-start" alt="..." width="200px" style="">
                          </div>
                          <div class="col-md-8">

                              <div class="card-body">

                                  <div class="row">
                                      <div class="col-md-12" id="modelDetails">
                                        <img id="topproductimage"
                                        onerror="this.style.display = 'none'" class="img-fluid rounded-start" alt="...">

                                          <h4 id="modeltitle" class="mt-2">Whirlpool 1AHF08390 Outside Air Conditioner/Heat Pump</h4>
                                            <p class="card-text d-none d-lg-block d-md-block" style="color: #7a7a7a;" id="modelno">Model: 1AHF08390</p>
                                          <span aria-label="..." role="main" class="fs-5 text-red text-decoration-line-through d-none" id="modelstickamount">$20.00</span> <span aria-label="..." role="main" class="fs-5 text-black fw-bold" id="modelamount">$16.00</span>
                                         
                                            <p style="color: green;font-size: 22px;margin-top: 10px;margin-bottom: 0px;" class="instocklabel"><i class="fa fa-check-circle" aria-hidden="true"></i> In Stock</p>

                                          <div class="row">
                                            <div class="col-md-3 mb-2" id="qtycartdiv" style="margin-top: 5px">
                                               
                                            </div>
                                            <div class="row replaced_by_div">
                                                 <p><b id="replabel">Replaced By :</b> <span id="replaced_by"></span></p>
                                            </div>
                                            <div class="col-md-12 mt-1 ml-2" style="margin-left: 10px;">
                                                <form action="#" id="addcartForm">
                                                    @csrf
                                                    <input aria-labelledby="PartsWarehouse" type="hidden" name="productimage" id="textproductimage">
                                                    <input aria-labelledby="PartsWarehouse" type="hidden" name="modelamount" id="textmodelamount">
                                                    <input aria-labelledby="PartsWarehouse" type="hidden" name="modelstickamount" id="textmodelstickamount">
                                                    <input aria-labelledby="PartsWarehouse" type="hidden" name="modeltitle" id="textmodeltitle">
                                                    <input aria-labelledby="PartsWarehouse" type="hidden" name="modelno" id="textmodelno">
                                               <div class="row">
                                                <div class="col-4 col-md-3">
                                                    <div style="width: 120px;margin-top: 5px;">
                                                        <div class="input-group">
                                                            <span aria-label="..." role="main" class="input-group-prepend">
                                                                <button role="button" tabindex="0" aria-labelledby="proquantity" 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="PartsWarehouse" type="text" data-id="proquantity" id="itemID_proquantity" item-id="proquantity" name="proquantity" 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="proquantity" type="button" class="btn btn-outline-secondary btn-number" item-id="proquantity" data-type="plus" data-field="proquantity" style="height: 38px;border-radius: 0px;">
                                                                    <span aria-label="..." role="main" class="fa fa-plus"></span>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-7 col-md-5 mobileFavChange" style="padding-right: 0px;">
                                                    <a href="javascript:void(0)" class="mt-4 mb-2 d-lg-none wishlistBtn text-center" id="" aria-label="" onclick="wishlistSave(this)" style="text-decoration: none;color: #5f5f5f;font-size: 20px;"><div class="" style="min-width:100px; font-size: 18px;" ><i class="fa fa-cogs"></i> Save</div></a>
                                                    <a href="javascript:void(0)" id="cartAddBtn" onclick="addToCart()" class="mb-3 btn btn-block btn-danger btn-lg setWebSiteBtnStyle2" style="font-size: 16px;margin-left: 20px;"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>
                                                    <a href="javascript:void(0)" id="cartAddBtn2" class="mb-3 btn btn-block btn-danger btn-lg setWebSiteBtnStyle2" style="font-size: 16px;margin-left: 20px;"><i class="fa fa-shopping-cart"></i>Add To Cart</a>


                                                </div>
                                                    
                                                    <div class="col-0 col-md-3 d-none d-md-block" style="text-align: left;padding: 0px;margin-top: 7px;">
                                                        <a href="javascript:void(0)" class="wishlistBtn" aria-label="" onclick="wishlistSave(this)" style="text-decoration: none;color: #5f5f5f;font-size: 20px;"><div class="" style="min-width:100px; font-size: 18px;" ><i class="fa fa-cogs"></i> Save</div></a>

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


                                                {{--  <span aria-label="..." role="main" class="text-danger" id="alreadyInCartBtn" style="display: ">Already In Cart</span>  --}}
                                                {{--  <button aria-labelledby="..." class="btn btn-danger mt-2" id="cartAddBtn" onclick="addToCart()"><i class="fa fa-shopping-cart"></i> Add toCart</button>  --}}
                                             {{--  <button aria-labelledby="..." class="btn btn-danger mt-2">Save <i class="fa fa-cog"></i></button>  --}}

                                            </div>
                                            <div class="mt-3" id="affirmmodel">

                                           </div>
                                        </div>
                                        <div class="card mt-2 mb-2" id="modelavarepdiv">
                                            <div class="card-body">
                                                <p id="modelavailability"></p>
                                                 
                                            </div>
                                        
                                        </div>
                                        <div class="mt-3 mb-2" id="modelAltPartAvl">

                                        </div>
                                        <div class="text-end">
                                            <a href="#" aria-label="View All Details" id="producturl">View All Details</a>
                                        </div>
                                      </div>

                                  </div>
                              </div>

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

          </div>
        </div>
      </div>
      <div class="modal fade" id="modelPartRarelyOrder"  aria-labelledby="modelPartDetailLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg cartmodelcs" >
          <div class="modal-content">

            <div class="modal-body">
                <button role="button" tabindex="0" aria-labelledby="Close" type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="row">
                    <div class="card mb-3 border-0">
                        <div class="row g-0">
                            <h4>THIS PART IS RARELY ORDERED ...</h4>
                            <div class="col-md-8">
                                <p>Please call us at 866-243-2721 or talk with us by sending us more information. We want to verify availability before placing your order.</p>
                            </div>
                        </div>
                      </div>
                      <div class="row g-0">
                        <div class="col-md-6 text-center">
                                <a href="#" class="btn btn-danger w-75" aria-label="EMAIL">EMAIL</a>
                        </div>
                        <div class="col-md-6 text-center">
                            <a href="#" class="btn btn-danger w-75" aria-label="TEXT">TEXT</a>
                        </div>


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

          </div>
        </div>
    </div>
<div class="loupe"></div>
<div class="modal" id="notlistedModel" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="text-start">
                    <h3>How can we help you?</h3>

                </div>
                <button role="button" tabindex="0" aria-labelledby="Close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="text-start p-2">
                <h5>If you don't see your model or part listed, let us set it up for you!</h5>
            </div>
            <div class="modal-body">
                <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-2">
                        <div class="col-md-4 mt-2">
                            <div class="form-group text-start">
                                <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" maxlength="40" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mt-2">
                            <div class="form-group text-start">
                                <label for="label">Model Description?</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_description') }}" name="model_description"
                                    id="model_description" maxlength="200" placeholder="Enter model description" autocomplete="off" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mt-2">
                            <div class="form-group text-start">
                                <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" maxlength="40" autocomplete="off" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mt-2">
                            <div class="form-group text-start">
                                <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" maxlength="40" value="" placeholder="Enter part number"
                                    autocomplete="off" required>
                            </div>
                        </div>
                    </div>

                    {{--  <div class="row">
                        <div class="col-md-4 mt-2">
                            <div class="form-group text-start">
                                <label for="label">More Info & Other Questions? </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 More Info & Other Questions ..."
                                    spellcheck="false" required></textarea>
                            </div>
                        </div>
                    </div>  --}}


                    <div class="row">
                        <div class="col-md-4 mt-2">
                            <div class="form-group text-start">
                                <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="emailn" type="email" class="form-control"
                                    value="{{ old('email') }}" name="email" maxlength="40" id="emailn" placeholder="Enter email"
                                    autocomplete="off" required>
                            </div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-md-4 mt-2">
                            <div class="form-group text-start">
                                <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" maxlength="15" placeholder="Enter phone"
                                    autocomplete="off" required>
                            </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>
                       </div>
                   </div>
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <p style="color: red;">For Customer Service inquiries please E-mail <a href="mailto:info@partswarehouse.com" style="color: red;" class="">info@partswarehouse.com</a>, Call <a href="tel:866.243.2721" style="color: red;" class="text-decoration-none">866.243.2721</a> or Text 972.381.4644</p>

                        </div>

                    </div>


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


                    </div>

                </form>
            </div>

        </div>
    </div>
</div>
</section>
<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>
    $('#notlistedBtn2').click(function(e){
        $('#notlistedModel').modal('show');
    });


    function collapseContent(){
        $('#collapsePromoCode').collapse('toggle');
    }
    $('#collapsePromoCode').on('shown.bs.collapse', function () {
        $('.faicon').removeClass('fa-chevron-down');
            $('.faicon').addClass('fa-chevron-up');
     });

     $('#collapsePromoCode').on('hidden.bs.collapse', function () {
        $('.faicon').removeClass('fa-chevron-up');
            $('.faicon').addClass('fa-chevron-down');
     });


     $(document).ready(function() {
        // show the alert


        @if($isMobile != 1)
        $('#collapsePromoCode').collapse('toggle');
        @endif
            setTimeout(function() {
                $(".alert").hide();
            }, 2000);

    });
    function wholesitesearch(){
        var searchModelParts1 = $('#searchModelParts1').val();
        window.location = "?q="+searchModelParts1;
            }

    function displayExpertRec(){

        var searchModelParts1 = $('#searchModelParts1').val();

        $('.er_ecom_search_input').val(searchModelParts1);
        $('.er_ecom_search_input').focus();
        closeSearchModelDetails();

    }
    function scrollToHighlightDiv(){
        $('html, body').animate({
        scrollTop: ($('.highlighteditem').offset().top - 200)
        }, 200);
    }

    var subcatID = "{{ $subcat }}";
    var asymID = "{{ (!empty(request()->asymID) ? request()->asymID :"") }}";
    $( document ).ready(function() {

        if(subcatID == 0){
         //   allModalDetail("{{ $modid  }}",0,asymID);
        }else{
          //  allModalDetail("{{ $subcat  }}",1,asymID);
        }

    });
    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"))
        .css({ 'width': $currImage.width() * 2, 'height': $currImage.height() * 2 });

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

$('.partImg').click(function(){
    var pcode = $(this).attr('data-product-code');

    $('.data-product-code-'+pcode).trigger("click");
});

var prosids = [];

$(document).ready(function () {

    $('#searchModelParts1').on('input', function () {
        var searchTerm = $(this).val();

        if (searchTerm === '' && searchTerm.length <= 3) {
            $('.searchchntentdiv').empty();
            $('.searchtexthighlightdiv').hide();
            $(".backArrowSearch").hide();
            $(".nonselpart").removeClass('highlighteditem');
            $(".nonselpart").css('border', 'none');
            $(".nonselpartpopular").css('border', '1px solid rgba(0, 0, 0, 0.175)');
            $(".nonselpartpopular").css('border-radius', '0.375rem');
            return;
        }

        // In a real scenario, you might want to fetch search results from an API
        // and then populate the results in the <ul> element.
        var fakeResults = null;
        var fakeResultsonly = null;

        var matchingResultsOnly = fakeResultsonly.filter(function (result) {
            return result.toLowerCase().includes(searchTerm.toLowerCase());
        });
       // console.log(matchingResultsOnly);
       // var matchingResults = fakeResults.filter(function (result) {
       //     return result.toLowerCase().includes(searchTerm.toLowerCase());
      //  });
       //console.log(matchingResultsOnly);
        var matchingResults = [];
        $.each(fakeResults, function (fkey, fval) {
            $.each(matchingResultsOnly, function (key, val) {
                if (fval.indexOf(val) != -1) {
                    matchingResults.push(fval);
                }
            });
        });

       // console.log(matchingResults);

        $('.searchchntentdiv').empty();
        $('.searchtexthighlightdiv').show();

        prosids = [];

        $.each(matchingResults, function (index, result) {

            $('.searchchntentdiv').append(result);
            $('.searchchntentdiv').append('<hr>');
            var partselc = $('.searchchntentdiv').find('.partselc');
            $.each(partselc, function (ind, res) {
                var partselc1 = $(res).attr('data-proid');
                prosids.push(partselc1);
            });

        });



        if ($(matchingResults).length <= 0) {
            $(".backArrowSearch").show();
            $('.searchtexthighlightdiv').hide();
            $(".nonselpart").removeClass('highlighteditem');
            $(".nonselpart").css('border', 'none');
            $(".nonselpartpopular").css('border', '1px solid rgba(0, 0, 0, 0.175)');
            $(".nonselpartpopular").css('border-radius', '0.375rem');
            $('.searchdivtitle').hide();

            $('.searchtexthighlightdivnotres').show();

            return;
        }else{
            $('.searchtexthighlightdivnotres').hide();
            highlightres();
        }


    });
});

function highlightres(){

        var uniqueProsids = prosids.filter(function (item, i, prosid) {
            return i == prosid.indexOf(item);
        });


        $(".nonselpart").removeClass('highlighteditem');
        $(".nonselpart").css('border', 'none');
        $(".nonselpartpopular").css('border', '1px solid rgba(0, 0, 0, 0.175)');
        $(".nonselpartpopular").css('border-radius', '0.375rem');
        var parentcount = [];

        $.each(uniqueProsids, function (ind, res) {

            parentcount.push($("[data-proid='"+ res +"']").attr('data-parent-id'));
            var element = $(".partListSearchCon:contains('" + res + "')");
            var partlistcount = 0;
            element.each(function (ele) {
                $(".backArrowSearch").show();
                var searchTerms = res.replace(/ /g, '');
                $('.partselct-' + searchTerms).css('border', '2px solid red');
                $('.partselct-' + searchTerms).addClass('highlighteditem');

            });
        });
        prcount = jQuery.unique(parentcount);
        prcount = prcount.length;
        proidcount = uniqueProsids.length;
        if(proidcount > 1){
            proidcounttext = proidcount+' parts in';
        }else{
            proidcounttext = proidcount+' part in';
        }
        if(prcount > 1){
            prcounttext = prcount+' parts lists';
        }else{
            prcounttext = prcount+' part list';
        }
        $('.searchdivtitle').text(proidcounttext+' '+prcounttext);
}

function closeSearchModelDetails(){
    $('.searchtexthighlightdiv').hide();
    $(".nonselpart").removeClass('highlighteditem');
    $(".nonselpart").css('border', 'none');
    $(".backArrowSearch").hide();
    $('#searchModelParts1').val('');
    $(".nonselpartpopular").css('border', '1px solid rgba(0, 0, 0, 0.175)');
            $(".nonselpartpopular").css('border-radius', '0.375rem');
            $('.searchtexthighlightdivnotres').hide();
}
</script>

@endsection