@extends('layouts.app')

@section('content')
<style>
    .product-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }
    .product-card {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    .product-card:hover {
        transform: translateY(-5px);
    }
    .product-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    .product-info {
        padding: 15px;
    }
    .product-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
    }
    .product-price {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .current-price {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2563eb;
    }
    .original-price {
        font-size: 1rem;
        color: #999;
        text-decoration: line-through;
    }
    .filters {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .filter-section {
        margin-bottom: 20px;
    }
    .filter-title {
        font-weight: 600;
        margin-bottom: 10px;
        color: #444;
    }
    .add-product-btn {
        display: inline-block;
        padding: 10px 20px;
        background: #2563eb;
        color: white;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 500;
        transition: background 0.3s;
    }
    .add-product-btn:hover {
        background: #1d4ed8;
    }
</style>

<div class="product-container">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">Our Products</h1>
        <a href="{{ route('products.create') }}" class="add-product-btn">Add New Product</a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <!-- Filters -->
        <div class="filters">
            <form action="{{ route('products.index') }}" method="GET">
                <div class="filter-section">
                    <h3 class="filter-title">Categories</h3>
                    <select name="category" class="w-full border rounded p-2">
                        <option value="all">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->slug }}" {{ request('category') == $category->slug ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="filter-section">
                    <h3 class="filter-title">Price Range</h3>
                    <div class="flex gap-2 mb-2">
                        <input type="number" name="min_price" placeholder="Min" 
                               value="{{ request('min_price') }}" class="w-full border rounded p-2">
                        <input type="number" name="max_price" placeholder="Max" 
                               value="{{ request('max_price') }}" class="w-full border rounded p-2">
                    </div>
                </div>

                <div class="filter-section">
                    <h3 class="filter-title">Sort By</h3>
                    <select name="sort" class="w-full border rounded p-2">
                        <option value="">Default</option>
                        <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Price: Low to High</option>
                        <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Price: High to Low</option>
                        <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>Newest</option>
                        <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Most Popular</option>
                    </select>
                </div>

                <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">
                    Apply Filters
                </button>
                @if(request()->hasAny(['category', 'min_price', 'max_price', 'sort']))
                    <a href="{{ route('products.index') }}" class="block mt-2 text-center text-blue-600 hover:underline">
                        Clear Filters
                    </a>
                @endif
            </form>
        </div>

        <!-- Products -->
        <div class="md:col-span-3">
            @if($products->isEmpty())
                <div class="text-center py-10">
                    <p class="text-gray-500">No products found matching your criteria.</p>
                </div>
            @else
                <div class="product-grid">
                    @foreach($products as $product)
                        <a href="{{ route('products.show', $product->slug) }}" class="product-card">
                            <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="product-image">
                            <div class="product-info">
                                <h3 class="product-title">{{ $product->name }}</h3>
                                <div class="product-price">
                                    @if($product->sale_price)
                                        <span class="current-price">${{ number_format($product->sale_price, 2) }}</span>
                                        <span class="original-price">${{ number_format($product->price, 2) }}</span>
                                    @else
                                        <span class="current-price">${{ number_format($product->price, 2) }}</span>
                                    @endif
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
                <div class="mt-6">
                    {{ $products->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection