{% extends 'NewTemplates/new_base.html' %}
{% load static %}
{% block head %}
<title>
    {% if all_products %}
        {{all_products}}
    {% else %}
        Marketplace to Buy & Sell Surplus {{ category_name_prep.category_name}} Online | Surplus Market
    {% endif %}
</title>
<meta name="keywords" content="{{meta_key}}" />
<meta name="description" content="{{meta_des}}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="{% static 'new_assets/css/customstyle.css' %}" rel="stylesheet">
{% endblock head %}
<style>
    .input-group {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-group .form-control {
        padding-left: 2.5rem;
        /* Adjust padding to make space for the icon */
    }

    .input-group-text.bg-black {
        background-color: black;
        border: none;
        padding: 0;
    }

    .lni-search-alt.text-white {
        color: white;
    }


    .input-group .input-group-text i {
        font-size: 1.25rem;
        /* Adjust the icon size if necessary */
    }

</style>
{% block body %}
<div id="preloader"></div>
<div class="catag">
    <h1>All Categories</h1>
    <span><i class="fa-solid fa-angle-up"></i></span>
</div>
<div class="catag-show">
    <span class="close-show"><i class="fa fa-close" aria-hidden="true"></i></span>
    <div class="cat-content">
        <div class="cat-title">
            <h1>All Categories</h1>
        </div>
        {% for cat in categories %}
        <div class="cat-list">
            <a href="{% url 'thatcategory' cat.id cat.category_name|slugify %}">
                <h4>{{cat.category_name}}</h4><span>({{ cat.total_products}})</span>
            </a>
        </div>
        {% endfor %}
    </div>
</div>
<div class="inner-banner">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-5">
                <h1>{% if all_products %} All Products {% else %}{{category_name_prep.category_name }}</h1>{% endif %}
            </div>
            {% if all_products %}{% else %}
            <div class="col-md-7">
                <div class="home-search1">
                    <div class="input-group">
                        <span class="input-group-text bg-black"><i class="lni lni-search-alt text-white"></i></span>
                        <input type="text" class="form-control" id="search-input"
                            placeholder='Search in "{{category_name_prep.category_name }}"' aria-label="Search"
                            aria-describedby="search-btn">
                    </div>
                    <div id="search-results" class="search-results"></div>
                </div>
            </div>

            {% endif %}
        </div>
    </div>
</div>


<div class="contentarea">
    <div class="container">
        <div class="row">
            <div class="col-2">
                {% if all_products %}
                <div class="sidebar">
                    <h1>All Categories</h1>
                    <ul>
                        {% for cat in categories %}
                        <li><a href="{% url 'thatcategory' cat.id cat.category_name|slugify %}">{{cat.category_name}}<span>
                                    ({{ cat.total_products}})</span></a></li>
                        {% endfor %}
                    </ul>
                </div>
                {% else %}
                {% if brands %}
                <div class="sidebar">
                    <h1>Brands</h1>
                    <ul>
                        {% for brand in brands %}
                        <li><a href="{% url 'brands' category.id brand.brand|slugify %}">{{ brand.brand }}<span> ({{ brand.total_products }})</span></a></li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                {% if subcategories %}
                <div class="sidebar">
                    <h1>Sub Categories</h1>
                    <ul>
                        {% for cat in subcategories %}
                        <li><a href="{% url 'thatcategory' cat.id cat.category_name|slugify %}">{{ cat.category_name }}<span> ({{cat.total_products}})</span></a></li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                <div class="sidebar">
                    <br>
                    <h1>All Categories</h1>
                    <ul>
                        {% for cat in categories %}
                        <li><a href="{% url 'thatcategory' cat.id cat.category_name|slugify %}">{{ cat.category_name }}<span> ({{ cat.total_products}})</span></a></li>
                        {% endfor %}
                    </ul>

                </div>
                {% endif %}
            </div>

            <div class="col-10">
                <div class="product-list-wrap">
                    <ul class="row">
                        {% if products %}
                        {% for pro in products %}
                        <li class="col-3">
                            <div class="pro-item"><a href="{% url 'thisproduct' pro.id pro.product_name|slugify %}">
                                    <div class="pro-img">
                                        {% for image in pro.productimage_set.all %}
                                        {% if image.fea_img %}
                                        <img src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3C/svg%3E"
                                            data-src="{{ image.product_image.url }}" alt="Featured Image" class="lazyload"
                                            loading="lazy" srcset="{{ image.product_image.url }}">
                                        {% endif %}
                                        {% endfor %}
                                    </div>
                                    <div class="pro-text">
                                        <h3 id="productName{{ pro.id }}">{{ pro.product_name }}</h3>
                                        <p class="price">QAR {{ pro.price }} <span class="old-price">{{ pro.market_price }}</span></p>
                                    </div>
                                </a>
                            </div>
                        </li>
                        {% endfor %}
                        {% else %}
                        <center>
                            <h5>No Products!</h5>
                        </center>
                        {% endif %}
                    </ul>
                    <div class="loading-indicator" style="display: none;">Loading...
                        <div class="loader"></div>
                    </div>
                </div>
                <div class="load-more-placeholder"></div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        var searchInput = $('#search-input');
        var searchResults = $('#search-results');

        searchInput.on('input', function () {
            var searchText = $(this).val().trim();
            var categoryId = "{{ category_id }}"; // Get the category ID from the template context

            if (searchText.length > 0) {
                $.ajax({
                    url: "{% url 'cat_search' %}",
                    method: 'GET',
                    data: {
                        'search_text': searchText,
                        'category_id': categoryId // Include the category ID in the request
                    },
                    success: function (response) {
                        searchResults.html('');

                        if (response.length > 0) {
                            $.each(response, function (index, result) {
                                var item;
                                var maxLength = 32;

                                if (result.type === 'product') {
                                    var url = "/p/" + result.id + "/" + result.name_slug + "/";
                                    var productName = result.name.length > maxLength ?
                                        result.name.substring(0, maxLength) + '...' :
                                        result.name;

                                    item = $('<a>')
                                        .addClass('dropdown-item')
                                        .attr('href', url)
                                        .append($('<h5>').text(productName).css('display', 'inline-block').attr('title', result.name))
                                        .append($('<h7>').text('in products').addClass('small-font').css({
                                            'display': 'inline-block',
                                            'margin-left': '5px'
                                        }));
                                }

                                searchResults.append(item);
                            });

                            searchResults.show();
                        } else {
                            searchResults.html('<h5>No results found.</h5>');
                        }
                    },
                    error: function (xhr) {
                        searchResults.html('<h5>' + xhr.responseText + '</h5>');
                    }
                });
            } else {
                searchResults.html('');
                searchResults.hide();
            }
        });

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                searchInput.val('');
                searchResults.html('');
                searchResults.hide();
            }
        });

        $(document).on('click', function (event) {
            if (!$(event.target).closest('.home-search').length) {
                searchResults.hide();
            }
        });
    });
