{{-- Componente para búsqueda de proveedores --}}
<div class="modal fade" id="supplierSearchModal" tabindex="-1" aria-labelledby="supplierSearchModalLabel" 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="supplierSearchModalLabel">
                    <i class="fas fa-truck me-2"></i>Buscar Proveedores
                </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-4">
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                            <input type="text" class="form-control" id="supplierSearchInput" placeholder="Buscar por nombre, RUC, teléfono...">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="countryFilter">
                            <option value="">Todos los países</option>
                            @foreach($countries ?? [] as $country)
                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="creditStatusFilter">
                            <option value="">Todos los estados</option>
                            <option value="active">Con crédito</option>
                            <option value="inactive">Sin crédito</option>
                            <option value="overdue">Vencido</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" id="statusFilter">
                            <option value="">Todos los estados</option>
                            <option value="active">Activos</option>
                            <option value="inactive">Inactivos</option>
                        </select>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover" id="suppliersTable">
                        <thead class="table-dark">
                            <tr>
                                <th width="50">
                                    <input type="checkbox" id="selectAllSuppliers">
                                </th>
                                <th>RUC/NIT</th>
                                <th>Nombre/Razón Social</th>
                                <th>Teléfono</th>
                                <th>Email</th>
                                <th>País</th>
                                <th>Crédito</th>
                                <th>Estado</th>
                                <th width="100">Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="suppliersTableBody">
                            <tr>
                                <td colspan="9" class="text-center">
                                    <i class="fas fa-spinner fa-spin"></i> Cargando proveedores...
                                </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="addSelectedSuppliers">
                    <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
    $('#supplierSearchInput').on('input', debounce(function() {
        searchSuppliers();
    }, 300));

    // Filtros
    $('#countryFilter, #creditStatusFilter, #statusFilter').on('change', function() {
        searchSuppliers();
    });

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

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

    function searchSuppliers() {
        const searchTerm = $('#supplierSearchInput').val();
        const countryId = $('#countryFilter').val();
        const creditStatus = $('#creditStatusFilter').val();
        const status = $('#statusFilter').val();

        $.ajax({
            url: '{{ route("admin.gestor.suppliers.search") }}',
            method: 'GET',
            data: {
                search: searchTerm,
                country_id: countryId,
                credit_status: creditStatus,
                status: status
            },
            success: function(data) {
                renderSuppliers(data);
            },
            error: function(xhr) {
                console.error('Error al buscar proveedores:', xhr);
                $('#suppliersTableBody').html(`
                    <tr>
                        <td colspan="9" class="text-center text-danger">
                            <i class="fas fa-exclamation-triangle"></i> Error al cargar proveedores
                        </td>
                    </tr>
                `);
            }
        });
    }

    function renderSuppliers(suppliers) {
        const tbody = $('#suppliersTableBody');
        tbody.empty();

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

        suppliers.forEach(function(supplier) {
            const statusBadge = supplier.is_active ? 
                '<span class="badge bg-success">Activo</span>' : 
                '<span class="badge bg-danger">Inactivo</span>';

            const creditBadge = supplier.max_credit > 0 ? 
                `<span class="badge bg-info">${formatCurrency(supplier.max_credit)}</span>` : 
                '<span class="badge bg-secondary">Sin crédito</span>';

            const row = `
                <tr>
                    <td>
                        <input type="checkbox" class="supplier-checkbox" value="${supplier.id}">
                    </td>
                    <td>${supplier.ruc_nit || 'N/A'}</td>
                    <td>${supplier.business_name || supplier.name}</td>
                    <td>${supplier.phone || 'N/A'}</td>
                    <td>${supplier.email || 'N/A'}</td>
                    <td>${supplier.country?.name || 'N/A'}</td>
                    <td>${creditBadge}</td>
                    <td>${statusBadge}</td>
                    <td>
                        <button type="button" class="btn btn-sm btn-primary add-single-supplier" data-supplier-id="${supplier.id}">
                            <i class="fas fa-plus"></i>
                        </button>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });

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

    function addSingleSupplier(supplierId) {
        $.get(`/admin/gestor/suppliers/${supplierId}`, function(supplier) {
            if (window.onSupplierSelected) {
                window.onSupplierSelected([supplier]);
            }
            $('#supplierSearchModal').modal('hide');
        });
    }

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

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

        $.ajax({
            url: '/admin/gestor/suppliers/bulk',
            method: 'POST',
            data: { supplier_ids: selectedIds },
            success: function(suppliers) {
                if (window.onSupplierSelected) {
                    window.onSupplierSelected(suppliers);
                }
                $('#supplierSearchModal').modal('hide');
            },
            error: function(xhr) {
                showError('Error al obtener los proveedores 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