@extends('layouts.master')

@push('css')
<style>
/* Estilos globales para eliminar cualquier fondo blanco */
body, html {
    background-color: #091435;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.app-container {
    background-color: #091435;
    min-height: 100vh;
    width: 100%;
}

.main-content {
    background-color: #091435;
    width: 100%;
}

/* Estilos para la sección de contraseña */
.password-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.password-header {
    background-color: #FF3600;
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    font-size: 20px;
    font-weight: 600;
}

.password-content {
    background-color: #0c1a43;
    border-radius: 0 0 8px 8px;
    padding: 25px;
}

.info-box {
    background-color: #122252;
    border-left: 4px solid #FF3600;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 0 6px 6px 0;
}

.info-box-title {
    color: white;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 16px;
}

.info-box-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-box-list li {
    color: #d1d7e5;
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
}

.info-box-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FF3600;
}

.form-group {
    margin-bottom: 22px;
}

.form-label {
    display: block;
    color: white;
    margin-bottom: 8px;
    font-weight: 500;
}

/* Mejora en los estilos de los inputs */
.form-control {
    background-color: #1a2b5d;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 12px 15px;
    border-radius: 6px;
    width: 100%;
    transition: all 0.3s ease;
    font-size: 16px;
}

.form-control:hover {
    background-color: #1a2b5d !important;
    border-color: rgba(255, 255, 255, 0.25);
    color: white !important;
}

.form-control:focus {
    background-color: #1e3063 !important;
    border-color: #FF3600;
    box-shadow: 0 0 0 3px rgba(255, 54, 0, 0.2);
    outline: none;
    color: white !important;
}

/* Prevenir que Bootstrap o el navegador aplique sus propios estilos en hover */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #1a2b5d inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

.password-strength {
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}

.password-strength-meter {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

.strength-weak {
    background-color: #dc3545;
    width: 25%;
}

.strength-medium {
    background-color: #ffc107;
    width: 50%;
}

.strength-good {
    background-color: #28a745;
    width: 75%;
}

.strength-strong {
    background-color: #20c997;
    width: 100%;
}

.password-feedback {
    margin-top: 8px;
    font-size: 13px;
}

.input-group {
    position: relative;
}

.input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 10;
}

.input-icon:hover {
    color: white;
}

.update-btn {
    background-color: #FF3600;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    display: block;
    text-align: center;
    margin-top: 10px;
}

.update-btn:hover {
    background-color: #e62f00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 54, 0, 0.3);
}

/* Asegurarse de que no haya caja blanca alrededor */
#app {
    background-color: #091435;
}

.main-wrapper {
    background-color: #091435;
}

/* Eliminando cualquier elemento que pueda tener fondo blanco */
.container-fluid, .container, .row, .col, .col-sm, .col-md, .col-lg, .col-xl {
    background-color: #091435;
}
</style>
@endpush

