@extends('web.layout.master')

@section('content')
<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;
      }

     @media (max-width: 766px){
        #notlistedBtn{
            margin-top: 10px !important;
        }
    }
</style>
<section>
    <div class="container" style="margin-top:10px; margin-bottom: 60px;">
        @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="container">
            <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>
        <div class="row align-items-center 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(!empty(request()->asymID))
                    {{-- <a href="{{ url('/model-subcat-z/'.$subcat) }}"><img src="{{ asset('assets/web') }}/images/back-assemblies.png" alt="back assemblies" height="45px"></a> --}}
                    <a href="{{ url('/model-subcat-z/'.$subcat) }}" class="btn btn-block btn-danger btn-sm setWebSiteBtnStyle" aria-label="" height="45px"><i class="fas fa-chevron-circle-left"></i>Back To Assemblies</a>
                @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  class="mygearsavebtn mt-4"><img alt="..." src="{{ asset('assets/web') }}/images/save-cart.png" height="45px"></a> --}}
                    <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-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-model-id="{{ $modid }}" data-subcat-id="{{ $subcat }}" data-part-id="0" onclick="wishlistSave(this)" class="mygearsavebtn mt-4" data-model-id="{{ $modeldata['modelNumber'] }}">Remove from My Gear</a>
                @endif
                {{-- <a href="javascript:void(0)" id="notlistedBtn" aria-label=""><img alt="..." src="{{ asset('assets/web') }}/images/notlisted.png" height="40px"></a> --}}
                <a href="javascript:void(0)" id="notlistedBtn2"  class="btn btn-block btn-danger btn-sm setWebSiteBtnStyle" style="margin-top: 0px !important;" aria-label=""><span class="d-none d-lg-block">Part Not Listed?</span><span class="d-lg-none">Part Not Listed?</span></a>
            </div>
            <div class="col-md-4 text-center d-none d-md-block d-lg-block">
                <img id="modelImage2" src="{{ $modeldata['thumbnail'] }}" alt="product name" style="max-width: 250px;">
                @if($is_buy_new_pin == 1)
                <div style="position: absolute;width: 500px;margin-top: -60px;">
                    <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>

        <div class="row mt-4 mb-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>Popular Parts</h2>
                @endif

                @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" 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
            @endif

        </div>
        @if($checkasymID == 0)
        <div class="mt-4 mb-4" id="modelPartsList">
            @foreach($modeldata['partsLists'] as $mpkey => $mp)
            <div class="row mt-4 mb-4">
                <div class="col-md-6">
                    <div class="sticky-top1">
                        <h2></h2>
                        <div class="image"> <img alt="..." src="{{ !empty($mp['schematics'][0]) ? $mp['schematics'][0] : "" }}"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_SCHEMATIC_IMAGE-2.jpg&quot;"
                                class="section_image p-img small lazyload " alt="product name" style="width: 100%;"></div>
                        </div>
                </div>
                <div class="col-md-6">
                    <div class="card mt-5">
                        <div class="card-body ">
                            @php
                                $cm = 0;
                            @endphp
                            @foreach($mp['parts'] as $mppkey => $mppart)
                                <div class="d-flex" >
                                    <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-price="$16.00" data-stick-price="$20.00"
                                    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>
            @endforeach
        </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>
                                          <span aria-label="..." role="main" class="fs-5 text-red text-decoration-line-through d-none d-lg-block" id="modelstickamount">$20.00</span> <span aria-label="..." role="main" class="fs-5 text-danger fw-bold" id="modelamount">$16.00</span>
                                          <p class="card-text d-none d-lg-block d-md-block" id="modelno">Model: 1AHF08390</p>
                                            <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">
                                                <form action="#" id="addcartForm">
                                                    @csrf

                                                    <div style="width: 115px;">
                                                        <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>
                                                        {{--  <input aria-labelledby="PartsWarehouse" type="number" name="proquantity" class="form-control w-100" value="1" id="proquantity" min="1" max="100">  --}}


                                                    <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">
                                                </form>
                                            </div>
                                            <div class="col-md-8 mt-1">
                                                {{-- <a href="javascript:void(0)" id="cartAddBtn" aria-label="" onclick="addToCart()"><img alt="..." src="{{ asset('assets/web') }}/images/add-to-cart.png" height="45px"></a>
                                                <a href="javascript:void(0)" id="cartAddBtn2" aria-label="" ><img alt="..." class="abbtocartbtndbl" src="{{ asset('assets/web') }}/images/add-to-cart.png" height="45px"></a> --}}

                                                <a href="javascript:void(0)" id="cartAddBtn" onclick="addToCart()" class="btn btn-block btn-danger btn-sm setHeaderBtnStyle" style="font-size: 18px;"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>
                                                <a href="javascript:void(0)" id="cartAddBtn2" class="btn btn-block btn-danger btn-sm setHeaderBtnStyle"><i class="fa fa-shopping-cart"></i>Add To Cart</a>

                                                {{-- <a href="javascript:void(0)" id="wishlistBtn" aria-label="" onclick="wishlistSave(this)"><img alt="..." src="{{ asset('assets/web') }}/images/save-cart.png" height="45px"></a> --}}
                                                <a href="javascript:void(0)" id="wishlistBtn" aria-label="" onclick="wishlistSave(this)"><div class="btn btn-block btn-danger btn-sm setHeaderBtnStyle" style="min-width:100px; font-size: 18px;" ><i class="fa fa-cogs"></i> Save</div></a>


                                                {{--  <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>
                                        <div class="card mt-2 mb-2" id="modelavarepdiv">
                                            <div class="card-body">
                                                <p id="modelavailability"></p>
                                                <p id="modelreplaces"></p>
                                            </div>

                                        </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" 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" 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" 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" 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" 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" placeholder="Enter phone"
                                    autocomplete="off" required>
                            </div>
                        </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>
    $('#notlistedBtn').click(function(e){
        $('#notlistedModel').modal('show');
    });
    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");
});
</script>

@endsection