@extends('layouts.app')

@section('title', 'Gestión de Asesores Comerciales')

@section('breadcrumbs')
    <li class="breadcrumb-item">Asesores Comerciales</li>
    <li class="breadcrumb-item active">ABM Asesores</li>
@endsection

@section('content')
    <div class="mb-4 d-flex justify-content-between align-items-center">
        <h1 class="h2">Asesores Comerciales</h1>
        <a href="{{ route('commercial-advisors.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Nuevo Asesor
        </a>
    </div>

<!-- Filtros -->
<div class="card mb-4">
    <div class="card-body">
        <form id="filterForm" method="GET">
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label">Buscar por nombre</label>
                    <input type="text" class="form-control" name="search" 
                           value="{{ request('search') }}" placeholder="Nombre del asesor...">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Estado</label>
                    <select class="form-select" name="status">
                        <option value="">Todos</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Activos</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactivos</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Región</label>
                    <select class="form-select" name="region">
                        <option value="">Todas</option>
                        <option value="Capital Federal" {{ request('region') === 'Capital Federal' ? 'selected' : '' }}>Capital Federal</option>
                        <option value="Zona Norte" {{ request('region') === 'Zona Norte' ? 'selected' : '' }}>Zona Norte</option>
                        <option value="Zona Sur" {{ request('region') === 'Zona Sur' ? 'selected' : '' }}>Zona Sur</option>
                        <option value="Zona Oeste" {{ request('region') === 'Zona Oeste' ? 'selected' : '' }}>Zona Oeste</option>
                        <option value="Interior - Buenos Aires" {{ request('region') === 'Interior - Buenos Aires' ? 'selected' : '' }}>Interior - Buenos Aires</option>
                        <option value="Córdoba" {{ request('region') === 'Córdoba' ? 'selected' : '' }}>Córdoba</option>
                        <option value="Santa Fe" {{ request('region') === 'Santa Fe' ? 'selected' : '' }}>Santa Fe</option>
                        <option value="Mendoza" {{ request('region') === 'Mendoza' ? 'selected' : '' }}>Mendoza</option>
                        <option value="Otros" {{ request('region') === 'Otros' ? 'selected' : '' }}>Otros</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Comisión mínima (%)</label>
                    <input type="number" class="form-control" name="min_commission" step="0.1"
                           value="{{ request('min_commission') }}" placeholder="0.0">
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <div class="btn-group w-100">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> Filtrar
                        </button>
                        <a href="{{ route('commercial-advisors.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Estadísticas Rápidas -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stats-card mini">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['total'] ?? 0 }}</h4>
                    <small>Total Asesores</small>
                </div>
                <i class="fas fa-user-tie fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card mini success">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['active'] ?? 0 }}</h4>
                    <small>Activos</small>
                </div>
                <i class="fas fa-check-circle fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card mini warning">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>${{ number_format($stats['total_sales'] ?? 0, 0, ',', '.') }}</h4>
                    <small>Ventas Totales</small>
                </div>
                <i class="fas fa-dollar-sign fs-3"></i>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card mini info">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4>{{ $stats['total_clients'] ?? 0 }}</h4>
                    <small>Clientes Total</small>
                </div>
                <i class="fas fa-users fs-3"></i>
            </div>
        </div>
    </div>
</div>

