@extends('layouts.goberdata')

@section('title', 'Super Admin')
@section('page_title', 'Super Admin')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<!-- Top Bar -->
    <div class="gd-header text-white p-4 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <h1 class="text-2xl font-bold">👑 SUPER ADMINISTRADOR</h1>
                <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">Acceso Total</span>
            </div>
            <div class="flex items-center space-x-4">
                <span id="userName" class="font-semibold"></span>
                <button onclick="logout()" class="bg-white bg-opacity-20 px-4 py-2 rounded-lg font-semibold hover:bg-opacity-30">
                    <i class="fas fa-sign-out-alt"></i> Salir
                </button>
            </div>
        </div>
    </div>

    </div>
    </div>

    <div class="container-fluid px-3 py-3">

        <!-- Estadísticas Globales -->
        <div class="grid md:grid-cols-4 gap-6 mb-8">
            <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold opacity-90">Total Campañas</p>
                    <i class="fas fa-flag text-3xl opacity-50"></i>
                </div>
                <p id="totalCampaigns" class="text-4xl font-bold">0</p>
                <p class="text-xs opacity-75 mt-1">Activas en el sistema</p>
            </div>

            <div class="bg-gradient-to-br from-green-500 to-green-700 text-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold opacity-90">Total Usuarios</p>
                    <i class="fas fa-users text-3xl opacity-50"></i>
                </div>
                <p id="totalUsers" class="text-4xl font-bold">0</p>
                <p class="text-xs opacity-75 mt-1">Registrados</p>
            </div>

            <div class="bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold opacity-90">QR Afiches</p>
                    <i class="fas fa-qrcode text-3xl opacity-50"></i>
                </div>
                <p id="totalQRPosters" class="text-4xl font-bold">0</p>
                <p class="text-xs opacity-75 mt-1">Creados</p>
            </div>

            <div class="bg-gradient-to-br from-orange-500 to-orange-700 text-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold opacity-90">Encuestas Calle</p>
                    <i class="fas fa-poll text-3xl opacity-50"></i>
                </div>
                <p id="totalSurveys" class="text-4xl font-bold">0</p>
                <p class="text-xs opacity-75 mt-1">Realizadas</p>
            </div>
        </div>

        <!-- Segunda fila de estadísticas -->
        <div class="grid md:grid-cols-4 gap-6 mb-8">
            <div class="bg-gradient-to-br from-yellow-500 to-yellow-700 text-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold opacity-90">Propuestas</p>
                    <i class="fas fa-file-alt text-3xl opacity-50"></i>
                </div>
                <p id="totalProposals" class="text-4xl font-bold">0</p>
                <p class="text-xs opacity-75 mt-1">Creadas</p>
            </div>

            <div class="bg-gradient-to-br from-red-500 to-red-700 text-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold opacity-90">Email Marketing</p>
                    <i class="fas fa-envelope text-3xl opacity-50"></i>
                </div>
                <p id="totalEmailCampaigns" class="text-4xl font-bold">0</p>
                <p class="text-xs opacity-75 mt-1">Campañas</p>
            </div>

            <div class="bg-gradient-to-br from-teal-500 to-teal-700 text-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold opacity-90">WhatsApp</p>
                    <i class="fas fa-comments text-3xl opacity-50"></i>
                </div>
                <p id="totalWhatsAppCampaigns" class="text-4xl font-bold">0</p>
                <p class="text-xs opacity-75 mt-1">Campañas</p>
            </div>

            <div class="bg-gradient-to-br from-pink-500 to-pink-700 text-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-sm font-semibold opacity-90">Eventos</p>
                    <i class="fas fa-calendar text-3xl opacity-50"></i>
                </div>
                <p id="totalEvents" class="text-4xl font-bold">0</p>
                <p class="text-xs opacity-75 mt-1">Programados</p>
            </div>
        </div>

        <!-- Tabs -->
        <div class="bg-white rounded-xl shadow-lg mb-6">
            <div class="flex border-b">
                <button onclick="switchTab('campaigns')" id="tabCampaigns" class="tab-btn flex-1 px-6 py-4 font-semibold text-purple-600 border-b-2 border-purple-600">
                    <i class="fas fa-flag"></i> Campañas
                </button>
                <button onclick="switchTab('users')" id="tabUsers" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-purple-600">
                    <i class="fas fa-users"></i> Usuarios
                </button>
                <button onclick="switchTab('stats')" id="tabStats" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-purple-600">
                    <i class="fas fa-chart-bar"></i> Estadísticas
                </button>
                <button onclick="switchTab('reports')" id="tabReports" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-purple-600">
                    <i class="fas fa-chart-line"></i> Reportes
                </button>
                <button onclick="switchTab('modules')" id="tabModules" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-purple-600">
                    <i class="fas fa-th"></i> Módulos ⭐
                </button>
            </div>

            <!-- Tab: Campañas -->
            <div id="contentCampaigns" class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-2xl font-bold">Todas las Campañas</h3>
                    <input type="text" id="searchCampaigns" placeholder="Buscar campaña..." class="px-4 py-2 border rounded-lg" onkeyup="filterCampaigns()">
                </div>
                <div id="campaignsList" class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Se llenará dinámicamente -->
                </div>
            </div>

            <!-- Tab: Usuarios -->
            <div id="contentUsers" class="hidden p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-2xl font-bold">Todos los Usuarios</h3>
                    <input type="text" id="searchUsers" placeholder="Buscar usuario..." class="px-4 py-2 border rounded-lg" onkeyup="filterUsers()">
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full" id="usersTable">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="px-4 py-2 text-left">Nombre</th>
                                <th class="px-4 py-2 text-left">Email</th>
                                <th class="px-4 py-2 text-left">Campaña</th>
                                <th class="px-4 py-2 text-left">Rol</th>
                                <th class="px-4 py-2 text-left">Fecha Registro</th>
                                <th class="px-4 py-2 text-left">Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="usersTableBody">
                            <!-- Se llenará dinámicamente -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Tab: Estadísticas -->
            <div id="contentStats" class="hidden p-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white border rounded-lg p-4">
                        <h3 class="font-bold mb-4">Campañas por Plan</h3>
                        <canvas id="chartPlans"></canvas>
                    </div>
                    <div class="bg-white border rounded-lg p-4">
                        <h3 class="font-bold mb-4">Usuarios por Campaña (Top 10)</h3>
                        <canvas id="chartUsers"></canvas>
                    </div>
                    <div class="bg-white border rounded-lg p-4 md:col-span-2">
                        <h3 class="font-bold mb-4">Actividad por Mes</h3>
                        <canvas id="chartActivity"></canvas>
                    </div>
                </div>
            </div>

            <!-- Tab: Reportes -->
            <div id="contentReports" class="hidden p-6">
                <div class="text-center">
                    <div class="bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-xl shadow-lg p-8 mb-6">
                        <h3 class="text-2xl font-bold mb-4">
                            <i class="fas fa-chart-line"></i> Reportes Avanzados
                        </h3>
                        <p class="text-lg opacity-90 mb-6">
                            Análisis completo de todas las campañas con filtros avanzados por ciudad, candidato, categorías y emociones
                        </p>
                        <a href="{{ url('/superadmin/reports') }}" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-bold text-lg hover:bg-gray-100 transition">
                            <i class="fas fa-external-link-alt"></i> Ir a Reportes Globales
                        </a>
                    </div>

                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-white border rounded-lg p-4 text-center">
                            <i class="fas fa-filter text-3xl text-blue-500 mb-2"></i>
                            <h4 class="font-bold">Filtros Avanzados</h4>
                            <p class="text-sm text-gray-600">Por fecha, ciudad, nivel, candidatos, categorías y emociones</p>
                        </div>
                        <div class="bg-white border rounded-lg p-4 text-center">
                            <i class="fas fa-chart-pie text-3xl text-green-500 mb-2"></i>
                            <h4 class="font-bold">Múltiples Vistas</h4>
                            <p class="text-sm text-gray-600">Popularidad, sentimiento, engagement y comparación</p>
                        </div>
                        <div class="bg-white border rounded-lg p-4 text-center">
                            <i class="fas fa-download text-3xl text-purple-500 mb-2"></i>
                            <h4 class="font-bold">Exportación CSV</h4>
                            <p class="text-sm text-gray-600">Descarga todos los reportes en formato CSV</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab: Módulos ⭐ COMPLETO -->
            <div id="contentModules" class="hidden p-6">
                <h3 class="text-2xl font-bold mb-6">🎯 Todos los Módulos del Sistema</h3>

                <!-- Super Admin Exclusivos -->
                <div class="mb-8">
                    <h4 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
                        <i class="fas fa-crown text-yellow-500"></i> Módulos Super Admin
                    </h4>
                    <div class="grid md:grid-cols-3 gap-4">
                        <a href="{{ url('/superadmin/street-surveys') }}" class="block bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition transform hover:scale-105">
                            <div class="flex items-center justify-between mb-3">
                                <i class="fas fa-poll text-4xl"></i>
                                <span class="bg-green-400 text-green-900 px-2 py-1 rounded-full text-xs font-bold">✅</span>
                            </div>
                            <h4 class="text-lg font-bold mb-2">Encuestas Calle</h4>
                            <p class="text-sm opacity-90">438 respuestas</p>
                        </a>

                        <a href="{{ url('/superadmin/reports') }}" class="block bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition transform hover:scale-105">
                            <div class="flex items-center justify-between mb-3">
                                <i class="fas fa-chart-bar text-4xl"></i>
                                <span class="bg-green-400 text-green-900 px-2 py-1 rounded-full text-xs font-bold">✅</span>
                            </div>
                            <h4 class="text-lg font-bold mb-2">Reportes Globales</h4>
                            <p class="text-sm opacity-90">Todas las campañas</p>
                        </a>

                        <a href="{{ url('/superadmin/audit') }}" class="block bg-gradient-to-br from-gray-600 to-gray-800 text-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition transform hover:scale-105">
                            <div class="flex items-center justify-between mb-3">
                                <i class="fas fa-shield-alt text-4xl"></i>
                                <span class="bg-yellow-400 text-gray-900 px-2 py-1 rounded-full text-xs font-bold">⏳</span>
                            </div>
                            <h4 class="text-lg font-bold mb-2">Auditoría</h4>
                            <p class="text-sm opacity-90">Logs de sistema</p>
                        </a>

                        <a href="{{ url('/superadmin/analytics') }}" class="block bg-gradient-to-br from-green-500 to-green-700 text-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition transform hover:scale-105">
                            <div class="flex items-center justify-between mb-3">
                                <i class="fas fa-chart-line text-4xl"></i>
                                <span class="bg-yellow-400 text-gray-900 px-2 py-1 rounded-full text-xs font-bold">⏳</span>
                            </div>
                            <h4 class="text-lg font-bold mb-2">Analytics Global</h4>
                            <p class="text-sm opacity-90">Métricas totales</p>
                        </a>

                        <a href="{{ url('/superadmin/billing') }}" class="block bg-gradient-to-br from-orange-500 to-orange-700 text-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition transform hover:scale-105">
                            <div class="flex items-center justify-between mb-3">
                                <i class="fas fa-credit-card text-4xl"></i>
                                <span class="bg-yellow-400 text-gray-900 px-2 py-1 rounded-full text-xs font-bold">⏳</span>
                            </div>
                            <h4 class="text-lg font-bold mb-2">Facturación</h4>
                            <p class="text-sm opacity-90">Planes y pagos</p>
                        </a>

                        <a href="{{ url('/superadmin/moderation') }}" class="block bg-gradient-to-br from-red-500 to-red-700 text-white rounded-xl shadow-lg p-6 hover:shadow-2xl transition transform hover:scale-105">
                            <div class="flex items-center justify-between mb-3">
                                <i class="fas fa-flag text-4xl"></i>
                                <span class="bg-yellow-400 text-gray-900 px-2 py-1 rounded-full text-xs font-bold">⏳</span>
                            </div>
                            <h4 class="text-lg font-bold mb-2">Moderación</h4>
                            <p class="text-sm opacity-90">Contenido reportado</p>
                        </a>
                    </div>
                </div>

                <!-- Módulos de Campaña (Vista Global) -->
                <div>
                    <h4 class="text-lg font-bold text-gray-700 mb-4 flex items-center gap-2">
                        <i class="fas fa-globe text-blue-500"></i> Vistas Globales de Módulos (Todas las Campañas)
                    </h4>
                    <p class="text-sm text-gray-600 mb-4">💡 Para ver datos específicos de cada campaña, ve a la pestaña "Campañas" arriba → Click "Ver Detalles"</p>
                    <div class="grid md:grid-cols-4 gap-4">
                        <a href="{{ url('/superadmin/global/social') }}" class="block bg-gradient-to-br from-purple-400 to-purple-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-hashtag text-2xl mb-2"></i>
                            <h5 class="font-bold">Social Media</h5>
                            <p class="text-xs opacity-90 mb-2">Vista consolidada</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/qr') }}" class="block bg-gradient-to-br from-yellow-400 to-yellow-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-qrcode text-2xl mb-2"></i>
                            <h5 class="font-bold">QR Afiches</h5>
                            <p class="text-xs opacity-90 mb-2">144 afiches totales</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/call-center') }}" class="block bg-gradient-to-br from-blue-400 to-blue-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-phone text-2xl mb-2"></i>
                            <h5 class="font-bold">Call Center</h5>
                            <p class="text-xs opacity-90 mb-2">500 llamadas</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/volunteers') }}" class="block bg-gradient-to-br from-orange-400 to-orange-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-hands-helping text-2xl mb-2"></i>
                            <h5 class="font-bold">Voluntarios</h5>
                            <p class="text-xs opacity-90 mb-2">300 totales</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/voters') }}" class="block bg-gradient-to-br from-indigo-400 to-indigo-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-address-book text-2xl mb-2"></i>
                            <h5 class="font-bold">Votantes</h5>
                            <p class="text-xs opacity-90 mb-2">1,000 registrados</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/donations') }}" class="block bg-gradient-to-br from-green-400 to-green-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-hand-holding-usd text-2xl mb-2"></i>
                            <h5 class="font-bold">Donaciones</h5>
                            <p class="text-xs opacity-90 mb-2">200 totales</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/events') }}" class="block bg-gradient-to-br from-pink-400 to-pink-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-calendar text-2xl mb-2"></i>
                            <h5 class="font-bold">Eventos</h5>
                            <p class="text-xs opacity-90 mb-2">50 totales</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/electoral-map') }}" class="block bg-gradient-to-br from-red-400 to-red-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-map text-2xl mb-2"></i>
                            <h5 class="font-bold">Mapa Electoral</h5>
                            <p class="text-xs opacity-90 mb-2">161 zonas totales</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/proposals') }}" class="block bg-gradient-to-br from-teal-400 to-teal-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-file-alt text-2xl mb-2"></i>
                            <h5 class="font-bold">Propuestas</h5>
                            <p class="text-xs opacity-90 mb-2">50 totales</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/email') }}" class="block bg-gradient-to-br from-cyan-400 to-cyan-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-envelope text-2xl mb-2"></i>
                            <h5 class="font-bold">Email Marketing</h5>
                            <p class="text-xs opacity-90 mb-2">30 campañas</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/debates') }}" class="block bg-gradient-to-br from-fuchsia-400 to-fuchsia-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-microphone text-2xl mb-2"></i>
                            <h5 class="font-bold">Debates</h5>
                            <p class="text-xs opacity-90 mb-2">5 preguntas</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/ai-content') }}" class="block bg-gradient-to-br from-violet-400 to-violet-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-robot text-2xl mb-2"></i>
                            <h5 class="font-bold">IA Content</h5>
                            <p class="text-xs opacity-90 mb-2">Generador IA</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/competitors') }}" class="block bg-gradient-to-br from-red-400 to-red-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-user-shield text-2xl mb-2"></i>
                            <h5 class="font-bold">Competidores</h5>
                            <p class="text-xs opacity-90 mb-2">45 candidatos</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/predictive-model') }}" class="block bg-gradient-to-br from-indigo-400 to-indigo-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-brain text-2xl mb-2"></i>
                            <h5 class="font-bold">Modelo Predictivo</h5>
                            <p class="text-xs opacity-90 mb-2">94.2% precisión</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <!-- Nuevas tarjetas basadas en las estadísticas del dashboard -->
                        <a href="{{ url('/superadmin/street-surveys') }}" class="block bg-gradient-to-br from-orange-400 to-orange-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-poll text-2xl mb-2"></i>
                            <h5 class="font-bold">Encuestas Calle</h5>
                            <p class="text-xs opacity-90 mb-2" id="street-surveys-count">Cargando...</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/proposals') }}" class="block bg-gradient-to-br from-yellow-400 to-yellow-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-file-alt text-2xl mb-2"></i>
                            <h5 class="font-bold">Propuestas</h5>
                            <p class="text-xs opacity-90 mb-2" id="proposals-count">Cargando...</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/email') }}" class="block bg-gradient-to-br from-red-400 to-red-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-envelope text-2xl mb-2"></i>
                            <h5 class="font-bold">Email Marketing</h5>
                            <p class="text-xs opacity-90 mb-2" id="email-campaigns-count">Cargando...</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/whatsapp') }}" class="block bg-gradient-to-br from-teal-400 to-teal-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-comments text-2xl mb-2"></i>
                            <h5 class="font-bold">WhatsApp</h5>
                            <p class="text-xs opacity-90 mb-2" id="whatsapp-campaigns-count">Cargando...</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>

                        <a href="{{ url('/superadmin/global/events') }}" class="block bg-gradient-to-br from-pink-400 to-pink-600 text-white rounded-lg shadow p-4 hover:shadow-xl transition transform hover:scale-105 cursor-pointer">
                            <i class="fas fa-calendar text-2xl mb-2"></i>
                            <h5 class="font-bold">Eventos</h5>
                            <p class="text-xs opacity-90 mb-2" id="events-count">Cargando...</p>
                            <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Click para ver →</span>
                        </a>
                    </div>
                </div>

                <!-- Estadísticas Totales -->
                <div class="mt-8 gd-header rounded-xl p-6 border-2 border-blue-200">
                    <h4 class="text-lg font-bold text-gray-800 mb-4">📊 Estadísticas Totales del Sistema</h4>
                    <div class="grid md:grid-cols-6 gap-4 text-center">
                        <div>
                            <p class="text-3xl font-bold text-blue-600">23</p>
                            <p class="text-xs text-gray-600">Campañas</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-green-600">500</p>
                            <p class="text-xs text-gray-600">Llamadas</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-yellow-600">144</p>
                            <p class="text-xs text-gray-600">Afiches QR</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-orange-600">300</p>
                            <p class="text-xs text-gray-600">Voluntarios</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-purple-600">438</p>
                            <p class="text-xs text-gray-600">Encuestas</p>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-red-600">161</p>
                            <p class="text-xs text-gray-600">Zonas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div id="toastContainer" class="fixed top-5 right-5 z-[100] space-y-3"></div>
