@extends('layouts.app')

@section('title', 'Products - ' . config('app.name'))
@section('content')
<div class="container py-5">
    <!-- Page Header -->
    <div class="mb-4">
        <h1 class="mb-2">Shop Products</h1>
        <p class="text-muted">Browse our complete collection of products</p>
    </div>

    <div class="row">
        <!-- Sidebar Filters -->
        <div class="col-md-3 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light border-bottom">
                    <h6 class="mb-0">Filters</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.products.index') }}" method="GET">
                        <!-- Search -->
                        <div class="mb-3">
                            <label for="search" class="form-label small">Search</label>
                            <input type="text" class="form-control form-control-sm" id="search" name="search" value="{{ request('search') }}" placeholder="Search products...">
                        </div>

                        <!-- Categories -->
                        <div class="mb-3">
                            <label class="form-label small"><strong>Categories</strong></label>
                            <div class="list-group list-group-flush">
                                @foreach($categories as $category)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="category_{{ $category->id }}" name="categories[]" value="{{ $category->id }}" {{ in_array($category->id, (array)request('categories', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label small" for="category_{{ $category->id }}">
                                            {{ $category->name }}
                                            <span class="text-muted">({{ $category->products->count() }})</span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Brands -->
                        <div class="mb-3">
                            <label class="form-label small"><strong>Brands</strong></label>
                            <div class="list-group list-group-flush">
                                @foreach($brands as $brand)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="brand_{{ $brand->id }}" name="brands[]" value="{{ $brand->id }}" {{ in_array($brand->id, (array)request('brands', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label small" for="brand_{{ $brand->id }}">
                                            {{ $brand->name }}
                                            <span class="text-muted">({{ $brand->products->count() }})</span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Price Range -->
                        <div class="mb-3">
                            <label for="min_price" class="form-label small"><strong>Price Range</strong></label>
                            <div class="input-group input-group-sm mb-2">
                                <span class="input-group-text">{{ \App\Support\Currency::symbol() }}</span>
                                <input type="number" step="0.01" class="form-control form-control-sm" id="min_price" name="min_price" value="{{ request('min_price') }}" placeholder="Min">
                            </div>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">{{ \App\Support\Currency::symbol() }}</span>
                                <input type="number" step="0.01" class="form-control form-control-sm" id="max_price" name="max_price" value="{{ request('max_price') }}" placeholder="Max">
                            </div>
                        </div>

                        <!-- Sort -->
                        <div class="mb-3">
                            <label for="sort" class="form-label small"><strong>Sort By</strong></label>
                            <select class="form-select form-select-sm" id="sort" name="sort">
                                <option value="">Default</option>
                                <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>Newest</option>
                                <option value="popular" {{ request('sort') == 'popular' ? 'selected' : '' }}>Popular</option>
                                <option value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                                <option value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                            </select>
                        </div>

                        <button type="submit" class="btn btn-sm btn-primary w-100 mb-2">
                            <i class="bi bi-search"></i> Apply Filters
                        </button>
                        <a href="{{ route('user.products.index') }}" class="btn btn-sm btn-outline-secondary w-100">
                            <i class="bi bi-arrow-counterclockwise"></i> Reset
                        </a>
                    </form>
                </div>
            </div>
        </div>

        <!-- Products Grid -->
        <div class="col-md-9">
            <!-- Results Info -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <p class="text-muted mb-0">
                    Showing {{ $products->count() }} of {{ $products->total() }} products
                </p>
            </div>

            @if($products->count() > 0)
                <div class="row g-4 mb-4">
                    @foreach($products as $product)
                        <div class="col-md-6 col-lg-4">
                            <div class="card border-0 shadow-sm h-100 product-card" style="transition: transform 0.2s;">
                                <!-- Product Image -->
                                <div class="position-relative overflow-hidden" style="height: 250px; background: #f5f5f5;">
                                    <img src="{{ $product->image ? asset('storage/products/' . $product->image) : asset('uploads/no-image.png') }}" alt="{{ $product->name }}" class="w-100 h-100 object-fit-cover">
                                    @if($product->is_featured)
                                        <span class="position-absolute top-0 start-0 badge bg-danger m-2">
                                            <i class="bi bi-star-fill"></i> Featured
                                        </span>
                                    @endif
                                    <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>
                                </div>

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

                                    <!-- Brand -->
                                    <p class="small text-muted mb-2">
                                        {{ $product->brand?->name ?? 'Unknown Brand' }}
                                    </p>

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

                                   
                                </div>

                                <div class="card-footer bg-light border-top p-2 d-flex gap-2">
                                    <button type="button" class="btn btn-sm btn-outline-secondary flex-fill quick-view-btn"
                                            data-product-id="{{ $product->id }}">
                                        <i class="bi bi-eye"></i> Quick View
                                    </button>
                                    <a href="{{ route('user.products.show', $product) }}" class="btn btn-sm btn-outline-primary flex-fill">
                                        <i class="bi bi-bag"></i> Details
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $products->withQueryString()->links() }}
                </div>

            @else
                <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 check back later</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- 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() {
            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');
                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>' : '');
                } else {
                    stockEl.innerHTML = '<span class="badge bg-danger"><i class="bi bi-x-circle"></i> Out of Stock</span>';
                    document.getElementById('qv-add-btn').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>

<style>
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}
.wishlist-btn:hover, .wishlist-btn.active {
    color: #dc3545 !important;
    background: #fff !important;
}
.wishlist-btn.active i {
    font-weight: bold;
}
</style>

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

    // Load wishlist state for auth users
    if (isAuth) {
        // Check wishlist state via a simple approach: store in localStorage after toggle
        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