<!-- Tabla de Asesores Comerciales -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <h5 class="mb-0">Lista de Asesores Comerciales</h5>
        </div>
        <div class="d-flex align-items-center">
            <span class="badge bg-secondary me-2">{{ $pagination['total_items'] ?? count($advisors) }} resultados</span>
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-outline-secondary" onclick="toggleView('table')" id="tableView">
                    <i class="fas fa-table"></i>
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="toggleView('cards')" id="cardView">
                    <i class="fas fa-th-large"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="card-body p-0">
        @if(isset($advisors) && count($advisors) > 0)
        <div id="tableViewContent">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>
                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'name', 'direction' => request('direction') === 'asc' ? 'desc' : 'asc']) }}" 
                                   class="text-decoration-none">
                                    Asesor
                                    @if(request('sort') === 'name')
                                        <i class="fas fa-sort-{{ request('direction') === 'asc' ? 'up' : 'down' }}"></i>
                                    @else
                                        <i class="fas fa-sort text-muted"></i>
                                    @endif
                                </a>
                            </th>
                            <th>Región</th>
                            <th>Estado</th>
                            <th>Comisión</th>
                            <th>Ventas</th>
                            <th>Clientes</th>
                            <th>
                                <a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => request('direction') === 'asc' ? 'desc' : 'asc']) }}" 
                                   class="text-decoration-none">
                                    Última Venta
                                    @if(request('sort') === 'last_sale_at')
                                        <i class="fas fa-sort-{{ request('direction') === 'asc' ? 'up' : 'down' }}"></i>
                                    @else
                                        <i class="fas fa-sort text-muted"></i>
                                    @endif
                                </a>
                            </th>
                            <th class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($advisors as $advisor)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="advisor-avatar me-3">
                                        {{ substr($advisor['name'] ?? 'NA', 0, 1) }}{{ substr($advisor['last_name'] ?? 'A', 0, 1) }}
                                    </div>
                                    <div>
                                        <strong>{{ $advisor['name'] ?? 'Sin nombre' }} {{ $advisor['last_name'] ?? '' }}</strong>
                                        <br>
                                        <small class="text-muted">ID: {{ $advisor['id'] ?? 'N/A' }}</small>
                                        @if(isset($advisor['email']))
                                            <br><small class="text-muted">{{ $advisor['email'] }}</small>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-info">{{ $advisor['region'] ?? 'Sin región' }}</span>
                            </td>
                            <td>
                                <span class="badge bg-{{ ($advisor['status'] ?? '') === 'active' ? 'success' : 'secondary' }}">
                                    {{ ($advisor['status'] ?? '') === 'active' ? 'Activo' : 'Inactivo' }}
                                </span>
                            </td>
                            <td>
                                <strong>{{ number_format($advisor['commission_rate'] ?? 0, 1) }}%</strong>
                            </td>
                            <td>
                                <span class="badge bg-success">${{ number_format($advisor['total_sales'] ?? 0, 0, ',', '.') }}</span>
                            </td>
                            <td>
                                <span class="badge bg-primary">{{ $advisor['clients_count'] ?? 0 }}</span>
                            </td>
                            <td>
                                @if(isset($advisor['last_sale_at']) && $advisor['last_sale_at'])
                                    {{ date('d/m/Y', strtotime($advisor['last_sale_at'])) }}
                                    <br>
                                    <small class="text-muted">{{ \Carbon\Carbon::parse($advisor['last_sale_at'])->diffForHumans() }}</small>
                                @else
                                    <span class="text-muted">Sin ventas</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('commercial-advisors.show', $advisor['id'] ?? 0) }}" 
                                       class="btn btn-outline-primary" title="Ver detalles">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('commercial-advisors.edit', $advisor['id'] ?? 0) }}" 
                                       class="btn btn-outline-warning" title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-outline-success" 
                                            onclick="changeStatus('{{ $advisor['id'] ?? 0 }}', '{{ $advisor['status'] ?? 'inactive' }}')" title="Cambiar estado">
                                        <i class="fas fa-toggle-{{ ($advisor['status'] ?? '') === 'active' ? 'on' : 'off' }}"></i>
                                    </button>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" 
                                                data-bs-toggle="dropdown">
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li><a class="dropdown-item" href="#" onclick="viewSalesReport('{{ $advisor['id'] ?? 0 }}')">
                                                <i class="fas fa-chart-line"></i> Ver Reporte de Ventas
                                            </a></li>
                                            <li><a class="dropdown-item" href="#" onclick="viewClients('{{ $advisor['id'] ?? 0 }}')">
                                                <i class="fas fa-users"></i> Ver Clientes
                                            </a></li>
                                            <li><a class="dropdown-item" href="#" onclick="sendMessage('{{ $advisor['id'] ?? 0 }}')">
                                                <i class="fas fa-envelope"></i> Enviar Mensaje
                                            </a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#" onclick="deleteAdvisor('{{ $advisor['id'] ?? 0 }}')">
                                                <i class="fas fa-trash"></i> Eliminar
                                            </a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Vista de Tarjetas (oculta por defecto) -->
        <div id="cardViewContent" style="display: none;">
            <div class="row g-3 p-3">
                @foreach($advisors as $advisor)
                <div class="col-md-6 col-lg-4">
                    <div class="card advisor-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="advisor-avatar large">
                                    {{ substr($advisor['name'] ?? 'NA', 0, 1) }}{{ substr($advisor['last_name'] ?? 'A', 0, 1) }}
                                </div>
                                <span class="badge bg-{{ ($advisor['status'] ?? '') === 'active' ? 'success' : 'secondary' }}">
                                    {{ ($advisor['status'] ?? '') === 'active' ? 'Activo' : 'Inactivo' }}
                                </span>
                            </div>
                            <h6 class="card-title">{{ $advisor['name'] ?? 'Sin nombre' }} {{ $advisor['last_name'] ?? '' }}</h6>
                            <p class="card-text">
                                <small class="text-muted">{{ $advisor['region'] ?? 'Sin región' }}</small><br>
                                <small class="text-muted">Comisión: {{ number_format($advisor['commission_rate'] ?? 0, 1) }}%</small>
                            </p>
                            <div class="row mb-2">
                                <div class="col-6">
                                    <small class="text-muted">Ventas:</small><br>
                                    <strong>${{ number_format($advisor['total_sales'] ?? 0, 0, ',', '.') }}</strong>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">Clientes:</small><br>
                                    <strong>{{ $advisor['clients_count'] ?? 0 }}</strong>
                                </div>
                            </div>
                            <div class="btn-group w-100 btn-group-sm">
                                <a href="{{ route('commercial-advisors.show', $advisor['id'] ?? 0) }}" class="btn btn-primary">
                                    <i class="fas fa-eye"></i> Ver
                                </a>
                                <a href="{{ route('commercial-advisors.edit', $advisor['id'] ?? 0) }}" class="btn btn-outline-primary">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-outline-primary" onclick="changeStatus('{{ $advisor['id'] ?? 0 }}', '{{ $advisor['status'] ?? 'inactive' }}')">
                                    <i class="fas fa-toggle-{{ ($advisor['status'] ?? '') === 'active' ? 'on' : 'off' }}"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @else
        <div class="text-center py-5">
            <i class="fas fa-user-tie fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No existen Asesores registrados aún.</h5>
            @if(isset($apiWorking) && $apiWorking)
                <p class="text-muted">La base de datos está vacía. Comienza creando tu primer asesor comercial.</p>
            @else
                <p class="text-muted">No se pudo conectar con la API. Intenta recargar la página.</p>
            @endif
            <a href="{{ route('commercial-advisors.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Crear Primer Asesor
            </a>
        </div>
        @endif
    </div>
    
    @if(isset($pagination) && isset($pagination['total_pages']) && $pagination['total_pages'] > 1)
    <div class="card-footer">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center mb-0">
                @if($pagination['current_page'] > 1)
                    <li class="page-item">
                        <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] - 1]) }}">
                            <i class="fas fa-chevron-left"></i> Anterior
                        </a>
                    </li>
                @endif
                
                @for($i = 1; $i <= $pagination['total_pages']; $i++)
                    <li class="page-item {{ $i == $pagination['current_page'] ? 'active' : '' }}">
                        <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $i]) }}">{{ $i }}</a>
                    </li>
                @endfor
                
                @if($pagination['current_page'] < $pagination['total_pages'])
                    <li class="page-item">
                        <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $pagination['current_page'] + 1]) }}">
                            Siguiente <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                @endif
            </ul>
        </nav>
        <div class="text-center mt-2">
            <small class="text-muted">
                Página {{ $pagination['current_page'] }} de {{ $pagination['total_pages'] }} 
                ({{ $pagination['total_items'] }} registros total)
            </small>
        </div>
    </div>
    @endif
