@extends('library.layout')

@section('title')
    KEMAUS Products
@endsection

@section('include_script')
<script src="{{ asset('/js/products.js') }}"></script>
@endsection

@section('include_style')
<link rel="stylesheet" type="text/css" href="{{ asset('/css/products.css') }}">
@endsection

@section('content')
    <div class="wrapallctn winheight" style="background-color: #f5f5f5;">

        <div class="teaserbg" style="background: url({{ asset('/assets/images/banner2.jpg') }}) center center / cover;">
            <div class="container">
                <div class="row">
                    <div class="textteaser">
                        <span>KEMAUS Products</span>
                        <hr style="width:30%">
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="search-wrapper-incontent">
                    <div class="search-bar-incontent">
                        <div class="search-container-incontent">
                            <input type="text" class="search-input-incontent" id="search-input-incontent" placeholder="Search products by name, catalog number or keyword" style="background-image: url({{ asset('/assets/images/searchicon.png') }});">
                            <a class="search-button-incontent" href="javascript: searchIncontentClick();">Search</a>
                        </div>
                        <div id="suggestions-incontent"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="product-list" id="product-list">
                    @if(count($products) > 0)
                    @foreach ($products as $product)
                        <div class="product-item">
                            <div class="product-catalogue">
                                <span class="product-id">{{$product->catalogue_number ?? "-"}}</span>
                            </div>
                            <div class="product-info">
                                <span class="product-name">{{$product->name ?? "-"}}</span>
                                <span class="product-date">{{$product->cas_number ?? "-"}}</span>
                            </div>
                            <div class="product-gap"></div>
                            <div class="product-actions-1">
                                <div class="product-actions-1-gap"></div>
                                <div class="product-actions-1-1">
                                    @if(isset($product->file_tds) && $product->file_tds != "")
                                    <a class="btn tds-btn" href="{{asset('assets/tds/' . $product->file_tds)}}" download>TDS</a>
                                    @else
                                    <a class="btn tds-btn disabled" disabled>TDS</a>
                                    @endif
                                </div>
                                <div class="product-actions-1-2">
                                    @if(isset($product->file_sds) && $product->file_sds != "")
                                    <a class="btn sds-btn" href="{{asset('assets/sds/' . $product->file_sds)}}" download>SDS</a>
                                    @else
                                    <a class="btn sds-btn disabled" disabled>SDS</a>
                                    @endif
                                </div>
                                <div class="product-actions-1-gap"></div>
                            </div>
                            <div class="product-actions-2">
                                <a class="btn details-btn" href="{{route('product',$product->catalogue_number ?? '')}}">See details</a>
                            </div>
                        </div>
                    @endforeach
                    @else
                        <div class="item_not_found">Product Not Found!</div>
                    @endif
                </div>

                <div class="pagination">
                    <div class="pagination-wrap">
                        <div id="pagination-numbers"></div>
                    </div>
                    <span class="page-indicator">Page: <span id="current-page">{{$page ?? 1}}</span> of <span id="total-page">{{$pages_total ?? 1}}</span></span>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')

