{{-- Componente para búsqueda de clientes --}}
<div class="modal fade" id="clientSearchModal" tabindex="-1" aria-labelledby="clientSearchModalLabel" 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="clientSearchModalLabel">
                    <i class="fas fa-users me-2"></i>Buscar Clientes
                </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="clientSearchInput" placeholder="Buscar por nombre, RUC, teléfono...">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="zoneFilter">
                            <option value="">Todas las zonas</option>
                            @foreach($zones ?? [] as $zone)
                                <option value="{{ $zone->id }}">{{ $zone->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="salesmanFilter">
                            <option value="">Todos los vendedores</option>
                            @foreach($salesmen ?? [] as $salesman)
                                <option value="{{ $salesman->id }}">{{ $salesman->name }}</option>
                            @endforeach
                        </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="clientsTable">
                        <thead class="table-dark">
                            <tr>
                                <th width="50">
                                    <input type="checkbox" id="selectAllClients">
                                </th>
                                <th>RUC/NIT</th>
                                <th>Nombre/Razón Social</th>
                                <th>Teléfono</th>
                                <th>Email</th>
                                <th>Zona</th>
                                <th>Vendedor</th>
                                <th>Estado</th>
                                <th width="100">Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="clientsTableBody">
                            <tr>
                                <td colspan="9" class="text-center">
                                    <i class="fas fa-spinner fa-spin"></i> Cargando clientes...
                                </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="addSelectedClients">
                    <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
    $('#clientSearchInput').on('input', debounce(function() {
        searchClients();
    }, 300));

    // Filtros
    $('#zoneFilter, #salesmanFilter, #statusFilter').on('change', function() {
        searchClients();
    });

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

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

    function searchClients() {
        const searchTerm = $('#clientSearchInput').val();
        const zoneId = $('#zoneFilter').val();
        const salesmanId = $('#salesmanFilter').val();
        const status = $('#statusFilter').val();

        $.ajax({
            url: '{{ route("admin.gestor.clients.search") }}',
            method: 'GET',
            data: {
                search: searchTerm,
                zone_id: zoneId,
                salesman_id: salesmanId,
                status: status
            },
            success: function(data) {
                renderClients(data);
            },
            error: function(xhr) {
                console.error('Error al buscar clientes:', xhr);
                $('#clientsTableBody').html(`
                    <tr>
                        <td colspan="9" class="text-center text-danger">
                            <i class="fas fa-exclamation-triangle"></i> Error al cargar clientes
                        </td>
                    </tr>
                `);
            }
        });
    }

    function renderClients(clients) {
        const tbody = $('#clientsTableBody');
        tbody.empty();

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

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

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

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

    function addSingleClient(clientId) {
        $.get(`/admin/gestor/clients/${clientId}`, function(client) {
            if (window.onClientSelected) {
                window.onClientSelected([client]);
            }
            $('#clientSearchModal').modal('hide');
        });
    }

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

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

        $.ajax({
            url: '/admin/gestor/clients/bulk',
            method: 'POST',
            data: { client_ids: selectedIds },
            success: function(clients) {
                if (window.onClientSelected) {
                    window.onClientSelected(clients);
                }
                $('#clientSearchModal').modal('hide');
            },
            error: function(xhr) {
                showError('Error al obtener los clientes seleccionados');
            }
        });
    }

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

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

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