@extends('layouts.app')

@section('title', 'Nuevo 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 active">Nuevo Asesor</li>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>
        <i class="fas fa-user-plus"></i> Nuevo Asesor Comercial
    </h2>
    <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 class="row">
    <div class="col-md-8 col-lg-9">
        <form action="{{ route('commercial-advisors.store') }}" method="POST" id="advisorForm" autocomplete="off">
            @csrf
            
            <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 form-control-sm @error('name') is-invalid @enderror" 
                                       id="name" name="name" value="{{ old('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 form-control-sm @error('last_name') is-invalid @enderror" 
                                       id="last_name" name="last_name" value="{{ old('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 form-control-sm @error('email') is-invalid @enderror" 
                                       id="email" name="email" value="{{ old('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 form-control-sm @error('phone') is-invalid @enderror" 
                                       id="phone" name="phone" value="{{ old('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 form-control-sm @error('dni') is-invalid @enderror" 
                                       id="dni" name="dni" value="{{ old('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 form-select-sm @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') === $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 form-control-sm @error('address') is-invalid @enderror" 
                                  id="address" name="address" rows="2" placeholder="Dirección completa...">{{ old('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-key"></i> Información de Acceso
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Credenciales de Acceso al Sistema:</strong>
                        <p class="mb-0 mt-2">Estas credenciales permitirán al asesor acceder al backoffice con permisos limitados.</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="username" class="form-label">Nombre de Usuario <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control @error('username') is-invalid @enderror" 
                                           id="username" name="username" value="{{ old('username') }}" required
                                           placeholder="usuario.asesor" pattern="[a-zA-Z0-9._\-]+" 
                                           title="Solo letras, números, puntos, guiones y guiones bajos"
                                           autocomplete="off" autocapitalize="none" spellcheck="false">
                                    <button class="btn btn-outline-secondary" type="button" id="regenerateUsername" title="Regenerar username">
                                        <i class="fas fa-sync-alt"></i>
                                    </button>
                                </div>
                                <small class="form-text text-muted">Solo letras, números, puntos (.) guiones (-) y guiones bajos (_)</small>
                                @error('username')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password" class="form-label">Contraseña <span class="text-danger">*</span></label>
                                <div class="input-group input-group-sm">
                                    <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                           id="password" name="password" required
                                           placeholder="Contraseña segura" minlength="8"
                                           autocomplete="new-password">
                                    <button class="btn btn-outline-secondary" type="button" id="generatePassword" title="Generar contraseña aleatoria">
                                        <i class="fas fa-dice"></i>
                                    </button>
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword" title="Mostrar contraseñas">
                                        <i class="fas fa-eye" id="togglePasswordIcon"></i>
                                    </button>
                                </div>
                                <div class="password-strength mt-1" id="passwordStrength" style="display: none;">
                                    <div class="progress" style="height: 4px;">
                                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                                    </div>
                                    <small class="text-muted" id="passwordStrengthText"></small>
                                </div>
                                <small class="form-text text-muted">Mínimo 8 caracteres. Se recomienda usar mayúsculas, minúsculas, números y símbolos</small>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password_confirmation" class="form-label">Confirmar Contraseña <span class="text-danger">*</span></label>
                                <input type="password" class="form-control form-control-sm @error('password_confirmation') is-invalid @enderror" 
                                       id="password_confirmation" name="password_confirmation" required
                                       placeholder="Repetir contraseña" minlength="8"
                                       autocomplete="new-password">
                                <small class="form-text text-muted">Debe coincidir con la contraseña anterior</small>
                                @error('password_confirmation')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" id="send_credentials" name="send_credentials" value="1" {{ old('send_credentials', '1') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="send_credentials">
                                        <i class="fas fa-envelope"></i> Enviar credenciales por email
                                    </label>
                                    <small class="form-text text-muted d-block">Se enviará un email con las credenciales de acceso al asesor</small>
                                </div>
                            </div>
                        </div>
                    </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-6">
                            <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-group-sm">
                                    <input type="number" class="form-control form-control-sm @error('commission_rate') is-invalid @enderror" 
                                           id="commission_rate" name="commission_rate" value="{{ old('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-6">
                            <div class="mb-3">
                                <label for="passive_commission_rate" class="form-label">Comisión Ingreso Pasivo (%)</label>
                                <div class="input-group input-group-sm">
                                    <input type="number" class="form-control form-control-sm @error('passive_commission_rate') is-invalid @enderror" 
                                           id="passive_commission_rate" name="passive_commission_rate" value="{{ old('passive_commission_rate') }}" 
                                           step="0.1" min="0" max="100" placeholder="10">
                                    <span class="input-group-text">%</span>
                                </div>
                                <small class="form-text text-muted">Ganancia por cada pago mensual posterior del cliente</small>
                                @error('passive_commission_rate')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="payment_period" class="form-label">Período de Pago</label>
                                <select class="form-select form-select-sm @error('payment_period') is-invalid @enderror" id="payment_period" name="payment_period">
                                    <option value="">Seleccionar período...</option>
                                    <option value="daily" {{ old('payment_period') === 'daily' ? 'selected' : '' }}>Diario</option>
                                    <option value="weekly" {{ old('payment_period') === 'weekly' ? 'selected' : '' }}>Semanal</option>
                                    <option value="biweekly" {{ old('payment_period') === 'biweekly' ? 'selected' : '' }}>Quincenal</option>
                                    <option value="monthly" {{ old('payment_period', 'monthly') === 'monthly' ? 'selected' : '' }}>Mensual</option>
                                </select>
                                <small class="form-text text-muted">Frecuencia de pago de comisiones al asesor</small>
                                @error('payment_period')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status" class="form-label">Estado Inicial</label>
                                <select class="form-select form-select-sm" id="status" name="status">
                                    <option value="active" {{ old('status', 'active') === 'active' ? 'selected' : '' }}>Activo</option>
                                    <option value="inactive" {{ old('status') === 'inactive' ? 'selected' : '' }}>Inactivo</option>
                                </select>
                                <small class="form-text text-muted">El asesor puede activarse/desactivarse posteriormente</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="notes" class="form-label">Notas Adicionales</label>
                        <textarea class="form-control form-control-sm @error('notes') is-invalid @enderror" 
                                  id="notes" name="notes" rows="3" 
                                  placeholder="Observaciones, especialidades, historial previo, etc...">{{ old('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.index') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-times"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-primary" id="submitBtn">
                    <i class="fas fa-save"></i> Crear Asesor Comercial
                </button>
            </div>
        </form>
    </div>
    
    <div class="col-md-4 col-lg-3">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-info-circle"></i> Información
                </h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fas fa-lightbulb"></i>
                    <strong>Consejos:</strong>
                    <ul class="mb-0 mt-2">
                        <li>El email debe ser único en el sistema</li>
                        <li>La tasa de comisión típica está entre 10% y 20%</li>
                        <li>La comisión pasiva suele ser entre 5% y 15%</li>
                        <li>El período mensual es el más común</li>
                        <li>El username debe ser único</li>
                        <li>Use contraseñas seguras (8+ caracteres)</li>
                        <li>Asigna la región donde el asesor tendrá mayor actividad</li>
                        <li>Puedes cambiar el estado posteriormente</li>
                    </ul>
                </div>
                
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Importante:</strong>
                    <p class="mb-0">Una vez creado el asesor, se le notificará por email con sus credenciales de acceso.</p>
                </div>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-map-marker-alt"></i> Regiones Disponibles
                </h6>
            </div>
            <div class="card-body">
                <small class="text-muted">
                    Las regiones ayudan a organizar territorialmente a los asesores comerciales:
                </small>
                <ul class="list-unstyled mt-2">
                    @foreach($regions as $region)
                        <li><small><i class="fas fa-map-pin text-muted"></i> {{ $region }}</small></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Modal para mostrar credenciales del asesor creado -->
<div class="modal fade" id="credentialsModal" tabindex="-1" aria-labelledby="credentialsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="credentialsModalLabel">
                    <i class="fas fa-check-circle"></i> Asesor Comercial Creado Exitosamente
                </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">
                    <div class="col-md-6">
                        <div class="alert alert-success">
                            <h6><i class="fas fa-user-check"></i> Información del Asesor</h6>
                            <strong>Nombre:</strong> <span id="advisorFullName"></span><br>
                            <strong>Email:</strong> <span id="advisorEmail"></span><br>
                            <strong>Teléfono:</strong> <span id="advisorPhone"></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="alert alert-info">
                            <h6><i class="fas fa-key"></i> Credenciales de Acceso</h6>
                            <strong>Usuario:</strong> <span id="advisorUsername"></span><br>
                            <strong>Contraseña:</strong> <span id="advisorPassword"></span><br>
                            <small class="text-muted">Estas credenciales permiten acceso al sistema</small>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Importante:</strong> Comparte estas credenciales de forma segura con el asesor. 
                    Se recomienda cambiar la contraseña en el primer acceso.
                </div>
                
                <div class="row">
                    <div class="col-md-12">
                        <h6><i class="fas fa-share-alt"></i> Compartir Credenciales</h6>
                        <div class="input-group mb-3">
                            <textarea class="form-control" id="credentialsText" readonly rows="12" placeholder="Texto de credenciales para compartir"></textarea>
                            <button class="btn btn-outline-secondary" type="button" id="copyCredentials" title="Copiar al portapapeles">
                                <i class="fas fa-copy"></i> Copiar
                            </button>
                        </div>
                        
                        <div class="d-flex gap-2 flex-wrap">
                            <button type="button" class="btn btn-success btn-sm" id="shareWhatsApp">
                                <i class="fab fa-whatsapp"></i> Compartir por WhatsApp
                            </button>
                            <button type="button" class="btn btn-primary btn-sm" id="shareEmail">
                                <i class="fas fa-envelope"></i> Enviar por Email
                            </button>
                            <button type="button" class="btn btn-info btn-sm" id="printCredentials">
                                <i class="fas fa-print"></i> Imprimir
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" onclick="window.location.href='{{ route('commercial-advisors.index') }}'">
                    <i class="fas fa-list"></i> Ir a Lista de Asesores
                </button>
                <button type="button" class="btn btn-primary" onclick="window.location.reload()">
                    <i class="fas fa-plus"></i> Crear Otro Asesor
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cerrar (volver a lista)
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    /* Reset para asegurar uniformidad */
    .form-control,
    .form-control-sm,
    .form-select,
    .form-select-sm {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    /* Tamaño uniforme para todos los inputs pequeños */
    .form-control-sm,
    .form-select-sm,
    .input-group-sm .form-control,
    .input-group-sm .input-group-text {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.375rem;
        height: calc(1.5em + 0.75rem + 2px);
    }
    
    /* Focus uniforme */
    .form-control:focus,
    .form-control-sm:focus,
    .form-select:focus,
    .form-select-sm:focus,
    .input-group-sm .form-control:focus {
        border-color: #28a745;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }
    
    /* Input groups uniformes */
    .input-group-sm {
        display: flex;
        align-items: stretch;
    }
    
    .input-group-sm .input-group-text {
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        color: #495057;
        display: flex;
        align-items: center;
        font-weight: 400;
        white-space: nowrap;
    }
    
    /* Labels uniformes */
    .form-label {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.375rem;
        color: #495057;
        display: block;
    }
    
    /* Texto de ayuda uniforme */
    .form-text {
        font-size: 0.75rem;
        margin-top: 0.25rem;
        color: #6c757d;
        line-height: 1.4;
    }
    
    /* Espaciado consistente */
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .row {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
    
    .row > * {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Cards uniformes */
    .card {
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 0.75rem 1.25rem;
        border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
    }
    
    .card-header h5 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: #495057;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    /* Botones uniformes */
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        line-height: 1.5;
        font-weight: 500;
    }
    
    /* Alertas mejoradas */
    .alert {
        border: none;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
    
    .alert-info {
        background-color: #e7f3ff;
        color: #0c5460;
    }
    
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
    }
    
    /* Iconos uniformes */
    .fas, .far {
        margin-right: 0.5rem;
    }
    
    /* Textarea específico */
    textarea.form-control-sm {
        min-height: calc(1.5em + 0.75rem + 2px);
        resize: vertical;
    }
    
    /* Validación uniforme */
    .invalid-feedback {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }
    
    /* Placeholder uniforme */
    .form-control-sm::placeholder,
    .form-select-sm::placeholder {
        color: #6c757d;
        opacity: 0.7;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('advisorForm');
        const submitBtn = document.getElementById('submitBtn');
        
        // 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
        const commissionInput = document.getElementById('commission_rate');
        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;
            }
        });
        
        // Validación en tiempo real de la comisión pasiva
        const passiveCommissionInput = document.getElementById('passive_commission_rate');
        passiveCommissionInput.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;
            }
        });
        
        // Toggle password visibility
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        const passwordConfirmationInput = document.getElementById('password_confirmation');
        const togglePasswordIcon = document.getElementById('togglePasswordIcon');
        
        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            
            // Cambiar tipo en ambos campos de contraseña
            passwordInput.setAttribute('type', type);
            passwordConfirmationInput.setAttribute('type', type);
            
            // Toggle icon
            if (type === 'text') {
                togglePasswordIcon.classList.remove('fa-eye');
                togglePasswordIcon.classList.add('fa-eye-slash');
                togglePassword.setAttribute('title', 'Ocultar contraseñas');
            } else {
                togglePasswordIcon.classList.remove('fa-eye-slash');
                togglePasswordIcon.classList.add('fa-eye');
                togglePassword.setAttribute('title', 'Mostrar contraseñas');
            }
        });
        
        // Validación de username en tiempo real
        const usernameInput = document.getElementById('username');
        usernameInput.addEventListener('input', function(e) {
            let value = e.target.value;
            
            // Marcar que el usuario ha modificado el campo manualmente
            if (e.isTrusted) {
                usernameInput.dataset.userModified = 'true';
            }
            
            // Remover caracteres no válidos
            value = value.replace(/[^a-zA-Z0-9._-]/g, '');
            
            // Actualizar el valor
            e.target.value = value;
            
            // Validación de longitud mínima
            if (value.length < 3) {
                e.target.setCustomValidity('El nombre de usuario debe tener al menos 3 caracteres');
            } else {
                e.target.setCustomValidity('');
            }
        });
        
        // Validación de confirmación de contraseña
        function validatePasswordMatch() {
            const password = passwordInput.value;
            const confirmation = passwordConfirmationInput.value;
            
            if (confirmation && password !== confirmation) {
                passwordConfirmationInput.setCustomValidity('Las contraseñas no coinciden');
                passwordConfirmationInput.classList.add('is-invalid');
            } else {
                passwordConfirmationInput.setCustomValidity('');
                passwordConfirmationInput.classList.remove('is-invalid');
            }
        }
        
        passwordInput.addEventListener('input', validatePasswordMatch);
        passwordConfirmationInput.addEventListener('input', validatePasswordMatch);
        
        // Generación automática de username basado en nombre y apellido
        const nameInput = document.getElementById('name');
        const lastNameInput = document.getElementById('last_name');
        
        function generateUsername() {
            const name = nameInput.value.trim();
            const lastName = lastNameInput.value.trim();
            
            console.log('generateUsername called', { name, lastName, currentUsername: usernameInput.value });
            
            // Solo generar si ambos campos tienen contenido
            if (name && lastName) {
                // Tomar primera letra de cada nombre + apellido completo
                const nameWords = name.toLowerCase().split(/\s+/);
                const lastNameProcessed = lastName.toLowerCase();
                
                // Obtener primera letra de cada palabra del nombre
                const nameInitials = nameWords.map(word => word.charAt(0)).join('');
                
                // Generar username: iniciales + apellido
                let username = nameInitials + lastNameProcessed;
                
                // Reemplazar ñ por n y otros caracteres especiales
                username = username
                    .replace(/ñ/g, 'n')
                    .replace(/á/g, 'a')
                    .replace(/é/g, 'e')
                    .replace(/í/g, 'i')
                    .replace(/ó/g, 'o')
                    .replace(/ú/g, 'u')
                    .replace(/ü/g, 'u');
                
                // Remover caracteres no válidos
                username = username.replace(/[^a-zA-Z0-9._-]/g, '');
                
                // Limitar longitud
                if (username.length > 20) {
                    username = username.substring(0, 20);
                }
                
                console.log('Generated username:', username);
                
                // Solo actualizar si el campo está vacío o el usuario no ha modificado manualmente
                if (!usernameInput.value || !usernameInput.dataset.userModified) {
                    usernameInput.value = username;
                    usernameInput.dispatchEvent(new Event('input'));
                }
            }
        }
        
        // Función para generar contraseña aleatoria
        function generateRandomPassword() {
            const lowercase = 'abcdefghijklmnopqrstuvwxyz';
            const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            const numbers = '0123456789';
            const symbols = '!@#$%&*+-=?';
            
            // Longitud de la contraseña (entre 12 y 16 caracteres)
            const length = 12 + Math.floor(Math.random() * 5);
            
            let password = '';
            
            // Garantizar al menos un carácter de cada tipo
            password += lowercase[Math.floor(Math.random() * lowercase.length)];
            password += uppercase[Math.floor(Math.random() * uppercase.length)];
            password += numbers[Math.floor(Math.random() * numbers.length)];
            password += symbols[Math.floor(Math.random() * symbols.length)];
            
            // Completar el resto de la contraseña
            const allChars = lowercase + uppercase + numbers + symbols;
            for (let i = password.length; i < length; i++) {
                password += allChars[Math.floor(Math.random() * allChars.length)];
            }
            
            // Mezclar los caracteres para que no sigan un patrón
            return password.split('').sort(() => Math.random() - 0.5).join('');
        }
        
        // Event listeners para generación automática de username
        nameInput.addEventListener('blur', generateUsername);
        lastNameInput.addEventListener('blur', generateUsername);
        
        // Botón para regenerar username manualmente
        const regenerateUsernameBtn = document.getElementById('regenerateUsername');
        regenerateUsernameBtn.addEventListener('click', function() {
            console.log('Regenerate button clicked');
            // Limpiar la marca de modificación manual
            delete usernameInput.dataset.userModified;
            // Forzar regeneración
            generateUsername();
        });
        
        // Botón para generar contraseña aleatoria
        const generatePasswordBtn = document.getElementById('generatePassword');
        generatePasswordBtn.addEventListener('click', function() {
            const newPassword = generateRandomPassword();
            passwordInput.value = newPassword;
            passwordConfirmationInput.value = newPassword; // Usar la variable correcta
            
            // Mostrar temporalmente la contraseña generada
            const originalType = passwordInput.type;
            const originalIcon = document.getElementById('togglePasswordIcon').className;
            
            passwordInput.type = 'text';
            document.getElementById('togglePasswordIcon').className = 'fas fa-eye-slash';
            
            // Disparar evento para validar fortaleza
            passwordInput.dispatchEvent(new Event('input'));
            
            // Volver a ocultar después de 3 segundos
            setTimeout(() => {
                passwordInput.type = originalType;
                document.getElementById('togglePasswordIcon').className = originalIcon;
            }, 3000);
            
            console.log('Password generated');
        });
        
        // Debug: verificar que los elementos existen
        console.log('Elements found:', {
            nameInput: !!nameInput,
            lastNameInput: !!lastNameInput,
            usernameInput: !!usernameInput,
            regenerateBtn: !!regenerateUsernameBtn,
            generatePasswordBtn: !!generatePasswordBtn
        });
        
        // Validación de fortaleza de contraseña
        const passwordStrengthDiv = document.getElementById('passwordStrength');
        const passwordStrengthBar = passwordStrengthDiv.querySelector('.progress-bar');
        const passwordStrengthText = document.getElementById('passwordStrengthText');
        
        passwordInput.addEventListener('input', function(e) {
            const password = e.target.value;
            
            if (password.length > 0) {
                const strength = calculatePasswordStrength(password);
                updatePasswordStrengthIndicator(strength, password.length);
                passwordStrengthDiv.style.display = 'block';
            } else {
                passwordStrengthDiv.style.display = 'none';
            }
        });
        
        function calculatePasswordStrength(password) {
            let strength = 0;
            
            if (password.length >= 8) strength++;
            if (password.match(/[a-z]/)) strength++;
            if (password.match(/[A-Z]/)) strength++;
            if (password.match(/[0-9]/)) strength++;
            if (password.match(/[^a-zA-Z0-9]/)) strength++;
            
            return strength;
        }
        
        function updatePasswordStrengthIndicator(strength, length) {
            const percentage = (strength / 5) * 100;
            let color, text;
            
            if (length < 8) {
                color = 'bg-danger';
                text = 'Muy débil (mínimo 8 caracteres)';
            } else if (strength <= 2) {
                color = 'bg-danger';
                text = 'Débil';
            } else if (strength <= 3) {
                color = 'bg-warning';
                text = 'Regular';
            } else if (strength <= 4) {
                color = 'bg-info';
                text = 'Buena';
            } else {
                color = 'bg-success';
                text = 'Muy fuerte';
            }
            
            passwordStrengthBar.className = `progress-bar ${color}`;
            passwordStrengthBar.style.width = `${percentage}%`;
            passwordStrengthText.textContent = text;
        }
        
        // Envío del formulario con loading
        form.addEventListener('submit', function(e) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creando...';
        });
        
        // 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);
            }
        });
        
        // Funciones para el modal de credenciales
        function showCredentialsModal(advisorData) {
            // Llenar los datos del asesor
            document.getElementById('advisorFullName').textContent = advisorData.name + ' ' + advisorData.lastName;
            document.getElementById('advisorEmail').textContent = advisorData.email;
            document.getElementById('advisorPhone').textContent = advisorData.phone;
            document.getElementById('advisorUsername').textContent = advisorData.username;
            document.getElementById('advisorPassword').textContent = advisorData.password;
            
            // Generar texto para compartir
            const credentialsText =
                "CREDENCIALES DE ACCESO - SISCON BACKOFFICE\n\n" +
                `ASESOR: ${advisorData.name} ${advisorData.lastName}\n` +
                `EMAIL: ${advisorData.email}\n` +
                `TELEFONO: ${advisorData.phone}\n\n` +
                "DATOS DE ACCESO:\n" +
                `Usuario: ${advisorData.username}\n` +
                `Contraseña: ${advisorData.password}\n\n` +
                `URL de acceso: ${window.location.origin}/login\n\n` +
                "IMPORTANTE:\n" +
                "Cambia tu contraseña en el primer acceso\n" +
                "Mantén estas credenciales seguras\n" +
                "Contacta al administrador ante cualquier problema\n\n" +
                "¡Bienvenido al equipo!";

            document.getElementById('credentialsText').value = credentialsText;

            // Mostrar el modal
            const modal = new bootstrap.Modal(document.getElementById('credentialsModal'));
            modal.show();
        }
        
        // Event listeners para los botones del modal
        document.getElementById('copyCredentials').addEventListener('click', function() {
            const credentialsText = document.getElementById('credentialsText');
            credentialsText.select();
            document.execCommand('copy');
            
            // Feedback visual
            this.innerHTML = '<i class="fas fa-check"></i> Copiado';
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-copy"></i> Copiar';
            }, 2000);
        });
        
        document.getElementById('shareWhatsApp').addEventListener('click', function() {
            const text = encodeURIComponent(document.getElementById('credentialsText').value);
            const url = `https://wa.me/?text=${text}`;
            window.open(url, '_blank');
        });
        
        document.getElementById('shareEmail').addEventListener('click', function() {
            const subject = encodeURIComponent('Credenciales de Acceso - SISCON Backoffice');
            const body = encodeURIComponent(document.getElementById('credentialsText').value);
            const url = `mailto:?subject=${subject}&body=${body}`;
            window.location.href = url;
        });
        
        document.getElementById('printCredentials').addEventListener('click', function() {
            const printContent = document.getElementById('credentialsText').value;
            const printWindow = window.open('', '_blank');
            printWindow.document.write(`
                <html>
                    <head>
                        <title>Credenciales de Acceso</title>
                        <style>
                            body { font-family: monospace; white-space: pre-wrap; padding: 20px; }
                        </style>
                    </head>
                    <body>${printContent}</body>
                </html>
            `);
            printWindow.document.close();
            printWindow.print();
        });
        
        // Interceptar el envío del formulario para enviarlo por AJAX y mostrar el modal
        document.getElementById('advisorForm').addEventListener('submit', function(e) {
            e.preventDefault(); // Prevenir envío normal del formulario
            console.log('Form submission intercepted');
            
            const form = this;
            const formData = new FormData(form);
            const submitBtn = document.getElementById('submitBtn');
            
            // Deshabilitar botón y mostrar loading
            const originalBtnText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creando...';
            
            // Limpiar errores previos
            document.querySelectorAll('.is-invalid').forEach(el => {
                el.classList.remove('is-invalid');
            });
            document.querySelectorAll('.invalid-feedback').forEach(el => {
                el.style.display = 'none';
            });
            
            console.log('Sending request to:', form.action);
            
            // Enviar por AJAX
            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                }
            })
            .then(response => {
                console.log('Response status:', response.status);
                console.log('Response headers:', response.headers);
                
                // Siempre intentar parsear el JSON, incluso si no es ok
                return response.json().then(data => {
                    // Agregar el status a los datos para poder verificarlo después
                    data._httpStatus = response.status;
                    return data;
                });
            })
            .then(data => {
                console.log('Server response:', data); // Debug
                
                if (data.success) {
                    console.log('Success! Showing modal with advisor data:', data.advisor);
                    // Mostrar modal con credenciales
                    showCredentialsModal(data.advisor);
                    
                    // Agregar event listener para redireccionar cuando se cierre el modal
                    const modal = document.getElementById('credentialsModal');
                    modal.addEventListener('hidden.bs.modal', function() {
                        console.log('Modal closed, redirecting to advisors list');
                        // Redireccionar a la lista de asesores
                        window.location.href = "{{ route('commercial-advisors.index') }}";
                    }, { once: true }); // Solo se ejecuta una vez
                    
                } else {
                    console.log('Server returned error:', data);
                    // Mostrar errores
                    if (data.errors) {
                        for (const [field, messages] of Object.entries(data.errors)) {
                            const input = document.getElementById(field);
                            if (input) {
                                input.classList.add('is-invalid');
                                const feedback = input.parentNode.querySelector('.invalid-feedback');
                                if (feedback) {
                                    feedback.textContent = messages[0];
                                    feedback.style.display = 'block';
                                }
                            }
                        }
                    } else {
                        alert('Error: ' + (data.message || 'Error desconocido'));
                    }
                    
                    // Restaurar botón en caso de error
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;
                }
            })
            .catch(error => {
                console.error('Fetch error:', error);
                alert('Error al conectar con el servidor. Por favor, intenta nuevamente.');
                
                // Restaurar botón en caso de error
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalBtnText;
            });
        });
    });
</script>

@if(session('show_credentials_modal') && session('advisor_data'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        showCredentialsModal(@json(session('advisor_data')));
    });
</script>
@endif
@endpush