{% extends 'base.html' %}

{% block content %}
<style>
    .collection-hero {
        padding: 60px 0;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border-radius: 24px;
        margin-top: 20px;
        margin-bottom: 40px;
        text-align: center;
        border: 1px solid #f0f0f0;
    }
 
    .main-title {
        font-weight: 800;
        font-size: 42px;
        letter-spacing: -1.5px;
        color: #111827;
        margin-bottom: 10px;
    }
 
    .filter-bar-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 40px;
        position: sticky;
        top: 80px;
        background: white;
        z-index: 100;
    }
 
    .filter-btn-group {
        display: flex;
        gap: 12px;
    }
 
    .filter-pill {
        background: white;
        border: 1px solid #e5e7eb;
        padding: 10px 20px;
        border-radius: 14px;
        font-weight: 600;
        font-size: 14px;
        color: #4b5563;
        transition: 0.2s;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }
 
    .filter-pill:hover {
        border-color: var(--primary-orange);
        color: var(--primary-orange);
        background: rgba(255, 144, 23, 0.05);
    }
 


    /* Product Grid alignment */
    .shop-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 30px;
    }
 
    .premium-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        text-decoration: none;
        color: inherit;
        border: 1px solid #f0f0f0;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
 
    .premium-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-orange);
    }
 
    .card-media {
        height: 280px;
        background: #fdfdfd;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        position: relative;
    }
 
    .card-media img,
    .card-media video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        transition: transform 0.6s ease;
    }
 
    .premium-card:hover .card-media img,
    .premium-card:hover .card-media video {
        transform: scale(1.1);
    }
 
    .card-info {
        padding: 24px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
 
    .card-cat {
        font-size: 11px;
        font-weight: 800;
        color: var(--primary-orange);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 6px;
    }
 
    .card-name {
        font-size: 18px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 12px;
        line-height: 1.3;
    }
 
    .card-footer {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
 
    .card-price {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
    }
 
    .add-btn {
        width: 44px;
        height: 44px;
        background: #111827;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }
 
    .premium-card:hover .add-btn {
        background: var(--primary-orange);
        transform: rotate(90deg);
    }
</style>

{% if current_filters.on_sale == 'true' and physical_sale_products %}
<!-- VIDEO HERO SLIDER FOR FLASH SALE -->
<div id="flashSaleHeroCarousel" class="carousel slide carousel-fade" data-bs-ride="false" style="border-radius: 24px; overflow: hidden; margin-top: 20px; margin-bottom: 40px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);">
    
    <!-- CAROUSEL INDICATORS (DOTS) -->
    <div class="carousel-indicators" style="bottom: 10px;">
        {% for product in physical_sale_products %}
        <button type="button" data-bs-target="#flashSaleHeroCarousel" data-bs-slide-to="{{ loop.index0 }}" {% if loop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ loop.index }}"></button>
        {% endfor %}
    </div>

    <div class="carousel-inner">
        {% for product in physical_sale_products %}
        <div class="carousel-item {% if loop.first %}active{% endif %}">
            <!-- Removed 'loop' so we can listen to the 'ended' event -->
            <video class="d-block w-100" style="height: 380px; object-fit: cover;" autoplay muted playsinline>
                {% if product.physical_sale_video.startswith('http') %}
                <source src="{{ product.physical_sale_video }}" type="video/mp4">
                {% else %}
                <source src="{{ url_for('static', filename='uploads/' + product.physical_sale_video) }}" type="video/mp4">
                {% endif %}
            </video>
            <div class="carousel-caption d-block" style="background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); left: 0; right: 0; bottom: 0; padding-bottom: 40px; padding-top: 60px;">
                <span class="badge bg-danger mb-2 fs-6">🔥 Top Deals Showreel</span>
                <h1 class="fw-bold fs-2 text-white">{{ product.name }}</h1>
                <p class="fs-4 text-warning fw-bold mb-3">{{ currency }} {{ "{:,.0f}".format(product.discount_price if product.discount_price > 0 else product.price) }}</p>
                <a href="#prod-{{ product.id }}" class="btn btn-primary rounded-pill px-5 py-2 fw-bold" style="background: var(--primary-orange); border: none;">Shop Now</a>
            </div>
        </div>
        {% endfor %}
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#flashSaleHeroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true" style="width: 3rem; height: 3rem;"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#flashSaleHeroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true" style="width: 3rem; height: 3rem;"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
{% else %}
<!-- NORMAL HERO -->
<div class="collection-hero">
    <div class="container">
        <h1 class="main-title">
            {% if current_filters.cat_id %}
            {% set active_cat = categories|selectattr('id', 'equalto', current_filters.cat_id|int)|first %}
            {{ active_cat.name if active_cat else 'Premium Items' }}
            {% elif current_filters.brand %}
            {{ current_filters.brand }} Boutique
            {% else %}
            Curated Collection
            {% endif %}
        </h1>
        <p class="text-muted fs-5">Showing {{ products|length }} exclusive items discovered for you</p>
    </div>
</div>
{% endif %}
 


<div class="filter-bar-container">
    <div class="filter-btn-group">
        <!-- 📂 Category Filter -->
        <div class="dropdown">
            <a class="filter-pill dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                <i class="bi bi-grid-alt"></i> Category
            </a>
            <ul class="dropdown-menu shadow-lg border-0 p-2 mt-2" style="border-radius: 16px;">
                <li><a class="dropdown-item rounded-3 py-2" href="{{ url_for('web.collection', brand=current_filters.brand, on_sale=current_filters.on_sale) }}">All Collections</a></li>
                <li><hr class="dropdown-divider"></li>
                {% for cat in categories %}
                <li><a class="dropdown-item rounded-3 py-2" href="{{ url_for('web.collection', cat_id=cat.id, brand=current_filters.brand, on_sale=current_filters.on_sale) }}">{{ cat.name }}</a></li>
                {% endfor %}
            </ul>
        </div>
 
        <!-- 💸 Price Filter -->
        <div class="dropdown">
            <a class="filter-pill dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                <i class="bi bi-cash-stack"></i> Range
            </a>
            <ul class="dropdown-menu shadow-lg border-0 p-2 mt-2" style="border-radius: 16px;">
                <li><a class="dropdown-item rounded-3" href="{{ url_for('web.collection', cat_id=current_filters.cat_id, brand=current_filters.brand, on_sale=current_filters.on_sale) }}">Any Price</a></li>
                <li><a class="dropdown-item rounded-3" href="{{ url_for('web.collection', cat_id=current_filters.cat_id, brand=current_filters.brand, on_sale=current_filters.on_sale, max_price=1000) }}">Under {{ currency }} 1,000</a></li>
                <li><a class="dropdown-item rounded-3" href="{{ url_for('web.collection', cat_id=current_filters.cat_id, brand=current_filters.brand, on_sale=current_filters.on_sale, min_price=1000, max_price=5000) }}">{{ currency }} 1,000 - 5,000</a></li>
                <li><a class="dropdown-item rounded-3" href="{{ url_for('web.collection', cat_id=current_filters.cat_id, brand=current_filters.brand, on_sale=current_filters.on_sale, min_price=5000) }}">Over {{ currency }} 5,000</a></li>
            </ul>
        </div>
    </div>
 
    <!-- 🔥 On Sale Toggle -->
    <div class="d-flex align-items-center gap-3">
        <span class="small fw-bold text-muted">Show Deals Only</span>
        <div class="form-check form-switch p-0 m-0">
            <input class="form-check-input ms-0" type="checkbox" role="switch" id="onSaleToggle" style="width: 40px; height: 20px; cursor: pointer;" 
                {% if current_filters.on_sale=='true' %}checked{% endif %}
                data-url-on="{{ url_for('web.collection', cat_id=current_filters.cat_id, brand=current_filters.brand, on_sale='true') if current_filters.brand else url_for('web.collection', cat_id=current_filters.cat_id, on_sale='true') }}"
                data-url-off="{{ url_for('web.collection', cat_id=current_filters.cat_id, brand=current_filters.brand) if current_filters.brand else url_for('web.collection', cat_id=current_filters.cat_id) }}">
        </div>
    </div>
</div>
 
<script>
    document.getElementById('onSaleToggle')?.addEventListener('change', function () {
        window.location.href = this.checked ? this.dataset.urlOn : this.dataset.urlOff;
    });
</script>
 
<div class="shop-container">
    {% if products %}
    <div class="shop-grid">
        {% for product in products %}
        <div class="premium-card" id="prod-{{ product.id }}">
            <a href="{{ url_for('web.collection', cat_id=product.category_id) }}" class="text-decoration-none color-inherit flex-grow-1 d-flex flex-column">
                <div class="card-media">
                    <!-- ❤️ WISHLIST BUTTON -->
                    <a href="{{ url_for('web.toggle_wishlist', product_id=product.id) }}" 
                       class="btn btn-light shadow-sm position-absolute top-0 end-0 m-3 d-flex align-items-center justify-content-center" 
                       style="border-radius: 50%; width: 40px; height: 40px; z-index: 10; border: 1px solid #f0f0f0;">
                        <i class="bi bi-heart{% if product.id in user_wishlist_ids %}-fill text-danger{% endif %} fs-5"></i>
                    </a>

                    {% if product.discount_price > 0 %}
                    <span class="badge bg-danger position-absolute top-0 start-0 m-3 shadow-sm" style="z-index: 5; border-radius: 8px; padding: 6px 12px;">Limited Offer</span>
                    {% endif %}
                    {% if top_seller_names is defined and product.name in top_seller_names %}
                    <!-- Best Seller with Video -->
                    <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-3 shadow-sm" style="z-index: 5; border-radius: 8px; padding: 6px 12px;"><i class="bi bi-star-fill"></i> Best Seller</span>
                    <video autoplay loop muted playsinline>
                        {% if product.flash_sale_video and product.flash_sale_video.endswith('.mp4') %}
                        <source src="{{ product.flash_sale_video }}" type="video/mp4">
                        {% else %}
                        <!-- Default premium dummy video for Best Sellers -->
                        <source src="https://cdn.pixabay.com/video/2023/10/22/186008-876938210_tiny.mp4" type="video/mp4">
                        {% endif %}
                    </video>
                    {% else %}
                    <!-- Normal Image -->
                    <img src="{{ url_for('static', filename='uploads/' + (product.image_file if product.image_file else 'default.png')) }}" 
                        onerror="this.src='https://via.placeholder.com/400x400?text=Premium+Item'">
                    {% endif %}
                </div>
                <div class="card-info">
                    <div class="card-cat">{{ product.category.name if product.category else 'Exclusive' }}</div>
                    <h5 class="card-name">{{ product.name }}</h5>
                    
                    {% set reviews = product.reviews %}
                    {% if reviews|length > 0 %}
                        {% set avg_rating = (reviews|sum(attribute='rating') / reviews|length)|round(1) %}
                        <div class="mb-2 text-warning small d-flex align-items-center gap-1">
                            <i class="bi bi-star-fill"></i>
                            <span class="text-dark fw-bold">{{ avg_rating }}</span>
                            <span class="text-muted ms-1" style="font-size: 11px;">({{ reviews|length }})</span>
                        </div>
                    {% endif %}

                    {% if product.show_in_deals %}
                        {% if product.flash_sale_end %}
                        <div class="text-danger small fw-bold mt-1 mb-2 countdown-timer" data-end="{{ product.flash_sale_end.strftime('%Y-%m-%dT%H:%M:%S') }}" style="font-size: 11px;">
                            <i class="bi bi-stopwatch"></i> Ends: <span>{{ product.flash_sale_end.strftime('%d %b, %I:%M %p') }}</span>
                        </div>
                        {% endif %}
                        {% if product.flash_sale_video %}
                        <object style="pointer-events: all; display: block;">
                            <a href="{{ product.flash_sale_video }}" target="_blank" class="btn btn-sm btn-danger fw-bold rounded-pill w-100 mt-1" style="font-size: 12px;" onclick="event.stopPropagation();">
                                <i class="bi bi-play-circle-fill"></i> Watch Video
                            </a>
                        </object>
                        {% endif %}
                    {% endif %}
                </div>
            </a>
            <div class="card-footer mt-auto">
                <span class="card-price">{{ currency }} {{ "{:,.0f}".format(product.price) }}</span>
                <a href="{{ url_for('web.add_to_cart', product_id=product.id) }}" class="add-btn text-decoration-none">
                    <i class="bi bi-plus-lg fs-5"></i>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-5">
        <div class="mb-4">
            <i class="bi bi-search-heart text-muted opacity-25" style="font-size: 100px;"></i>
        </div>
        <h3 class="fw-bold text-dark">No pieces found</h3>
        <p class="text-muted">We couldn't find any items matching your current filters.</p>
        <a href="{{ url_for('web.collection') }}" class="btn btn-dark mt-3 rounded-pill px-5 py-2 fw-bold">Clear All Filters</a>
    </div>
    {% endif %}
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const timers = document.querySelectorAll('.countdown-timer');
        
        setInterval(() => {
            const now = new Date().getTime();
            
            timers.forEach(timer => {
                const endTimeRaw = timer.getAttribute('data-end');
                const endDate = new Date(endTimeRaw).getTime();
                const distance = endDate - now;
                
                const span = timer.querySelector('span');
                
                if (distance < 0) {
                    span.innerHTML = "EXPIRED";
                    return;
                }
                
                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                
                let timeStr = "";
                if (days > 0) timeStr += days + "d ";
                timeStr += ("0" + hours).slice(-2) + "h " + ("0" + minutes).slice(-2) + "m " + ("0" + seconds).slice(-2) + "s";
                
                span.innerHTML = timeStr;
            });
        }, 1000);

        // Flash Sale Video Slider Logic
        const myCarouselEl = document.getElementById('flashSaleHeroCarousel');
        if (myCarouselEl) {
            // Disable default timer sliding since we want videos to dictate the time
            const carousel = new bootstrap.Carousel(myCarouselEl, {
                interval: false 
            });

            const videos = myCarouselEl.querySelectorAll('video');

            // Play the active video from start when slide changes, pause the rest
            myCarouselEl.addEventListener('slid.bs.carousel', function (e) {
                videos.forEach(v => v.pause()); // Pause all internal videos
                const activeVideo = e.relatedTarget.querySelector('video');
                if (activeVideo) {
                    activeVideo.currentTime = 0; // Reset video to 0s
                    activeVideo.play().catch(() => {}); // Safely play
                }
            });

            // When a video completes playing, move to the next slide
            videos.forEach(video => {
                video.addEventListener('ended', function () {
                    carousel.next(); // trigger Bootstrap slide to next
                });
            });
        }
    });
</script>

{% endblock %}