@extends('layouts.goberdata')

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

@push('styles')
<style>
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<div id="app" class="min-h-screen">
        <!-- Sidebar -->
<div class="flex flex-col">
            <!-- Header -->
            <header class="flex justify-between items-center p-6 gd-header shadow-sm">
                <div class="flex items-center space-x-4">
                    <a href="{{ url('/superadmin/dashboard') }}" class="text-white hover:text-red-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        📅 Eventos Globales
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-white">Super Admin</span>
                    <i class="fas fa-user-circle text-white text-2xl"></i>
                </div>
            </header>

            <!-- Main Content -->
            <main class="bg-gray-100 p-2">
                <div class="w-full">
                    <!-- Global Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg: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 Eventos</p>
                                <i class="fas fa-calendar-alt text-3xl opacity-50"></i>
                            </div>
                            <p id="totalEvents" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Todas las campañas</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">Próximos</p>
                                <i class="fas fa-clock text-3xl opacity-50"></i>
                            </div>
                            <p id="upcomingEvents" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Por realizar</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">Total Registraciones</p>
                                <i class="fas fa-user-plus text-3xl opacity-50"></i>
                            </div>
                            <p id="totalRegistrations" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Inscripciones</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">Tasa Asistencia</p>
                                <i class="fas fa-percentage text-3xl opacity-50"></i>
                            </div>
                            <p id="attendanceRate" class="text-4xl font-bold">0%</p>
                            <p class="text-xs opacity-75 mt-1">Promedio</p>
                        </div>
                    </div>

                    <!-- Charts Section -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Eventos por Campaña</h3>
                            <div class="chart-container">
                                <canvas id="campaignChart"></canvas>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Eventos por Tipo</h3>
                            <div class="chart-container">
                                <canvas id="typeChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Campaign Comparison -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Comparación por Campaña</h3>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaña</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Eventos</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Próximos</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completados</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Registraciones</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asistencia</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="campaignsTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Upcoming Events -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Próximos Eventos Globales</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="upcomingEventsContainer">
                            <!-- Upcoming events will be loaded here -->
                        </div>
                    </div>

                    <!-- Recent Activity -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Actividad Reciente</h3>
                        <div class="space-y-4" id="recentActivityContainer">
                            <!-- Recent activity will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
        }

        document.addEventListener('DOMContentLoaded', function() {
            loadGlobalData();
        });

        async function loadGlobalData() {
            try {
                // Mostrar mensaje de error en lugar de datos simulados
                console.error('No se pudieron cargar los datos de Eventos');

                const errorMessage = document.createElement('div');
                errorMessage.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
                errorMessage.innerHTML = '<strong>Error:</strong> No se pudieron cargar los datos de Eventos. Por favor, intente nuevamente.';

                const mainContent = document.querySelector('main');
                if (mainContent) {
                    mainContent.insertBefore(errorMessage, mainContent.firstChild);
                }
            } catch (error) {
                console.error('Error loading global events data:', error);
            }
        }

        function renderCampaignChart(campaigns) {
            const ctx = document.getElementById('campaignChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: campaigns.map(c => c.name),
                    datasets: [{
                        label: 'Total Eventos',
                        data: campaigns.map(c => c.total),
                        backgroundColor: '#6366F1',
                        borderColor: '#4F46E5',
                        borderWidth: 1
                    }, {
                        label: 'Próximos',
                        data: campaigns.map(c => c.upcoming),
                        backgroundColor: '#10B981',
                        borderColor: '#059669',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function renderTypeChart(types) {
            const ctx = document.getElementById('typeChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: types.map(t => t.type),
                    datasets: [{
                        data: types.map(t => t.count),
                        backgroundColor: ['#EF4444', '#3B82F6', '#10B981', '#8B5CF6', '#F59E0B', '#6B7280'],
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }

        function loadCampaignComparison(campaigns) {
            const tbody = document.getElementById('campaignsTableBody');
            tbody.innerHTML = '';

            campaigns.forEach(campaign => {
                const row = `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${campaign.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.total}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                ${campaign.upcoming}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                ${campaign.completed}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.registrations}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full ${getAttendanceBadge(campaign.attendance)}">
                                ${campaign.attendance}%
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button onclick="viewCampaignEvents('${campaign.name}')" class="text-blue-600 hover:text-blue-900 mr-2">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="exportCampaignEvents('${campaign.name}')" class="text-green-600 hover:text-green-900">
                                <i class="fas fa-download"></i>
                            </button>
                        </td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        function loadUpcomingEvents(events) {
            const container = document.getElementById('upcomingEventsContainer');
            container.innerHTML = '';

            events.forEach(event => {
                const eventCard = `
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="font-semibold text-gray-800 mb-2">${event.name}</h4>
                        <p class="text-sm text-gray-600 mb-2">${event.campaign}</p>
                        <p class="text-sm text-gray-600 mb-2">${event.location}</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-gray-500">${new Date(event.date).toLocaleDateString()}</span>
                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                ${event.registrations} registraciones
                            </span>
            </div>
        </div>
                `;
                container.innerHTML += eventCard;
            });
        }

        function loadRecentActivity(activities) {
            const container = document.getElementById('recentActivityContainer');
            container.innerHTML = '';

            activities.forEach(activity => {
                const activityItem = `
                    <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                        <div>
                            <span class="font-semibold text-gray-800">${activity.campaign}</span>
                            <span class="text-gray-600 ml-2">${activity.action}</span>
                            <span class="text-gray-600 ml-2">"${activity.event}"</span>
                            ${activity.count ? `<span class="text-blue-600 ml-2">(${activity.count})</span>` : ''}
                        </div>
                        <span class="text-xs text-gray-500">${activity.time}</span>
    </div>
                `;
                container.innerHTML += activityItem;
            });
        }

        function getAttendanceBadge(attendance) {
            if (attendance >= 80) return 'bg-green-100 text-green-800';
            if (attendance >= 60) return 'bg-yellow-100 text-yellow-800';
            return 'bg-red-100 text-red-800';
        }

        function viewCampaignEvents(campaignName) {
            alert(`Ver eventos de ${campaignName} - Funcionalidad pendiente`);
        }

        function exportCampaignEvents(campaignName) {
            alert(`Exportar eventos de ${campaignName} - Funcionalidad pendiente`);
        }
    </script>
@endpush