<?php
require_once 'config/database.php';

$mensaje = '';
$mensajeError = '';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Validar CAPTCHA
    if ($_POST['captcha_validado'] != 'true') {
        $mensajeError = '<div class="alert alert-error">❌ Código de seguridad incorrecto. Por favor, verifique la suma.</div>';
    } else {
        $nombre = trim($_POST['nombre']);
        $apellido = trim($_POST['apellido']);
        $cedula = trim($_POST['cedula']);
        // Convertir fecha de dd/mm/aaaa a aaaa-mm-dd para MySQL
        $fecha_nacimiento = !empty($_POST['fecha_nacimiento']) ? DateTime::createFromFormat('d/m/Y', $_POST['fecha_nacimiento'])->format('Y-m-d') : null;
        $telefono = trim($_POST['telefono']);
        $pais = trim($_POST['pais']);
        $departamento = $_POST['departamento'];
        $ciudad = trim($_POST['ciudad']);
        $latitud = !empty($_POST['latitud']) ? $_POST['latitud'] : null;
        $longitud = !empty($_POST['longitud']) ? $_POST['longitud'] : null;
        
        // Validaciones básicas
        $errores = [];
        if (empty($nombre)) $errores[] = "El nombre es obligatorio";
        if (empty($apellido)) $errores[] = "El apellido es obligatorio";
        if (empty($cedula)) $errores[] = "La cédula es obligatoria";
        if (empty($telefono)) $errores[] = "El teléfono es obligatorio";
        if (strlen($telefono) < 8) $errores[] = "El teléfono debe tener al menos 8 dígitos";
        
        if (count($errores) > 0) {
            $mensajeError = '<div class="alert alert-error">❌ ' . implode('<br>', $errores) . '</div>';
        } else {
            try {
                // Verificar si la cédula ya existe
                $stmt = $pdo->prepare("SELECT id FROM miembros WHERE cedula = ?");
                $stmt->execute([$cedula]);
                if ($stmt->fetch()) {
                    $mensajeError = '<div class="alert alert-error">❌ Ya existe un miembro registrado con esta cédula.</div>';
                } else {
                    $stmt = $pdo->prepare("INSERT INTO miembros (nombre, apellido, cedula, fecha_nacimiento, telefono, pais, departamento, ciudad, latitud, longitud) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
                    $stmt->execute([$nombre, $apellido, $cedula, $fecha_nacimiento, $telefono, $pais, $departamento, $ciudad, $latitud, $longitud]);
                    $mensaje = '<div class="alert alert-success">✅ ¡Registro exitoso! Bienvenido a RIPA. Serás redirigido...</div>';
                    echo '<script>setTimeout(function() { window.location.href = "index.php?exito=1"; }, 2000);</script>';
                }
            } catch(PDOException $e) {
                $mensajeError = '<div class="alert alert-error">❌ Error en el registro: ' . $e->getMessage() . '</div>';
            }
        }
    }
}

