<?php
session_start();
if(isset($_SESSION['user'])) {
    header("Location: dashboard.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Venta de Equipos moviles</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg,rgb(109, 182, 231) 0%,rgb(191, 125, 159) 100%);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .login-container {
            width: 100%;
            max-width: 900px;
            padding: 20px;
        }

        .card {
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(236, 236, 67, 0.1);
            overflow: hidden;
        }

        .row {
            margin: 0;
        }

        .hospital-image {
            background: linear-gradient(rgba(49, 162, 233, 0.6), rgba(164, 55, 25, 0.5)), 
                        url('logo/hospital.jpg');
            background-size: cover;
            background-position: center;
            padding: 40px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 500px;
        }

        .hospital-info {
            text-align: center;
        }

        .hospital-info img {
            width: 160px;
            margin-bottom: 20px;
        }

        .login-form {
            padding: 40px;
            background: white;
        }

        .form-control {
            border-radius: 10px;
            padding: 12px;
            border: 2px solid #eef2f7;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #0d6efd;
            box-shadow: none;
        }

        .btn-primary {
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            background: #0d6efd;
            border: none;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: #0b5ed7;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(13,110,253,0.3);
        }

        .alert {
            border-radius: 10px;
            border: none;
        }

        .hospital-features {
            margin-top: 20px;
            padding: 0;
            list-style: none;
        }

        .hospital-features li {
            margin-bottom: 10px;
            color: rgba(255,255,255,0.9);
        }

        .hospital-features i {
            margin-right: 10px;
            color: #0d6efd;
        }

        @media (max-width: 768px) {
            .hospital-image {
                min-height: 300px;
                padding: 20px;
            }
            
            .login-form {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="card">
            <div class="row g-0">
                <div class="col-md-6">
                    <div class="hospital-image">
                        <div class="hospital-info">
                            <img src="logo/logo.png" alt="Hospital Logo" class="mb-4">
                            <!-- <h2>EQUIPOS MOVILES</h2> -->
                           <!-- <h4>El Rey de los Equipos </h4> -->
                           <!-- <h4>Ventas 1</h4> -->
                            <p class="mt-2">Sistema de Gestión Multiple - SIGVEM V 1.0 </p>                            
                            <ul class="hospital-features">
                                <li><i class="fas fa-download"></i> Gestión de Importación</li>
                                <li><i class="fas fa-atom"></i> Control</li>
                                <li><i class="fa-solid fa-money-check-dollar"></i> Gestión de Cobranzas</li>
                                <li><i class="fas fa-chart-line"></i> Reportes y Estadísticas</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="login-form">
                        <h3 class="text-center mb-4">Iniciar Sesión</h3>
                        <?php if(isset($_SESSION['error'])): ?>
                            <div class="alert alert-danger">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                <?php echo $_SESSION['error']; unset($_SESSION['error']); ?>
                            </div>
                        <?php endif; ?>
                        <form action="actions/auth.php" method="POST">
                            <div class="mb-4">
                                <label class="form-label">
                                    <i class="fa-regular fa-id-card"></i> DNI/RUC
                                    
                                </label>
                                <input type="text" class="form-control" name="nroDocumento" 
                                       placeholder="Ingrese su DNI ó RUC" required>
                            </div>
                            <div class="mb-4">
                                <label class="form-label">
                                    <i class="fas fa-lock me-2"></i>Contraseña
                                </label>
                                <input type="password" class="form-control" name="clave" 
                                       placeholder="Ingrese su contraseña" required>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">
                                Ingresar <i class="fas fa-sign-in-alt ms-2"></i>
                            </button>
                        </form>
                        <div class="text-center mt-3">
                            <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#forgotPasswordModal">
                                <i class="fas fa-key me-1"></i> ¿Olvidaste tu contraseña?
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Olvidar Contraseña -->
    <div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="forgotPasswordModalLabel">
                        <i class="fas fa-key me-2"></i>Recuperar Contraseña
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="forgotPasswordMessage"></div>
                    <form id="forgotPasswordForm">
                        <div class="mb-3">
                            <label for="emailRecovery" class="form-label">
                                <i class="fas fa-envelope me-2"></i>Correo Electrónico
                            </label>
                            <input type="email" class="form-control" id="emailRecovery" name="email" 
                                   placeholder="Ingrese su correo electrónico" required>
                            <div class="form-text">
                                Ingrese el correo electrónico asociado a su cuenta para recibir las instrucciones de recuperación.
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="sendRecoveryEmail">
                        <i class="fas fa-paper-plane me-1"></i> Enviar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('sendRecoveryEmail').addEventListener('click', function() {
            const email = document.getElementById('emailRecovery').value;
            const messageDiv = document.getElementById('forgotPasswordMessage');
            
            if (!email) {
                messageDiv.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>Por favor, ingrese su correo electrónico.</div>';
                return;
            }

            // Mostrar loading
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Enviando...';
            this.disabled = true;

            // Enviar petición AJAX
            fetch('actions/forgot-password.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'email=' + encodeURIComponent(email)
            })
            .then(response => {
                // Verificar si la respuesta es JSON válido
                const contentType = response.headers.get("content-type");
                if (!contentType || !contentType.includes("application/json")) {
                    return response.text().then(text => {
                        throw new Error('Respuesta no válida del servidor: ' + text.substring(0, 200));
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // El mensaje del backend ya viene formateado con HTML
                    let messageHTML = '<div class="alert alert-success" style="line-height: 1.8;">' + data.message;
                    
                    // Si hay un enlace de reset (modo desarrollo), mostrarlo de forma destacada
                    if (data.reset_link) {
                        messageHTML += '<br><br><div style="background: rgba(255,255,255,0.3); padding: 15px; border-radius: 8px; margin-top: 15px;">';
                        messageHTML += '<strong><i class="fas fa-link me-2"></i>Enlace de recuperación:</strong><br>';
                        messageHTML += '<code style="word-break: break-all; display: block; padding: 10px; background: rgba(0,0,0,0.1); margin-top: 10px; border-radius: 4px; font-size: 0.9em;">' + data.reset_link + '</code>';
                        messageHTML += '<button class="btn btn-sm btn-light mt-2" onclick="navigator.clipboard.writeText(\'' + data.reset_link + '\'); alert(\'Enlace copiado al portapapeles\');"><i class="fas fa-copy me-1"></i> Copiar</button>';
                        messageHTML += '</div>';
                    }
                    
                    messageHTML += '</div>';
                    messageDiv.innerHTML = messageHTML;
                    document.getElementById('emailRecovery').value = '';
                } else {
                    // Determinar el tipo de alerta según el mensaje
                    let alertClass = 'alert-danger';
                    if (data.message && (
                        data.message.includes('SMTP') || 
                        data.message.includes('configuración') ||
                        data.message.includes('Error de configuración')
                    )) {
                        alertClass = 'alert-warning'; // Usar warning para errores de configuración
                    }
                    
                    // El mensaje del backend puede venir con HTML
                    let errorMessage = data.message || 'Error desconocido';
                    messageDiv.innerHTML = '<div class="alert ' + alertClass + '" style="line-height: 1.8;"><i class="fas fa-exclamation-circle me-2"></i>' + errorMessage + '</div>';
                    
                    // Si hay un código de referencia, mostrarlo de forma destacada
                    if (data.reference_code) {
                        messageDiv.innerHTML += '<div class="alert alert-info mt-2"><strong>Código de referencia:</strong> <code>' + data.reference_code + '</code></div>';
                    }
                }
            })
            .catch(error => {
                console.error('Error en recuperación de contraseña:', error);
                messageDiv.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i>Error al procesar la solicitud: ' + error.message + '. Intente nuevamente.</div>';
            })
            .finally(() => {
                this.innerHTML = '<i class="fas fa-paper-plane me-1"></i> Enviar';
                this.disabled = false;
            });
        });
    </script>
</body>
</html>