@extends('web.layout.master')

@section('content')

<section>

    <div class="find-parts-section d-none d-lg-block" style="background-image: url('{{ $header_banner }}');">
        <div class="popular-header-div">
                <home-model-search-hz></home-model-search-hz>
        </div>

    </div>

    <div class="d-lg-none">
       <div class="p-0">
        <img src="{{ $header_banner }}" alt="" width="100%">
       </div>
       <div class="container mt-3 ">
        <model-finder-search-popular ></model-finder-search-popular>

            <div class="row mt-2 p-2 d-none">
                <div class="discount-banner-popular">
                    <div class="discount-left">
                        <span class="discount-value-popular">-39%</span>
                    </div>
                    <div class="discount-text-popular">
                        <div class="main-text">Super discount for your first purchase</div>
                        <div class="sub-text">Use discount code in checkout page.</div>
                    </div>
                    <div class="discount-code-popular">FREE15FIRST</div>
                </div>
            </div>


        </div>

        <div class="container mt-3">
            <h3>Popular Items</h3>
            <ul class="nav nav-pills mb-3 mt-2" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-product-tab" data-bs-toggle="pill" data-bs-target="#pills-product"
                        type="button" role="tab" aria-controls="pills-product" aria-selected="true">PARTS</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-parts-tab" data-bs-toggle="pill" data-bs-target="#pills-parts"
                        type="button" role="tab" aria-controls="pills-parts" aria-selected="false">PRODUCTS</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-model-tab" data-bs-toggle="pill" data-bs-target="#pills-model"
                        type="button" role="tab" aria-controls="pills-model" aria-selected="false">MODEL</button>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-product" role="tabpanel" aria-labelledby="pills-product-tab">
                    <div class="card card-body p-2" style="background: #F8F8F8;border: 0px;">
                        <div class="row">
                                @if(!empty($popularParts))
                                @foreach ($popularParts as $pp)
                                    <div class="col-6 position-relative">
                                        <div class="p-2 text-center">
                                            <div class="wraptocenter-margin-popular" style="background: #ffff">
                                                <div class="wraptocenter-popular" style="height: 180px;">
                                                    <a href="{{ $pp['url'] }}">
                                                        <img alt="..." src="{{ $pp['image'] }}" class="imageclass-popular p-2"></a>
                                                </div>
                                            </div>
                                            <p class="text-center m-0 mt-3 text-black">{{ $pp['id'] }} </p>
                                            <div class="product-title-popular two-line-ellipsis-popular" style="height: 35px;">{{ $pp['name'] }}</div>
                                            <div class="fw-bold" style="font-size: 16px;">${{ $pp['price'] }}</div>
                                            <a href="javascript:void(0)" onclick="addToCartPartPopular(this)" data-sku="{{ $pp['sku'] }}" data-productimage="{{ $pp['image'] }}" data-modelamount="{{ $pp['price'] }}" data-modelstickamount="{{ $pp['productstickprice'] }}" data-modeltitle="{{ $pp['name'] }}" data-modelno="{{ $pp['id'] }}"  class="mt-2 btn btn-block btn-danger btn-sm cartAddBtnPopularPart" style="font-size: 14px;width: 130px;"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>

                                        </div>


                                    </div>

                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-parts" role="tabpanel" aria-labelledby="pills-parts-tab">
                    <div class="card card-body p-4" style="background: #F8F8F8;border: 0px;">
                        <div class="row g-3">
                            <!-- Product 1 -->
                            @if(!empty($popularWholeGood))
                                @foreach ($popularWholeGood as $pp)

                                    <div class="col-12">
                                        <div class="p-3 d-flex flex-row align-items-center bg-white rounded shadow-sm">
                                            <img src="{{ $pp['image'] }}" class="img-fluid rounded me-3" style="width: 120px;" alt="Product">
                                            <div>
                                                <h5 class="mb-1" style="font-size: 18px;">{{ $pp['name'] }}</h5>
                                                <a href="{{ $pp['url'] }}" class="text-danger d-block mb-1" style="font-size: 12px;">{{ $pp['id'] }}</a>
                                                <div class="fw-bold" style="font-size: 18px;">${{ $pp['price'] }}</div>
                                                <div class="d-flex gap-2">
                                                    <a href="javascript:void(0)" onclick="addToCartPartPopular(this)" data-sku="{{ $pp['sku'] }}" data-productimage="{{ $pp['image'] }}" data-modelamount="{{ $pp['price'] }}" data-modelstickamount="{{ $pp['productstickprice'] }}" data-modeltitle="{{ $pp['name'] }}" data-modelno="{{ $pp['id'] }}"  class="mt-2 btn btn-block btn-danger btn-sm cartAddBtnPopularPart" style="font-size: 14px;width: 130px;"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>
                                                    {{--  <a href="javascript:void(0)" onclick="addToCartPartReplacement(this)" data-sku="917530-02" data-productimage="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/DYR-917530-02-2.jpg" data-modelamount="114.16" data-modelstickamount="136.99" data-modeltitle="Replacement Vacuum Charger For Dyson Dc30 Dc31 Dc34 Dc35 Dc44 Dc45 Dc56 Dc57 Cordless Vacuum Power Supply Dyson 24.35V Charger" data-modelno="DYR-917530-02" class="mt-2 btn btn-block btn-danger btn-sm cartAddBtnPopularPart" style="font-size: 14px;width: 130px;"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>
                                                    <a href="javascript:void(0)" aria-label="" data-part-id="DYR-917530-02" onclick="loginModel()" style="text-decoration: none;color: #5f5f5f;">
                                                        <span><i class="far fa-heart" style="margin-top: 15px;"></i></span>
                                                    </a>  --}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif

                        </div>
                    </div>

                </div>
                <div class="tab-pane fade" id="pills-model" role="tabpanel" aria-labelledby="pills-model-tab">
                    <div class="card shadow-sm text-center" style="background: #F8F8F8;border:0px;">
                        <div class="row p-3 pb-2">

                            @if(!empty($popularModels))
                                @foreach ($popularModels as $pm)
                                    <div class="col-6 text-center mb-2">
                                        <div class="card"><div class="wraptocenter-margin"><div class="wraptocenter" style="height: 90px;"><a href="{{ $pm['url'] }}"><img alt="..." src="{{ $pm['image'] }}" class="imageclass p-2"></a></div></div></div>
                                        <p class="text-center mt-2 popular-side-bar-font two-line-ellipsis-popular">{{ $pm['name'] }}</p>
                                    </div>
                                @endforeach
                            @endif



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

            <div class="row mt-2 p-3">
                <div class="search-section-popular-mobile">
                    <h3 class="search-title-popular">Search By {{ $model_name }} Model or Part Number</h3>
                    <div class="search-box-popular">
                        <span class="search-icon-popular">🔍</span>
                        <input type="text" placeholder="Search..." class="search-input-popular expertSearch2">
                    </div>
                </div>
                <div style="position:relative; padding:0px;">
                    <div class="searchdiv-popular expertsearchdiv2" >
                        <div class="row m-0">
                            <div class="col-md-6 col-6 pe-0" style="border: 1px solid #ddd;padding-left: 0px;border-top-left-radius: 5px;    border-bottom-left-radius: 5px;">
                                <div class="text-white" style="background: #03458f;padding: 8px;border-top-left-radius: 5px;">
                                    <p class="modelsHeadTitle2">Models</p>
                                </div>
                                <div class="row p-3 resultsContainer2Model2" >

                                </div>
                            </div>
                            <div class="col-md-6 col-6 ps-0" style="border: 1px solid #ddd;padding-right: 0px;border-top-right-radius: 5px;    border-bottom-right-radius: 5px;">
                                <div class="text-white" style="background: #ba2028;padding: 8px;border-top-right-radius: 5px;">
                                    <p class="partsHeadTitle2">Parts</p>
                                </div>


                                <div class="row p-3 resultsContainer2" >

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

        </div>
    </div>
    <div class="d-none d-lg-block">
        <div class="row" style="margin: 20px;padding-bottom: 0px;">
            <div class="col-lg-3 col-md-3 col-sm-12 mb-4">
                <div class="card shadow-sm text-center" style="background: #F8F8F8;border:0px;">

                    <div class="mb-2 mt-2">
                        <div class="wraptocenter-margin-popular">
                            <div class="wraptocenter-popular" style="height: 90px;">
                                <a href="{{ $model_url }}">
                                    <img alt="..." src="{{ $model_banner }}" class="imageclass-popular p-2"></a>
                            </div>
                        </div>

                    </div>
                    <hr style="border: 2px solid;color: #E2E2E2;margin: 0px;margin-bottom: 5px;">
                    <div class="row p-2">
                        <div class="text-start ms-2">
                            <div class="header-title-popular text-uppercase mb-3">POPULAR {{ $model_name }} MODELS</div>
                            <hr style="border: 1px solid;color: #DEE2E6;margin: 0px;margin-bottom: 20px;margin-right: 20px;">
                        </div>
                    </div>
                    <div class="row p-3 pb-2 pt-0">

                        @if(!empty($popularModels))
                            @foreach ($popularModels as $pm)
                                <div class="col-6 text-center mb-2">
                                    <div class="card"><div class="wraptocenter-margin"><div class="wraptocenter" style="height: 90px;"><a href="{{ $pm['url'] }}"><img alt="..." src="{{ $pm['image'] }}" class="imageclass p-2"></a></div></div></div>
                                    <p class="text-center mt-2 popular-side-bar-font two-line-ellipsis-popular">{{ $pm['name'] }}</p>
                                </div>
                            @endforeach
                        @endif



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



            <div class="col-lg-9 col-md-9 col-sm-12 mb-2">
                <div class="header-box-popular mb-3">
                    <div class="header-title-popular">POPULAR {{ $model_name }} PARTS</div>
                    <!-- <div class="arrow-nav-popular">
                        <div class="arrow-btn-popular">&lt;</div>
                        <div class="arrow-btn-popular">&gt;</div>
                    </div> -->
                </div>


                <div class="card card-body p-0" style="background: #F8F8F8;border: 0px;">
                    <div class="row">
                        @if(!empty($popularParts))
                            @foreach ($popularParts as $pp)
                            <div class="col-2 position-relative">
                                <div class="p-3 text-center">
                                    <div class="wraptocenter-margin-popular" style="background: #ffff">
                                        <div class="wraptocenter-popular" style="height: 180px;">
                                            <a href="{{ $pp['url'] }}">
                                                <img alt="..." src="{{ $pp['image'] }}" class="imageclass-popular p-2"></a>
                                        </div>
                                    </div>
                                    <p class="text-center m-0 mt-3 text-black">{{ $pp['id'] }} </p>
                                    <div class="product-title-popular two-line-ellipsis-popular" style="height: 35px;">{{ $pp['name'] }}</div>
                                    <div class="fw-bold" style="font-size: 16px;">${{ $pp['price'] }}</div>
                                    <a href="javascript:void(0)" onclick="addToCartPartPopular(this)" data-sku="{{ $pp['sku'] }}" data-productimage="{{ $pp['image'] }}" data-modelamount="{{ $pp['price'] }}" data-modelstickamount="{{ $pp['productstickprice'] }}" data-modeltitle="{{ $pp['name'] }}" data-modelno="{{ $pp['id'] }}"  class="mt-2 btn btn-block btn-danger btn-sm cartAddBtnPopularPart" style="font-size: 14px;width: 130px;"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>

                                </div>

                                <div class="vertical-line"></div>
                            </div>
                            {{--  <div class="col-3 text-center position-relative">
                                <div class="p-3">
                                    <div class="wraptocenter-margin-popular" style="background: #ffff">
                                        <div class="wraptocenter-popular" style="height: 90px;">
                                            <a href="{{ $pp['url'] }}">
                                                <img alt="..." src="{{ $pp['image'] }}" class="imageclass-popular p-2"></a>
                                        </div>
                                    </div>
                                    <p class="text-center m-0 mt-3 text-black">{{ $pp['id'] }} </p>
                                    <p class="text-center text-black">{{ $pp['name'] }} </p>
                                </div>

                                <div class="vertical-line"></div>
                            </div>  --}}
                            @endforeach
                        @endif


                    </div>
                </div>
                <div class="row mt-2 p-3">
                    <div class="search-section-popular">
                        <h3 class="search-title-popular">Search By {{ $model_name }} Model or Part Number</h3>
                        <div class="search-box-popular">
                            <span class="search-icon-popular">🔍</span>
                            <input type="text" placeholder="Search..." class="search-input-popular expertSearch2">
                        </div>
                    </div>
                    <div style="position:relative; padding:0px;">
                        <div class="searchdiv-popular expertsearchdiv2" >
                            <div class="row m-0">
                                <div class="col-md-6 col-6 pe-0" style="border: 1px solid #ddd;padding-left: 0px;border-top-left-radius: 5px;    border-bottom-left-radius: 5px;">
                                    <div class="text-white" style="background: #03458f;padding: 8px;border-top-left-radius: 5px;">
                                        <p class="modelsHeadTitle2">Models</p>
                                    </div>
                                    <div class="row p-3 resultsContainer2Model2" >

                                    </div>
                                </div>
                                <div class="col-md-6 col-6 ps-0" style="border: 1px solid #ddd;padding-right: 0px;border-top-right-radius: 5px;    border-bottom-right-radius: 5px;">
                                    <div class="text-white" style="background: #ba2028;padding: 8px;border-top-right-radius: 5px;">
                                        <p class="partsHeadTitle2">Parts</p>
                                    </div>


                                    <div class="row p-3 resultsContainer2" >

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

                <div class="row mt-2 p-2 d-none">
                    <div class="discount-banner-popular">
                        <div class="discount-left">
                            <span class="discount-value-popular">-39%</span>
                        </div>
                        <div class="discount-text-popular">
                            <div class="main-text">Super discount for your first purchase</div>
                            <div class="sub-text">Use discount code in checkout page.</div>
                        </div>
                        <div class="discount-code-popular">FREE15FIRST</div>
                    </div>
                </div>
                <div class="header-box-popular mb-3">
                    <div class="header-title-popular">POPULAR {{ $model_name }} PRODUCTS</div>
                    <!-- <div class="arrow-nav-popular">
                        <div class="arrow-btn-popular">&lt;</div>
                        <div class="arrow-btn-popular">&gt;</div>
                    </div> -->
                </div>

                <div class="card card-body p-4" style="background: #F8F8F8;border: 0px;">
                    <div class="row g-3">
                        <!-- Product 1 -->
                        @if(!empty($popularWholeGood))
                            @foreach ($popularWholeGood as $pp)
                                <div class="col-md-6">
                                    <div class="p-3 d-flex flex-row align-items-center bg-white rounded shadow-sm">
                                        <img src="{{ $pp['image'] }}" class="img-fluid rounded me-3" style="width: 120px;" alt="Product">
                                        <div>
                                            <h5 class="mb-1" style="font-size: 18px;">{{ $pp['name'] }}</h5>
                                            <a href="{{ $pp['url'] }}" class="text-danger d-block mb-1" style="font-size: 12px;">{{ $pp['id'] }}</a>
                                            <div class="fw-bold" style="font-size: 18px;">${{ $pp['price'] }}</div>
                                            <div class="d-flex gap-2">
                                                <a href="javascript:void(0)" onclick="addToCartPartPopular(this)" data-sku="{{ $pp['sku'] }}" data-productimage="{{ $pp['image'] }}" data-modelamount="{{ $pp['price'] }}" data-modelstickamount="{{ $pp['productstickprice'] }}" data-modeltitle="{{ $pp['name'] }}" data-modelno="{{ $pp['id'] }}"  class="mt-2 btn btn-block btn-danger btn-sm cartAddBtnPopularPart" style="font-size: 14px;width: 130px;"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>
                                                {{--  <a href="javascript:void(0)" onclick="addToCartPartReplacement(this)" data-sku="917530-02" data-productimage="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/DYR-917530-02-2.jpg" data-modelamount="114.16" data-modelstickamount="136.99" data-modeltitle="Replacement Vacuum Charger For Dyson Dc30 Dc31 Dc34 Dc35 Dc44 Dc45 Dc56 Dc57 Cordless Vacuum Power Supply Dyson 24.35V Charger" data-modelno="DYR-917530-02" class="mt-2 btn btn-block btn-danger btn-sm cartAddBtnPopularPart" style="font-size: 14px;width: 130px;"><i class="fa fa-shopping-cart"></i>  Add To Cart</a>
                                                <a href="javascript:void(0)" aria-label="" data-part-id="DYR-917530-02" onclick="loginModel()" style="text-decoration: none;color: #5f5f5f;">
                                                    <span><i class="far fa-heart" style="margin-top: 15px;"></i></span>
                                                </a>  --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif

                    </div>
                </div>

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

    <div class="p-4 image-bottom-banner-popular" id="model-list-popular">
        <img src="{{ $ads_banner }}" width="100%" alt="">
    </div>

    <div style="padding-left: 36px;padding-right: 36px;" class="model-category-list-title">
        <div class="header-box-popular mb-3">
            <div class="header-title-popular">{{ $model_name }} CATEGORIES</div>
            <!-- <div class="arrow-nav-popular">
                <a href="{{ $model_url }}" class="text-decoration-none text-black arrow-btn-popular">&lt;</a>
                <a href="{{ $model_url }}" class=" text-decoration-none text-black arrow-btn-popular">&gt;</a>
            </div> -->
        </div>
    </div>
    <div class="p-5 pt-0 model-category-list" >

        <div class="card card-body p-0" style="background: #F8F8F8;border: 0px;">

            <div class="row product-row" style="background: rgb(248, 248, 248);">
                @if(!empty($model_data))
                    @foreach ($model_data as $m)
                        <div class="col-md-2 col-6 product-col-popular">
                            <div class="wraptocenter-margin-popular" style="background: #ffff">
                                <div class="wraptocenter-popular" style="height: 180px;">
                                    <a href="{{ url('/') . '/' .$m['url_text'].'-s/'.$m['subcat'].'.htm' }}">
                                        <img alt="..." src="{{ $m['thumbnail'] }}" class="imageclass-popular p-2"></a>
                                </div>
                            </div>
                            <div class="product-title-popular">{{ $m['Name'] }}</div>
                        </div>
                    @endforeach
                @endif
                <!-- Add more items (next row automatically forms) -->
            </div>
        </div>
    </div>

</section>
<script type="application/javascript">
    var makesele = "";
    window.subId = "{{ '|'.$cat_id }}";
    var vert = "{{ '|'.$cat_id }}";
    window.vertId = "app";
</script>
@section('scripts')


<script src="{{ asset('js/app.js?v='.date('YmdHis')) }}" type="text/javascript"></script>

<script>
    $(document).ready(function() {
        var columnsPerRow = 6; // col-md-2 => 12/2 = 6

        $(".product-col-popular").each(function(index) {
            var position = index + 1;

            // First column of each row => remove left border
            if (position % columnsPerRow === 1) {
                $(this).css("border-left", "none");
            }

            // Last column of each row => remove right border
            if (position % columnsPerRow === 0) {
                $(this).css("border-right", "none");
            }
        });

        // Remove bottom border for last row
        var totalItems = $(".product-col-popular").length;
        var lastRowStart = Math.floor((totalItems - 1) / columnsPerRow) * columnsPerRow + 1;

        $(".product-col-popular").each(function(index) {
            var position = index + 1;
            if (position >= lastRowStart) {
                $(this).css("border-bottom", "none");
            }
        });
        $('.arrow-btn-popular').on('click', function () {

            $('html, body').animate({
                scrollTop: $('#model-list-popular').offset().top
            }, 700); // 500ms smooth scroll
        });


    });



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

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

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

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

            }
        });
    }



    $(document).ready(function() {

        $(document).on('click', function(event) {
            if (!$(event.target).closest('.expertsearchdiv2').length) {
                $('.expertsearchdiv2').hide();

            }
        });
        // Prevent closing when clicking inside
        $('.expertsearchdiv2').on('click', function(event) {
            event.stopPropagation();

        });
        $('.expertSearch2').on('focus', function(){

            if($(this).val() != ""){
                clearTimeout(this.delay);

            this.delay = setTimeout(function(){
                $('.expertsearchdiv2').show();
            }.bind(this), 700);

            }

        });
        $(".expertSearch2").on("keypress", function (event) {
            if (event.which == 13) {
                event.preventDefault();
                window.location.href = "{{ route('quick-search') }}?q="+this.value;
            }

        });
        let currentRequest = null;
        $('.expertSearch2').on('keyup paste', function(event){


            if(event.which == 13) {
                event.preventDefault();
                window.location.href = "{{ route('quick-search') }}?q="+this.value;

            }else {
                // Call function when any other key is pressed
                clearTimeout(this.delay);

                this.delay = setTimeout(function(){
                    $(this).trigger('search');
                }.bind(this), 700);
            }

        }).on('search', function(){
            if(this.value){
                $('.closeSerachBtn').show();
                $('.expertsearchdiv2').show();
            var query1 = this.value.toUpperCase();
            var query = this.value;
            query = query.replace(/[^0-9a-zA-Z-\s]/g , '');
            query = query.toUpperCase();
            query = query.trim();
            // const query = $('#searchQuery').val();
            if (query.trim() === '') {
                // $('.resultsContainer2Model2WithoutFuzzy').empty();
                $('.resultsContainer2Model2').empty();
                $('.resultsContainer2').empty();
                // $('.resultsContainer2').append('<div class="card p-2" style="padding:10px;"><span>Try wider search.</span></div>');

                $('.resultsContainer2').append(`
                     <div class="row p-2">
                        <div class="col-md-12" style="margin:auto;">
                            <div class=" mb-3">
                                <div class="row g-0">
                                    <span style="padding:10px;">Try wider search.</span>
                                </div>
                            </div>
                        </div>
                    </div>

                `);

                $('.resultsContainer2Model2').append(`
                    <div class="row p-2">
                        <div class="col-md-12" style="margin:auto;">
                            <div class=" mb-3">
                                <div class="row g-0">
                                    <span style="padding:10px;">Try wider search.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                `);


                return;
            }

            // Abort the previous request if it exists
            if (currentRequest && currentRequestModel) {
                currentRequest.abort();
            }

            $('.resultsContainer2').empty();
            $('.resultsContainer2').append(`
                    <div class="row m-0">

                        <div class="col-12 p-0 m-auto">
                            <p class="mt-1 e-part-text">
                               Searching...
                            </p>
                        </div>
                    </div>

                `);

            $('.resultsContainer2Model2').empty();
            $('.resultsContainer2Model2').append(`
                    <div class="row  m-0">

                        <div class="col-12 p-0 m-auto">
                            <p class="mt-1 e-part-text">
                               Searching...
                            </p>
                        </div>
                    </div>

                `);
                let startTime = performance.now(); // Start timer
                var elastic_search_setting_id = '{{ (!empty($elasticSearchSetting) ? $elasticSearchSetting->id : 0) }}';
                var productReqJson = {!! (!empty($elasticSearchSetting) ? $elasticSearchSetting->brand_product_json : '') !!};
                var modelReqJson = {!! (!empty($elasticSearchSetting) ? $elasticSearchSetting->brand_model_json : '') !!};
                var elastic_search_product_index = '{{ (!empty($setting->elastic_search_product_index) ? $setting->elastic_search_product_index : "products_v5") }}';
                var elastic_search_modal_index = '{{ (!empty($setting->elastic_search_modal_index) ? $setting->elastic_search_modal_index : "models_v2") }}';

                var requestBody =
                    `{"index": "${elastic_search_product_index}"}\n` +
                    `${JSON.stringify(productReqJson)}\n` + // Convert object to JSON string
                    `{"index": "${elastic_search_modal_index}"}\n` +
                    `${JSON.stringify(modelReqJson)}\n` +
                    `\n`;

                var brand_name = "{{ $elastic_model_name }}";
                // Properly replace placeholders using a global regex
                requestBody = requestBody.replace(/:e_brand/g, brand_name);
                requestBody = requestBody.replace(/:e_query/g, query);
                requestBody = requestBody.replace(/:e_size/g, "10");
                requestBody = requestBody.replace(/:e_from/g, "0");

        $.ajax({
                url: '{{ env("ELASTIC_HOST", "https://elastic.partdora.com") }}/_msearch', // Ensure the protocol is included (http or https)
                method: 'POST',
                headers: {
                    "Accept": "*/*",
                    "Content-Type": "application/x-ndjson",
                    "Authorization": "Basic ZWxhc3RpYzpQcmltZUA5ODcj"
                },
                data: requestBody,
                success: function(response) {
                    $('.resultsContainer2Model2').empty(); // Clear any previous results
                    $('.resultsContainer2').empty(); // Clear any previous results
                    $('.modelsHeadTitle2').text("Models");
                    $('.partsHeadTitle2').text("Parts");
                    // Check if the total number of results is 0
                    if (response.responses[0].hits.total.value === 0) {

                        $('.resultsContainer2').append(`
                        <div class="row m-0">

                            <div class="col-12 p-0 m-auto">
                                <p class="mt-1 e-part-text">
                                Try wider search.
                                </p>
                            </div>
                        </div>


                    `);
                    $('.partsHeadTitle2').text("Parts (No Matches)");
                        // $('.resultsContainer2').append('<p>Try wider search.</p>');
                    } else {
                        var partsCount = response.responses[0].hits.total.value;
                        if(partsCount > 9999){
                            partsCount = "10000+";
                        }
                        $('.partsHeadTitle2').text("Parts ("+partsCount+")");
                        // Loop through each hit in the response
                        var imgURL = "https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg";
                        response.responses[0].hits.hits.forEach((item, index) => {
                            const product = item._source;
                            const PScore = item._score
                            if(product.HasPhoto == "0"){
                                imgURL = "https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg";
                            }else{
                                imgURL = product.HasPhoto;
                            }
                            product.HasPhoto
                            var classInd = '';
                            if (index != 0) {
                                classInd ='mt-2';
                            }
                            $('.resultsContainer2').append(`

                            <div class="col-md-6 mt-0 d-none d-lg-block p-1 pt-0 align-self-center">
                                <a href="/${product.URL_Text}-p/${product.ProductCode}.htm" class="text-decoration-none text-black">
                                    <div class="row e-model-card m-0">
                                        <div class="col-3 p-0 align-self-center ">
                                            <img src="${imgURL}" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg&quot;" alt="${product.ProductName}" srcset="" width="100%" class="ms-0">

                                        </div>
                                        <div class="col-9 p-0 align-self-center">
                                            <p class="e-part-text mb-0">
                                                ${product.ProductName}
                                            </p>
                                        </div>
                                    </div>
                                </a>


                            </div>

                            <div class="d-lg-none ${classInd}">
                                <a href="/${product.URL_Text}-p/${product.ProductCode}.htm" class="text-decoration-none text-black">
                                    <div class="row e-model-card m-0">
                                       <div class="col-3 p-0 align-self-center">
                                            <img src="${imgURL}" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg&quot;" alt="${product.ProductName}" srcset="" width="100%" class="ms-0">

                                        </div>
                                        <div class="col-9 p-0 align-self-center">
                                            <p class=" e-part-text mb-0">
                                                ${product.ProductName}
                                            </p>
                                        </div>
                                    </div>
                                </a>

                            </div>

                        `);
                        });
                    }
                    if (response.responses[1].hits.total.value === 0) {

                        $('.resultsContainer2Model2').append(`
                            <div class="row m-0">

                                <div class="col-12 p-0 m-auto">
                                    <p class="mt-1 e-part-text">
                                    Try wider search.
                                    </p>
                                </div>
                            </div>
                        `);
                        $('.modelsHeadTitle2').text("Models (No Matches)");
                        // $('.resultsContainer2').append('<p>Try wider search.</p>');
                    } else {
                        var modelsCount = response.responses[1].hits.total.value;
                        if(modelsCount > 9999){
                            modelsCount = "10000+";
                        }
                        $('.modelsHeadTitle2').text("Models ("+modelsCount+")");
                        // Loop through each hit in the response
                        response.responses[1].hits.hits.forEach((item, index) => {
                            const product = item._source;
                            const PScore = item._score
                            if(product.HasPhoto == "0"){
                                imgURL = "https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg";
                            }else{
                                imgURL = product.HasPhoto;
                            }
                            var classInd = '';
                            if (index != 0) {
                                classInd ='mt-2';
                            }
                            $('.resultsContainer2Model2').append(`
                             <div class="col-md-6 mt-0 d-none d-lg-block p-1 pt-0 align-self-center">

                                <a href="/-s/${product.ProductCode}.htm" class="text-decoration-none text-black">
                                    <div class="row e-model-card m-0">
                                        <div class="col-3 p-0 align-self-center">
                                            <img src="${imgURL}" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg&quot;" alt="${product.ProductName}" srcset="" width="90%" class="ms-0">

                                        </div>
                                        <div class="col-9 p-0 align-self-center">
                                            <p class=" e-model-text mb-0">
                                                ${product.ProductName}
                                            </p>
                                        </div>
                                    </div>
                                </a>



                            </div>
                            <div class="d-lg-none ${classInd}">
                                <a href="/-s/${product.ProductCode}.htm" class="text-decoration-none text-black">
                                    <div class="row e-model-card m-0">
                                         <div class="col-3 p-0 align-self-center" >
                                            <img src="${imgURL}" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-1.jpg&quot;" alt="${product.ProductName}" srcset="" width="90%" class="ms-0">

                                        </div>
                                        <div class="col-9 p-0 align-self-center">
                                            <p class="e-model-text mb-0">
                                                ${product.ProductName}
                                            </p>
                                        </div>
                                    </div>
                                </a>

                            </div>


                        `);
                        });
                    }
                    let endTime = performance.now(); // End timer
                    let responseTime = endTime - startTime;

                    $.ajax({
                        url: "{{ route('header-search-save') }}",
                        type: "POST",
                        data: {
                            search_query: query,
                            response_time: responseTime,
                            elastic_search_setting_id:elastic_search_setting_id,
                            _token: "{{ csrf_token() }}"
                        }
                    });
                },
                error: function() {
                    let endTime = performance.now(); // End timer
                    let responseTime = endTime - startTime;
                    $.ajax({
                        url: "{{ route('header-search-save') }}",
                        type: "POST",
                        data: {
                            search_query: query,
                            response_time: responseTime,
                            elastic_search_setting_id:elastic_search_setting_id,
                            _token: "{{ csrf_token() }}"
                        }
                    });
                    $('.resultsContainer2').empty();
                    $('.resultsContainer2').append(`
                    <div class="row m-0">

                                <div class="col-12 p-0 m-auto">
                                    <p class="mt-1 e-part-text">
                                    Try wider search.
                                    </p>
                                </div>
                            </div>

                    `);

                    $('.resultsContainer2Model2').empty();
                    $('.resultsContainer2Model2').append(`
                    <div class="row m-0">

                                <div class="col-12 p-0 m-auto">
                                    <p class="mt-1 e-part-text">
                                    Try wider search.
                                    </p>
                                </div>
                            </div>

                    `);
                    $('.modelsHeadTitle2').text("Models (No Matches)");
                    $('.partsHeadTitle2').text("Parts (No Matches)");
                }
            });
     }else{
        $('.expertsearchdiv2').hide();
        $('.closeSerachBtn').hide();
     }
    });
});


    </script>
    @endsection
@endsection