@extends('layouts.app')

@section('title', 'Editar Asesor Comercial')

@section('breadcrumbs')
    <li class="breadcrumb-item">Asesores Comerciales</li>
    <li class="breadcrumb-item"><a href="{{ route('commercial-advisors.index') }}">ABM Asesores</a></li>
    <li class="breadcrumb-item"><a href="{{ route('commercial-advisors.show', $advisor['id']) }}">{{ $advisor['name'] }} {{ $advisor['last_name'] }}</a></li>
    <li class="breadcrumb-item active">Editar</li>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-user-edit"></i> Editar Asesor Comercial
    </h2>
    <div class="btn-group">
        <a href="{{ route('commercial-advisors.show', $advisor['id']) }}" class="btn btn-outline-secondary">
            <i class="fas fa-eye"></i> Ver Detalles
        </a>
        <a href="{{ route('commercial-advisors.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left"></i> Volver a la Lista
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-8 col-lg-9">
        <form action="{{ route('commercial-advisors.update', $advisor['id']) }}" method="POST" id="advisorForm">
            @csrf
            @method('PUT')
            
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle"></i> Información Personal
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">Nombre <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('name', $advisor['name']) }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="last_name" class="form-label">Apellido <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('last_name') is-invalid @enderror" 
                                       id="last_name" name="last_name" value="{{ old('last_name', $advisor['last_name']) }}" required>
                                @error('last_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                       id="email" name="email" value="{{ old('email', $advisor['email']) }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="phone" class="form-label">Teléfono <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('phone') is-invalid @enderror" 
                                       id="phone" name="phone" value="{{ old('phone', $advisor['phone']) }}" required
                                       placeholder="+54 11 1234-5678">
                                @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="dni" class="form-label">DNI</label>
                                <input type="text" class="form-control @error('dni') is-invalid @enderror" 
                                       id="dni" name="dni" value="{{ old('dni', $advisor['dni'] ?? '') }}"
                                       placeholder="12.345.678">
                                @error('dni')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="region" class="form-label">Región <span class="text-danger">*</span></label>
                                <select class="form-select @error('region') is-invalid @enderror" id="region" name="region" required>
                                    <option value="">Seleccionar región...</option>
                                    @foreach($regions as $region)
                                        <option value="{{ $region }}" {{ old('region', $advisor['region']) === $region ? 'selected' : '' }}>
                                            {{ $region }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('region')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="address" class="form-label">Dirección</label>
                        <textarea class="form-control @error('address') is-invalid @enderror" 
                                  id="address" name="address" rows="2" placeholder="Dirección completa...">{{ old('address', $advisor['address'] ?? '') }}</textarea>
                        @error('address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-percent"></i> Configuración Comercial
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="commission_rate" class="form-label">Tasa de Comisión (%) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="number" class="form-control @error('commission_rate') is-invalid @enderror" 
                                           id="commission_rate" name="commission_rate" value="{{ old('commission_rate', $advisor['commission_rate']) }}" 
                                           step="0.1" min="0" max="100" required>
                                    <span class="input-group-text">%</span>
                                </div>
                                <small class="form-text text-muted">Porcentaje de comisión sobre las ventas realizadas</small>
                                @error('commission_rate')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="status" class="form-label">Estado <span class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" id="status" name="status" required>
                                    <option value="active" {{ old('status', $advisor['status']) === 'active' ? 'selected' : '' }}>Activo</option>
                                    <option value="inactive" {{ old('status', $advisor['status']) === 'inactive' ? 'selected' : '' }}>Inactivo</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Comisión Estimada</label>
                                <div class="form-control-plaintext">
                                    <span id="estimatedCommission" class="text-success fw-bold">$0</span>
                                    <small class="text-muted d-block">Basado en ventas actuales</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="notes" class="form-label">Notas Adicionales</label>
                        <textarea class="form-control @error('notes') is-invalid @enderror" 
                                  id="notes" name="notes" rows="3" 
                                  placeholder="Observaciones, especialidades, historial previo, etc...">{{ old('notes', $advisor['notes'] ?? '') }}</textarea>
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            
            <div class="d-flex justify-content-between mt-4">
                <a href="{{ route('commercial-advisors.show', $advisor['id']) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-times"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-warning" id="submitBtn">
                    <i class="fas fa-save"></i> Actualizar Asesor Comercial
                </button>
            </div>
        </form>
    </div>
    
    <div class="col-md-4 col-lg-3">
        <!-- Vista Previa -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-eye"></i> Vista Previa
                </h6>
            </div>
            <div class="card-body text-center">
                <div class="advisor-avatar-preview mb-3" id="avatarPreview">
                    {{ substr($advisor['name'], 0, 1) }}{{ substr($advisor['last_name'], 0, 1) }}
                </div>
                <h6 id="namePreview">{{ $advisor['name'] }} {{ $advisor['last_name'] }}</h6>
                <p class="text-muted" id="regionPreview">{{ $advisor['region'] }}</p>
                <div class="row text-center">
                    <div class="col-6">
                        <small class="text-muted">Comisión</small>
                        <div class="fw-bold" id="commissionPreview">{{ number_format($advisor['commission_rate'], 1) }}%</div>
                    </div>
                    <div class="col-6">
                        <small class="text-muted">Estado</small>
                        <div>
                            <span class="badge" id="statusPreview">{{ $advisor['status'] === 'active' ? 'Activo' : 'Inactivo' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Estadísticas Actuales -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-chart-bar"></i> Estadísticas Actuales
                </h6>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span>Ventas Totales:</span>
                    <strong>${{ number_format($advisor['total_sales'] ?? 0, 0, ',', '.') }}</strong>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span>Clientes:</span>
                    <strong>{{ $advisor['clients_count'] ?? 0 }}</strong>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span>Comisiones Ganadas:</span>
                    <strong>${{ number_format(($advisor['total_sales'] ?? 0) * ($advisor['commission_rate'] ?? 0) / 100, 0, ',', '.') }}</strong>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <span>Última Venta:</span>
                    <small>
                        @if(isset($advisor['last_sale_at']) && $advisor['last_sale_at'])
                            {{ date('d/m/Y', strtotime($advisor['last_sale_at'])) }}
                        @else
                            Sin ventas
                        @endif
                    </small>
                </div>
            </div>
        </div>
        
        <!-- Información del Sistema -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle"></i> Información del Sistema
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Importante:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Los cambios se aplicarán inmediatamente</li>
                        <li>Si cambias el email, se notificará al asesor</li>
                        <li>El cambio de estado afecta el acceso al sistema</li>
                    </ul>
                </div>
                
                <small class="text-muted">
                    <strong>Creado:</strong> {{ date('d/m/Y', strtotime($advisor['created_at'])) }}<br>
                    <strong>ID:</strong> {{ $advisor['id'] }}<br>
                    <strong>Última actualización:</strong> Ahora
                </small>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .advisor-avatar-preview {
        width: 60px;
        height: 60px;
        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: 18px;
        margin: 0 auto;
    }
    
    .form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }
    
    .form-select:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }
    
    .card {
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border-radius: 12px;
    }
    
    .card-header {
        border-radius: 12px 12px 0 0 !important;
    }
    
    .alert {
        border: none;
        border-radius: 8px;
    }
    
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('advisorForm');
        const submitBtn = document.getElementById('submitBtn');
        
        // Referencias a los campos y previsualizaciones
        const nameInput = document.getElementById('name');
        const lastNameInput = document.getElementById('last_name');
        const regionInput = document.getElementById('region');
        const commissionInput = document.getElementById('commission_rate');
        const statusInput = document.getElementById('status');
        
        const avatarPreview = document.getElementById('avatarPreview');
        const namePreview = document.getElementById('namePreview');
        const regionPreview = document.getElementById('regionPreview');
        const commissionPreview = document.getElementById('commissionPreview');
        const statusPreview = document.getElementById('statusPreview');
        const estimatedCommission = document.getElementById('estimatedCommission');
        
        // Ventas actuales para cálculo de comisión
        const currentSales = {{ $advisor['total_sales'] ?? 0 }};
        
        // Actualizar vista previa en tiempo real
        function updatePreview() {
            const name = nameInput.value || 'N';
            const lastName = lastNameInput.value || 'N';
            const region = regionInput.value || 'Sin región';
            const commission = parseFloat(commissionInput.value) || 0;
            const status = statusInput.value;
            
            // Actualizar avatar
            avatarPreview.textContent = name.charAt(0).toUpperCase() + lastName.charAt(0).toUpperCase();
            
            // Actualizar nombre
            namePreview.textContent = `${name} ${lastName}`;
            
            // Actualizar región
            regionPreview.textContent = region;
            
            // Actualizar comisión
            commissionPreview.textContent = `${commission.toFixed(1)}%`;
            
            // Actualizar estado
            statusPreview.textContent = status === 'active' ? 'Activo' : 'Inactivo';
            statusPreview.className = `badge bg-${status === 'active' ? 'success' : 'secondary'}`;
            
            // Calcular comisión estimada
            const estimatedAmount = (currentSales * commission) / 100;
            estimatedCommission.textContent = `$${estimatedAmount.toLocaleString()}`;
        }
        
        // Event listeners para actualización en tiempo real
        nameInput.addEventListener('input', updatePreview);
        lastNameInput.addEventListener('input', updatePreview);
        regionInput.addEventListener('change', updatePreview);
        commissionInput.addEventListener('input', updatePreview);
        statusInput.addEventListener('change', updatePreview);
        
        // Formato automático para teléfono
        const phoneInput = document.getElementById('phone');
        phoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            
            if (value.length > 0) {
                if (value.startsWith('54')) {
                    // Formato argentino completo
                    if (value.length <= 4) {
                        value = '+' + value;
                    } else if (value.length <= 6) {
                        value = '+' + value.slice(0, 2) + ' ' + value.slice(2);
                    } else if (value.length <= 10) {
                        value = '+' + value.slice(0, 2) + ' ' + value.slice(2, 4) + ' ' + value.slice(4);
                    } else {
                        value = '+' + value.slice(0, 2) + ' ' + value.slice(2, 4) + ' ' + value.slice(4, 8) + '-' + value.slice(8, 12);
                    }
                } else {
                    // Asumir que necesita el prefijo argentino
                    if (value.length <= 2) {
                        value = '+54 ' + value;
                    } else if (value.length <= 6) {
                        value = '+54 ' + value.slice(0, 2) + ' ' + value.slice(2);
                    } else {
                        value = '+54 ' + value.slice(0, 2) + ' ' + value.slice(2, 6) + '-' + value.slice(6, 10);
                    }
                }
            }
            
            e.target.value = value;
        });
        
        // Formato automático para DNI
        const dniInput = document.getElementById('dni');
        dniInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            
            if (value.length > 2) {
                value = value.slice(0, 2) + '.' + value.slice(2);
            }
            if (value.length > 6) {
                value = value.slice(0, 6) + '.' + value.slice(6);
            }
            
            e.target.value = value.slice(0, 10); // Limitar a formato XX.XXX.XXX
        });
        
        // Validación en tiempo real de la tasa de comisión
        commissionInput.addEventListener('input', function(e) {
            const value = parseFloat(e.target.value);
            
            if (value < 0) {
                e.target.value = 0;
            } else if (value > 100) {
                e.target.value = 100;
            }
            
            updatePreview();
        });
        
        // Envío del formulario con loading
        form.addEventListener('submit', function(e) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Actualizando...';
        });
        
        // Validación de email único (simulada)
        const emailInput = document.getElementById('email');
        let emailTimeout;
        
        emailInput.addEventListener('input', function(e) {
            clearTimeout(emailTimeout);
            const email = e.target.value;
            
            if (email.includes('@')) {
                emailTimeout = setTimeout(() => {
                    // En producción, esto haría una llamada AJAX para verificar unicidad
                    console.log('Verificando disponibilidad del email:', email);
                }, 500);
            }
        });
        
        // Confirmar cambios importantes
        statusInput.addEventListener('change', function(e) {
            const newStatus = e.target.value;
            const currentStatus = '{{ $advisor["status"] }}';
            
            if (newStatus !== currentStatus) {
                const statusText = newStatus === 'active' ? 'activar' : 'desactivar';
                if (!confirm(`¿Estás seguro de que deseas ${statusText} este asesor comercial?`)) {
                    e.target.value = currentStatus;
                    updatePreview();
                }
            }
        });
        
        // Inicializar vista previa
        updatePreview();
    });
</script>
@endpush