@extends('layouts.admin')

@section('title', $category->name . ' Products - ' . $vendor->vendor_name)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 fw-bold">
            <i class="{{ $category->icon ?? 'bi bi-box-seam' }} me-2"></i>{{ $category->name }} Products
        </h1>
    </div>

    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.index') }}">Vendors</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.show', $vendor) }}">{{ $vendor->vendor_name }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.vendors.products.index', $vendor) }}">Products</a></li>
            <li class="breadcrumb-item active">{{ $category->name }}</li>
        </ol>
    </nav>

    <!-- Action Buttons -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <a href="{{ route('admin.vendors.products.index', $vendor) }}" class="btn btn-outline-primary me-2">
                <i class="bi bi-arrow-left me-1"></i>Back to Dashboard
            </a>
        </div>
        <a href="{{ route('admin.vendors.products.products.create', ['vendor' => $vendor, 'categoryId' => $category->id]) }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>Add Product
        </a>
    </div>

    <!-- Stats for this Category -->
    <div class="row g-4 mb-4">
        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="h4 mb-0 text-primary">{{ $products->total() }}</div>
                    <small class="text-muted">Total Products</small>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="h4 mb-0 text-success">{{ $products->where('is_active', true)->count() }}</div>
                    <small class="text-muted">Active Products</small>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="h4 mb-0 text-warning">{{ $products->where('is_featured', true)->count() }}</div>
                    <small class="text-muted">Featured Products</small>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="h4 mb-0 text-info">{{ $products->where('stock_status', 'low_stock')->count() }}</div>
                    <small class="text-muted">Low Stock</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters & Search -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <input type="text" class="form-control" placeholder="Search products..." id="productSearch">
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="statusFilter">
                        <option value="">All Products</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="featured">Featured</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="stockFilter">
                        <option value="">All Stock</option>
                        <option value="in_stock">In Stock</option>
                        <option value="low_stock">Low Stock</option>
                        <option value="out_of_stock">Out of Stock</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <select class="form-select" id="sortBy">
                        <option value="name_asc">Name A-Z</option>
                        <option value="name_desc">Name Z-A</option>
                        <option value="price_asc">Price Low-High</option>
                        <option value="price_desc">Price High-Low</option>
                        <option value="stock_asc">Stock Low-High</option>
                        <option value="stock_desc">Stock High-Low</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-outline-secondary w-100" onclick="clearFilters()">
                        <i class="bi bi-arrow-clockwise me-1"></i>Reset
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Products List -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 pt-4 pb-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0 fw-bold">Products ({{ $products->total() }})</h5>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-danger btn-sm" onclick="bulkAction('delete')" id="bulkDeleteBtn" style="display: none;">
                        <i class="bi bi-trash me-1"></i>Delete Selected
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" id="bulkActionsBtn" style="display: none;">
                            Bulk Actions
                        </button>
                        <ul class="dropdown-menu">
                            <li><button class="dropdown-item" onclick="bulkAction('activate')">Activate Selected</button></li>
                            <li><button class="dropdown-item" onclick="bulkAction('deactivate')">Deactivate Selected</button></li>
                            <li><button class="dropdown-item" onclick="bulkAction('feature')">Feature Selected</button></li>
                            <li><button class="dropdown-item" onclick="bulkAction('unfeature')">Unfeature Selected</button></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><button class="dropdown-item text-danger" onclick="bulkAction('delete')">Delete Selected</button></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            @if($products->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>
                                    <input type="checkbox" id="selectAll" class="form-check-input">
                                </th>
                                <th>Product</th>
                                <th>Brand</th>
                                <th>SKU</th>
                                <th>Price</th>
                                <th>Stock</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($products as $product)
                                <tr>
                                    <td>
                                        <input type="checkbox" class="form-check-input product-checkbox" value="{{ $product->id }}">
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="me-3">
                                                @if($product->featured_image)
                                                    <img src="{{ Storage::url($product->featured_image) }}" alt="{{ $product->name }}" 
                                                         class="rounded" style="width: 50px; height: 50px; object-fit: cover;">
                                                @else
                                                    <div class="rounded bg-light d-flex align-items-center justify-content-center" 
                                                         style="width: 50px; height: 50px;">
                                                        <i class="bi bi-box-seam text-muted"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <div class="fw-bold">{{ $product->name }}</div>
                                                @if($product->short_description)
                                                    <small class="text-muted">{{ Str::limit($product->short_description, 60) }}</small>
                                                @endif
                                                <div class="small">
                                                    @if($product->is_featured)
                                                        <span class="badge bg-warning text-dark me-1">Featured</span>
                                                    @endif
                                                    @if($product->variants_count > 0)
                                                        <span class="badge bg-info text-white">{{ $product->variants_count }} variants</span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($product->brand)
                                            <span class="badge bg-light text-dark">{{ $product->brand->name }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($product->sku)
                                            <code class="small">{{ $product->sku }}</code>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div>
                                            @if($product->sale_price)
                                                <span class="text-success fw-bold">د.إ{{ number_format($product->sale_price, 2) }}</span>
                                                <br><small class="text-muted text-decoration-line-through">د.إ{{ number_format($product->base_price, 2) }}</small>
                                            @else
                                                <span class="fw-bold">د.إ{{ number_format($product->base_price, 2) }}</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <span class="fw-bold">{{ $product->stock_quantity }}</span>
                                            <br>
                                            <span class="badge 
                                                @if($product->stock_status === 'in_stock') bg-success
                                                @elseif($product->stock_status === 'low_stock') bg-warning text-dark
                                                @else bg-danger
                                                @endif">
                                                {{ ucwords(str_replace('_', ' ', $product->stock_status)) }}
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" 
                                                   {{ $product->is_active ? 'checked' : '' }}
                                                   onchange="toggleAvailability({{ $product->id }})">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.vendors.products.products.edit', ['vendor' => $vendor, 'product' => $product]) }}"
                                               class="btn btn-outline-primary btn-sm me-1" title="Edit">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <a href="{{ route('admin.vendors.products.variants', ['vendor' => $vendor, 'product' => $product]) }}"
                                               class="btn btn-outline-info btn-sm" title="Manage Variants">
                                                <i class="bi bi-list-ul"></i>
                                            </a>
                                            <button class="btn btn-outline-warning btn-sm" 
                                                    onclick="toggleFeatured({{ $product->id }})"
                                                    title="{{ $product->is_featured ? 'Unfeature' : 'Feature' }} Product">
                                                <i class="bi bi-star{{ $product->is_featured ? '-fill' : '' }}"></i>
                                            </button>
                                            <button class="btn btn-outline-danger btn-sm" 
                                                    onclick="deleteProduct({{ $product->id }})"
                                                    title="Delete Product">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center p-3 border-top">
                    <div class="text-muted">
                        Showing {{ $products->firstItem() }} to {{ $products->lastItem() }} of {{ $products->total() }} products
                    </div>
                    {{ $products->links() }}
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-5">
                    <div class="mb-3">
                        <i class="bi bi-box-seam text-muted" style="font-size: 3rem;"></i>
                    </div>
                    <h5 class="mt-3 text-muted">No Products Found</h5>
                    <p class="text-muted">Start by adding your first product to this category.</p>
                    <a href="{{ route('admin.vendors.products.products.create', ['vendor' => $vendor, 'categoryId' => $category->id]) }}"
                       class="btn btn-primary">
                        <i class="bi bi-plus-lg me-1"></i>
                        Add Your First Product
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Search functionality
    document.getElementById('productSearch').addEventListener('input', function() {
        filterProducts();
    });

    // Filter functionality
    document.getElementById('statusFilter').addEventListener('change', filterProducts);
    document.getElementById('stockFilter').addEventListener('change', filterProducts);
    document.getElementById('sortBy').addEventListener('change', filterProducts);

    // Select all functionality
    document.getElementById('selectAll').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.product-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateBulkActionButtons();
    });

    // Individual checkbox functionality
    document.querySelectorAll('.product-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkActionButtons);
    });
});

