<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verificar Estado del Sistema - WhatsApp Bot</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .status-card { margin: 20px 0; }
        .status-ok { color: green; }
        .status-error { color: red; }
        .cache-info { background-color: #f8f9fa; padding: 15px; border-left: 4px solid #007bff; }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">🔧 Estado del Sistema WhatsApp Bot</h1>
        
        <div class="cache-info">
            <h3>⚠️ Problema de Caché Detectado</h3>
            <p>Si los cambios no aparecen, es porque tu navegador está usando archivos en caché (archivos antiguos guardados). Para solucionarlo:</p>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card status-card">
                    <div class="card-header bg-primary text-white">
                        <h5>🧹 Limpiar Caché del Navegador</h5>
                    </div>
                    <div class="card-body">
                        <h6>Método 1 - Recarga Forzada:</h6>
                        <ul>
                            <li><strong>Mac:</strong> Cmd + Shift + R</li>
                            <li><strong>PC:</strong> Ctrl + Shift + R</li>
                        </ul>
                        
                        <h6>Método 2 - Limpiar Caché Manual:</h6>
                        <ol>
                            <li>Presiona F12 (Herramientas del desarrollador)</li>
                            <li>Clic derecho en el botón de recarga</li>
                            <li>Selecciona "Vaciar caché y recarga forzada"</li>
                        </ol>
                        
                        <h6>Método 3 - Ventana Incógnita:</h6>
                        <p>Abre una ventana incógnita/privada y ve a localhost:8080</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card status-card">
                    <div class="card-header bg-success text-white">
                        <h5>✅ Estado Actual del Sistema</h5>
                    </div>
                    <div class="card-body">
                        <div class="status-item">
                            <strong>Servidor PHP:</strong> 
                            <span class="status-ok">✓ Corriendo en puerto 8080</span>
                        </div>
                        <div class="status-item">
                            <strong>Fecha de esta página:</strong> 
                            <span class="status-ok"><?php echo date('Y-m-d H:i:s'); ?></span>
                        </div>
                        <div class="status-item">
                            <strong>Archivos actualizados:</strong>
                            <ul>
                                <li>index.php - Sistema de login ✓</li>
                                <li>login.php - Autenticación ✓</li>
                                <li>logout.php - Cerrar sesión ✓</li>
                                <li>assets/js/app_simple.js - Corregido SES ✓</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header bg-info text-white">
                <h5>🔍 Verificación de Archivos</h5>
            </div>
            <div class="card-body">
                <?php
                $files_to_check = [
                    'index.php' => 'Página principal con sistema de login',
                    'login.php' => 'Página de autenticación',
                    'logout.php' => 'Cerrar sesión',
                    'config/config.php' => 'Configuración y funciones de autenticación'
                ];
                
                foreach ($files_to_check as $file => $description) {
                    if (file_exists($file)) {
                        $last_modified = date('Y-m-d H:i:s', filemtime($file));
                        echo "<div class='status-ok'>✓ <strong>$file</strong> - $description (Modificado: $last_modified)</div>";
                    } else {
                        echo "<div class='status-error'>✗ <strong>$file</strong> - No encontrado</div>";
                    }
                }
                ?>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header bg-warning">
                <h5>🚀 Acciones Rápidas</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <a href="login.php" class="btn btn-primary btn-block w-100">🔐 Ir al Login</a>
                    </div>
                    <div class="col-md-4">
                        <a href="index.php" class="btn btn-success btn-block w-100">🏠 Panel Principal</a>
                    </div>
                    <div class="col-md-4">
                        <button onclick="window.location.reload(true)" class="btn btn-warning btn-block w-100">🔄 Recargar Página</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="alert alert-info mt-4">
            <h5>📝 Instrucciones para Verificar Cambios:</h5>
            <ol>
                <li><strong>Limpia el caché</strong> usando uno de los métodos arriba</li>
                <li><strong>Ve a</strong> <a href="login.php">login.php</a> - Deberías ver el formulario de login</li>
                <li><strong>Usa las credenciales:</strong> admin / 2fa904eee46f</li>
                <li><strong>Una vez logueado,</strong> deberías ver el panel principal con botones de logout</li>
                <li><strong>Los menús</strong> deberían funcionar sin problemas</li>
                <li><strong>Los modales</strong> para crear plantillas y menús deberían abrirse</li>
            </ol>
        </div>
    </div>

    <script>
        // Función para forzar recarga sin caché
        function forceReload() {
            window.location.reload(true);
        }
        
        // Función para mostrar información del navegador
        function showBrowserInfo() {
            console.log('User Agent:', navigator.userAgent);
            console.log('Página cargada a:', new Date().toISOString());
        }
        
        showBrowserInfo();
    </script>
</body>
</html>