{{-- Componente para búsqueda de productos --}}
<div class="modal fade" id="productSearchModal" tabindex="-1" aria-labelledby="productSearchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-gradient-primary">
                <h5 class="modal-title text-white" id="productSearchModalLabel">
                    <i class="fas fa-search me-2"></i>Buscar Productos
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                            <input type="text" class="form-control" id="productSearchInput" placeholder="Buscar por nombre, código o código de barras...">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="categoryFilter">
                            <option value="">Todas las categorías</option>
                            @foreach($categories ?? [] as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="brandFilter">
                            <option value="">Todas las marcas</option>
                            @foreach($brands ?? [] as $brand)
                                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover" id="productsTable">
                        <thead class="table-dark">
                            <tr>
                                <th width="50">
                                    <input type="checkbox" id="selectAllProducts">
                                </th>
                                <th>Código</th>
                                <th>Nombre</th>
                                <th>Categoría</th>
                                <th>Marca</th>
                                <th>Precio</th>
                                <th>Stock</th>
                                <th width="100">Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="productsTableBody">
                            <tr>
                                <td colspan="8" class="text-center">
                                    <i class="fas fa-spinner fa-spin"></i> Cargando productos...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="addSelectedProducts">
                    <i class="fas fa-plus me-1"></i>Agregar Seleccionados
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Búsqueda en tiempo real
    $('#productSearchInput').on('input', debounce(function() {
        searchProducts();
    }, 300));

    // Filtros
    $('#categoryFilter, #brandFilter').on('change', function() {
        searchProducts();
    });

    // Seleccionar todos
    $('#selectAllProducts').on('change', function(e) {
        const isChecked = e.target.checked;
        $('#productsTableBody input[type="checkbox"]').prop('checked', isChecked);
    });

    // Agregar productos seleccionados
    $('#addSelectedProducts').on('click', function() {
        addSelectedProducts();
    });

    function searchProducts() {
        const searchTerm = $('#productSearchInput').val();
        const categoryId = $('#categoryFilter').val();
        const brandId = $('#brandFilter').val();

        $.ajax({
            url: '{{ route("admin.inventory.products.search") }}',
            method: 'GET',
            data: {
                search: searchTerm,
                category_id: categoryId,
                brand_id: brandId
            },
            success: function(data) {
                renderProducts(data);
            },
            error: function(xhr) {
                console.error('Error al buscar productos:', xhr);
                $('#productsTableBody').html(`
                    <tr>
                        <td colspan="8" class="text-center text-danger">
                            <i class="fas fa-exclamation-triangle"></i> Error al cargar productos
                        </td>
                    </tr>
                `);
            }
        });
    }

    function renderProducts(products) {
        const tbody = $('#productsTableBody');
        tbody.empty();

        if (products.length === 0) {
            tbody.html(`
                <tr>
                    <td colspan="8" class="text-center text-muted">
                        <i class="fas fa-search"></i> No se encontraron productos
                    </td>
                </tr>
            `);
            return;
        }

        products.forEach(function(product) {
            const row = `
                <tr>
                    <td>
                        <input type="checkbox" class="product-checkbox" value="${product.id}">
                    </td>
                    <td>${product.code}</td>
                    <td>${product.name}</td>
                    <td>${product.category?.name || 'N/A'}</td>
                    <td>${product.brand?.name || 'N/A'}</td>
                    <td>${formatCurrency(product.selling_price)}</td>
                    <td>
                        <span class="badge ${product.stock > 0 ? 'bg-success' : 'bg-danger'}">
                            ${product.stock} unidades
                        </span>
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-primary add-single-product" data-product-id="${product.id}">
                            <i class="fas fa-plus"></i>
                        </button>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });

        // Bind eventos para botones individuales
        $('.add-single-product').on('click', function(e) {
            const productId = $(e.target).closest('button').data('product-id');
            addSingleProduct(productId);
        });
    }

    function addSingleProduct(productId) {
        $.get(`/admin/inventory/products/${productId}`, function(product) {
            if (window.onProductSelected) {
                window.onProductSelected([product]);
            }
            $('#productSearchModal').modal('hide');
        });
    }

    function addSelectedProducts() {
        const selectedIds = $('#productsTableBody input[type="checkbox"]:checked').map(function() {
            return $(this).val();
        }).get();

        if (selectedIds.length === 0) {
            showWarning('Seleccione al menos un producto');
            return;
        }

        $.ajax({
            url: '/admin/inventory/products/bulk',
            method: 'POST',
            data: { product_ids: selectedIds },
            success: function(products) {
                if (window.onProductSelected) {
                    window.onProductSelected(products);
                }
                $('#productSearchModal').modal('hide');
            },
            error: function(xhr) {
                showError('Error al obtener los productos seleccionados');
            }
        });
    }

    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    function formatCurrency(amount, currency = 'USD') {
        return new Intl.NumberFormat('es-ES', {
            style: 'currency',
            currency: currency
        }).format(amount);
    }

    function showWarning(message) {
        // Implementar notificación de advertencia
        console.warn(message);
    }

    function showError(message) {
        // Implementar notificación de error
        console.error(message);
    }
});
</script>
@endpush