</div>

<!-- Modal para cambiar estado -->
<div class="modal fade" id="changeStatusModal" tabindex="-1" aria-labelledby="changeStatusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changeStatusModalLabel">
                    <i class="fas fa-toggle-on"></i> Cambiar Estado del Asesor
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="statusChangeMessage">¿Estás seguro de continuar?</p>
                <p class="text-muted"><small>El estado del asesor comercial será actualizado inmediatamente.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="confirmStatusChange">
                    <i class="fas fa-check"></i> Confirmar Cambio
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .advisor-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 14px;
    }
    
    .advisor-avatar.large {
        width: 50px;
        height: 50px;
        font-size: 16px;
    }
    
    .advisor-card {
        transition: transform 0.2s;
    }
    
    .advisor-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .stats-card.mini {
        padding: 15px;
        margin-bottom: 0;
    }
    
    .stats-card.mini h4 {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
</style>
@endpush

@push('scripts')
<script>
    let currentAdvisorId = null;
    let currentStatus = null;

    function toggleView(viewType) {
        const tableView = document.getElementById('tableViewContent');
        const cardView = document.getElementById('cardViewContent');
        const tableBtn = document.getElementById('tableView');
        const cardBtn = document.getElementById('cardView');
        
        if (viewType === 'table') {
            tableView.style.display = 'block';
            cardView.style.display = 'none';
            tableBtn.classList.add('active');
            cardBtn.classList.remove('active');
        } else {
            tableView.style.display = 'none';
            cardView.style.display = 'block';
            tableBtn.classList.remove('active');
            cardBtn.classList.add('active');
        }
        
        localStorage.setItem('advisorsViewType', viewType);
    }
    
    function changeStatus(advisorId, currentStatusValue) {
        currentAdvisorId = advisorId;
        currentStatus = currentStatusValue === 'active' ? 'inactive' : 'active';
        
        const message = `¿Deseas cambiar el estado del asesor a "${currentStatus === 'active' ? 'Activo' : 'Inactivo'}"?`;
        document.getElementById('statusChangeMessage').textContent = message;
        
        const modal = new bootstrap.Modal(document.getElementById('changeStatusModal'));
        modal.show();
    }
    
    function confirmStatusChange() {
        if (!currentAdvisorId || !currentStatus) return;
        
        const button = document.getElementById('confirmStatusChange');
        const originalText = button.innerHTML;
        
        // Deshabilitar botón y mostrar loading
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Actualizando...';
        
        // Realizar petición AJAX
        fetch(`/commercial-advisors/${currentAdvisorId}/status`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                status: currentStatus
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Cerrar modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('changeStatusModal'));
                modal.hide();
                
                // Recargar página para mostrar cambios
                location.reload();
            } else {
                throw new Error(data.message || 'Error al cambiar estado');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al cambiar estado: ' + error.message);
        })
        .finally(() => {
            // Restaurar botón
            button.disabled = false;
            button.innerHTML = originalText;
        });
    }
    
    function viewSalesReport(advisorId) {
        // En producción sería una redirección o modal con el reporte
        alert('Funcionalidad de reporte de ventas en desarrollo para asesor: ' + advisorId);
    }
    
    function viewClients(advisorId) {
        // En producción sería una redirección a la lista de clientes del asesor
        alert('Funcionalidad de visualización de clientes en desarrollo para asesor: ' + advisorId);
    }
    
    function sendMessage(advisorId) {
        alert('Funcionalidad de mensajería en desarrollo');
    }
    
    function deleteAdvisor(advisorId) {
        if (confirm('¿Estás seguro de que deseas eliminar este asesor comercial? Esta acción no se puede deshacer.')) {
            // En producción sería una llamada AJAX DELETE
            alert('Funcionalidad de eliminación en desarrollo');
        }
    }
    
    function exportAdvisors() {
        alert('Funcionalidad de exportación en desarrollo');
    }
    
    function refreshData() {
        location.reload();
    }
    
    // Event listeners
    document.addEventListener('DOMContentLoaded', function() {
        // Cargar vista preferida
        const savedView = localStorage.getItem('advisorsViewType') || 'table';
        toggleView(savedView);
        
        // Agregar event listener al botón de confirmación
        document.getElementById('confirmStatusChange').addEventListener('click', confirmStatusChange);
    });
</script>
@endpush