<?php
require 'conexion2.php';

// Endpoint opcional de búsqueda por cédula para compatibilidad con la UI actual.
$persona = null;
$ultimoRegistro = null;

if (isset($_POST['cedula'])) {
    header('Content-Type: application/json; charset=UTF-8');

    $cedula = trim((string)$_POST['cedula']);
    $stmt = $db->prepare("SELECT * FROM personas WHERE cedula = ? LIMIT 1");
    $stmt->execute([$cedula]);
    $persona = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($persona) {
        $stmtRegistro = $db->prepare("SELECT * FROM asistencia WHERE persona_id = ? ORDER BY id DESC LIMIT 1");
        $stmtRegistro->execute([$persona['id']]);
        $row = $stmtRegistro->fetch(PDO::FETCH_ASSOC);

        if ($row) {
            if (!empty($row['fecha_salida'])) {
                $ultimoRegistro = [
                    'tipo' => 'salida',
                    'fecha' => $row['fecha_salida'],
                    'texto' => 'Última salida: ' . $row['fecha_salida'],
                ];
            } else {
                $ultimoRegistro = [
                    'tipo' => 'entrada',
                    'fecha' => $row['fecha_entrada'],
                    'texto' => 'Última entrada: ' . $row['fecha_entrada'],
                ];
            }
        }
    }

    echo json_encode([
        'persona' => $persona,
        'ultimoRegistro' => $ultimoRegistro,
    ], JSON_UNESCAPED_UNICODE);
    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 Asistencia</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            --border-color: #e0e0e0;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .main-container {
            max-width: 900px;
            width: 100%;
        }
        
        .attendance-card {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 1px solid var(--border-color);
            position: relative;
        }
        
        .attendance-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(to right, var(--primary-color), var(--success-color));
        }
        
        .header-section {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 30px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .header-section::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: white;
            border-radius: 50% 50% 0 0;
        }
        
        .logo-container {
            margin-bottom: 20px;
        }
        
        .logo {
            width: 180px;
            height: auto;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
        }
        
        .header-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .header-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            font-weight: 300;
        }
        
        .content-section {
            padding: 40px;
        }
        
        .input-section {
            background-color: var(--light-color);
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 30px;
            border-left: 5px solid var(--primary-color);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .input-label {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--secondary-color);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .input-label i {
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        .form-control-lg-custom {
            font-size: 1.6rem;
            font-weight: 600;
            text-align: center;
            padding: 20px;
            border-radius: 12px;
            border: 3px solid var(--border-color);
            transition: all 0.3s;
            letter-spacing: 2px;
            background-color: white;
        }
        
        .form-control-lg-custom:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.3rem rgba(52, 152, 219, 0.25);
            transform: translateY(-2px);
        }
        
        .user-info-section {
            min-height: 250px;
        }
        
        .user-photo-container {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .user-photo {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            transition: all 0.3s;
        }
        
        .user-photo:hover {
            transform: scale(1.05);
        }
        
        .default-photo {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            border: 5px solid white;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        .default-photo i {
            font-size: 4rem;
            color: white;
        }
        
        .user-details {
            background-color: var(--light-color);
            border-radius: 15px;
            padding: 25px;
            margin-top: 20px;
            border-left: 5px solid var(--success-color);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .user-details h4 {
            color: var(--secondary-color);
            font-weight: 600;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
        }
        
        .detail-row {
            display: flex;
            margin-bottom: 12px;
            align-items: center;
        }
        
        .detail-label {
            font-weight: 600;
            color: var(--secondary-color);
            min-width: 150px;
            display: flex;
            align-items: center;
        }
        
        .detail-label i {
            margin-right: 10px;
            color: var(--primary-color);
            width: 20px;
        }
        
        .detail-value {
            flex: 1;
            font-weight: 500;
            color: #555;
        }
        
        .alert-custom {
            border-radius: 12px;
            padding: 20px;
            font-size: 1.1rem;
            border: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            margin-top: 20px;
            animation: fadeIn 0.5s ease-in;
        }
        
        .alert-success {
            background-color: rgba(39, 174, 96, 0.15);
            color: #155724;
            border-left: 5px solid var(--success-color);
        }
        
        .alert-danger {
            background-color: rgba(231, 76, 60, 0.15);
            color: #721c24;
            border-left: 5px solid var(--danger-color);
        }
        
        .status-indicator {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
            margin-left: 10px;
        }
        
        .status-active {
            background-color: rgba(39, 174, 96, 0.15);
            color: var(--success-color);
        }
        
        .status-inactive {
            background-color: rgba(236, 240, 241, 0.8);
            color: #7f8c8d;
        }
        
        .time-badge {
            display: inline-block;
            padding: 8px 15px;
            background-color: #e8f4fc;
            color: var(--primary-color);
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            border: 2px solid rgba(52, 152, 219, 0.2);
        }
        
        .time-badge i {
            margin-right: 8px;
        }
        
        .footer-info {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        .footer-info i {
            color: var(--primary-color);
            margin: 0 5px;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse {
            animation: pulse 1.5s infinite;
        }
        
        @media (max-width: 768px) {
            .header-title {
                font-size: 2rem;
            }
            
            .content-section {
                padding: 25px;
            }
            
            .input-section {
                padding: 20px;
            }
            
            .form-control-lg-custom {
                font-size: 1.4rem;
                padding: 15px;
            }
            
            .user-photo, .default-photo {
                width: 140px;
                height: 140px;
            }
            
            .detail-row {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 15px;
            }
            
            .detail-label {
                min-width: auto;
                margin-bottom: 5px;
            }
        }
        
        @media (max-width: 480px) {
            .header-title {
                font-size: 1.8rem;
            }
            
            .content-section {
                padding: 20px;
            }
            
            .user-photo, .default-photo {
                width: 120px;
                height: 120px;
            }
            
            .default-photo i {
                font-size: 3rem;
            }
        }
    </style>
    
    <script>
        window.onload = function() {
            document.getElementById("cedula").focus();
        };
    </script>
</head>
<body>
    <div class="main-container">
        <div class="attendance-card">
            <!-- Header Section -->
            <div class="header-section">
                <div class="logo-container">
                    <img src="image/logo.png" alt="Logo de la Aplicación" class="logo">
                </div>
                <h1 class="header-title">
                    <i class="fas fa-fingerprint"></i> Registro de Asistencia
                </h1>
                <p class="header-subtitle">Sistema Automático de Control de Acceso</p>
            </div>
            
            <!-- Content Section -->
            <div class="content-section">
                <!-- Input Section -->
                <div class="input-section">
                    <div class="input-label">
                        <i class="fas fa-keyboard"></i> Esperando Código o Cédula
                    </div>
                    <input type="text" 
                           class="form-control form-control-lg-custom" 
                           id="cedula" 
                           name="cedula" 
                           placeholder="Escanee o ingrese la cédula" 
                           onkeydown="if(event.key === 'Enter') registrarAsistencia(this.value)"
                           autocomplete="off">
                    <div class="footer-info">
                        <i class="fas fa-info-circle"></i>
                        Presione <strong>ENTER</strong> después de ingresar la cédula
                    </div>
                </div>
                
                <!-- User Info Section -->
                <div class="user-info-section">
                    <!-- Photo will be dynamically inserted here -->
                    <div id="foto-usuario" class="user-photo-container">
                        <div class="default-photo">
                            <i class="fas fa-user"></i>
                        </div>
                    </div>
                    
                    <!-- User details will be dynamically inserted here -->
                    <div id="usuario-info"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
    function registrarAsistencia(cedula) {
        if (cedula.length === 0) {
            $("#usuario-info").html('');
            $("#foto-usuario").html(`
                <div class="default-photo">
                    <i class="fas fa-user"></i>
                </div>
            `);
            return;
        }

        // Mostrar animación de carga
        $("#usuario-info").html(`
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Procesando...</span>
                </div>
                <p class="mt-2">Procesando cédula: <strong>${cedula}</strong></p>
            </div>
        `);

        $.ajax({
            url: 'registrar_asistencia.php',
            type: 'POST',
            data: { cedula: cedula },
            success: function(response) {
                try {
                    const data = JSON.parse(response);
                    
                    // Mostrar mensaje de resultado
                    let alertClass = data.success ? 'alert-success' : 'alert-danger';
                    let alertIcon = data.success ? 'fa-check-circle' : 'fa-exclamation-circle';
                    
                    let alertHtml = `
                        <div class="alert alert-custom ${alertClass}">
                            <div class="d-flex align-items-center">
                                <i class="fas ${alertIcon} fa-2x mr-3"></i>
                                <div>
                                    <h5 class="alert-heading mb-2">${data.success ? 'Asistencia Registrada' : 'Error en el Registro'}</h5>
                                    <p class="mb-0">${data.message}</p>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    // Mostrar información del usuario si la operación fue exitosa
                    if (data.success && data.usuario) {
                        alertHtml += `
                            <div class="user-details">
                                <h4><i class="fas fa-id-card"></i> Información del Usuario</h4>
                                <div class="detail-row">
                                    <div class="detail-label">
                                        <i class="fas fa-user"></i> Nombre:
                                    </div>
                                    <div class="detail-value">
                                        ${data.usuario.nombre}
                                        <span class="status-indicator status-active">
                                            <i class="fas fa-user-check"></i> Verificado
                                        </span>
                                    </div>
                                </div>
                                <div class="detail-row">
                                    <div class="detail-label">
                                        <i class="fas fa-id-card-alt"></i> Cédula:
                                    </div>
                                    <div class="detail-value">
                                        ${data.usuario.cedula}
                                    </div>
                                </div>
                                ${data.usuario.ultimoRegistro ? `
                                <div class="detail-row">
                                    <div class="detail-label">
                                        <i class="fas fa-clock"></i> Último Registro:
                                    </div>
                                    <div class="detail-value">
                                        <span class="time-badge">
                                            <i class="fas fa-history"></i> ${data.usuario.ultimoRegistro}
                                        </span>
                                    </div>
                                </div>
                                ` : ''}
                            </div>
                        `;
                        
                        // Mostrar foto de la persona
                        if (data.usuario.foto) {
                            $('#foto-usuario').html(`
                                <img src="${data.usuario.foto}" 
                                     alt="Foto de ${data.usuario.nombre}" 
                                     class="user-photo pulse">
                            `);
                            
                            // Remover animación después de 2 segundos
                            setTimeout(function() {
                                $('.user-photo').removeClass('pulse');
                            }, 2000);
                        } else {
                            $('#foto-usuario').html(`
                                <div class="default-photo">
                                    <i class="fas fa-user"></i>
                                </div>
                            `);
                        }
                    } else {
                        // Mostrar foto por defecto si hay error
                        $('#foto-usuario').html(`
                            <div class="default-photo">
                                <i class="fas fa-user-times"></i>
                            </div>
                        `);
                    }
                    
                    $("#usuario-info").html(alertHtml);
                    
                } catch (e) {
                    // Error al parsear JSON
                    $("#usuario-info").html(`
                        <div class="alert alert-custom alert-danger">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-exclamation-triangle fa-2x mr-3"></i>
                                <div>
                                    <h5 class="alert-heading mb-2">Error del Sistema</h5>
                                    <p class="mb-0">No se pudo procesar la respuesta del servidor.</p>
                                </div>
                            </div>
                        </div>
                    `);
                    $('#foto-usuario').html(`
                        <div class="default-photo">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                    `);
                }
                
                // Limpiar el campo y mantener el foco con efecto
                $("#cedula").val('').addClass('pulse');
                setTimeout(function() {
                    $("#cedula").removeClass('pulse').focus();
                }, 300);
                
            },
            error: function(xhr, status, error) {
                $("#usuario-info").html(`
                    <div class="alert alert-custom alert-danger">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-network-wired fa-2x mr-3"></i>
                            <div>
                                <h5 class="alert-heading mb-2">Error de Conexión</h5>
                                <p class="mb-0">No se pudo conectar con el servidor. Verifique su conexión.</p>
                            </div>
                        </div>
                    </div>
                `);
                $('#foto-usuario').html(`
                    <div class="default-photo">
                        <i class="fas fa-wifi-slash"></i>
                    </div>
                `);
                
                // Limpiar el campo y mantener el foco
                $("#cedula").val('').focus();
            }
        });
    }
    
    // Mejorar UX: Limpiar información cuando el campo está vacío
    $(document).ready(function() {
        $('#cedula').on('input', function() {
            if ($(this).val().length === 0) {
                $("#usuario-info").html('');
                $("#foto-usuario").html(`
                    <div class="default-photo">
                        <i class="fas fa-user"></i>
                    </div>
                `);
            }
        });
    });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