function filterProducts() {
    // Implementation for client-side filtering
    // You can enhance this with server-side filtering if needed
}

function clearFilters() {
    document.getElementById('productSearch').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('stockFilter').value = '';
    document.getElementById('sortBy').value = 'name_asc';
    filterProducts();
}

function updateBulkActionButtons() {
    const checkedBoxes = document.querySelectorAll('.product-checkbox:checked');
    const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
    const bulkActionsBtn = document.getElementById('bulkActionsBtn');
    
    if (checkedBoxes.length > 0) {
        bulkDeleteBtn.style.display = 'inline-block';
        bulkActionsBtn.style.display = 'inline-block';
    } else {
        bulkDeleteBtn.style.display = 'none';
        bulkActionsBtn.style.display = 'none';
    }
}

function toggleAvailability(productId) {
    fetch(`/admin/vendors/{{ $vendor->id }}/products/products/${productId}/toggle-availability`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Product availability updated');
        } else {
            console.error('Failed to update product availability');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

function toggleFeatured(productId) {
    fetch(`/admin/vendors/{{ $vendor->id }}/products/products/${productId}/toggle-featured`, {
        method: 'PATCH',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Failed to update product featured status');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred');
    });
}

function deleteProduct(productId) {
    if (!confirm('Are you sure you want to delete this product? This action cannot be undone.')) {
        return;
    }

    fetch(`/admin/vendors/{{ $vendor->id }}/products/products/${productId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Failed to delete product');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred');
    });
}

function bulkAction(action) {
    const selectedIds = Array.from(document.querySelectorAll('.product-checkbox:checked')).map(cb => cb.value);
    
    if (selectedIds.length === 0) {
        alert('Please select at least one product.');
        return;
    }

    if (action === 'delete' && !confirm(`Are you sure you want to delete ${selectedIds.length} selected products? This action cannot be undone.`)) {
        return;
    }

    fetch(`/admin/vendors/{{ $vendor->id }}/products/bulk-action`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            action: action,
            product_ids: selectedIds
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Failed to perform bulk action');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred');
    });
}
</script>
@endsection