@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-4 mb-2">Shop Products</h1>
            <p class="text-muted">Browse our complete collection of products</p>
        </div>
    </div>

    <div class="row">
        <!-- Sidebar Filters -->
        <div class="col-lg-3 mb-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Filters</h5>
                </div>
                <div class="card-body">
                    <form id="filterForm" method="GET" action="{{ route('user.products.index') }}">
                        <!-- Search -->
                        <div class="mb-4">
                            <label for="search" class="form-label fw-bold">Search</label>
                            <input type="text" class="form-control" id="search" name="search" 
                                   placeholder="Search products..." value="{{ request('search') }}">
                        </div>

                        <!-- Sort -->
                        <div class="mb-4">
                            <label for="sort" class="form-label fw-bold">Sort By</label>
                            <select class="form-select" id="sort" name="sort" onchange="document.getElementById('filterForm').submit()">
                                <option value="" @if(!request('sort')) selected @endif>Latest</option>
                                <option value="newest" @if(request('sort') == 'newest') selected @endif>Newest First</option>
                                <option value="price_low" @if(request('sort') == 'price_low') selected @endif>Price: Low to High</option>
                                <option value="price_high" @if(request('sort') == 'price_high') selected @endif>Price: High to Low</option>
                                <option value="popular" @if(request('sort') == 'popular') selected @endif>Most Popular</option>
                            </select>
                        </div>

                        <!-- Categories -->
                        <div class="mb-4">
                            <label class="form-label fw-bold d-block mb-3">Categories</label>
                            <div class="category-list">
                                @foreach($categories as $category)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="category{{ $category->id }}" 
                                               name="category" value="{{ $category->id }}"
                                               @if(request('category') == $category->id) checked @endif
                                               onchange="document.getElementById('filterForm').submit()">
                                        <label class="form-check-label" for="category{{ $category->id }}">
                                            {{ $category->name }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Brands -->
                        <div class="mb-4">
                            <label class="form-label fw-bold d-block mb-3">Brands</label>
                            <div class="brand-list">
                                @foreach($brands as $brand)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="brand{{ $brand->id }}" 
                                               name="brand" value="{{ $brand->id }}"
                                               @if(request('brand') == $brand->id) checked @endif
                                               onchange="document.getElementById('filterForm').submit()">
                                        <label class="form-check-label" for="brand{{ $brand->id }}">
                                            {{ $brand->name }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Reset Filters -->
                        @if(request('search') || request('category') || request('brand') || request('sort'))
                            <a href="{{ route('user.products.index') }}" class="btn btn-outline-secondary w-100">
                                <i class="fas fa-redo me-2"></i>Reset Filters
                            </a>
                        @endif
                    </form>
                </div>
            </div>
        </div>

        <!-- Products Grid -->
        <div class="col-lg-9">
            @if($products->count() > 0)
                <div class="row g-4">
                    @foreach($products as $product)
                        <div class="col-md-6 col-lg-4">
                            <div class="card h-100 product-card shadow-sm transition">
                                <!-- Product Image -->
                                <div class="position-relative overflow-hidden" style="height: 250px; background: #f8f9fa;">
                                    <img src="{{ $product->image ? asset($product->image) : asset('uploads/no-image.png') }}" class="card-img-top w-100 h-100" 
                                         alt="{{ $product->name }}" style="object-fit: cover;">
                                    <button type="button" class="btn btn-light btn-sm wishlist-btn position-absolute top-0 end-0 m-2 rounded-circle shadow-sm"
                                            data-product-id="{{ $product->id }}" title="Add to Wishlist"
                                            style="width: 36px; height: 36px; padding: 0; line-height: 36px;">
                                        <i class="bi bi-heart"></i>
                                    </button>

                                    <!-- Quick View Button -->
                                    <div class="position-absolute bottom-0 start-0 end-0 p-2" style="opacity: 0; transition: opacity 0.3s;">
                                        <button type="button" class="btn btn-sm btn-light w-100 quick-view-btn" data-product-id="{{ $product->id }}">
                                            <i class="bi bi-eye me-1"></i>Quick View
                                        </button>
                                    </div>
                                </div>

                                <div class="card-body d-flex flex-column">
                                    <!-- Category Badge -->
                                    <small class="text-muted mb-1">
                                        {{ $product->category?->name ?? 'Uncategorized' }}
                                    </small>

                                    <!-- Product Name -->
                                    <h5 class="card-title mb-2">
                                        <a href="{{ route('user.products.show', $product) }}" class="text-decoration-none text-dark">
                                            {{ Str::limit($product->name, 60) }}
                                        </a>
                                    </h5>

                                    <!-- Brand -->
                                    @if($product->brand)
                                        <small class="text-muted mb-2">
                                            <strong>Brand:</strong> {{ $product->brand->name }}
                                        </small>
                                    @endif

                                    <!-- Description -->
                                    <p class="card-text text-muted small mb-3">
                                        {{ Str::limit($product->description, 80) }}
                                    </p>

                                    <!-- Rating (if available) -->
                                    @if($product->rating && $product->rating > 0)
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center">
                                                <div class="flex-grow-1">
                                                    <small class="text-warning">
                                                        @for($i = 0; $i < floor($product->rating); $i++)
                                                            <i class="fas fa-star"></i>
                                                        @endfor
                                                        @if($product->rating % 1 != 0)
                                                            <i class="fas fa-star-half-alt"></i>
                                                        @endif
                                                        <span class="text-muted">({{ number_format($product->rating, 1) }})</span>
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Price -->
                                    <div class="mb-3 mt-auto">
                                        <h4 class="text-primary mb-0">
                                            {{ \App\Support\Currency::symbol() }}{{ number_format($product->price, 2) }}
                                        </h4>
                                        @if($product->isOnSale())
                                            <small class="text-muted text-decoration-line-through">
                                                {{ \App\Support\Currency::symbol() }}{{ number_format($product->compare_at_price, 2) }}
                                            </small>
                                            <span class="badge bg-danger ms-2">
                                                Save {{ $product->discount_percent }}%
                                            </span>
                                        @endif
                                    </div>

                                    <!-- Actions -->
                                    <a href="{{ route('user.products.show', $product) }}" class="btn btn-primary btn-sm w-100">
                                        <i class="fas fa-shopping-cart me-2"></i>View Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="row mt-4">
                    <div class="col-12">
                        {{ $products->appends(request()->query())->links() }}
                    </div>
                </div>
            @else
                <!-- No Products Found -->
                <div class="alert alert-info text-center py-5">
                    <img src="{{ asset('uploads/no-product.png') }}" alt=\"No products available\" style=\"max-width: 200px; max-height: 200px; margin-bottom: 1rem;\">
                    <h5>No Products Found</h5>
                    <p class="mb-0">Try adjusting your filters or search criteria</p>
                </div>
            @endif
        </div>
    </div>
</div>

<style>
    .product-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }

    .product-card:hover .opacity-0 {
        opacity: 1 !important;
    }

    .product-card .position-absolute.bottom-0 {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .product-card:hover .position-absolute.bottom-0 {
        opacity: 1 !important;
    }

    .transition {
        transition: opacity 0.3s ease;
    }

    .category-list,
    .brand-list {
        max-height: 300px;
        overflow-y: auto;
    }

    .form-check-input {
        cursor: pointer;
    }

    .form-check-label {
        cursor: pointer;
        user-select: none;
    }

    .wishlist-btn:hover, .wishlist-btn.active {
        color: #dc3545 !important;
        background: #fff !important;
    }
    .wishlist-btn.active i {
        font-weight: bold;
    }
</style>

<!-- Quick View Modal -->
<div class="modal fade" id="quickViewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="qv-name"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="qv-loading" class="text-center py-5">
                    <div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>
                </div>
                <div id="qv-content" class="d-none">
                    <div class="row">
                        <div class="col-md-5">
                            <img id="qv-image" src="" alt="" class="img-fluid rounded" style="max-height: 350px; width: 100%; object-fit: cover;">
                        </div>
                        <div class="col-md-7">
                            <p class="text-muted small mb-1" id="qv-brand"></p>
                            <p class="text-muted small mb-2">SKU: <code id="qv-sku"></code></p>
                            <div class="mb-3">
                                <span class="h4 text-primary" id="qv-price"></span>
                                <span class="text-muted text-decoration-line-through ms-2 d-none" id="qv-compare-price"></span>
                                <span class="badge bg-danger ms-2 d-none" id="qv-discount"></span>
                            </div>
                            <div class="mb-3" id="qv-stock"></div>
                            <p class="text-muted" id="qv-description"></p>
                            <div class="d-flex gap-2 mt-4">
                                <button type="button" class="btn btn-primary flex-fill add-to-cart-btn" id="qv-add-btn" data-product-id="">
                                    <i class="bi bi-cart-plus"></i> Add to Cart
                                </button>
                                <a href="#" class="btn btn-outline-secondary flex-fill" id="qv-details-link">
                                    <i class="bi bi-box-arrow-up-right"></i> Full Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = new bootstrap.Modal(document.getElementById('quickViewModal'));
    const baseUrl = window.location.origin + '/store/public';
    const currencySymbol = window.appConfig?.currencySymbol || '$';

    document.querySelectorAll('.quick-view-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const productId = this.dataset.productId;
            document.getElementById('qv-loading').classList.remove('d-none');
            document.getElementById('qv-content').classList.add('d-none');
            modal.show();

            fetch(baseUrl + '/shop/products/' + productId, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.json())
            .then(data => {
                document.getElementById('qv-name').textContent = data.name;
                document.getElementById('qv-image').src = data.image_url || '{{ asset("uploads/no-image.png") }}';
                document.getElementById('qv-image').alt = data.name;
                document.getElementById('qv-brand').textContent = data.brand || 'Unknown Brand';
                document.getElementById('qv-sku').textContent = data.sku || 'N/A';
                document.getElementById('qv-price').textContent = currencySymbol + parseFloat(data.price).toFixed(2);
                document.getElementById('qv-description').textContent = data.description || 'No description available.';
                document.getElementById('qv-add-btn').dataset.productId = data.id;
                document.getElementById('qv-details-link').href = baseUrl + '/shop/product/' + data.id;

                const compareEl = document.getElementById('qv-compare-price');
                const discountEl = document.getElementById('qv-discount');
                if (data.compare_at_price && parseFloat(data.compare_at_price) > parseFloat(data.price)) {
                    compareEl.textContent = currencySymbol + parseFloat(data.compare_at_price).toFixed(2);
                    compareEl.classList.remove('d-none');
                    const pct = Math.round(((data.compare_at_price - data.price) / data.compare_at_price) * 100);
                    discountEl.textContent = 'Save ' + pct + '%';
                    discountEl.classList.remove('d-none');
                } else {
                    compareEl.classList.add('d-none');
                    discountEl.classList.add('d-none');
                }

                const stockEl = document.getElementById('qv-stock');
                const addBtn = document.getElementById('qv-add-btn');
                if (data.in_stock) {
                    stockEl.innerHTML = '<span class="badge bg-success"><i class="bi bi-check-circle"></i> In Stock</span>' +
                        (data.quantity_available ? ' <small class="text-muted">' + data.quantity_available + ' available</small>' : '');
                    addBtn.disabled = false;
                } else {
                    stockEl.innerHTML = '<span class="badge bg-danger"><i class="bi bi-x-circle"></i> Out of Stock</span>';
                    addBtn.disabled = true;
                }

                document.getElementById('qv-loading').classList.add('d-none');
                document.getElementById('qv-content').classList.remove('d-none');
            })
            .catch(err => {
                console.error('Quick view error:', err);
                document.getElementById('qv-loading').innerHTML = '<p class="text-danger">Failed to load product details.</p>';
            });
        });
    });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const baseUrl = window.location.origin + '/store/public';
    const isAuth = '{{ auth()->check() ? "true" : "false" }}' === 'true';

    // Load wishlist state
    if (isAuth) {
        const wishlist = JSON.parse(localStorage.getItem('store_wishlist') || '[]');
        wishlist.forEach(id => {
            const btn = document.querySelector('.wishlist-btn[data-product-id="' + id + '"]');
            if (btn) {
                btn.classList.add('active');
                btn.querySelector('i').className = 'bi bi-heart-fill text-danger';
            }
        });
    }

    document.querySelectorAll('.wishlist-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            if (!isAuth) {
                alert('Please login to add items to your wishlist.');
                return;
            }

            const productId = this.dataset.productId;
            const icon = this.querySelector('i');
            const button = this;

            fetch(baseUrl + '/shop/wishlist/toggle', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ product_id: productId })
            })
            .then(r => r.json())
            .then(data => {
                let wishlist = JSON.parse(localStorage.getItem('store_wishlist') || '[]');
                if (data.status === 'added') {
                    icon.className = 'bi bi-heart-fill text-danger';
                    button.classList.add('active');
                    if (!wishlist.includes(productId)) wishlist.push(productId);
                } else {
                    icon.className = 'bi bi-heart';
                    button.classList.remove('active');
                    wishlist = wishlist.filter(id => id !== productId);
                }
                localStorage.setItem('store_wishlist', JSON.stringify(wishlist));
            })
            .catch(err => {
                console.error('Wishlist error:', err);
                alert('Error updating wishlist.');
            });
        });
    });
});
</script>

@endsection