{{-- views/themes/default/products.blade.php --}}

@extends('themes.default.layout')

@section('title', 'Products - ' . $website->name)

@section('content')
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="text-center">
            <h1 class="display-4 fw-bold mb-4">Our Products</h1>
            <p class="lead mb-4 opacity-90">Discover our amazing collection of high-quality products</p>
        </div>
    </div>
</section>

<!-- Products Section -->
<section class="section">
    <div class="container">
        <!-- Search and Filter Bar -->
        <div class="row mb-4">
            <div class="col-md-6">
                <form class="d-flex" method="GET">
                    <input type="text" class="form-control me-2" name="search"
                           placeholder="Search products..."
                           value="{{ request('search') }}">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
            </div>
            <div class="col-md-3">
                <select class="form-select" name="category" onchange="window.location.href='?category='+this.value">
                    <option value="">All Categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->slug }}" {{ request('category') == $category->slug ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select" name="sort" onchange="this.form.submit()">
                    <option value="">Sort by</option>
                    <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>Name A-Z</option>
                    <option value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}>Name Z-A</option>
                    <option value="price" {{ request('sort') == 'price' ? '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 First</option>
                </select>
            </div>
        </div>

        <!-- Products Grid -->
        <div class="row">
            @if($selectedCategory)
                <div class="col-12 mb-3">
                    <h4>Category: {{ $selectedCategory->name }}</h4>
                    <p class="text-muted">{{ $selectedCategory->description }}</p>
                </div>
            @endif

            @if($products->count() > 0)
                @foreach($products as $product)
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card product-card h-100">
                        <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 250px;">
                            @if($product->images && count($product->images) > 0)
                                <img src="{{ $product->images[0] }}" class="img-fluid" alt="{{ $product->name }}" style="max-height: 100%; max-width: 100%; object-fit: cover;">
                            @else
                                <i class="bi bi-image display-1 text-muted"></i>
                            @endif
                        </div>
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">{{ $product->name }}</h5>
                            <p class="card-text flex-grow-1">{{ Str::limit($product->description, 120) }}</p>

                            <!-- Categories -->
                            @if($product->categories->count() > 0)
                            <div class="mb-2">
                                @foreach($product->categories->take(2) as $category)
                                    <span class="badge bg-secondary me-1">{{ $category->name }}</span>
                                @endforeach
                            </div>
                            @endif

                            <!-- Price -->
                            <div class="mb-3">
                                @if($product->sale_price)
                                    <span class="text-danger fw-bold fs-4">RM {{ number_format($product->sale_price, 2) }}</span>
                                    <span class="text-muted text-decoration-line-through ms-2">RM {{ number_format($product->price, 2) }}</span>
                                    <span class="badge bg-danger ms-2">Sale!</span>
                                @else
                                    <span class="fw-bold fs-4">RM {{ number_format($product->price, 2) }}</span>
                                @endif
                            </div>

                            <!-- Stock Status -->
                            @if($product->has_variations)
                                <div class="mb-2">
                                    <small class="text-muted">{{ $product->variations->count() }} variations available</small>
                                </div>
                            @endif

                            @if($product->in_stock)
                                <div class="mb-2">
                                    <span class="badge bg-success">In Stock ({{ $product->total_stock }} units)</span>
                                </div>
                            @else
                                <div class="mb-2">
                                    <span class="badge bg-danger">Out of Stock</span>
                                </div>
                            @endif

                            <!-- Action Buttons -->
                            <div class="d-flex gap-2">
                                <a href="/product/{{ $product->slug }}" class="btn btn-primary flex-grow-1">
                                    <i class="bi bi-eye me-1"></i>View Details
                                </a>
                                @if($product->in_stock)
                                    <button class="btn btn-outline-primary" onclick="addToCart({{ $product->id }})">
                                        <i class="bi bi-cart-plus"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            @else
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="bi bi-search display-1 text-muted mb-4"></i>
                        <h3>No Products Found</h3>
                        <p class="lead text-muted">
                            @if(request('search') || request('category'))
                                Try adjusting your search or browse our categories.
                            @else
                                We're working on adding amazing products. Check back soon!
                            @endif
                        </p>
                        <a href="/products" class="btn btn-primary">View All Products</a>
                    </div>
                </div>
            @endif
        </div>

        <!-- Pagination -->
        {{-- Pagination can be added here if needed --}}
    </div>
</section>

<!-- Categories Section -->
@if($categories->count() > 0)
<section class="section bg-light-custom">
    <div class="container">
        <h2 class="section-title">Shop by Category</h2>
        <div class="row">
            @foreach($categories->take(6) as $category)
            <div class="col-md-4 mb-4">
                <div class="card text-center h-100">
                    @if($category->image)
                        <img src="{{ $category->image }}" class="card-img-top" alt="{{ $category->name }}" style="height: 200px; object-fit: cover;">
                    @endif
                    <div class="card-body">
                        @if(!$category->image)
                            <i class="bi bi-tag display-4 text-primary mb-3"></i>
                        @endif
                        <h5 class="card-title">{{ $category->name }}</h5>
                        <p class="card-text">{{ $category->description ?: 'Explore our ' . strtolower($category->name) . ' collection' }}</p>
                        <div class="mb-2">
                            <small class="text-muted">{{ $category->allProducts()->count() }} products</small>
                        </div>
                        <a href="/products?category={{ $category->id }}" class="btn btn-outline-primary">
                            Browse {{ $category->name }}
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<script>
function addToCart(productId) {
    // Show loading on button
    const btn = event.target;
    const originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="spinner-border spinner-border-sm"></i>';
    
    // Create form data
    const formData = new FormData();
    formData.append('product_id', productId);
    formData.append('quantity', 1);
    
    fetch('/cart/add', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json',
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            showToast('success', data.message);
            
            // Update cart count if there's a cart counter on the page
            updateCartCount(data.cart_count);
        } else {
            showToast('error', 'Failed to add product to cart');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('error', 'An error occurred while adding to cart');
    })
    .finally(() => {
        // Re-enable button
        btn.disabled = false;
        btn.innerHTML = originalHtml;
    });
}

function showToast(type, message) {
    // Create toast element
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    toast.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(toast);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (toast.parentNode) {
            toast.parentNode.removeChild(toast);
        }
    }, 5000);
}

function updateCartCount(count) {
    // Update cart count in navigation if exists
    const cartCountElements = document.querySelectorAll('.cart-count');
    cartCountElements.forEach(element => {
        element.textContent = count;
        if (count > 0) {
            element.style.display = 'inline';
        } else {
            element.style.display = 'none';
        }
    });
}
</script>
@endsection