@extends('layouts.app')

@section('title', 'Mi Perfil')

@section('breadcrumbs')
    <li class="breadcrumb-item active">Mi Perfil</li>
@endsection

@section('content')
<div class="row">
    <!-- Información del Perfil -->
    <div class="col-lg-4">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-user-circle me-2"></i>
                    Información Personal
                </h5>
            </div>
            <div class="card-body text-center">
                <div class="profile-avatar mb-3">
                    <div class="avatar-circle mx-auto">
                        {{ strtoupper(substr($userData['name'] ?? 'U', 0, 1) . substr($userData['last_name'] ?? 'S', 0, 1)) }}
                    </div>
                </div>
                
                <h4 class="mb-1">{{ ($userData['name'] ?? '') . ' ' . ($userData['last_name'] ?? '') }}</h4>
                <p class="text-muted mb-2">{{ ucfirst($userData['role'] ?? 'Asesor') }} Comercial</p>
                <span class="badge bg-success">{{ ucfirst($userData['status'] ?? 'Activo') }}</span>
                
                <hr class="my-3">
                
                <div class="text-start">
                    <div class="mb-2">
                        <strong><i class="fas fa-envelope me-2"></i>Email:</strong>
                        <span class="text-muted">{{ $userData['email'] ?? 'No disponible' }}</span>
                    </div>
                    <div class="mb-2">
                        <strong><i class="fas fa-user me-2"></i>Usuario:</strong>
                        <span class="text-muted">{{ $userData['username'] ?? 'No disponible' }}</span>
                    </div>
                    <div class="mb-2">
                        <strong><i class="fas fa-map-marker-alt me-2"></i>Región:</strong>
                        <span class="text-muted">{{ $userData['region'] ?? 'No disponible' }}</span>
                    </div>
                    @if(isset($userData['commission_rate']))
                    <div class="mb-2">
                        <strong><i class="fas fa-percentage me-2"></i>Comisión primera venta:</strong>
                        <span class="text-muted">{{ $userData['commission_rate'] }}%</span>
                    </div>
                    @endif
                    @if(isset($userData['passive_commission_rate']))
                    <div class="mb-2">
                        <strong><i class="fas fa-chart-line me-2"></i>Comisión IP:</strong>
                        <span class="text-muted">{{ $userData['passive_commission_rate'] }}%</span>
                    </div>
                    @endif
                    @if(isset($userData['last_login_at']))
                    <div class="mb-2">
                        <strong><i class="fas fa-clock me-2"></i>Último acceso:</strong>
                        <span class="text-muted">{{ date('d/m/Y H:i', strtotime($userData['last_login_at'])) }}</span>
                    </div>
                    @endif
                </div>
                
                <hr class="my-3">
                
                <button type="button" class="btn btn-outline-primary btn-sm w-100" onclick="requestDataChange()">
                    <i class="fas fa-edit me-2"></i>
                    Solicitar Cambios de Datos
                </button>
            </div>
        </div>
    </div>

    <!-- Cambio de Contraseña -->
    <div class="col-lg-8">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-key me-2"></i>
                    Cambiar Contraseña
                </h5>
            </div>
            <div class="card-body">
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <strong>Error:</strong>
                        <ul class="mb-0 mt-2">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <form method="POST" action="{{ route('profile.change-password') }}" id="changePasswordForm">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="current_password" class="form-label">
                                <i class="fas fa-lock me-2"></i>Contraseña Actual
                            </label>
                            <div class="input-group">
                                <input type="password" 
                                       class="form-control @error('current_password') is-invalid @enderror" 
                                       id="current_password" 
                                       name="current_password" 
                                       required
                                       placeholder="Ingresa tu contraseña actual">
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('current_password')">
                                    <i class="fas fa-eye" id="eye-current_password"></i>
                                </button>
                            </div>
                            @error('current_password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="new_password" class="form-label">
                                <i class="fas fa-key me-2"></i>Nueva Contraseña
                            </label>
                            <div class="input-group">
                                <input type="password" 
                                       class="form-control @error('new_password') is-invalid @enderror" 
                                       id="new_password" 
                                       name="new_password" 
                                       required
                                       placeholder="Mínimo 8 caracteres"
                                       minlength="8">
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('new_password')">
                                    <i class="fas fa-eye" id="eye-new_password"></i>
                                </button>
                            </div>
                            <div class="form-text">
                                <small>La contraseña debe tener al menos 8 caracteres.</small>
                            </div>
                            @error('new_password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="new_password_confirmation" class="form-label">
                                <i class="fas fa-check-double me-2"></i>Confirmar Nueva Contraseña
                            </label>
                            <div class="input-group">
                                <input type="password" 
                                       class="form-control" 
                                       id="new_password_confirmation" 
                                       name="new_password_confirmation" 
                                       required
                                       placeholder="Repite la nueva contraseña">
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('new_password_confirmation')">
                                    <i class="fas fa-eye" id="eye-new_password_confirmation"></i>
                                </button>
                            </div>
                            <div class="password-match-feedback" id="password-match-feedback"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <button type="submit" class="btn btn-warning" id="changePasswordBtn">
                                <i class="fas fa-save me-2"></i>
                                Cambiar Contraseña
                            </button>
                            <button type="reset" class="btn btn-outline-secondary ms-2">
                                <i class="fas fa-undo me-2"></i>
                                Limpiar
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Información de Seguridad -->
        <div class="card shadow-sm border-0 mt-4">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="fas fa-shield-alt me-2"></i>
                    Consejos de Seguridad
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-check-circle text-success me-2"></i>Contraseña Segura</h6>
                        <ul class="small text-muted">
                            <li>Al menos 8 caracteres</li>
                            <li>Combina letras y números</li>
                            <li>Incluye símbolos especiales</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-exclamation-triangle text-warning me-2"></i>Nunca Compartas</h6>
                        <ul class="small text-muted">
                            <li>Tu contraseña con nadie</li>
                            <li>Datos de acceso por email</li>
                            <li>Información en sitios no seguros</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.profile-avatar {
    position: relative;
}

.password-match-feedback {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.password-match-feedback.text-success {
    color: #198754 !important;
}

.password-match-feedback.text-danger {
    color: #dc3545 !important;
}

.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}
</style>
@endsection

<script>
// Funciones globales que se llaman desde onclick
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const eye = document.getElementById('eye-' + fieldId);
    
    if (field.type === 'password') {
        field.type = 'text';
        eye.classList.remove('fa-eye');
        eye.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        eye.classList.remove('fa-eye-slash');
        eye.classList.add('fa-eye');
    }
}

function requestDataChange() {
    const userEmail = '{{ $userData["email"] ?? "" }}';
    const userName = '{{ ($userData["name"] ?? "") . " " . ($userData["last_name"] ?? "") }}';
    const userRole = '{{ $userData["role"] ?? "asesor" }}';
    
    const subject = encodeURIComponent('Solicitud de Cambio de Datos de Perfil - ' + userName);
    const body = encodeURIComponent(`Hola equipo de RRHH,

Solicito realizar cambios en mis datos de perfil en el sistema SISCON Backoffice.

Datos actuales:
- Nombre: ${userName}
- Email: ${userEmail}
- Rol: ${userRole}
- Usuario: {{ $userData["username"] ?? "" }}

Cambios solicitados:
[Por favor, describe aquí los cambios que necesitas]

Motivo del cambio:
[Explica brevemente por qué necesitas estos cambios]

Gracias por su atención.

Saludos,
${userName}`);
    
    const mailtoLink = `mailto:rrhh@sisconsystem.online?subject=${subject}&body=${body}`;
    window.location.href = mailtoLink;
}

function checkPasswordMatch() {
    const newPassword = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('new_password_confirmation').value;
    const feedback = document.getElementById('password-match-feedback');
    const submitBtn = document.getElementById('changePasswordBtn');
    
    if (confirmPassword.length > 0) {
        if (newPassword === confirmPassword) {
            feedback.innerHTML = '<i class="fas fa-check me-1"></i>Las contraseñas coinciden';
            feedback.className = 'password-match-feedback text-success';
            submitBtn.disabled = false;
        } else {
            feedback.innerHTML = '<i class="fas fa-times me-1"></i>Las contraseñas no coinciden';
            feedback.className = 'password-match-feedback text-danger';
            submitBtn.disabled = true;
        }
    } else {
        feedback.innerHTML = '';
        feedback.className = 'password-match-feedback';
        submitBtn.disabled = false;
    }
}

// Eventos que se ejecutan cuando el DOM está listo
document.addEventListener('DOMContentLoaded', function() {
    // Validación en tiempo real de coincidencia de contraseñas
    const newPasswordField = document.getElementById('new_password_confirmation');
    const newPasswordField2 = document.getElementById('new_password');
    
    if (newPasswordField) {
        newPasswordField.addEventListener('input', checkPasswordMatch);
    }
    
    if (newPasswordField2) {
        newPasswordField2.addEventListener('input', checkPasswordMatch);
    }
    
    // Reset form
    const resetBtn = document.querySelector('button[type="reset"]');
    if (resetBtn) {
        resetBtn.addEventListener('click', function() {
            const feedback = document.getElementById('password-match-feedback');
            const submitBtn = document.getElementById('changePasswordBtn');
            
            if (feedback) {
                feedback.innerHTML = '';
            }
            if (submitBtn) {
                submitBtn.disabled = false;
            }
        });
    }
});
</script>