<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php include 'configs.php'; echo $nombre_pagina; ?> - Recuperar Contraseña</title>
    
    <!-- Estilos CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
    <link href="https://fonts.googleapis.com/css2?family=Modern+Antiqua&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --jade: #38b2ac;
            --jade-light: #4fd1cc;
            --jade-dark: #2c8a86;
            --bg-dark: #0a0a12;
        }
        
        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Modern Antiqua', serif;
            background-color: black;
            color: #e5e5e5;
            min-height: 100vh;
            position: relative;
        }
        
        /* Imagen de fondo */
        .bg-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* Cabecera */
        header {
            padding: 1rem;
            background-color: rgba(0, 0, 0, 0.7);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            width: 100%;
            z-index: 10;
        }
        
        /* Controles de cabecera */
        .header-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }
        
        /* Botón de volver */
        .back-button {
            display: flex;
            align-items: center;
            color: #fff;
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s;
        }
        
        .back-button:hover {
            color: var(--jade-light);
        }
        
        .back-button i {
            margin-right: 0.5rem;
        }
        
        /* Selector de idioma */
        .language-selector {
            display: flex;
            gap: 0.5rem;
        }
        
        /* Botón de idioma */
        .language-button {
            background: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            padding: 0.3rem 0.8rem;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .language-button:hover {
            border-color: var(--jade);
        }
        
        .language-button.active {
            background-color: var(--jade);
            border-color: var(--jade);
        }
        
        /* Contenido principal */
        .main-content {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 2rem;
            position: relative;
            background: rgba(0, 0, 0, 0.7);
        }
        
        /* Contenedor de formulario */
        .form-container {
            background: rgba(23, 25, 35, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
        }
        
        /* Logo */
        .logo-container {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .logo {
            width: 150px;
            height: auto;
            margin-bottom: 1rem;
        }
        
        /* Título de formulario */
        .form-title {
            color: var(--jade);
            font-size: 2rem;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }
        
        /* Descripción de formulario */
        .form-description {
            color: #a0aec0;
            margin-bottom: 2rem;
        }
        
        /* Grupo de formulario */
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        /* Etiqueta de formulario */
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            color: #e2e8f0;
        }
        
        /* Control de formulario */
        .form-control {
            width: 100%;
            padding: 0.75rem;
            background-color: rgba(23, 25, 35, 0.5);
            border: 1px solid rgba(75, 85, 99, 0.5);
            border-radius: 6px;
            color: #fff;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--jade);
            box-shadow: 0 0 0 2px rgba(56, 178, 172, 0.3);
        }
        
        /* Botón de envío */
        .btn-primary {
            width: 100%;
            padding: 0.75rem;
            background-color: var(--jade);
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            background-color: var(--jade-light);
        }
        
        .btn-primary:active {
            background-color: var(--jade-dark);
        }
        
        /* Enlace de recuperación */
        .recovery-link-container {
            text-align: center;
            margin-top: 1.5rem;
        }
        
        .recovery-link {
            color: var(--jade);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s;
        }
        
        .recovery-link:hover {
            color: var(--jade-light);
        }
        
        /* Pie de página */
        footer {
            padding: 1rem;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.7);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            width: 100%;
            z-index: 10;
        }

        footer p {
            margin: 0;
            color: #fff;
        }
        
        /* Notificaciones */
        .custom-notification {
            position: fixed;
            top: 1rem;
            right: 1rem;
            padding: 1rem;
            border-radius: 0.375rem;
            background-color: rgba(56, 178, 172, 0.1);
            color: #ffffff;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            animation: slideIn 0.3s ease-out;
            transform: translateX(100%);
            z-index: 1000;
            font-family: 'Modern Antiqua', serif;
            min-width: 300px;
            max-width: 450px;
            border: 1px solid rgba(56, 178, 172, 0.2);
        }

        .custom-notification.show {
            transform: translateX(0);
        }

        .custom-notification.success {
            background-color: rgba(56, 178, 172, 0.1);
            border: 1px solid rgba(56, 178, 172, 0.2);
            border-left: 4px solid var(--jade);
        }

        .custom-notification.error {
            background-color: rgba(229, 62, 62, 0.1);
            border: 1px solid rgba(229, 62, 62, 0.2);
            border-left: 4px solid #e53e3e;
        }

        .custom-notification-icon {
            font-size: 1.25rem;
            color: var(--jade);
            margin-right: 0.5rem;
        }

        .custom-notification-title {
            font-weight: 600;
            font-size: 1rem;
            color: #ffffff;
            margin-bottom: 0.25rem;
            display: block;
            font-family: 'Modern Antiqua', serif;
        }

        .custom-notification-message {
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.4;
            display: block;
            font-family: 'Modern Antiqua', serif;
        }

        .custom-notification.error .custom-notification-icon {
            color: #e53e3e;
        }
        
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <!-- Imagen de fondo -->
    <img src="assets/media/bg.jpeg" alt="Fondo Místico" class="bg-image">
    
    <!-- Cabecera con botón de volver y selector de idioma -->
    <header>
        <div class="header-controls">
            <a href="index.php" class="back-button">
                <i class="fas fa-arrow-left"></i>
                <span class="lang-back-to-panel">Volver al Panel</span>
            </a>
            
            <div class="language-selector">
                <button type="button" class="language-button active" data-lang="es">ES</button>
                <button type="button" class="language-button" data-lang="en">EN</button>
                <button type="button" class="language-button" data-lang="br">PT</button>
            </div>
        </div>
    </header>
    
    <!-- Contenido principal -->
    <main class="main-content">
        <div class="form-container">
            <div class="logo-container">
                <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo-wLBB9y6KreoxJBVQKAJj1BZ1eqO9f4.png" alt="L2JADE Logo" class="logo">
                <h1 class="form-title lang-recover-account">Recuperar Contraseña</h1>
                <p class="form-description lang-recovery-description">Ingresa tu correo para recuperar tu cuenta.</p>
            </div>
            
            <!-- Formulario de recuperación -->
            <form class="js-validation-reminder" action="account_save.php" method="post" onsubmit="return false;">
                <input type="hidden" name="module_form" value="Modules\Globals\Reminder\Reminder">
                <input type="hidden" name="module" value="reminder">
                <input id="type_reminder" name="type_reminder" type="hidden" value="#r-email">
                
                <!-- Correo electrónico -->
                <div class="form-group">
                    <label for="reminder-email" class="form-label lang-email">Correo electrónico</label>
                    <input type="email" class="form-control" id="reminder-email" name="email" required>
                </div>
                
                <!-- Captcha -->
                <div class="form-group">
                    <input type="hidden" id="captcha" name="captcha">
                </div>
                
                <!-- Botón de recuperación -->
                <button type="submit" class="btn-primary submit-form">
                    <span class="lang-recover-button">Recuperar Contraseña</span>
                </button>
                
                <!-- Enlace a registro -->
                <div class="recovery-link-container">
                    <a href="registro.php" class="recovery-link lang-create-new-account">Crear cuenta nueva</a>
                </div>
            </form>
        </div>
    </main>
    
    <!-- Pie de página -->
    <footer>
        <p> 2023 L2JADE. <span class="lang-all-rights">Todos los derechos reservados</span></p>
    </footer>
    
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="assets/js/codebase.core.min2954.js"></script>
    <script src="assets/js/codebase.app.min2954.js"></script>
    <script src="assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>
    <script src="assets/js/mmoweb2954.js"></script>
    <script>
        // Traducciones
        const translations = {
            en: {
                "lang-back-to-panel": "Back to Panel",
                "lang-recover-account": "Recover Account",
                "lang-recovery-description": "Enter your email to recover your account.",
                "lang-email": "Email",
                "lang-recover-button": "Recover Account",
                "lang-create-new-account": "Create new account",
                "lang-all-rights": "All rights reserved",
                "recovery-success": "Password recovery instructions have been sent to your email",
                "recovery-error": "Error sending recovery email. Please try again"
            },
            es: {
                "lang-back-to-panel": "Volver al Panel",
                "lang-recover-account": "Recuperar Contraseña",
                "lang-recovery-description": "Ingresa tu correo para recuperar tu cuenta.",
                "lang-email": "Correo electrónico",
                "lang-recover-button": "Recuperar Contraseña",
                "lang-create-new-account": "Crear cuenta nueva",
                "lang-all-rights": "Todos los derechos reservados",
                "recovery-success": "Las instrucciones de recuperación han sido enviadas a tu correo",
                "recovery-error": "Error al enviar el correo de recuperación. Por favor intenta de nuevo"
            },
            br: {
                "lang-back-to-panel": "Voltar ao Painel",
                "lang-recover-account": "Recuperar Conta",
                "lang-recovery-description": "Digite seu e-mail para recuperar sua conta.",
                "lang-email": "E-mail",
                "lang-recover-button": "Recuperar Conta",
                "lang-create-new-account": "Criar nova conta",
                "lang-all-rights": "Todos os direitos reservados",
                "recovery-success": "As instruções de recuperação foram enviadas para seu e-mail",
                "recovery-error": "Erro ao enviar e-mail de recuperação. Por favor, tente novamente"
            }
        };
        
        $(document).ready(function() {
            // Cargar reCAPTCHA después de que el documento esté listo
            var script = document.createElement('script');
            script.src = 'https://www.google.com/recaptcha/api.js?render=6LdPq0AUAAAAAJ7Q6jsquGMG0GhgWK78PO_NU4eU';
            script.onload = function() {
                grecaptcha.ready(function() {
                    grecaptcha.execute('6LdPq0AUAAAAAJ7Q6jsquGMG0GhgWK78PO_NU4eU', {action: 'submit'}).then(function(token) {
                        document.getElementById('captcha').value = token;
                    });
                });
            };
            document.body.appendChild(script);

            // Función para obtener un nuevo token de captcha
            function refreshCaptcha() {
                return new Promise((resolve) => {
                    grecaptcha.execute('6LdPq0AUAAAAAJ7Q6jsquGMG0GhgWK78PO_NU4eU', {action: 'submit'}).then(function(token) {
                        document.getElementById('captcha').value = token;
                        resolve();
                    });
                });
            }

            // Manejar el envío del formulario
            $('.js-validation-reminder').on('submit', async function(e) {
                e.preventDefault();
                
                var $form = $(this);
                
                // Obtener nuevo token de captcha antes de enviar
                await refreshCaptcha();
                
                var formData = new FormData($form[0]);
                
                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.status === 'success') {
                            showNotification(translations[currentLang]['recovery-success'], 'success');
                            // Limpiar el formulario
                            $form[0].reset();
                        } else {
                            showNotification(response.message || translations[currentLang]['recovery-error'], 'error');
                        }
                    },
                    error: function() {
                        showNotification(translations[currentLang]['recovery-error'], 'error');
                    }
                });
            });

            // Obtener idioma preferido o usar español por defecto
            const currentLang = localStorage.getItem('preferredLanguage') || 'es';
            
            // Configurar idioma inicial
            function updateLanguage(lang) {
                document.documentElement.lang = lang;
                
                // Actualizar todos los elementos con clases de idioma
                for (const [key, value] of Object.entries(translations[lang])) {
                    const elements = document.getElementsByClassName(key);
                    for (const element of elements) {
                        element.textContent = value;
                    }
                }
                
                // Guardar preferencia de idioma
                localStorage.setItem('preferredLanguage', lang);
            }
            updateLanguage(currentLang);

            // Event listeners para botones de idioma
            const languageButtons = document.querySelectorAll('.language-button');
            languageButtons.forEach(button => {
                if (button.dataset.lang === currentLang) {
                    button.classList.add('active');
                } else {
                    button.classList.remove('active');
                }
                
                button.addEventListener('click', function() {
                    const lang = this.dataset.lang;
                    languageButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    updateLanguage(lang);
                });
            });

            // Función para mostrar notificaciones
            function showNotification(message, type, duration = 5000) {
                // Crear elemento de notificación
                const notification = document.createElement('div');
                notification.className = `custom-notification ${type}`;
                
                // Definir iconos según el tipo
                let icon = '';
                switch(type) {
                    case 'success':
                        icon = 'fa-check-circle';
                        break;
                    case 'error':
                        icon = 'fa-times-circle';
                        break;
                    case 'warning':
                        icon = 'fa-exclamation-triangle';
                        break;
                    case 'info':
                        icon = 'fa-info-circle';
                        break;
                }

                // Si el mensaje es HTML, extraer el título y el contenido
                let title = 'Notificación';
                let content = message;

                if (message.includes('<p class=\'mb-2 h4\'>') || message.includes('<p class="mb-2 h4">')) {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(message, 'text/html');
                    const titleElement = doc.querySelector('.mb-2.h4');
                    const contentElement = doc.querySelector('p:not(.mb-2.h4)');
                    
                    if (titleElement) {
                        title = titleElement.textContent;
                    }
                    if (contentElement) {
                        content = contentElement.textContent;
                    }
                }
                
                // Construir el HTML de la notificación
                notification.innerHTML = `
                    <i class="fas ${icon} custom-notification-icon"></i>
                    <span class="custom-notification-title">${title}</span>
                    <span class="custom-notification-message">${content}</span>
                `;
                
                // Agregar al cuerpo del documento
                document.body.appendChild(notification);
                
                // Mostrar con animación
                setTimeout(() => {
                    notification.classList.add('show');
                }, 100);
                
                // Configurar cierre automático
                setTimeout(() => {
                    notification.style.animation = 'slideOut 0.5s ease-out forwards';
                    setTimeout(() => {
                        notification.remove();
                    }, 500);
                }, duration);
            }

            // Reemplazar jQuery.notify con nuestra implementación
            if (jQuery && !jQuery.notify) {
                jQuery.notify = function(message, options) {
                    const defaults = {
                        type: 'success',
                        duration: 5000
                    };
                    
                    const settings = { ...defaults, ...options };
                    
                    if (typeof message === 'object') {
                        showNotification(message.text, message.status || settings.type, settings.duration);
                    } else {
                        showNotification(message, settings.type, settings.duration);
                    }
                };
            }
        });
    </script>
</body>
</html>