{% extends 'store/main.html' %}
{% load static %}

{% block content %}

<div id="slideshowCarousel" class="carousel slide" data-ride="carousel" style="margin-bottom: 30px; position: relative;">
    <div class="carousel-inner">
        {% for image in slideshow_images %}
        <div class="carousel-item {% if forloop.first %}active{% endif %}">
            <img class="d-block w-100" src="{{ image.image.url }}" alt="{{ image.product.name }}">
            <div class="carousel-caption btnPsns">
                <h4 class="carousel-product-name">{{ image.product.name }}</h4>

                    {% if image.product.sizes.exists or image.product.colors.exists %}
                        <button data-product="{{ image.product.id }}" data-toggle="modal" data-target="#productModal{{ image.product.id }}" class="btn btn-outline-secondary btn-carousel-options">Add to Cart</button>
                    {% else %}
                        <button data-product="{{ image.product.id }}" data-action="add" class="btn btn-outline-secondary btn-carousel-options add-btn update-cart">Add to Cart</button>
                    {% endif %}

                    <a class="btn btn-primary btn-carousel-options" href="{% url 'products-overview' %}">Shop More</a>
                </div>

                <div class="carousel-caption randomiseDPstn">
                    <div class="randomText">
                        {{ image.product.random_content }}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    
    <a class="carousel-control-prev" href="#slideshowCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#slideshowCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
        

<div class="text-center mb-4 d-flex justify-content-center align-items-center">
    <a class="nav-link ml-4" href="{% url 'products-overview' %}">View All Products</a>
</li>
</div>

{% for category in categories %}
<h2 class="text-center mb-4 custom-heading"> {{ category.name }}</h2>
<div class="row" id="categoryProducts{{ category.id }}">
    {% for product in category.products.all|slice:":8" %}
    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
        <div class="card">
            <div class="card-img-top hov-img0">
                <img src="{{ product.imageURL }}" alt="{{ product.name }}" class="img-fluid">
                <div class="overlay">
                                                    
                {% if product.sizes.exists or product.colors.exists %}
                <button data-product="{{ product.id }}" data-toggle="modal" data-target="#productModal{{ product.id }}" class="btn btn-outline-secondary" >Add to Cart</button>
                {%else%}
                <button data-product="{{ product.id }}" data-action="add" class="btn btn-outline-secondary add-btn update-cart" >Add to Cart</button>
                {% endif %}

                    <a href="#" class="btn btn-secondary" data-toggle="modal" data-target="#productModal{{ product.id }}">View</a>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">{{ product.name }}</h5>
                <p class="card-text">Ksh. {{ product.price }}</p>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if category.products.count > 8 %}
<div class="text-center mb-4">
    <button class="btn btn-outline-gold" id="showMoreBtn{{ category.id }}" data-target="#moreProducts{{ category.id }}" aria-expanded="false" onclick="toggleCategoryProducts({{ category.id }})">
        Show More
    </button>
</div>
<div class="collapse" id="moreProducts{{ category.id }}">
    <div class="row">
        {% for product in category.products.all|slice:"8:" %}
        <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
            <div class="card">
                <div class="card-img-top hov-img0">
                    <img src="{{ product.imageURL }}" alt="{{ product.name }}" class="img-fluid">
                    <div class="overlay">
                                                        
                        {% if product.sizes.exists or product.colors.exists %}
                        <button data-product="{{ product.id }}" data-toggle="modal" data-target="#productModal{{ product.id }}" class="btn btn-outline-secondary" >Add to Cart</button>
                        {%else%}
                        <button data-product="{{ product.id }}" data-action="add" class="btn btn-outline-secondary add-btn update-cart" >Add to Cart</button>
                        {% endif %}

                        <a href="#" class="btn btn-secondary" data-toggle="modal" data-target="#productModal{{ product.id }}">View</a>
                    </div>
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{ product.name }}</h5>
                    <p class="card-text">Ksh. {{ product.price }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endfor %}


