@extends('web.layout.master')

@section('content')
<style>
    #modelsHeadTitleQuickSearch {
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 1.20rem;
        font-weight: 600;
    }
    #partsHeadTitleQuickSearch {
        margin-top: 0px;
        margin-bottom: 0px;
        font-size: 1.20rem;
        font-weight: 600;
    }
    .pagination .page-item .page-link {
        margin: 5px;
        border-radius: 5px;
}
button.page-link.page-number.active {
    background: #b90600;
    border: 1px solid #b90600;
    box-shadow: none;
    color: white;
}
.pagination .page-item .page-link {
    margin: 5px;
    border-radius: 5px;
    color: #02458f;
}

@media (max-width: 480px) {
 #resultsContainerModelQuickSearch{
    padding: 10px !important;
    }
    #resultsContainerQuickSearch{
        padding: 10px !important;
    }
}
</style>
    <div class="container">


            <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 id="modelsHeadTitleQuickSearch">Models</p>
                    </div>
                    <div class="row p-3" id="resultsContainerModelQuickSearch">

                    </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 id="partsHeadTitleQuickSearch">Parts</p>
                    </div>


                    <div class="row p-3" id="resultsContainerQuickSearch">

                    </div>
                </div>
            </div>
            <div class="text-center mt-2">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center" id="pagination">
                      <li class="page-item">
                        <button class="page-link prev-page" aria-label="Previous">&lt;</button>
                      </li>
                      <div id="page-numbers" class="pagination"></div>
                      <li class="page-item">
                        <button class="page-link next-page" aria-label="Next">&gt;</button>
                      </li>
                    </ul>
                  </nav>
            </div>


    </div>
    <script>
        var query = '{{ $query }}';
        $('.expertSearch').val(query);
        var formCount = 0;
        var totalPages = 0;
        var totalPagesPart = 0;
        var totalPagesModel = 0;
        var pageStart = 1;
        var pageRange = 5;
        var pagesPerStep = 1; // Number of pages to move on "Next"
        let currentPage = 1; // Current page
        let recordsPerPage = 10; // Records per page
        $(document).ready(function(){
            $('#loadMoreQucikSearchBtn').hide();
            formCount = 1;

            quicksearch(formCount,1);
        });

        function loadMoreQucikSearch(){
            $('#loadMoreQucikSearchBtn').text('Loading...');
            formCount = formCount + 10;
            quicksearch(formCount);
        }

        $('.prev-page').on('click', function() {
              if (currentPage > 1) {
                quicksearch(--currentPage);
            }
        });

        $('.next-page').on('click', function() {
            if(totalPagesPart >= totalPagesModel){
                var totalrecord = totalPagesPart;
            }
            if(totalPagesPart <= totalPagesModel){
                var totalrecord = totalPagesModel;
            }
            let totalPages = Math.ceil(totalrecord / recordsPerPage);
            if (currentPage < totalPages) {
                quicksearch(++currentPage);
            }
        });

        $(document).on('click', '.page-number', function() {
            currentPage = $(this).data('page');
            quicksearch(currentPage);
        });
        function quicksearch(formCount,first_time = 0){
            var size = 10; // Number of records per page
            var from = (formCount - 1) * size; // Offset calculation
            console.log(from);
            if(from == 0){
                from = 0;
            }
            let currentRequest = null;
            var query = '{{ $query }}';
            if(query){
                $('.closeSerachBtn').show();



                query = query.replace(/[^0-9a-zA-Z-\s]/g , '');
                query = query.toUpperCase();
                query = query.trim();
                // const query = $('#searchQuery').val();
                if (query.trim() === '') {
                    // $('#resultsContainerModelWithoutFuzzy').empty();

                    // $('#resultsContainer').append('<div class="card p-2" style="padding:10px;"><span>Try wider search.</span></div>');
                    if(first_time == 1){
                    $('#resultsContainerQuickSearch').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>

                    `);

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

                    if(first_time == 1){
                        $('#resultsContainerQuickSearch').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>

                            `);

                        $('#resultsContainerModelQuickSearch').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>

                            `);
                    }
                
                 var productReqJson = {!! (!empty($elasticSearchSetting) ? $elasticSearchSetting->product_json : '') !!};
                var modelReqJson = {!! (!empty($elasticSearchSetting) ? $elasticSearchSetting->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`;

                // Properly replace placeholders using a global regex
                requestBody = requestBody.replace(/:e_query/g, query);
                requestBody = requestBody.replace(/:e_size/g, size);
                requestBody = requestBody.replace(/:e_from/g, from);

                        /*
                        var requestBody =
        `{"index": "products_v5"}\n` +
        `{"size":${size},"from":${from},"query":{"function_score":{"query":{"bool":{"should":[{"bool":{"must":[{"term":{"SKU":{"value":"${query}","boost":5}}}],"filter":[{"script":{"script":{"lang":"painless","source":"params.sku.length() <= 20","params":{"sku":"${query}"}}}}]}},{"match":{"ProductName":{"query":"${query}","operator": "and","fuzziness":"AUTO","boost":1}}},{"match":{"ProductNameCleaned":{"query":"${query}","operator": "and","fuzziness":"AUTO","boost":1}}}],"minimum_should_match":1}},"functions":[{"script_score":{"script":{"source":"return (doc.containsKey('Parent.keyword') && doc['Parent.keyword'].size() > 0 && doc['Parent.keyword'].value.toLowerCase() == 'fnla') ? 0.9 : 1.0;"}}}],"boost_mode":"multiply"}}},"_source":["ProductCode","ProductName","Parent","SKU","IsPhotoAvailable"],"sort":[{"_score":"desc"}]}\n` +
        `{"index": "models_v2"}\n` +
        `{"size":${size},"from":${from},"query":{"function_score":{"query":{"bool":{"should":[{"bool":{"must":[{"term":{"SKU":{"value":"${query}","boost":3}}}],"filter":{"script":{"script":{"lang":"painless","source":"params.sku.length() <= 20","params":{"sku":"${query}"}}}}}},{"match":{"ProductName":{"query":"${query}","operator": "and","fuzziness":"AUTO","boost":1}}},{"match":{"ProductNameCleaned":{"query":"${query}","operator": "and","fuzziness":"AUTO","boost":1}}}],"must":[{"term":{"Type":"model"}}],"must_not":[{"wildcard":{"ProductName.keyword":"ALL *"}}],"minimum_should_match":1}},"functions":[{"script_score":{"script":{"source":"return (doc.containsKey('Parent.keyword') && doc['Parent.keyword'].size() > 0 && doc['Parent.keyword'].value.toLowerCase() == 'fnla') ? 0.9 : 1.0;"}}}],"boost_mode":"multiply"}},"_source":["ProductCode","Type","ProductName","Parent","SKU","HasPhoto"],"sort":[{"_score":"desc"}]}\n` +
        `\n`;
        */
                    $.ajax({
                            url: '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) {

                                $('#resultsContainerModelQuickSearch').empty();
                                $('#resultsContainerQuickSearch').empty();


                                $('#loadMoreQucikSearchBtn').text('Load More');
                                $('#modelsHeadTitleQuickSearch').text("Models");
                                $('#partsHeadTitleQuickSearch').text("Parts");
                                var partcont =  response.responses[0].hits.hits;
                                var modelcont =  response.responses[1].hits.hits;

                                if(partcont.length <= 0 && first_time == 0){
                                    $('#resultsContainerQuickSearch').empty();
                                 $('#resultsContainerQuickSearch').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>

                                `);
                                     $('#partsHeadTitleQuickSearch').text("Parts (No Matches)");
                                }
                                if(modelcont.length <= 0 && first_time == 0){
                                    $('#resultsContainerModelQuickSearch').empty();
                                 $('#resultsContainerModelQuickSearch').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>
                                    `);
                                    $('#modelsHeadTitleQuickSearch').text("Models (No Matches)");

                                }
                                // Check if the total number of results is 0
                                if (response.responses[0].hits.total.value === 0) {

                                    $('#resultsContainerQuickSearch').empty();
                                    $('#resultsContainerQuickSearch').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>

                                `);
                                $('#partsHeadTitleQuickSearch').text("Parts (No Matches)");
                                    // $('#resultsContainer').append('<p>Try wider search.</p>');
                                } else {
                                    var partsCount = response.responses[0].hits.total.value;
                                    totalPagesPart = partsCount;
                                    if(partsCount > 9999){
                                        partsCount = "10000+";
                                    }
                                    if(partcont.length >= 1){
                                        $('#partsHeadTitleQuickSearch').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';
                                        }
                                        $('#resultsContainerQuickSearch').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="90%" 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) {
                                    $('#resultsContainerModelQuickSearch').empty();
                                    $('#resultsContainerModelQuickSearch').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>
                                    `);
                                    $('#modelsHeadTitleQuickSearch').text("Models (No Matches)");
                                    // $('#resultsContainer').append('<p>Try wider search.</p>');
                                } else {
                                    var modelsCount = response.responses[1].hits.total.value;
                                    totalPagesModel = modelsCount;
                                    if(modelsCount > 9999){
                                        modelsCount = "10000+";
                                    }
                                    if(modelcont.length >= 1){
                                        $('#modelsHeadTitleQuickSearch').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';
                                        }
                                        $('#resultsContainerModelQuickSearch').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="100%" 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>


                                    `);
                                    });
                                }
                                updatePagination();

                            },
                            error: function() {

                                    $('#resultsContainerQuickSearch').empty();
                                    $('#resultsContainerQuickSearch').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>

                                    `);
                                    $('#partsHeadTitleQuickSearch').text("Parts (No Matches)");
                                    $('#modelsHeadTitleQuickSearch').text("Models (No Matches)");
                                    $('#resultsContainerModelQuickSearch').empty();
                                    $('#resultsContainerModelQuickSearch').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>

                                    `);


                            }
                        });
            }else{

                $('.closeSerachBtn').hide();
            }

        }


    function updatePagination() {

        if(totalPagesPart >= totalPagesModel){
            var totalrecord = totalPagesPart;
        }
        if(totalPagesPart <= totalPagesModel){
            var totalrecord = totalPagesModel;
        }

        var paginationHtml = '';
        totalPages = Math.ceil(totalrecord / 10);

        let halfRange = Math.floor(pageRange / 2);
        let pageStart = Math.max(1, currentPage - halfRange);
        let pageEnd = Math.min(totalPages, pageStart + pageRange - 1);

        if (pageEnd - pageStart + 1 < pageRange) {
            pageStart = Math.max(1, pageEnd - pageRange + 1);
        }

        for (let i = pageStart; i <= pageEnd; i++) {
            paginationHtml += `<li class="page-item"><button class="page-link page-number" data-page="${i}">${i}</button></li>`;
        }

        $('#page-numbers').html(paginationHtml);

        $('.page-number').removeClass('active');

        $(`.page-number[data-page=${currentPage}]`).addClass('active');

        $('.prev-page').prop('disabled', currentPage === 1);
        $('.next-page').prop('disabled', currentPage === totalPages);
        $("html, body").animate({ scrollTop: 0 }, "fast");
    }



    </script>


@endsection