@section('content')
<div class="app-container">
    <div class="main-content">
        <div class="password-container">
            <div class="password-header">
                Cambiar Contraseña
            </div>
            
            <div class="password-content">
                <div class="info-box">
                    <h4 class="info-box-title">Para crear una contraseña segura tenga en cuenta:</h4>
                    <ul class="info-box-list">
                        <li>Use al menos 8 caracteres</li>
                        <li>Incluya mayúsculas y minúsculas</li>
                        <li>Use números y caracteres especiales</li>
                        <li>Evite información personal o palabras comunes</li>
                    </ul>
                </div>
                
                <form action="{{ route('user.password.update') }}" method="POST">
                    @csrf
                    
                    <div class="form-group">
                        <label for="current_password" class="form-label">Contraseña Actual</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="current_password" name="current_password" required>
                            <span class="input-icon toggle-password" data-target="current_password">
                                <i class="ti ti-eye"></i>
                            </span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="password" class="form-label">Nueva Contraseña</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="password" name="password" required>
                            <span class="input-icon toggle-password" data-target="password">
                                <i class="ti ti-eye"></i>
                            </span>
                        </div>
                        
                        <div class="password-strength">
                            <div class="password-strength-meter" id="password-strength-meter"></div>
                        </div>
                        <div class="password-feedback" id="password-feedback"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="password_confirmation" class="form-label">Confirmar Nueva Contraseña</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" required>
                            <span class="input-icon toggle-password" data-target="password_confirmation">
                                <i class="ti ti-eye"></i>
                            </span>
                        </div>
                    </div>
                    
                    <button type="submit" class="update-btn">Actualizar Contraseña</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Forzar color de fondo azul en todo el documento
        document.querySelectorAll('*').forEach(function(node) {
            const computedStyle = window.getComputedStyle(node);
            if (computedStyle.backgroundColor === 'rgb(255, 255, 255)' || 
                computedStyle.backgroundColor === '#ffffff' || 
                computedStyle.backgroundColor === 'white') {
                node.style.backgroundColor = '#091435';
            }
        });
        
        // Medidor de fortaleza de contraseña
        const passwordInput = document.getElementById('password');
        const strengthMeter = document.getElementById('password-strength-meter');
        const feedback = document.getElementById('password-feedback');
        
        passwordInput.addEventListener('input', function() {
            const password = passwordInput.value;
            const strength = calculatePasswordStrength(password);
            
            // Eliminar clases anteriores
            strengthMeter.classList.remove('strength-weak', 'strength-medium', 'strength-good', 'strength-strong');
            
            // Establecer la clase y mensaje según la fortaleza
            if (password.length === 0) {
                strengthMeter.style.width = '0%';
                feedback.textContent = '';
            } else if (strength < 30) {
                strengthMeter.classList.add('strength-weak');
                feedback.textContent = 'Débil: La contraseña es muy fácil de adivinar.';
                feedback.style.color = '#dc3545';
            } else if (strength < 60) {
                strengthMeter.classList.add('strength-medium');
                feedback.textContent = 'Regular: La contraseña podría ser más segura.';
                feedback.style.color = '#ffc107';
            } else if (strength < 80) {
                strengthMeter.classList.add('strength-good');
                feedback.textContent = 'Buena: La contraseña es segura.';
                feedback.style.color = '#28a745';
            } else {
                strengthMeter.classList.add('strength-strong');
                feedback.textContent = 'Excelente: La contraseña es muy segura.';
                feedback.style.color = '#20c997';
            }
        });
        
        // Función para calcular la fortaleza de la contraseña
        function calculatePasswordStrength(password) {
            let strength = 0;
            
            // Longitud mínima de 8 caracteres
            if (password.length >= 8) {
                strength += 25;
            }
            
            // Contiene letras minúsculas
            if (/[a-z]/.test(password)) {
                strength += 15;
            }
            
            // Contiene letras mayúsculas
            if (/[A-Z]/.test(password)) {
                strength += 15;
            }
            
            // Contiene números
            if (/[0-9]/.test(password)) {
                strength += 15;
            }
            
            // Contiene caracteres especiales
            if (/[^A-Za-z0-9]/.test(password)) {
                strength += 20;
            }
            
            // Variedad de caracteres
            const uniqueChars = new Set(password.split('')).size;
            strength += Math.min(uniqueChars / password.length * 10, 10);
            
            return strength;
        }
        
        // Toggle para mostrar/ocultar contraseña
        const toggleButtons = document.querySelectorAll('.toggle-password');
        
        toggleButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const passwordField = document.getElementById(targetId);
                const icon = this.querySelector('i');
                
                if (passwordField.type === 'password') {
                    passwordField.type = 'text';
                    icon.classList.remove('ti-eye');
                    icon.classList.add('ti-eye-off');
                } else {
                    passwordField.type = 'password';
                    icon.classList.remove('ti-eye-off');
                    icon.classList.add('ti-eye');
                }
            });
        });
        
        // Código adicional para asegurar que los inputs mantengan su color
        document.querySelectorAll('.form-control').forEach(input => {
            input.addEventListener('mouseover', function() {
                this.style.backgroundColor = '#1a2b5d';
                this.style.color = 'white';
            });
            
            input.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '#1a2b5d';
                this.style.color = 'white';
            });
        });
    });
</script>
@endpush