@extends('layouts.app')

@section('content')
<div class="products-page py-5">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="flex items-center text-sm text-gray-500 space-x-2">
                <li class="hover:text-gray-700"><a href="{{ route('home') }}">Home</a></li>
                <li class="text-gray-900 font-medium" aria-current="page">All Products</li>
            </ol>
        </nav>

        <div class="products-header mb-4">
            <div class="flex flex-wrap justify-between items-center">
                <div class="showing-results mb-3 md:mb-0">
                    Showing {{ $products->firstItem() }}-{{ $products->lastItem() }} 
                    of {{ $products->total() }} products
                </div>
                <div class="sort-wrapper">
                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-green-500" id="product-sort">
                        <option value="featured">Recommended</option>
                        <option value="price_asc">Price: Low to High</option>
                        <option value="price_desc">Price: High to Low</option>
                        <option value="newest">Latest Arrivals</option>
                    </select>
                </div>
            </div>
        </div>

        @if($products->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 products-grid">
                @foreach($products as $product)
                    <div>
                        <div class="product-card">
                            <div class="product-image">
                                @if($product->images->first())
                                    <img src="{{ asset('storage/' . $product->images->first()->path) }}" 
                                         alt="{{ $product->name }}" 
                                         class="w-full h-auto object-cover">
                                @else
                                    <div class="no-image">
                                        <i class="fas fa-image"></i>
                                    </div>
                                @endif
                                
                                @if($product->sale_price && now()->between($product->sale_price_start_date, $product->sale_price_end_date))
                                    <div class="product-badge sale">Sale</div>
                                @endif
                                
                                <div class="product-actions">
                                    <button class="action-btn" title="Add to Wishlist">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="action-btn" title="Quick View">
                                        <i class="far fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="product-info">
                                <div class="product-category">
                                    <a href="{{ route('category.show', $product->category->slug) }}">
                                        {{ $product->category->name }}
                                    </a>
                                </div>
                                
                                <h3 class="product-title">
                                    <a href="{{ route('products.show', $product->slug) }}">{{ $product->name }}</a>
                                </h3>
                                
                                <div class="product-price-stock">
                                    <div class="price">${{ number_format($product->price, 2) }}</div>
                                    <div class="stock-status {{ $product->stock_quantity > 0 ? 'in-stock' : 'out-of-stock' }}">
                                        {{ $product->stock_quantity }} left in stock
                                    </div>
                                </div>
                                
                                <div class="product-buttons">
                                    <form action="{{ route('cart.add', $product) }}" method="POST" class="w-full">
                                        @csrf
                                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                                        <input type="hidden" name="quantity" value="1">
                                        <button type="submit" class="btn-primary w-full {{ $product->stock_quantity === 0 ? 'disabled' : '' }}">
                                            <i class="fas fa-shopping-cart"></i>
                                            <span>{{ $product->stock_quantity === 0 ? 'Out of Stock' : 'Add to Cart' }}</span>
                                        </button>
                                    </form>
                                    <a href="/products/{{$product->id}}" style="text-decoration: none;" class="btn-secondary">
                                        <i  class="fas fa-eye"></i>
                                        <span>View</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="flex justify-center mt-5">
                {{ $products->withQueryString()->links('vendor.pagination.custom') }}
            </div>
        @endif
    </div>
</div>

<style>
    .products-page {
        background: #f8f9fa;
    }

    .product-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

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

    .product-image {
        position: relative;
        padding-top: 100%;
        background: #f8f9fa;
    }

    .product-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-info {
        padding: 1.25rem;
    }

    .product-category a {
        color: #6c757d;
        font-size: 0.875rem;
        text-decoration: none;
    }

    .product-title {
        margin: 0.5rem 0;
        font-size: 1rem;
        font-weight: 500;
    }

    .product-title a {
        color: #333;
        text-decoration: none;
    }

    .product-price-stock {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.75rem 0;
    }

    .price {
        font-size: 1.25rem;
        font-weight: 600;
        color: #28a745;
    }

    .stock-status {
        font-size: 0.875rem;
    }

    .in-stock {
        color: #28a745;
    }

    .out-of-stock {
        color: #dc3545;
    }

    .product-buttons {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem;
    }

    .btn-primary, .btn-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.625rem 1rem;
        border: none;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.2s;
        cursor: pointer;
    }

    .btn-primary {
        background: #28a745;
        color: white;
    }

    .btn-primary:hover {
        background: #218838;
    }

    .btn-secondary {
        background: #f8f9fa;
        color: #333;
    }

    .btn-secondary:hover {
        background: #e9ecef;
    }

    .btn-primary.disabled {
        background: #dee2e6;
        color: #6c757d;
        cursor: not-allowed;
    }

    .product-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        background: #dc3545;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
    }

    @media (max-width: 767.98px) {
        .product-buttons {
            grid-template-columns: 1fr;
        }
    }


    .product-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    z-index: 2;
}

