<?php
session_start();
if (!isset($_SESSION['admin_usuario'])) {
    header('Location: ../admin_login.php');
    exit();
}
require_once '../config/database.php';

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

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $nombre = trim($_POST['nombre']);
    $apellido = trim($_POST['apellido']);
    $cedula = trim($_POST['cedula']);
    $fecha_nacimiento = $_POST['fecha_nacimiento'];
    $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
    $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 (count($errores) > 0) {
        $mensajeError = '<div class="alert alert-error">❌ ' . implode('<br>', $errores) . '</div>';
    } else {
        try {
            $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">✅ Miembro agregado exitosamente. <a href="miembros.php">Ver lista de miembros</a></div>';
                echo '<script>setTimeout(function() { window.location.href = "agregar_miembro.php?exito=1"; }, 2000);</script>';
            }
        } catch(PDOException $e) {
            $mensajeError = '<div class="alert alert-error">❌ Error: ' . $e->getMessage() . '</div>';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agregar Miembro - RIPA Admin</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: #f0f2f5;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            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: 25px 30px;
        }
        
        header h1 {
            font-size: 28px;
            margin-bottom: 5px;
        }
        
        header p {
            opacity: 0.9;
            font-size: 14px;
        }
        
        nav {
            background: #f8f9fa;
            padding: 12px 25px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        nav a {
            color: #003366;
            text-decoration: none;
            font-weight: 500;
            padding: 5px 10px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        nav a:hover {
            background: #003366;
            color: white;
        }
        
        .form-container {
            padding: 30px;
        }
        
        .row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #003366;
            font-size: 14px;
        }
        
        label .required {
            color: #dc3545;
            margin-left: 3px;
        }
        
        input, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #0099cc;
            box-shadow: 0 0 0 3px rgba(0, 153, 204, 0.1);
        }
        
        .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;
            width: 100%;
            transition: transform 0.3s ease;
        }
        
        .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;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border-left: 4px solid #28a745;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }
        
        small {
            display: block;
            margin-top: 5px;
            color: #666;
            font-size: 11px;
        }
        
        @media (max-width: 768px) {
            .form-container {
                padding: 20px;
            }
            
            .row {
                grid-template-columns: 1fr;
                gap: 0;
            }
        }
        
        .info-box {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #2196F3;
        }
        
        .info-box strong {
            color: #003366;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>➕ Agregar Nuevo Miembro</h1>
            <p>Complete el formulario para registrar un nuevo miembro en RIPA</p>
        </header>
        
        <nav>
            <a href="index.php">🏠 Inicio</a>
            <a href="miembros.php">📋 Lista de Miembros</a>
            <a href="enviar_mensaje.php">📨 Enviar Mensaje</a>
            <a href="verificar_cumpleanos.php">🎂 Cumpleaños</a>
            <a href="exportar_excel.php">📊 Exportar Excel</a>
            <a href="../logout.php">🚪 Cerrar Sesión</a>
        </nav>
        
        <div class="form-container">
            <?php if (isset($_GET['exito'])): ?>
                <div class="alert alert-success">✅ Miembro agregado exitosamente. <a href="miembros.php">Ver todos los miembros</a></div>
            <?php endif; ?>
            
            <?php echo $mensaje; ?>
            <?php echo $mensajeError; ?>
            
            <div class="info-box">
                <strong>📌 Información:</strong> Los campos marcados con <span class="required">*</span> son obligatorios.
            </div>
            
            <form method="POST">
                <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 Carlos" autofocus>
                        </div>
                        
                        <div class="form-group">
                            <label>Apellido <span class="required">*</span></label>
                            <input type="text" name="apellido" id="apellido" required placeholder="Ej: González">
                        </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">
                            <small>Sin puntos ni espacios</small>
                        </div>
                        
                        <div class="form-group">
                            <label>Fecha de Nacimiento <span class="required">*</span></label>
                            <input type="date" name="fecha_nacimiento" id="fecha_nacimiento" required>
                        </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">
                            <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">
                        </div>
                    </div>
                </div>
                
                <!-- Campos ocultos para ubicación (detección silenciosa) -->
                <input type="hidden" name="latitud" id="latitud" value="">
                <input type="hidden" name="longitud" id="longitud" value="">
                
                <button type="submit" class="btn-submit">💾 Guardar Miembro</button>
            </form>
        </div>
    </div>
    
    <script>
        // Detección de ubicación SILENCIOSA - sin mapa
        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;
                        
                        // Auto-completar ciudad silenciosamente
                        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
        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');
            departamentos.forEach(depto => {
                const option = document.createElement('option');
                option.value = depto;
                option.textContent = depto;
                select.appendChild(option);
            });
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            cargarDepartamentos();
            setTimeout(function() {
                detectarUbicacionSilenciosa();
            }, 500);
        });
    </script>
</body>
</html>