{% extends 'NewTemplates/new_base.html' %}
{% load static %}{% load thumbnail %}
{% block head %}
<title>Online Marketplace to Buy & Sell Excess Inventory</title>
<meta name="keywords" content="surplus market, buy and sell excess inventory, buy and sell excess inventory in UAE, surplus marketplace">
<meta name="description" content="Join Surplusmarket to buy & sell excess inventory. Connect with a community dedicated to reducing waste & discovering great deals. Start making an impact today!">
<meta name="google-site-verification" content="cH2_FyX4YJy7JVuy5wD0m5mXHiXX8HPu5aHzYj11G-I" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link href="{% static 'new_assets/css/customstyle.css' %}" rel="stylesheet">

<style>
    /* Add these styles to reduce layout shift */
    .carousel-image-wrapper {
        aspect-ratio: 16 / 9;
        background-color: #f0f0f0;
    }
    .carousel-image {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .stat-img-area .stat-img {
        aspect-ratio: 16 / 9; /* Keep the banners aligned */
        background-color: #f0f0f0; /* Placeholder for the banner image */
        overflow: hidden;
    }
    .stat-img img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .home-category-list .icons {
        aspect-ratio: 1 / 1;
        background-color: #f0f0f0;
    }
    .pro-img {
        aspect-ratio: 1 / 1;
    }
    img.lazy-load {
        opacity: 0.1;
        transition: opacity 0.3s;
    }

    img:not(.lazy-load) {
        opacity: 1;
    }
</style>
{% endblock head %}

{% block body %}
    {% if carousals %}   
    <div class="main-slider">    
        <section class="slider-area">
            <div class="container-fluid p-0">
                <div class="row g-0">
                    <div class="col-6">
                        <div class="swiper mySwiper mainBanner">
                            <div class="swiper-wrapper">
                                {% for i in carousals %}
                                <div class="swiper-slide position-relative">
                                    <div class="carousel-image-wrapper">
                                        <img src="{% static 'images/cat_placeholder.webp' %}" 
                                             data-src="{{ i.carousal_home_main.url }}"
                                             class="lazy-load carousel-image" 
                                             alt="Carousel Image" 
                                             loading="lazy">
                                    </div>
                                    <div class="slide-content">
                                        <h2>Explore our market place</h2>
                                        <h2>of surplus inventories</h2>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-img-area position-relative">
                            <div class="stat-img">
                                <img src="{% static 'images/slider/Banner1.png' %}" alt="Main Banner">
                            </div>
                            <div class="stat-content">
                                <h2>Our sustainability solutions for your distressed assets</h2>
                                <h2>Turning your surplus <br>into revenue</h2>
                                <a href="{% url 'new_about' %}">
                                    <button class="exp-now">Explore Now</button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    {% else %}
    <div class="main-slider">
        <section class="slider-area">
            <div class="container-fluid p-0">
                <div class="row g-0">
                    <div class="col-6">
                        <div class="swiper mySwiper mainBanner">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide position-relative">
                                    <img src="{% static 'images/slider/slide1.png' %}" loading="lazy" />
                                    <div class="slide-content">
                                        <h2>Explore our market place</h2>
                                        <h2>of surplus inventories</h2>
                                    </div>
                                </div>
                                <div class="swiper-slide position-relative">
                                    <img src="{% static 'images/slider/slide2.jpeg' %}" loading="lazy" />
                                    <div class="slide-content">
                                        <h2>Explore our market place</h2>
                                        <h2>of surplus inventories</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-img-area position-relative">
                            <div class="stat-img">
                                <img src="{% static 'images/slider/Banner1.png' %}" alt="Main Banner" loading="lazy">
                            </div>
                            <div class="stat-content">
                                <h2>Our sustainability solutions for your distressed assets</h2>
                                <h2>Turning your surplus <br>into revenue</h2>
                                <a href="{% url 'new_about' %}">
                                    <button class="exp-now">Explore Now</button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    {% endif %}

    <div class="home-search-wrap">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="home-search">
                        <h2>Search your products</h2>
                        <div class="input-group mb-3 flex-column flex-md-row">
                            <input type="text" class="form-control mb-2 mb-md-0" id="search-input" placeholder="Search"
                                aria-label="Search" aria-describedby="search-btn">
                            <button class="btn btn-outline-secondary" type="button" id="search-btn">
                                <i class="lni lni-search-alt"></i>Search
                            </button>
                        </div>
                        <div id="search-results"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="home-category">
        <div class="container">
            <h2>Shop By Categories</h2>
            <ul class="home-category-list row">
                {% for cat in category %}
                <li class="col-2">
                    <a href="{% url 'thatcategory' cat.id cat.category_name|slugify %}">
                        <div class="icons">
                            <img src="{{ cat.category_image.url }}"
                                 alt="category image">
                        </div>
                        <h3>{{cat.category_name}}</h3>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="home-mid">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div class="btext">
                        <a href="{% url 'new_list_all' %}">
                            <h2>Buy</h2>
                            <p>Discover Unbeatable Deals on Surplus Items</p>
                        </a>
                    </div>
                </div>
                <div class="col-6">
                    <div class="btext btext2">
                        <a href="{% url 'new_sell' %}">
                            <h2>Sell</h2>
                            <p>Turn Surplus into Success – Sell Your Excess with Ease!</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="home-featured-wrap">
        <div class="container">
            <h2>Featured products</h2>
            <ul class="featured-product owlcrousel">
                {% if spl_products %}
                {% for pro in spl_products %}
                <li>
                    <div class="pro-item">
                        <a href="{% url 'thisproduct' pro.id pro.product_name|slugify %}">
                            <div class="pro-img">
                                <img src="{% static 'images/cat_placeholder.webp' %}" 
                                data-src="{% thumbnail pro.productimage_set.first.product_image '200x200' %}"
                                class="lazy-load" 
                                alt="pro-image" 
                                loading="lazy">
                            </div>
                            <div class="pro-text">
                                <h3>{{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 %}
                <h3>No Special Products At the Moment</h3>
                {% endif %}
            </ul>
        </div>
    </div>

    <div class="home-prodict-secton">
        <div class="container">
            <h2>New arrivals</h2>
            <ul class="featured-product owlcrousel">
                {% if product %}
                {% for pro in product %}
                <li>
                    <div class="pro-item">
                        <a href="{% url 'thisproduct' pro.id pro.product_name|slugify %}">
                            <div class="pro-img">
                                <img src="{% static 'images/cat_placeholder.webp' %}" 
                                data-src="{% thumbnail pro.productimage_set.first.product_image '200x200' %}"
                                class="lazy-load" 
                                alt="pro-image" 
                                loading="lazy">
                            </div>
                            <div class="pro-text">
                                <h3>{{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 %}
                <h3>No Products At the Moment</h3>
                {% endif %}
            </ul>
        </div>
    </div>

    <div class="home-prodict-secton">
        <div class="container">
            <h2>best selling</h2>
            <ul class="featured-product owlcrousel">
                {% if product %}
                {% for pro in product %}
                <li>
                    <div class="pro-item">
                        <a href="{% url 'thisproduct' pro.id pro.product_name|slugify %}">
                            <div class="pro-img">
                                <img src="{% static 'images/cat_placeholder.webp' %}" 
                                data-src="{% thumbnail pro.productimage_set.first.product_image '200x200' %}"
                                class="lazy-load" 
                                alt="pro-image" 
                                loading="lazy">
                            </div>
                            <div class="pro-text">
                                <h3>{{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 %}
                <h3>No Products At the Moment</h3>
                {% endif %}
            </ul>
        </div>
    </div>

    <script src="{% static 'new_assets/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'new_assets/js/homeslider.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.2.0/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        // Initialize AOS
        AOS.init();

        var mainSwiper = new Swiper('.mySwiper', {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            speed: 1000,
        });
</script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
        var lazyloadImages = document.querySelectorAll("img.lazy-load");
        var lazyloadThrottleTimeout;

        function lazyload() {
            if(lazyloadThrottleTimeout) {
                clearTimeout(lazyloadThrottleTimeout);
            }

            lazyloadThrottleTimeout = setTimeout(function() {
                var scrollTop = window.pageYOffset;
                lazyloadImages.forEach(function(img) {
                    if(img.offsetTop < (window.innerHeight + scrollTop)) {
                        img.onload = function() {
                            img.classList.remove('lazy-load');
                        }
                        img.src = img.dataset.src;
                    }
                });
                if(lazyloadImages.length == 0) {
                    document.removeEventListener("scroll", lazyload);
                    window.removeEventListener("resize", lazyload);
                    window.removeEventListener("orientationChange", lazyload);
                }
            }, 20);
        }

        document.addEventListener("scroll", lazyload);
        window.addEventListener("resize", lazyload);
        window.addEventListener("orientationChange", lazyload);
        
        // Trigger initial lazyload
        lazyload();
    });

            // Search functionality
    var searchInput = $('#search-input');
    var searchResults = $('#search-results');
    var countrySelect = $('#country-select');
    var searchButton = $('#search-btn');

    function performSearch() {
        var searchText = searchInput.val().trim();
        var selectedCountry = countrySelect.val();

        if (searchText.length > 0) {
            $.ajax({
                url: "{% url 'new_search' %}",
                method: 'GET',
                data: {
                    'search_text': searchText,
                    'country': selectedCountry
                },
                success: function (response) {
                    searchResults.html('');

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

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

                                item = $('<a>')
                                    .addClass('dropdown-item')
                                    .attr('href', url)
                                    .append(
                                        $('<h5>').text(categoryName).css('display', 'inline-block').attr('title', result.name),
                                        $('<h7>').text('in categories').addClass('small-font').css({
                                            'margin-left': '10px',
                                            'background-color': '#4B4B4B',
                                            'color': 'white',
                                            'padding': '2px 5px',
                                            'border-radius': '3px'
                                        })
                                    );
                            } else 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({
                                        'margin-left': '10px',
                                        'background-color': '#a5ae9e',
                                        'color': 'black',
                                        'padding': '2px 5px',
                                        'border-radius': '3px'
                                    }));

                                if (result.countries.length > 0) {
                                    var countriesText = result.countries.join(' | ');
                                    item.append($('<span>').text(countriesText).addClass('small-font').css({
                                        'display': 'inline-block',
                                        'background-color': '#848fa5',
                                        'margin-left': '5px',
                                        'color': '#E8EAE6'
                                    }));
                                }
                            }

                            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();
        }
    }

    searchButton.on('click', performSearch);

    searchInput.on('keypress', function (event) {
        if (event.which === 13) {
            performSearch();
        }
    });
    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') {
            searchInput.val('');
            countrySelect.val('');
            searchResults.html('');
            searchResults.hide();
        }
    });

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