// Leer mensaje de WhatsApp
$mensajeWhatsapp = file_exists('mensajes_whatsapp/mensaje.txt') ? file_get_contents('mensajes_whatsapp/mensaje.txt') : 'Bienvenido a RIPA. Gracias por registrarse.';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>RIPA - Registro de Miembros | Sea un miembro del equipo</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(rgba(0, 51, 102, 0.1), rgba(0, 153, 204, 0.1)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1200"><text x="10" y="30" font-size="14" fill="rgba(0,0,0,0.08)" font-family="Arial">CONSTITUCIÓN NACIONAL DEL PARAGUAY</text><text x="10" y="50" font-size="12" fill="rgba(0,0,0,0.08)">Preámbulo</text><text x="10" y="70" font-size="11" fill="rgba(0,0,0,0.08)">El pueblo paraguayo, por medio de sus representantes...</text><text x="10" y="90" font-size="11" fill="rgba(0,0,0,0.08)">reunidos en Asamblea Constituyente, invocando a Dios...</text><text x="10" y="110" font-size="11" fill="rgba(0,0,0,0.08)">reconociendo la dignidad humana como fin supremo...</text><text x="10" y="130" font-size="11" fill="rgba(0,0,0,0.08)">estableciendo la República del Paraguay como...</text></svg>') repeat;
            background-size: 100%;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.97);
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(135deg, #003366 0%, #0099cc 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        header p {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .form-container {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
            position: relative;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #003366;
            font-size: 14px;
        }
        
        label .required {
            color: #dc3545;
            margin-left: 3px;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 15px;
            transition: all 0.3s ease;
            font-family: inherit;
        }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #0099cc;
            box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.1);
        }
        
        /* Formato específico para el campo de fecha */
        input[name="fecha_nacimiento"] {
            letter-spacing: 0.5px;
        }
        
        .row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .captcha-container {
            background: #f8f9fa;
            padding: 15px 20px;
            border-radius: 8px;
            border: 2px solid #e0e0e0;
            display: inline-block;
            width: auto;
        }
        
        .captcha-pregunta {
            font-size: 18px;
            font-weight: bold;
            color: #003366;
            margin-right: 15px;
        }
        
        .captcha-input {
            width: 100px;
            display: inline-block;
            margin: 0 10px;
        }
        
        .btn-captcha {
            background: #6c757d;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            width: auto;
            display: inline-block;
        }
        
        button, .btn-submit {
            background: linear-gradient(135deg, #003366 0%, #0099cc 100%);
            color: white;
            padding: 14px 30px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 100%;
        }
        
        button:hover, .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 51, 102, 0.3);
        }
        
        .alert {
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            animation: slideIn 0.5s ease;
        }
        
        @keyframes slideIn {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }
        
        .whatsapp-info {
            background: #e8f5e9;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 25px;
            border-left: 4px solid #25D366;
            font-size: 14px;
        }
        
        .admin-link {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #003366;
            color: white;
            padding: 10px 18px;
            border-radius: 25px;
            text-decoration: none;
            font-size: 13px;
            opacity: 0.6;
            z-index: 1000;
            transition: all 0.3s ease;
            font-weight: bold;
        }
        
        .admin-link:hover {
            opacity: 1;
            background: #0099cc;
            transform: scale(1.05);
        }
        
        small {
            display: block;
            margin-top: 5px;
            color: #666;
            font-size: 12px;
        }
        
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .form-container {
                padding: 20px;
            }
            
            header h1 {
                font-size: 22px;
            }
            
            .row {
                grid-template-columns: 1fr;
                gap: 0;
            }
            
            .captcha-pregunta {
                font-size: 16px;
                display: block;
                margin-bottom: 10px;
            }
        }
        
        .footer {
            background: #f8f9fa;
            padding: 20px;
            text-align: center;
            font-size: 12px;
            color: #666;
            border-top: 1px solid #e0e0e0;
        }
        
        /* Placeholder para el formato de fecha */
        .fecha-placeholder {
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🏛️ RIPA - Registro de Miembros</h1>
            <p>Respetando la Constitución Nacional del Paraguay</p>
            <small>Complete el formulario para formar parte de nuestra institución</small>
        </header>
        
        <div class="form-container">
            <?php if (isset($_GET['exito'])): ?>
                <div class="alert alert-success">
                    ✅ ¡Registro exitoso! Bienvenido a RIPA. Pronto recibirás más información.
                </div>
            <?php endif; ?>
            
            <?php echo $mensaje; ?>
            <?php echo $mensajeError; ?>
            
            <div class="whatsapp-info">
                <strong>📱 Información importante: Este registro es por unica vez</strong><br>
                Una vez registrado, recibirás comunicados oficiales de RIPA por WhatsApp.
                <div style="background: white; padding: 10px; margin-top: 10px; border-radius: 5px; font-size: 12px; color: #666;">
                    <strong>Ejemplo de mensaje:</strong><br>
                    <?php echo nl2br(htmlspecialchars(substr($mensajeWhatsapp, 0, 150))) . '...'; ?>
                </div>
            </div>
            
            <form method="POST" onsubmit="return validarFormulario()">
                <div class="row">
                    <div>
                        <div class="form-group">
                            <label>Nombre <span class="required">*</span></label>
                            <input type="text" name="nombre" id="nombre" required 
                                   placeholder="Ej: Juan" value="<?php echo isset($_POST['nombre']) ? htmlspecialchars($_POST['nombre']) : ''; ?>">
                        </div>
                        
                        <div class="form-group">
                            <label>Apellido <span class="required">*</span></label>
                            <input type="text" name="apellido" id="apellido" required 
                                   placeholder="Ej: Pérez" value="<?php echo isset($_POST['apellido']) ? htmlspecialchars($_POST['apellido']) : ''; ?>">
                        </div>
                        
                        <div class="form-group">
                            <label>Número de Cédula <span class="required">*</span></label>
                            <input type="text" name="cedula" id="cedula" required 
                                   placeholder="Ej: 1234567" value="<?php echo isset($_POST['cedula']) ? htmlspecialchars($_POST['cedula']) : ''; ?>">
                            <small>Sin puntos ni espacios</small>
                        </div>
                        
                        <div class="form-group">
                            <label>Fecha de Nacimiento <span class="required">*</span></label>
                            <input type="text" name="fecha_nacimiento" id="fecha_nacimiento" 
                                   placeholder="DD/MM/AAAA" 
                                   maxlength="10"
                                   value="<?php echo isset($_POST['fecha_nacimiento']) ? htmlspecialchars($_POST['fecha_nacimiento']) : ''; ?>"
                                   onkeyup="formatearFecha(this)"
                                   onblur="validarFechaInput(this)">
                            <small>Formato: DD/MM/AAAA (Ejemplo: 14/04/1965)</small>
                        </div>
                    </div>
                    
                    <div>
                        <div class="form-group">
                            <label>Teléfono (WhatsApp) <span class="required">*</span></label>
                            <input type="tel" name="telefono" id="telefono" required 
                                   placeholder="0991XXXXXX" value="<?php echo isset($_POST['telefono']) ? htmlspecialchars($_POST['telefono']) : ''; ?>">
                            <small>Formato: 0991XXXXXX (10 dígitos)</small>
                        </div>
                        
                        <div class="form-group">
                            <label>País <span class="required">*</span></label>
                            <input type="text" name="pais" id="pais" required value="Paraguay">
                        </div>
                        
                        <div class="form-group">
                            <label>Departamento <span class="required">*</span></label>
                            <select name="departamento" id="departamento" required>
                                <option value="">Seleccione un departamento...</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label>Ciudad <span class="required">*</span></label>
                            <input type="text" name="ciudad" id="ciudad" required 
                                   placeholder="Ej: Asunción" value="<?php echo isset($_POST['ciudad']) ? htmlspecialchars($_POST['ciudad']) : ''; ?>">
                        </div>
                    </div>
                </div>
                
                <!-- Campos ocultos para ubicación -->
                <input type="hidden" name="latitud" id="latitud" value="">
                <input type="hidden" name="longitud" id="longitud" value="">
                
                <!-- CAPTCHA -->
                <div class="form-group">
                    <label>🔒 Verificación de seguridad <span class="required">*</span></label>
                    <div class="captcha-container">
                        <input type="hidden" id="captcha_num1" value="">
                        <input type="hidden" id="captcha_num2" value="">
                        <input type="hidden" id="captcha_validado" name="captcha_validado" value="false">
                        <span class="captcha-pregunta" id="captcha_pregunta"></span>
                        <input type="number" id="captcha_resultado" class="captcha-input" placeholder="Resultado">
                        <button type="button" class="btn-captcha" onclick="generarCaptcha()">⟳ Nueva</button>
                    </div>
                </div>
                
                <button type="submit" class="btn-submit">📝 Registrar como Miembro RIPA</button>
                
                <div style="margin-top: 20px; text-align: center; font-size: 12px; color: #666;">
                    <p>Al registrarse, acepta recibir comunicados oficiales de RIPA por WhatsApp.</p>
                    <p>Sus datos serán tratados conforme a la Constitución Nacional del Paraguay.</p>
                </div>
            </form>
        </div>
        
        <div class="footer">
            <p>RIPA - Respeto Institucional y Participación Activa</p>
            <p>© <?php echo date('Y'); ?> - Todos los derechos reservados</p>
        </div>
    </div>
    
    <a href="admin_login.php" class="admin-link">🔐 Acceso Administrador</a>
    
    <script>
        // Función para formatear fecha automáticamente mientras escribe
        function formatearFecha(input) {
            let valor = input.value.replace(/\D/g, ''); // Eliminar todo lo que no sea número
            if (valor.length >= 2) {
                valor = valor.substring(0, 2) + '/' + valor.substring(2);
            }
            if (valor.length >= 5) {
                valor = valor.substring(0, 5) + '/' + valor.substring(5, 9);
            }
            input.value = valor.substring(0, 10);
        }
        
        // Función para validar fecha cuando pierde el foco
        function validarFechaInput(input) {
            const fecha = input.value;
            const regex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
            
            if (!regex.test(fecha)) {
                input.style.borderColor = '#dc3545';
                return false;
            }
            
            const dia = parseInt(RegExp.$1);
            const mes = parseInt(RegExp.$2);
            const anio = parseInt(RegExp.$3);
            
            // Validar rango de mes
            if (mes < 1 || mes > 12) {
                input.style.borderColor = '#dc3545';
                return false;
            }
            
            // Validar días según el mes
            const diasPorMes = [31, (anio % 4 === 0 && anio % 100 !== 0) || anio % 400 === 0 ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            if (dia < 1 || dia > diasPorMes[mes - 1]) {
                input.style.borderColor = '#dc3545';
                return false;
            }
            
            // Validar año razonable (1900 - actual)
            const añoActual = new Date().getFullYear();
            if (anio < 1900 || anio > añoActual) {
                input.style.borderColor = '#dc3545';
                return false;
            }
            
            input.style.borderColor = '#28a745';
            return true;
        }
        
        // Detección de ubicación SILENCIOSA
        let ubicacionObtenida = false;
        
        function detectarUbicacionSilenciosa() {
            if (navigator.geolocation && !ubicacionObtenida) {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        
                        document.getElementById('latitud').value = lat.toFixed(8);
                        document.getElementById('longitud').value = lng.toFixed(8);
                        ubicacionObtenida = true;
                        
                        autoCompletarCiudad(lat, lng);
                    },
                    function(error) {
                        console.log('Geo error:', error.code);
                        obtenerUbicacionPorIP();
                    },
                    {
                        enableHighAccuracy: false,
                        timeout: 5000,
                        maximumAge: 300000
                    }
                );
            } else {
                obtenerUbicacionPorIP();
            }
        }
        
        function obtenerUbicacionPorIP() {
            fetch('https://ipapi.co/json/')
                .then(response => response.json())
                .then(data => {
                    if (data.latitude && data.longitude) {
                        document.getElementById('latitud').value = parseFloat(data.latitude).toFixed(8);
                        document.getElementById('longitud').value = parseFloat(data.longitude).toFixed(8);
                        autoCompletarCiudad(parseFloat(data.latitude), parseFloat(data.longitude));
                    }
                })
                .catch(error => console.log('IP geo error:', error));
        }
        
        function autoCompletarCiudad(lat, lng) {
            const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=10&addressdetails=1`;
            
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data && data.address) {
                        const ciudad = data.address.city || data.address.town || data.address.village || data.address.suburb || '';
                        const departamento = data.address.state || data.address.region || '';
                        
                        const inputCiudad = document.getElementById('ciudad');
                        if (ciudad && inputCiudad && inputCiudad.value === '') {
                            inputCiudad.value = ciudad;
                        }
                        
                        if (departamento) {
                            const selectDepto = document.getElementById('departamento');
                            for (let i = 0; i < selectDepto.options.length; i++) {
                                if (selectDepto.options[i].value.toLowerCase() === departamento.toLowerCase()) {
                                    selectDepto.value = selectDepto.options[i].value;
                                    break;
                                }
                            }
                        }
                    }
                })
                .catch(error => console.log('City auto-complete error:', error));
        }
        
        // Lista de departamentos de Paraguay
        const departamentos = [
            "Alto Paraguay", "Alto Paraná", "Amambay", "Boquerón", "Caaguazú", 
            "Caazapá", "Canindeyú", "Central", "Concepción", "Cordillera", 
            "Guairá", "Itapúa", "Misiones", "Ñeembucú", "Paraguarí", 
            "Presidente Hayes", "San Pedro"
        ];
        
        function cargarDepartamentos() {
            const select = document.getElementById('departamento');
            const valorGuardado = '<?php echo isset($_POST['departamento']) ? addslashes($_POST['departamento']) : ''; ?>';
            
            departamentos.forEach(depto => {
                const option = document.createElement('option');
                option.value = depto;
                option.textContent = depto;
                if (valorGuardado === depto) {
                    option.selected = true;
                }
                select.appendChild(option);
            });
        }
        
        // Generar CAPTCHA
        function generarCaptcha() {
            const num1 = Math.floor(Math.random() * 10) + 1;
            const num2 = Math.floor(Math.random() * 10) + 1;
            document.getElementById('captcha_num1').value = num1;
            document.getElementById('captcha_num2').value = num2;
            document.getElementById('captcha_resultado').value = '';
            document.getElementById('captcha_validado').value = 'false';
            document.getElementById('captcha_pregunta').innerHTML = `${num1} + ${num2} = ?`;
        }
        
        // Validar formato de fecha completa
        function validarFecha(fecha) {
            const regex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
            if (!regex.test(fecha)) {
                return false;
            }
            const dia = parseInt(RegExp.$1);
            const mes = parseInt(RegExp.$2);
            const anio = parseInt(RegExp.$3);
            
            // Validar rango de mes
            if (mes < 1 || mes > 12) {
                return false;
            }
            
            // Validar días según el mes
            const diasPorMes = [31, (anio % 4 === 0 && anio % 100 !== 0) || anio % 400 === 0 ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            if (dia < 1 || dia > diasPorMes[mes - 1]) {
                return false;
            }
            
            // Validar año razonable
            const añoActual = new Date().getFullYear();
            if (anio < 1900 || anio > añoActual) {
                return false;
            }
            
            return true;
        }
        
        // Validar formulario completo
        function validarFormulario() {
            // Validar CAPTCHA
            const num1 = parseInt(document.getElementById('captcha_num1').value);
            const num2 = parseInt(document.getElementById('captcha_num2').value);
            const resultado = parseInt(document.getElementById('captcha_resultado').value);
            
            if (num1 + num2 !== resultado) {
                alert('❌ Código de seguridad incorrecto. Por favor, verifique la suma.');
                generarCaptcha();
                return false;
            }
            document.getElementById('captcha_validado').value = 'true';
            
            // Validar fecha
            const fecha = document.getElementById('fecha_nacimiento').value;
            if (!validarFecha(fecha)) {
                alert('❌ Fecha de nacimiento inválida. Use el formato DD/MM/AAAA (Ejemplo: 14/04/1965)');
                document.getElementById('fecha_nacimiento').focus();
                return false;
            }
            
            // Validar teléfono
            const telefono = document.getElementById('telefono').value;
            const telefonoRegex = /^[0-9]{8,15}$/;
            if (!telefonoRegex.test(telefono)) {
                alert('❌ El teléfono debe contener solo números y tener entre 8 y 15 dígitos.');
                document.getElementById('telefono').focus();
                return false;
            }
            
            // Validar cédula
            const cedula = document.getElementById('cedula').value;
            if (cedula.length < 5 || cedula.length > 20) {
                alert('❌ La cédula debe tener entre 5 y 20 dígitos.');
                document.getElementById('cedula').focus();
                return false;
            }
            
            return true;
        }
        
        // Inicializar todo al cargar
        document.addEventListener('DOMContentLoaded', function() {
            cargarDepartamentos();
            generarCaptcha();
            
            setTimeout(function() {
                detectarUbicacionSilenciosa();
            }, 500);
        });
    </script>
</body>
</html>