@extends('layouts.main')

@section('title', 'Decorative Mirror - UFG Products')

@push('styles')
<style>
    .products-hero {
        background: linear-gradient(135deg, rgba(3, 139, 185, 0.05) 0%, rgba(255, 255, 255, 1) 50%, rgba(17, 107, 181, 0.05) 100%);
    }

    .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
    .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
    
    @media (min-width: 768px) {
        .md\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    }

    .progress-container {
        margin-bottom: 2rem;
    }

    .progress-step {
        display: flex;
        align-items: center;
        background: white;
        border: 2px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1rem 1.5rem;
        margin-bottom: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .progress-step.active {
        border-color: #038BB9;
        background: #f0f9ff;
    }

    .progress-step:hover {
        border-color: #038BB9;
        box-shadow: 0 4px 12px rgba(3, 139, 185, 0.1);
    }

    .step-number {
        background: #e5e7eb;
        color: #6b7280;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-right: 1rem;
        transition: all 0.3s ease;
    }

    .progress-step.active .step-number {
        background: #038BB9;
        color: white;
    }

    .filter-options {
        display: none;
        margin-top: 1rem;
    }

    .progress-step.active .filter-options {
        display: flex;
    }

    .filter-button {
        background: white;
        border: 1px solid #d1d5db;
        color: #6b7280;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        margin-right: 0.75rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.875rem;
    }

    .filter-button:hover {
        border-color: #038BB9;
        color: #038BB9;
    }

    .filter-button.active {
        background: #038BB9;
        border-color: #038BB9;
        color: white;
    }

    .product-card {
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .product-card.hidden {
        display: none;
    }

    .filter-tags {
        margin-top: 1rem;
        padding: 1rem;
        background: #f8fafc;
        border-radius: 0.5rem;
        border-left: 4px solid #038BB9;
    }

    .filter-tag {
        display: inline-block;
        background: #038BB9;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.75rem;
        margin-right: 0.5rem;
        margin-bottom: 0.25rem;
    }
</style>
@endpush

@section('content')
<!-- Page Header -->
<section class="products-hero pt-[140px] pb-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <nav class="text-aufg-text-secondary mb-4">
                <a href="{{ route('products') }}" class="hover:text-aufg-primary">Products</a> 
                <span class="mx-2">/</span> 
                <span class="text-aufg-primary">Decorative Mirror</span>
            </nav>
            <h1 class="text-3xl md:text-4xl font-bold text-aufg-primary-darker font-poppins mb-3">
                Decorative Mirror
            </h1>
            <p class="text-aufg-text-secondary text-lg max-w-2xl mx-auto">
                Elegant decorative mirrors designed to enhance interior spaces with style and sophistication
            </p>
        </div>
    </div>
</section>

<!-- Progressive Filter Section -->
<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-8">
            <h2 class="text-2xl font-bold text-aufg-primary-darker mb-4">Find Your Perfect Decorative Mirror</h2>
            <p class="text-aufg-text-secondary">Use our progressive filter to narrow down your search</p>
        </div>
        
        <div class="progress-container">
            <!-- Step 1: Standard -->
            <div class="progress-step" data-step="1">
                <span class="step-number">1</span>
                <div class="flex-1">
                    <h3 class="font-semibold text-aufg-primary-darker">Select Standard</h3>
                    <p class="text-sm text-aufg-text-secondary">Choose the quality standard for your project</p>
                    <div class="filter-options flex flex-wrap">
                        <button class="filter-button" data-filter="standard" data-value="jis">JIS (Japanese)</button>
                        <button class="filter-button" data-filter="standard" data-value="en">EN (European)</button>
                        <button class="filter-button" data-filter="standard" data-value="astm">ASTM (American)</button>
                        <button class="filter-button" data-filter="standard" data-value="saso">SASO (Saudi)</button>
                    </div>
                </div>
            </div>
            
            <!-- Step 2: Application -->
            <div class="progress-step" data-step="2">
                <span class="step-number">2</span>
                <div class="flex-1">
                    <h3 class="font-semibold text-aufg-primary-darker">Choose Application</h3>
                    <p class="text-sm text-aufg-text-secondary">Select your intended use case</p>
                    <div class="filter-options flex flex-wrap">
                        <button class="filter-button" data-filter="application" data-value="architecture">Architecture</button>
                        <button class="filter-button" data-filter="application" data-value="automotive">Automotive</button>
                        <button class="filter-button" data-filter="application" data-value="interior">Interior Design</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Active Filters Display -->
        <div class="filter-tags" id="activeFilters" style="display: none;">
            <h4 class="font-semibold text-aufg-primary-darker mb-2">Active Filters:</h4>
            <div id="filterTagsContainer"></div>
            <button onclick="clearAllFilters()" class="text-aufg-primary hover:text-aufg-primary-darker text-sm mt-2">Clear All Filters</button>
        </div>
    </div>
</section>

<!-- Products Section -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-aufg-primary-darker mb-4">ARALUX® Decorative Mirror Collection</h2>
            <p class="text-aufg-text-secondary text-lg">Elegant mirrors that combine functionality with artistic design</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="productsGrid">
            <!-- Beveled Edge Mirror - JIS Standard - Interior Design -->
            <div class="product-card bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-aufg-primary/30 cursor-pointer transform hover:-translate-y-2" 
                 data-category="decorative" data-standard="jis" data-application="interior">
                <div class="relative h-56 bg-gradient-to-br from-purple-300 to-purple-500 flex items-center justify-center">
                    <div class="text-white text-center">
                        <i class="fas fa-gem text-5xl mb-3"></i>
                        <p class="font-semibold text-lg">Beveled Edge Mirror</p>
                    </div>
                    <div class="absolute top-4 right-4 bg-aufg-primary text-white px-2 py-1 rounded-full text-xs font-medium">
                        JIS Standard
                    </div>
                </div>
                
                <div class="p-6">
                    <h3 class="text-xl font-bold text-aufg-primary-darker mb-2">ARALUX® Beveled Edge Mirror</h3>
                    <p class="text-aufg-text-secondary mb-4">Elegant beveled edge mirrors that add depth and sophistication to any interior space.</p>
                    
                    <div class="space-y-3 mb-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Thickness:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">4-6mm</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Bevel Width:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">10-25mm</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Edge Finish:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">Polished</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-4">
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Interior Design</span>
                        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">JIS Standard</span>
                    </div>
                    
                    <a href="{{ route('contact') }}" class="w-full bg-aufg-primary text-white py-2 px-4 rounded-lg hover:bg-aufg-primary-darker transition-colors text-center block">
                        Get Quote
                    </a>
                </div>
            </div>
            
            <!-- Etched Mirror - EN Standard - Interior Design -->
            <div class="product-card bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-aufg-primary/30 cursor-pointer transform hover:-translate-y-2" 
                 data-category="decorative" data-standard="en" data-application="interior">
                <div class="relative h-56 bg-gradient-to-br from-blue-300 to-blue-500 flex items-center justify-center">
                    <div class="text-white text-center">
                        <i class="fas fa-snowflake text-5xl mb-3"></i>
                        <p class="font-semibold text-lg">Etched Mirror</p>
                    </div>
                    <div class="absolute top-4 right-4 bg-aufg-accent text-white px-2 py-1 rounded-full text-xs font-medium">
                        EN Standard
                    </div>
                </div>
                
                <div class="p-6">
                    <h3 class="text-xl font-bold text-aufg-primary-darker mb-2">ARALUX® Etched Mirror</h3>
                    <p class="text-aufg-text-secondary mb-4">Beautiful etched patterns create unique visual effects while maintaining functionality.</p>
                    
                    <div class="space-y-3 mb-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Thickness:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">4-8mm</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Pattern Options:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">15+ Designs</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Custom Patterns:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">Available</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-4">
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Interior Design</span>
                        <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">EN Standard</span>
                    </div>
                    
                    <a href="{{ route('contact') }}" class="w-full bg-aufg-primary text-white py-2 px-4 rounded-lg hover:bg-aufg-primary-darker transition-colors text-center block">
                        Get Quote
                    </a>
                </div>
            </div>
            
            <!-- Shaped Mirror - ASTM Standard - Interior Design -->
            <div class="product-card bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-aufg-primary/30 cursor-pointer transform hover:-translate-y-2" 
                 data-category="decorative" data-standard="astm" data-application="interior">
                <div class="relative h-56 bg-gradient-to-br from-green-300 to-green-500 flex items-center justify-center">
                    <div class="text-white text-center">
                        <i class="fas fa-star text-5xl mb-3"></i>
                        <p class="font-semibold text-lg">Shaped Mirror</p>
                    </div>
                    <div class="absolute top-4 right-4 bg-green-600 text-white px-2 py-1 rounded-full text-xs font-medium">
                        ASTM Standard
                    </div>
                </div>
                
                <div class="p-6">
                    <h3 class="text-xl font-bold text-aufg-primary-darker mb-2">ARALUX® Shaped Mirror</h3>
                    <p class="text-aufg-text-secondary mb-4">Custom-shaped mirrors in various geometric and artistic forms for unique design statements.</p>
                    
                    <div class="space-y-3 mb-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Thickness:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">4-6mm</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Shapes Available:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">20+ Options</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Custom Shapes:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">Yes</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-4">
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Interior Design</span>
                        <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">ASTM Standard</span>
                    </div>
                    
                    <a href="{{ route('contact') }}" class="w-full bg-aufg-primary text-white py-2 px-4 rounded-lg hover:bg-aufg-primary-darker transition-colors text-center block">
                        Get Quote
                    </a>
                </div>
            </div>
            
            <!-- Framed Mirror - SASO Standard - Architecture -->
            <div class="product-card bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-aufg-primary/30 cursor-pointer transform hover:-translate-y-2" 
                 data-category="decorative" data-standard="saso" data-application="architecture">
                <div class="relative h-56 bg-gradient-to-br from-amber-300 to-amber-500 flex items-center justify-center">
                    <div class="text-white text-center">
                        <i class="fas fa-picture-o text-5xl mb-3"></i>
                        <p class="font-semibold text-lg">Framed Mirror</p>
                    </div>
                    <div class="absolute top-4 right-4 bg-red-600 text-white px-2 py-1 rounded-full text-xs font-medium">
                        SASO Standard
                    </div>
                </div>
                
                <div class="p-6">
                    <h3 class="text-xl font-bold text-aufg-primary-darker mb-2">ARALUX® Framed Mirror</h3>
                    <p class="text-aufg-text-secondary mb-4">Complete mirror solutions with elegant frames suitable for architectural installations.</p>
                    
                    <div class="space-y-3 mb-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Thickness:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">4-8mm</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Frame Material:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">Multiple</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Installation:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">Ready</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-4">
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Architecture</span>
                        <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">SASO Standard</span>
                    </div>
                    
                    <a href="{{ route('contact') }}" class="w-full bg-aufg-primary text-white py-2 px-4 rounded-lg hover:bg-aufg-primary-darker transition-colors text-center block">
                        Get Quote
                    </a>
                </div>
            </div>
            
            <!-- LED Backlit Mirror - EN Standard - Interior Design -->
            <div class="product-card bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-aufg-primary/30 cursor-pointer transform hover:-translate-y-2" 
                 data-category="decorative" data-standard="en" data-application="interior">
                <div class="relative h-56 bg-gradient-to-br from-cyan-300 to-cyan-500 flex items-center justify-center">
                    <div class="text-white text-center">
                        <i class="fas fa-lightbulb text-5xl mb-3"></i>
                        <p class="font-semibold text-lg">LED Backlit Mirror</p>
                    </div>
                    <div class="absolute top-4 right-4 bg-aufg-accent text-white px-2 py-1 rounded-full text-xs font-medium">
                        EN Standard
                    </div>
                </div>
                
                <div class="p-6">
                    <h3 class="text-xl font-bold text-aufg-primary-darker mb-2">ARALUX® LED Backlit Mirror</h3>
                    <p class="text-aufg-text-secondary mb-4">Modern mirrors with integrated LED lighting for contemporary interiors and bathrooms.</p>
                    
                    <div class="space-y-3 mb-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Thickness:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">5-8mm</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">LED Type:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">Warm/Cool</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Power Rating:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">12-24V</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-4">
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Interior Design</span>
                        <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">EN Standard</span>
                    </div>
                    
                    <a href="{{ route('contact') }}" class="w-full bg-aufg-primary text-white py-2 px-4 rounded-lg hover:bg-aufg-primary-darker transition-colors text-center block">
                        Get Quote
                    </a>
                </div>
            </div>
            
            <!-- Mosaic Mirror - ASTM Standard - Interior Design -->
            <div class="product-card bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-aufg-primary/30 cursor-pointer transform hover:-translate-y-2" 
                 data-category="decorative" data-standard="astm" data-application="interior">
                <div class="relative h-56 bg-gradient-to-br from-pink-300 to-pink-500 flex items-center justify-center">
                    <div class="text-white text-center">
                        <i class="fas fa-th text-5xl mb-3"></i>
                        <p class="font-semibold text-lg">Mosaic Mirror</p>
                    </div>
                    <div class="absolute top-4 right-4 bg-green-600 text-white px-2 py-1 rounded-full text-xs font-medium">
                        ASTM Standard
                    </div>
                </div>
                
                <div class="p-6">
                    <h3 class="text-xl font-bold text-aufg-primary-darker mb-2">ARALUX® Mosaic Mirror</h3>
                    <p class="text-aufg-text-secondary mb-4">Artistic mosaic mirrors created from multiple mirror pieces for stunning visual impact.</p>
                    
                    <div class="space-y-3 mb-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Thickness:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">4-6mm</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Piece Size:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">Variable</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-aufg-text-secondary">Pattern Style:</span>
                            <span class="text-sm font-medium text-aufg-primary-darker">Custom</span>
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-1 mb-4">
                        <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Interior Design</span>
                        <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">ASTM Standard</span>
                    </div>
                    
                    <a href="{{ route('contact') }}" class="w-full bg-aufg-primary text-white py-2 px-4 rounded-lg hover:bg-aufg-primary-darker transition-colors text-center block">
                        Get Quote
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Related Products -->
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h3 class="text-2xl font-bold text-aufg-primary-darker mb-4">Explore Other Products</h3>
            <p class="text-aufg-text-secondary">Discover our complete range of glass solutions</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <a href="{{ route('products.mirror-glass') }}" class="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
                <i class="fas fa-mirror text-3xl text-aufg-primary mb-4"></i>
                <h4 class="text-lg font-semibold text-aufg-primary-darker mb-2">Mirror Glass</h4>
                <p class="text-aufg-text-secondary text-sm">Standard mirrors for architectural applications</p>
            </a>
            
            <a href="{{ route('products.pattern-glass') }}" class="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
                <i class="fas fa-shapes text-3xl text-aufg-primary mb-4"></i>
                <h4 class="text-lg font-semibold text-aufg-primary-darker mb-2">Pattern Glass</h4>
                <p class="text-aufg-text-secondary text-sm">Decorative glass with various patterns and textures</p>
            </a>
            
            <a href="{{ route('products') }}" class="bg-white rounded-lg p-6 text-center hover:shadow-lg transition-shadow">
                <i class="fas fa-th-large text-3xl text-aufg-primary mb-4"></i>
                <h4 class="text-lg font-semibold text-aufg-primary-darker mb-2">All Products</h4>
                <p class="text-aufg-text-secondary text-sm">Browse our complete product catalog</p>
            </a>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentStep = 0;
    let selectedFilters = {
        standard: null,
        application: null
    };
    
    const steps = document.querySelectorAll('.progress-step');
    const products = document.querySelectorAll('.product-card');
    const activeFiltersDiv = document.getElementById('activeFilters');
    const filterTagsContainer = document.getElementById('filterTagsContainer');
    
    // Initialize first step as active
    steps[0].classList.add('active');
    
    // Step click handlers
    steps.forEach((step, index) => {
        step.addEventListener('click', function() {
            if (index <= currentStep + 1) {
                activateStep(index);
            }
        });
    });
    
    // Filter button click handlers
    document.querySelectorAll('.filter-button').forEach(button => {
        button.addEventListener('click', function() {
            const filterType = this.dataset.filter;
            const filterValue = this.dataset.value;
            
            // Remove active class from siblings
            this.parentNode.querySelectorAll('.filter-button').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // Add active class to clicked button
            this.classList.add('active');
            
            // Update selected filters
            selectedFilters[filterType] = filterValue;
            
            // Move to next step if available
            if (currentStep < steps.length - 1) {
                activateStep(currentStep + 1);
            }
            
            // Apply filters
            applyFilters();
            updateActiveFiltersDisplay();
        });
    });
    
    function activateStep(stepIndex) {
        steps.forEach((step, index) => {
            if (index === stepIndex) {
                step.classList.add('active');
                currentStep = stepIndex;
            } else if (index > stepIndex) {
                step.classList.remove('active');
            }
        });
    }
    
    function applyFilters() {
        products.forEach(product => {
            let shouldShow = true;
            
            // Check standard filter
            if (selectedFilters.standard && 
                product.dataset.standard !== selectedFilters.standard) {
                shouldShow = false;
            }
            
            // Check application filter
            if (selectedFilters.application && 
                product.dataset.application !== selectedFilters.application) {
                shouldShow = false;
            }
            
            // Show/hide product
            if (shouldShow) {
                product.classList.remove('hidden');
            } else {
                product.classList.add('hidden');
            }
        });
    }
    
    function updateActiveFiltersDisplay() {
        const hasActiveFilters = selectedFilters.standard || selectedFilters.application;
        
        if (hasActiveFilters) {
            activeFiltersDiv.style.display = 'block';
            filterTagsContainer.innerHTML = '';
            
            if (selectedFilters.standard) {
                const tag = document.createElement('span');
                tag.className = 'filter-tag';
                tag.textContent = `Standard: ${selectedFilters.standard.toUpperCase()}`;
                filterTagsContainer.appendChild(tag);
            }
            
            if (selectedFilters.application) {
                const tag = document.createElement('span');
                tag.className = 'filter-tag';
                tag.textContent = `Application: ${selectedFilters.application.charAt(0).toUpperCase() + selectedFilters.application.slice(1)}`;
                filterTagsContainer.appendChild(tag);
            }
        } else {
            activeFiltersDiv.style.display = 'none';
        }
    }
    
    window.clearAllFilters = function() {
        selectedFilters = { standard: null, application: null };
        currentStep = 0;
        
        // Reset all steps
        steps.forEach((step, index) => {
            if (index === 0) {
                step.classList.add('active');
            } else {
                step.classList.remove('active');
            }
        });
        
        // Reset all filter buttons
        document.querySelectorAll('.filter-button').forEach(btn => {
            btn.classList.remove('active');
        });
        
        // Show all products
        products.forEach(product => {
            product.classList.remove('hidden');
        });
        
        // Hide active filters
        activeFiltersDiv.style.display = 'none';
    };
});
</script>
@endsection