<script>
$(document).ready(function(){
    $('#search-input-incontent').on('input', function() {
        var query = $(this).val();
        if (query.length >= 3) {
            var data_send = new FormData();
            data_send.append('txt', query);
            $.ajax({
                type: 'POST',
                url: "{{ route('products_suggestions') }}",
                data: data_send,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function(response) {
                    var suggestions = response.products;
                    var suggestionsList = $('#suggestions-incontent');
                    suggestionsList.empty();
                    suggestions.forEach(function(suggestion) {
                        var productName = suggestion.name;
                        var productCatalogueNumber = suggestion.catalogue_number;
                        var option = $('<div class="optiondiv" onclick="selectSuggestion(\'' + productName + '\')">' + productName + ' (' + productCatalogueNumber +')</div>').val(productName);
                        suggestionsList.append(option);
                    });
                },
                error: function (xhr, type) {
                }
            });
        }
        else
        {
            var suggestionsList = $('#suggestions-incontent');
            suggestionsList.empty();
        }
    });
    
    $('#search-input-incontent').on('keyup', function(event) {
        if (event.keyCode === 13) {
            searchIncontentClick();
        }
    });

    function loadPage(page,txt) {
        var data_send = new FormData();
        data_send.append('page', page);
        data_send.append('txt', txt);
        $.ajax({
            type: 'POST',
            url: "{{ route('products_find') }}",
            data: data_send,
            dataType: 'json',
            processData: false,  // tell jQuery not to process the data
            contentType: false,   // tell jQuery not to set contentType
            success: function(response) {
                $('#product-list').html('');
                response.data.products.forEach(function(product) {
                    var productCatalogueNumber = product.catalogue_number ? product.catalogue_number : "-";
                    var productName = product.name ? product.name : "-";
                    var productCasNumber = product.cas_number ? product.cas_number : "-";
                    var productSeeDetails = "{{route('productnonkey')}}" + "/" + productCatalogueNumber;
                    var append_text = ``;
                    append_text = append_text + `    <div class="product-item">`
                    append_text = append_text + `        <div class="product-catalogue">`
                    append_text = append_text + `            <span class="product-id">${productCatalogueNumber}</span>`
                    append_text = append_text + `        </div>`
                    append_text = append_text + `        <div class="product-info">`
                    append_text = append_text + `            <span class="product-name">${productName}</span>`
                    append_text = append_text + `            <span class="product-date">${productCasNumber}</span>`
                    append_text = append_text + `        </div>`
                    append_text = append_text + `        <div class="product-gap"></div>`
                    append_text = append_text + `        <div class="product-actions-1">`
                    append_text = append_text + `            <div class="product-actions-1-gap"></div>`
                    append_text = append_text + `            <div class="product-actions-1-1">`
                    if (!product.file_tds || product.file_tds.trim() === ''){
                        append_text = append_text + `                <a class="btn tds-btn disabled" disabled>TDS</a>`
                    } else {
                        var productFileTDS = product.file_tds ? product.file_tds : "#";
                        append_text = append_text + `                <a class="btn tds-btn" href="${productFileTDS}" download>TDS</a>`
                    }
                    append_text = append_text + `            </div>`
                    append_text = append_text + `            <div class="product-actions-1-2">`
                    if (!product.file_sds || product.file_sds.trim() === ''){
                        append_text = append_text + `                <a class="btn sds-btn disabled" disabled>SDS</a>`
                    } else {
                        var productFileSDS = product.file_sds ? product.file_sds : "#";
                        append_text = append_text + `                <a class="btn sds-btn" href="${productFileSDS}" download>SDS</a>`
                    }
                    append_text = append_text + `            </div>`
                    append_text = append_text + `            <div class="product-actions-1-gap"></div>`
                    append_text = append_text + `        </div>`
                    append_text = append_text + `        <div class="product-actions-2">`
                    append_text = append_text + `            <a class="btn details-btn" href="${productSeeDetails}">See details</a>`
                    append_text = append_text + `        </div>`
                    append_text = append_text + `    </div>`
                    
                    $('#product-list').append(append_text);
                });
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            },
            error: function (xhr, type) {
            }
        });

        updatePagination(page,{{$pages_total ?? 1}});
        selectSuggestion(txt);
    }

    function updatePagination(currentPage,totalPages) {
        $('#current-page').text(currentPage);
        $('#total-page').text(totalPages);
        const paginationNumbers = $('#pagination-numbers');
        paginationNumbers.html('');

            if (currentPage == 1){
                paginationNumbers.append('<span class="pagination-link disabled" data-page="disabled">&lt;</span>');
            } else {
                paginationNumbers.append('<span class="pagination-link" data-page="prev">&lt;</span>');
            }

            if (currentPage > 2) {
                paginationNumbers.append('<span class="pagination-link" data-page="1">1</span>');
                if (currentPage > 3) {
                    paginationNumbers.append('<span class="pagination-link" data-page="...">...</span>');
                }
            }
    
            let start = Math.max(currentPage - 1, 1);
            let end = Math.min(currentPage + 1, totalPages);

            for (let i = start; i <= end; i++) {
                paginationNumbers.append(`<span class="pagination-link ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</span>`);
            }

            if (currentPage <= totalPages - 2) {
                if (currentPage < totalPages - 2){
                    paginationNumbers.append('<span class="pagination-link" data-page="...">...</span>');
                }
                paginationNumbers.append(`<span class="pagination-link" data-page="${totalPages}">${totalPages}</span>`);
            }

            if (currentPage == totalPages){
                paginationNumbers.append('<span class="pagination-link disabled" data-page="disabled">&gt;</span>');
            } else {
                paginationNumbers.append('<span class="pagination-link" data-page="next">&gt;</span>');
            }

        $('.pagination-link').off('click').on('click', function() {
            let page = $(this).data('page');
            if (page === 'prev') {
                page = Math.max(currentPage - 1, 1);
            } else if (page === 'next') {
                page = Math.min(currentPage + 1, totalPages);
            } else if (page === '...' || page === 'disabled') {
                return;
            }
            loadPage(page,'{{$search_txt ?? ''}}');
        });
        
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            setwinheight();
        }, 250);
    }

    // Initial load
    if ({{$pages_total ?? 1}} > 0){
        $('.pagination').show();
        updatePagination({{$page ?? 1}},{{$pages_total ?? 1}});
    }
    else{
        $('.pagination').hide();
    }
    selectSuggestion('{{$search_txt ?? ''}}');
}); 

function selectSuggestion(txt){
    $('#search-input-incontent').val(txt);
    var suggestionsList = $('#suggestions-incontent');
    suggestionsList.empty();
}

function searchIncontentClick(){
    window.location.href = "{{route('products')}}" + "?txt=" + $('#search-input-incontent').val();
}
</script>

@endsection