One Hat Cyber Team

Edit File: conteo-inscripciones_v0.php

<?php
// Configuración
$api_url = 'https://sheetdb.io/api/v1/vayk0kta4cqur';

// Función para obtener datos del API
function obtenerInscripciones() {
    global $api_url;
    try {
        $response = @file_get_contents($api_url);
        if ($response === false) {
            return ['error' => 'Error al conectar con el API'];
        }
        $data = json_decode($response, true);
        if (json_last_error() !== JSON_ERROR_NONE) {
            return ['error' => 'Error al procesar datos JSON'];
        }
        return $data;
    } catch (Exception $e) {
        return ['error' => 'Excepción: ' . $e->getMessage()];
    }
}

// Obtener datos
$inscripciones = obtenerInscripciones();

// Procesar datos
$primera_circunscripcion = 0;
$otras_circunscripciones = 0;
$detalle_por_circunscripcion = [];

if (!isset($inscripciones['error'])) {
    foreach ($inscripciones as $row) {
        $circunscripcion = $row['Circunscripción'] ?? 'Sin especificar';
        
        if ($circunscripcion === 'Primera Circunscripción') {
            $primera_circunscripcion++;
        } else {
            $otras_circunscripciones++;
        }
        
        // Contar por cada circunscripción
        if (!isset($detalle_por_circunscripcion[$circunscripcion])) {
            $detalle_por_circunscripcion[$circunscripcion] = 0;
        }
        $detalle_por_circunscripcion[$circunscripcion]++;
    }
    arsort($detalle_por_circunscripcion);
}

$total = $primera_circunscripcion + $otras_circunscripciones;
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inscriptos a presentación de libro</title>
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px 0;
        }
        .card {
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
        }
        .stat-card {
            text-align: center;
            padding: 30px;
        }
        .stat-number {
            font-size: 48px;
            font-weight: bold;
            color: #667eea;
            margin: 10px 0;
        }
        .stat-label {
            font-size: 14px;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .progress-section {
            margin-top: 20px;
        }
        .badge-circunscripcion {
            display: inline-block;
            margin: 5px;
            padding: 8px 12px;
            background-color: #e9ecef;
            border-radius: 20px;
            font-size: 12px;
        }
        .error-message {
            background-color: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .refresh-time {
            font-size: 12px;
            color: #6c757d;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div style="text-align: center; margin-bottom: 30px;">
                    <img src="assets/images/logo-ecj.png" alt="logo ecj" width="150px"/>
                </div>
                <h1 class="mb-4">Inscriptos a presentación de libro</h1>

<?php if (isset($inscripciones['error'])): ?>
                    <div class="error-message">
                        <strong>Error:</strong> <?php echo htmlspecialchars($inscripciones['error']); ?>
                    </div>
                <?php else: ?>
                    
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card stat-card">
                                <div class="stat-label">Total de Inscritos</div>
                                <div class="stat-number"><?php echo $total; ?></div>
                                <small class="text-muted">Personas registradas</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card stat-card">
                                <div class="stat-label">Primera Circunscripción</div>
                                <div class="stat-number" style="color: #28a745;"><?php echo $primera_circunscripcion; ?></div>
                                <small class="text-muted"><?php echo $total > 0 ? round(($primera_circunscripcion/$total)*100, 1) : 0; ?>% del total</small>
                            </div>
                        </div>
                    </div>

<?php if ($total > 0): ?>
                    <div class="card">
                        <div class="card-body progress-section">
                            <h5 class="card-title">Distribución</h5>
                            <div class="progress" style="height: 25px;">
                                <div class="progress-bar bg-success" role="progressbar" 
                                     style="width: <?php echo ($primera_circunscripcion/$total)*100; ?>%"
                                     aria-valuenow="<?php echo $primera_circunscripcion; ?>" 
                                     aria-valuemin="0" aria-valuemax="<?php echo $total; ?>">
                                    Primera Circunscripción: <?php echo $primera_circunscripcion; ?>
                                </div>
                                <div class="progress-bar bg-info" role="progressbar" 
                                     style="width: <?php echo ($otras_circunscripciones/$total)*100; ?>%"
                                     aria-valuenow="<?php echo $otras_circunscripciones; ?>" 
                                     aria-valuemin="0" aria-valuemax="<?php echo $total; ?>">
                                    Otras: <?php echo $otras_circunscripciones; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

<?php if (!empty($detalle_por_circunscripcion)): ?>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Desglose por Circunscripción</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Circunscripción</th>
                                            <th class="text-right">Cantidad</th>
                                            <th class="text-right">Porcentaje</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach ($detalle_por_circunscripcion as $circunscripcion => $cantidad): ?>
                                        <tr>
                                            <td><?php echo htmlspecialchars($circunscripcion); ?></td>
                                            <td class="text-right"><strong><?php echo $cantidad; ?></strong></td>
                                            <td class="text-right"><?php echo round(($cantidad/$total)*100, 1); ?>%</td>
                                        </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>

<div class="refresh-time">
                        🔄 Última actualización: <?php echo date('d/m/Y H:i:s'); ?> | 
                        <a href="javascript:location.reload()">Actualizar ahora</a>
                    </div>

<?php endif; ?>
            </div>
        </div>
    </div>