</script>

<!-- loader js -->
<script>
    // var loader = document.getElementById('preloader');
    $(window).on("load", function () {
        $('#preloader').hide();
    });
</script>
<script>
    $(document).ready(function () {
        var loading = false;
        var nextPage = 2;
        var categoryId = {{ category_id }};
        var allProductsLoaded = false;
    
        function loadMoreProducts() {
            if (!loading && !allProductsLoaded) {
                loading = true;
                $('.loading-indicator').show();
                $.ajax({
                    type: 'GET',
                    url: '/load-more-products/',
                    data: {
                        'page': nextPage,
                        'category_id': categoryId
                    },
                    success: function (data) {
                        $('.loading-indicator').hide();
                        if (data.html.trim() !== '') {
                            $('.product-list-wrap ul').append(data.html);
                            nextPage++;
                        } else {
                            allProductsLoaded = true;
                            $('.loading-indicator').text('No more products to load.').show().delay(10000).fadeOut();
                        }
                        loading = false;
                    },
                    error: function () {
                        $('.loading-indicator').hide();
                        loading = false;
                    }
                });
            }
        }
    
        var debounceTimer;
        $(window).scroll(function () {
            if ($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(loadMoreProducts, 250);  // Debounce for 250ms
            }
        });
    
        // Initialize AOS (Animate On Scroll)
        AOS.init();
    
        // Hide preloader on window load
        $(window).on("load", function () {
            $('#preloader').hide();
        });
    
        // Category button functionality
        const catBtn = document.querySelector(".catag");
        const catShow = document.querySelector(".catag-show");
        const closeBtn = document.querySelector(".close-show");
    
        if (catBtn && catShow && closeBtn) {
            catBtn.addEventListener("click", () => {
                catShow.style.display = "block";
                catShow.style.bottom = "0";
            });
            
            closeBtn.addEventListener("click", () => {
                catShow.style.bottom = "-100vh";
            });
        }
    });
    </script>
{% endblock body %}