.product-card:hover .product-actions {
    opacity: 1;
    transform: translateX(0);
}

.action-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

.action-btn:hover {
    background: #28a745;
    color: white;
    transform: scale(1.1);
}

.action-btn i {
    font-size: 1rem;
    transition: all 0.3s ease;
}

.action-btn:active {
    transform: scale(0.95);
}

@media (max-width: 767.98px) {
    .product-actions {
        opacity: 1;
        transform: none;
    }
    
    .action-btn {
        background: white;
    }
}

@media (max-width: 767.98px) {
    .product-buttons {
        grid-template-columns: 1fr;
    }

    .product-card {
        margin: 0;
    }

    .product-info {
        padding: 0.75rem;
    }

    .product-title {
        font-size: 0.875rem;
        margin: 0.25rem 0;
    }

    .product-category a {
        font-size: 0.75rem;
    }

    .price {
        font-size: 1rem;
    }

    .stock-status {
        font-size: 0.75rem;
    }

    .product-price-stock {
        margin: 0.5rem 0;
    }

    .btn-primary, .btn-secondary {
        padding: 0.5rem;
        font-size: 0.875rem;
    }

    .product-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    .container.mx-auto {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

    .pagination {
        display: flex;
        gap: 5px;
        margin: 0;
    }

    .page-item {
        list-style: none;
    }

    .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        padding: 0;
        border-radius: 4px;
        font-size: 14px;
        border: 1px solid #dee2e6;
        color: #333;
        text-decoration: none;
    }

    .page-item.active .page-link {
        background-color: #28a745;
        border-color: #28a745;
        color: white;
    }

    .page-item.disabled .page-link {
        background-color: #f8f9fa;
        color: #6c757d;
        pointer-events: none;
    }

    .page-link:hover:not(.disabled) {
        background-color: #e9ecef;
        color: #28a745;
        border-color: #dee2e6;
    }
</style>

<script>
    // Add Font Awesome if not already included
    if (!document.querySelector('link[href*="font-awesome"]')) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
        document.head.appendChild(link);
    }

    // Filter toggle functionality
    document.querySelectorAll('.filter-title').forEach(title => {
        title.addEventListener('click', () => {
            const content = title.nextElementSibling;
            const icon = title.querySelector('i');
            
            if (content.style.display === 'none') {
                content.style.display = 'block';
                icon?.classList.replace('fa-chevron-down', 'fa-chevron-up');
            } else {
                content.style.display = 'none';
                icon?.classList.replace('fa-chevron-up', 'fa-chevron-down');
            }
        });
    });

    // Mobile filters toggle
    const filtersWrapper = document.querySelector('.filters-wrapper');
    const filterToggle = document.querySelector('.filter-toggle');
    const closeFilter = document.querySelector('.btn-close');

    filterToggle?.addEventListener('click', () => {
        filtersWrapper.classList.add('active');
    });

    closeFilter?.addEventListener('click', () => {
        filtersWrapper.classList.remove('active');
    });

    document.addEventListener('DOMContentLoaded', function() {
    // Initialize price range slider
    const priceSlider = document.getElementById('price-range-slider');
    const minPriceInput = document.getElementById('min-price');
    const maxPriceInput = document.getElementById('max-price');

    noUiSlider.create(priceSlider, {
        start: [0, 1000],
        connect: true,
        range: {
            'min': 0,
            'max': 1000
        }
    });

    priceSlider.noUiSlider.on('update', function(values, handle) {
        const value = Math.round(values[handle]);
        if (handle === 0) {
            minPriceInput.value = value;
        } else {
            maxPriceInput.value = value;
        }
    });

    // Sort functionality
    const sortSelect = document.getElementById('product-sort');
    sortSelect.addEventListener('change', function() {
        // Add your sort logic here
        console.log('Sort by:', this.value);
    });
});
</script>

@endsection
