<?php
require_once 'auth.php';
// If already logged in, redirect
if (isLoggedIn()) {
    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>REGISTRO DE USUARIO - PNA</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-dark: #050a10;
            --cyan-glow: #00f2ff;
            --glass-bg: rgba(10, 25, 47, 0.7);
            --glass-border: rgba(0, 242, 255, 0.2);
            --text-main: #e6f1ff;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--bg-dark);
            color: var(--text-main);
            min-height: 100vh;
            margin: 0;
            background-image: radial-gradient(circle at 50% 50%, rgba(0, 242, 255, 0.05) 0%, transparent 60%);
            overflow-x: hidden;
        }

        .layout-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        .content-area {
            width: 100%;
            max-width: 450px;
            display: flex;
            justify-content: center;
        }

        .register-card {
            background: var(--glass-bg);
            padding: 40px;
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            width: 100%;
            text-align: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 50px rgba(0, 242, 255, 0.1);
            animation: float 6s ease-in-out infinite;
        }

        h1 {
            color: var(--cyan-glow);
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        input {
            width: 100%;
            padding: 12px;
            margin-bottom: 15px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            color: #fff;
        }

        button {
            width: 100%;
            padding: 15px;
            background: rgba(0, 242, 255, 0.1);
            border: 1px solid var(--cyan-glow);
            color: var(--cyan-glow);
            font-weight: 800;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s;
        }

        button:hover {
            background: var(--cyan-glow);
            color: var(--bg-dark);
        }

        .back-link {
            display: block;
            margin-top: 15px;
            color: #8892b0;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .back-link:hover {
            color: var(--cyan-glow);
        }

        #msg {
            margin-top: 15px;
            display: none;
            font-size: 0.9rem;
        }

        .success {
            color: #00ff88;
        }

        .error {
            color: #ff4d4d;
        }
    </style>
</head>

<body>
    <div class="layout-wrapper">
        <div class="content-area">
            <div class="register-card">
                <h1>SOLICITAR ACCESO</h1>
                <p style="color: #8892b0; font-size: 0.9rem; margin-bottom: 25px;">Complete sus datos para que el
                    administrador
                    apruebe su ingreso.</p>
                <form onsubmit="handleRegister(event)">
                    <input type="text" id="reg_username" placeholder="Usuario deseado" autocomplete="off" required>
                    <input type="password" id="reg_password" placeholder="Contraseña" required>
                    <button type="submit">SOLICITAR REGISTRO</button>
                    <div style="margin-top: 20px;">
                        <a href="index.php"
                            style="color: var(--cyan-glow); text-decoration: none; font-size: 0.9rem;">Volver
                            al Login</a>
                    </div>
                </form>
                <div id="msg" style="display: none; margin-top: 15px; font-size: 0.9rem;"></div>
            </div>
        </div>
    </div>

    <script>
        async function handleRegister(e) {
            e.preventDefault();
            const user = document.getElementById('reg_username').value;
            const pass = document.getElementById('reg_password').value;
            const msg = document.getElementById('msg');
            const btn = e.target.querySelector('button');

            msg.className = "error";
            msg.style.display = "block";
            return;
        }

        btn.disabled = true;
        btn.textContent = "Procesando...";

        try {
            const response = await fetch('api/register.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ user, pass })
            });
            const result = await response.json();

            if (result.success) {
                msg.innerHTML = "Solicitud enviada.<br>Espere aprobación del administrador.";
                msg.className = "success";
                e.target.reset();
                btn.textContent = "SOLICITUD ENVIADA";
            } else {
                msg.textContent = result.message || "Error al registrar";
                msg.className = "error";
                btn.disabled = false;
                btn.textContent = "REGISTRARSE";
            }
            msg.style.display = "block";
        } catch (error) {
            msg.textContent = "Error de conexión";
            msg.className = "error";
            msg.style.display = "block";
            btn.disabled = false;
            btn.textContent = "REGISTRARSE";
        }
        }
    </script>

</body>


</html>