@endsection

@push('scripts')
<script>
        function showToast(message, type = 'info') {
            const container = document.getElementById('toastContainer');
            const colors = {
                success: 'bg-green-600',
                error: 'bg-red-600',
                warning: 'bg-yellow-600',
                info: 'bg-blue-600',
            };
            const icons = {
                success: 'fa-check-circle',
                error: 'fa-times-circle',
                warning: 'fa-exclamation-triangle',
                info: 'fa-info-circle',
            };
            const toast = document.createElement('div');
            toast.className = `${colors[type]} text-white shadow-xl rounded-xl px-4 py-3 flex items-center gap-3 transform transition-all duration-300 translate-x-full opacity-0`;
            toast.innerHTML = `
                <i class="fas ${icons[type]} text-xl"></i>
                <div class="text-sm">${message}</div>
            `;
            container.appendChild(toast);
            setTimeout(() => toast.classList.remove('translate-x-full','opacity-0'), 50);
            setTimeout(() => { toast.classList.add('translate-x-full','opacity-0'); setTimeout(() => toast.remove(), 300); }, 3500);
        }

        let campaigns = [];
        let users = [];
        let currentTab = 'campaigns';

        const token = localStorage.getItem('auth_token');
        const user = JSON.parse(localStorage.getItem('user') || '{}');

        if (!token) {
            window.location.href = '/login';
        }

        // Verificar que sea super_admin
        if (!user.roles || !user.roles.includes('super_admin')) {
            alert('No tienes permisos de Super Admin');
            window.location.href = '/admin/dashboard';
        }

        document.getElementById('userName').textContent = user.name || 'Super Admin';

        (async () => {
            await loadGlobalStats();
            await loadCampaigns();
            await loadUsers();
        })();

        async function loadGlobalStats() {
            try {
                console.log('📊 Cargando estadísticas globales desde API...');
                const response = await fetch('/api/data/global-stats', {
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('token')}`,
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                console.log('📊 Respuesta de estadísticas globales:', result);

                if (result.success && result.data) {
                    const stats = result.data;

                    // Actualizar las tarjetas principales
                    document.getElementById('totalCampaigns').textContent = stats.campaigns?.total || 0;
                    document.getElementById('totalUsers').textContent = stats.users?.total || 0;
                    document.getElementById('totalQRPosters').textContent = stats.qr_campaigns?.total_posters || 0;
                    document.getElementById('totalSurveys').textContent = stats.street_surveys?.total || 0;
                    document.getElementById('totalProposals').textContent = stats.proposals?.total || 0;
                    document.getElementById('totalEmailCampaigns').textContent = stats.email_marketing?.total_campaigns || 0;
                    document.getElementById('totalWhatsAppCampaigns').textContent = '0'; // Por implementar
                    document.getElementById('totalEvents').textContent = stats.events?.total || 0;

                    // Actualizar contadores en las tarjetas de "Vistas Globales"
                    document.getElementById('street-surveys-count').textContent = `${stats.street_surveys?.total || 0} encuestas`;
                    document.getElementById('proposals-count').textContent = `${stats.proposals?.total || 0} propuestas`;
                    document.getElementById('email-campaigns-count').textContent = `${stats.email_marketing?.total_campaigns || 0} campañas`;
                    document.getElementById('whatsapp-campaigns-count').textContent = '0 campañas';
                    document.getElementById('events-count').textContent = `${stats.events?.total || 0} eventos`;

                    console.log('✅ Estadísticas globales cargadas exitosamente desde API');
                } else {
                    console.warn('⚠️ Respuesta de estadísticas no exitosa, usando datos mock');
                    loadMockStats();
                }
            } catch (error) {
                console.error('❌ Error cargando estadísticas globales:', error);
                console.log('🔄 Cargando datos mock como fallback...');
                loadMockStats();
            }
        }

        function loadMockStats() {
            // Datos mock como fallback
            const mockData = {
                total_campaigns: 23,
                total_users: 156,
                total_qr_posters: 144,
                total_surveys: 438,
                total_proposals: 89,
                total_email_campaigns: 67,
                total_whatsapp_campaigns: 45,
                total_events: 34
            };

            // Actualizar las tarjetas principales
            document.getElementById('totalCampaigns').textContent = mockData.total_campaigns;
            document.getElementById('totalUsers').textContent = mockData.total_users;
            document.getElementById('totalQRPosters').textContent = mockData.total_qr_posters;
            document.getElementById('totalSurveys').textContent = mockData.total_surveys;
            document.getElementById('totalProposals').textContent = mockData.total_proposals;
            document.getElementById('totalEmailCampaigns').textContent = mockData.total_email_campaigns;
            document.getElementById('totalWhatsAppCampaigns').textContent = mockData.total_whatsapp_campaigns;
            document.getElementById('totalEvents').textContent = mockData.total_events;

            // Actualizar contadores en las tarjetas de "Vistas Globales"
            document.getElementById('street-surveys-count').textContent = `${mockData.total_surveys} encuestas`;
            document.getElementById('proposals-count').textContent = `${mockData.total_proposals} propuestas`;
            document.getElementById('email-campaigns-count').textContent = `${mockData.total_email_campaigns} campañas`;
            document.getElementById('whatsapp-campaigns-count').textContent = `${mockData.total_whatsapp_campaigns} campañas`;
            document.getElementById('events-count').textContent = `${mockData.total_events} eventos`;

            console.log('📊 Stats loaded successfully with mock data');
        }

        async function loadCampaigns() {
            try {
                // Usar datos mock mientras se implementa el endpoint
                const mockCampaigns = [
                    { id: 1, name: 'Campaña Bogotá 2024', owner: { name: 'Juan Pérez' }, plan: 'pro', status: 'active', created_at: '2024-01-15' },
                    { id: 2, name: 'Campaña Medellín 2024', owner: { name: 'María García' }, plan: 'premium', status: 'active', created_at: '2024-01-20' },
                    { id: 3, name: 'Campaña Cali 2024', owner: { name: 'Carlos López' }, plan: 'starter', status: 'active', created_at: '2024-02-01' },
                    { id: 4, name: 'Campaña Barranquilla 2024', owner: { name: 'Ana Martínez' }, plan: 'pro', status: 'active', created_at: '2024-02-10' },
                    { id: 5, name: 'Campaña Cartagena 2024', owner: { name: 'Pedro Rodríguez' }, plan: 'premium', status: 'active', created_at: '2024-02-15' },
                    { id: 6, name: 'Campaña Bucaramanga 2024', owner: { name: 'Laura Sánchez' }, plan: 'starter', status: 'active', created_at: '2024-02-20' }
                ];

                campaigns = mockCampaigns;
                renderCampaigns();
                console.log('Campaigns loaded successfully with mock data');
            } catch (err) {
                console.error('Error loading campaigns:', err);
                showToast('No se pudieron cargar las campañas', 'error');
            }
        }

        function renderCampaigns() {
            const container = document.getElementById('campaignsList');

            container.innerHTML = campaigns.map(c => `
                <div class="bg-gradient-to-br from-gray-50 to-white rounded-lg shadow-lg p-6 hover:shadow-xl transition">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h4 class="text-xl font-bold text-gray-800">${c.name}</h4>
                            <p class="text-sm text-gray-500">${c.owner?.name || 'Sin owner'}</p>
                        </div>
                        <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold uppercase">
                            ${c.plan || 'starter'}
                        </span>
                    </div>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Usuarios:</span>
                            <span class="font-bold">${c.users_count || 0}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Competidores:</span>
                            <span class="font-bold">${c.competitors_count || 0}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Encuestas:</span>
                            <span class="font-bold">${c.polls_count || 0}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Creada:</span>
                            <span class="font-bold">${new Date(c.created_at).toLocaleDateString('es-ES')}</span>
                        </div>
                    </div>
                    <a href="/superadmin/campaigns/${c.id}" class="mt-4 block text-center w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                        <i class="fas fa-eye"></i> Ver Detalles
                    </a>
                </div>
            `).join('');
        }

        async function loadUsers() {
            try {
                // Usar datos mock mientras se implementa el endpoint
                const mockUsers = [
                    { id: 1, name: 'Juan Pérez', email: 'juan@example.com', campaign: { name: 'Campaña Bogotá 2024' }, role: 'campaign_admin', created_at: '2024-01-15' },
                    { id: 2, name: 'María García', email: 'maria@example.com', campaign: { name: 'Campaña Medellín 2024' }, role: 'campaign_admin', created_at: '2024-01-20' },
                    { id: 3, name: 'Carlos López', email: 'carlos@example.com', campaign: { name: 'Campaña Cali 2024' }, role: 'volunteer', created_at: '2024-02-01' },
                    { id: 4, name: 'Ana Martínez', email: 'ana@example.com', campaign: { name: 'Campaña Barranquilla 2024' }, role: 'volunteer', created_at: '2024-02-10' },
                    { id: 5, name: 'Pedro Rodríguez', email: 'pedro@example.com', campaign: { name: 'Campaña Cartagena 2024' }, role: 'campaign_admin', created_at: '2024-02-15' },
                    { id: 6, name: 'Laura Sánchez', email: 'laura@example.com', campaign: { name: 'Campaña Bucaramanga 2024' }, role: 'volunteer', created_at: '2024-02-20' }
                ];

                users = mockUsers;
                renderUsers();
                console.log('Users loaded successfully with mock data');
            } catch (err) {
                console.error('Error loading users:', err);
                showToast('No se pudieron cargar los usuarios', 'error');
            }
        }

        function renderUsers() {
            const tbody = document.getElementById('usersTableBody');

            tbody.innerHTML = users.map(u => `
                <tr class="border-b hover:bg-gray-50">
                    <td class="px-4 py-3">${u.name}</td>
                    <td class="px-4 py-3">${u.email}</td>
                    <td class="px-4 py-3">${u.current_campaign?.name || 'Sin campaña'}</td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">
                            ${u.roles?.join(', ') || 'volunteer'}
                        </span>
                    </td>
                    <td class="px-4 py-3">${new Date(u.created_at).toLocaleDateString('es-ES')}</td>
                    <td class="px-4 py-3">
                        <button onclick="viewUser(${u.id})" class="text-blue-600 hover:text-blue-800">
                            <i class="fas fa-eye"></i>
                        </button>
                    </td>
                </tr>
            `).join('');
        }

        function switchTab(tab) {
            currentTab = tab;

            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.className = 'tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-purple-600';
            });
            document.getElementById(`tab${tab.charAt(0).toUpperCase() + tab.slice(1)}`).className = 'tab-btn flex-1 px-6 py-4 font-semibold text-purple-600 border-b-2 border-purple-600';

            document.getElementById('contentCampaigns').classList.add('hidden');
            document.getElementById('contentUsers').classList.add('hidden');
            document.getElementById('contentStats').classList.add('hidden');
            document.getElementById('contentReports').classList.add('hidden');
            document.getElementById('contentModules').classList.add('hidden');
            document.getElementById(`content${tab.charAt(0).toUpperCase() + tab.slice(1)}`).classList.remove('hidden');

            if (tab === 'stats') {
                renderCharts();
            }
        }

        function renderCharts() {
            // Implementar gráficos
            const plansCtx = document.getElementById('chartPlans');
            if (plansCtx) {
                const planCounts = campaigns.reduce((acc, c) => {
                    acc[c.plan || 'starter'] = (acc[c.plan || 'starter'] || 0) + 1;
                    return acc;
                }, {});

                new Chart(plansCtx, {
                    type: 'doughnut',
                    data: {
                        labels: Object.keys(planCounts),
                        datasets: [{
                            data: Object.values(planCounts),
                            backgroundColor: ['#3b82f6', '#8b5cf6', '#f59e0b']
                        }]
                    }
                });
            }
        }

        function filterCampaigns() {
            const search = document.getElementById('searchCampaigns').value.toLowerCase();
            const filtered = campaigns.filter(c =>
                c.name.toLowerCase().includes(search) ||
                c.owner?.name.toLowerCase().includes(search)
            );
            campaigns = filtered.length > 0 ? filtered : campaigns;
            renderCampaigns();
        }

        function filterUsers() {
            const search = document.getElementById('searchUsers').value.toLowerCase();
            const filtered = users.filter(u =>
                u.name.toLowerCase().includes(search) ||
                u.email.toLowerCase().includes(search)
            );
            users = filtered.length > 0 ? filtered : users;
            renderUsers();
        }

        function viewCampaign(id) {
            // Abrir el endpoint API directamente en una nueva pestaña (JSON)
            window.open(`/api/superadmin/campaigns/${id}`, '_blank');
        }

        function viewUser(id) {
            alert(`Ver detalles del usuario ID: ${id}`);
        }

        function logout() {
            localStorage.removeItem('auth_token');
            localStorage.removeItem('user');
            window.location.href = '/login';
        }
    </script>
@endpush