{% for product in flat_products %}
<div class="modal fade" id="productModal{{ product.id }}" tabindex="-1" role="dialog" aria-labelledby="productModalLabel{{ product.id }}" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="productModalLabel{{ product.id }}">{{ product.name }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div class="main-image-container">
                    <img id="mainImage{{ product.id }}" src="{{ product.original_image_url }}" alt="{{ product.name }}" class="img-fluid" loading="lazy">
                </div>

                <div class="thumbnails-container">
                    {% for image in product.images.all %}
                        <img src="{{ image.thumbnail }}" alt="{{ product.name }}" class="img-fluid thumbnail {% if forloop.first %}active{% endif %}" onclick="changeImage('{{ product.id }}', '{{ image.image.url }}')">
                    {% endfor %}
                </div>
                

                <div class="large-product-caption text-center">
                    <p>{{ product.description }}</p>
                    <p><strong>Price:</strong> Ksh. {{ product.price }}</p>
                </div>

                <div class="product-options">
                    {% if product.sizes.exists %}
                    <div class="option-group">
                        <label for="size-select-{{ product.id }}">Choose Size</label>
                        <select id="size-select-{{ product.id }}" class="form-control" data-product="{{ product.id }}">
                            <option value="" disabled selected>Select Size</option>
                            {% for size in product.sizes.all %}
                                <option value="{{ size.id }}">{{ size.size }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}

                    {% if product.colors.exists %}
                    <div class="option-group">
                        <label for="color-select-{{ product.id }}">Choose Color</label>
                        <select id="color-select-{{ product.id }}" class="form-control" data-product="{{ product.id }}">
                            <option value="" disabled selected>Choose Color</option>
                            {% for color in product.colors.all %}
                                <option value="{{ color.id }}" style="background-color: {{ color.hex_value }};" data-product="{{ product.id }}" data-color="{{ color.id }}">{{ color.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button data-product="{{ product.id }}" data-action="add" class="btn btn-primary add-btn update-cart">
                    Add to Cart
                </button>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<script>

    // Toggle "Show More / Show Less" functionality for categories
    function toggleCategoryProducts(categoryId) {
        var collapseElement = document.getElementById('moreProducts' + categoryId);
        var showMoreBtn = document.getElementById('showMoreBtn' + categoryId);
        if (collapseElement.classList.contains('show')) {
            collapseElement.classList.remove('show');
            showMoreBtn.textContent = 'Show More';
        } else {
            collapseElement.classList.add('show');
            showMoreBtn.textContent = 'Show Less';
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        const phrases = [
            {% for category in categories %}
                "{{ category.name }}",
            {% endfor %}
        ];
    
        function getRandomPhrase() {
            const randomIndex = Math.floor(Math.random() * phrases.length);
            return phrases[randomIndex];
        }
    
        function addDissolveEffect(element) {
            if (!element) return; // Safeguard
            element.classList.add("dissolve-in");
            setTimeout(() => {
                element.classList.remove("dissolve-in");
            }, 1000);
        }
    
        function changeTextForCarouselItem(item) {
            if (!item) return; // Safeguard
            const randomTextElement = item.querySelector('.randomText');
            if (!randomTextElement) {
                console.error("Random text element not found for item:", item);
                return;
            }
    
            randomTextElement.classList.add("dissolve-out");
            setTimeout(() => {
                randomTextElement.textContent = getRandomPhrase();
                randomTextElement.classList.remove("dissolve-out");
                addDissolveEffect(randomTextElement);
            }, 1000);
        }
    
        function updateTextForAllCarouselItems() {
            const carouselItems = document.querySelectorAll('.carousel-item');
            carouselItems.forEach((item) => {
                changeTextForCarouselItem(item);
            });
        }
    
        setInterval(updateTextForAllCarouselItems, 1000);
        updateTextForAllCarouselItems();
    });
    
</script>
    

{% endblock content %}