@extends('layouts.goberdata')

@section('title', 'Eventos')
@section('page_title', 'Eventos')
@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="eventsErrorBanner" class="alert a-warn" style="display:none;margin-bottom:14px">
    <div>
        <div class="alert-t">No se pudieron cargar todos los datos de eventos</div>
        <div class="alert-d">Si acabas de iniciar sesión, recarga la página. Los datos demo ya están en la base.</div>
    </div>
</div>
<!-- Header -->
            <header class="flex justify-between items-center p-6 bg-white border-b border-gray-200 shadow-sm">
                <h1 class="text-2xl font-semibold text-gray-800">Gestión de Eventos</h1>
                <div class="flex items-center space-x-4">
                    <button onclick="exportEvents()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                        <i class="fas fa-download mr-2"></i>Exportar
                    </button>
                    <button onclick="addEvent()" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
                        <i class="fas fa-plus mr-2"></i>Nuevo Evento
                    </button>
                </div>
            </header>

            <!-- Main Content -->
            <main class="flex-1 bg-gray-100 p-3">
                <div class="w-full">
                    <!-- 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">En 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">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">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">Total 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 Estado</h3>
                            <div class="chart-container">
                                <canvas id="statusChart"></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>

                    <!-- 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</h3>
                        <div id="upcomingEventsList" class="space-y-4">
                            <!-- Events will be loaded here -->
                        </div>
                    </div>

                    <!-- Filters -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Filtros</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Estado</label>
                                <select id="statusFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                    <option value="published">Publicados</option>
                                    <option value="draft">Borrador</option>
                                    <option value="cancelled">Cancelados</option>
                                    <option value="completed">Completados</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Tipo</label>
                                <select id="typeFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                    <option value="rally">Mitin</option>
                                    <option value="meeting">Reunión</option>
                                    <option value="fundraiser">Recaudación</option>
                                    <option value="debate">Debate</option>
                                    <option value="volunteer">Voluntariado</option>
                                    <option value="other">Otro</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Fecha Desde</label>
                                <input type="date" id="dateFromFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Fecha Hasta</label>
                                <input type="date" id="dateToFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            </div>
                        </div>
                        <div class="mt-4 flex justify-between">
                            <button onclick="clearFilters()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
                                <i class="fas fa-times mr-2"></i>Limpiar Filtros
                            </button>
                            <button onclick="applyFilters()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                                <i class="fas fa-search mr-2"></i>Aplicar Filtros
                            </button>
                        </div>
                    </div>

                    <!-- Events Table -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Lista de Eventos</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 cursor-pointer" onclick="sortTable('name')">
                                            Nombre <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('event_type')">
                                            Tipo <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('status')">
                                            Estado <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('start_at')">
                                            Fecha Inicio <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('end_at')">
                                            Fecha Fin <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ubicación</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">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="eventsTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                        <div id="pagination" class="mt-4 flex justify-between items-center">
                            <!-- Pagination will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
@endsection

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

        let currentPage = 1;
        let currentFilters = {};
        let currentSort = { field: 'start_at', order: 'asc' };

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

        async function loadDashboardData() {
            try {
                const response = await fetch('/api/events/dashboard', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

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

                const data = await response.json();
                console.log('Events Dashboard Data:', data);

                // Update stats cards
                document.getElementById('totalEvents').textContent = data.stats.total_events.toLocaleString();
                document.getElementById('upcomingEvents').textContent = data.stats.upcoming_events.toLocaleString();
                document.getElementById('totalRegistrations').textContent = data.stats.total_registrations.toLocaleString();
                document.getElementById('attendanceRate').textContent = data.stats.attendance_rate + '%';

                // Render charts
                renderStatusChart(data.events_by_status);
                renderTypeChart(data.events_by_type);

                // Load upcoming events
                loadUpcomingEvents(data.upcoming_events_list);

            } catch (error) {
                console.error('Error loading events dashboard data:', error);
                // Demo: no bloquear con alert; dejar ceros y mensaje en consola
                const banner = document.getElementById('eventsErrorBanner');
                if (banner) banner.style.display = 'flex';
            }
        }

        async function loadEvents() {
            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    per_page: 25,
                    sort_by: currentSort.field,
                    sort_order: currentSort.order,
                    ...currentFilters
                });

                const response = await fetch(`/api/events?${params}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

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

                const data = await response.json();
                console.log('Events Data:', data);

                // Populate table
                const tbody = document.getElementById('eventsTableBody');
                tbody.innerHTML = '';
                
                (data.data || []).forEach(event => {
                    const row = `
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${event.name}</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 ${getTypeBadge(event.event_type)}">
                                    ${event.event_type}
                                </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 ${getStatusBadge(event.status)}">
                                    ${event.status}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${new Date(event.start_at).toLocaleDateString()}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${new Date(event.end_at).toLocaleDateString()}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${event.location}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${event.registrations_count || 0}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="viewEvent(${event.id})" class="text-blue-600 hover:text-blue-900 mr-2">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button onclick="editEvent(${event.id})" class="text-green-600 hover:text-green-900 mr-2">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button onclick="manageRegistrations(${event.id})" class="text-purple-600 hover:text-purple-900">
                                    <i class="fas fa-users"></i>
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });

                // Update pagination
                updatePagination(data);

            } catch (error) {
                console.error('Error loading events:', error);
                const banner = document.getElementById('eventsErrorBanner');
                if (banner) banner.style.display = 'flex';
            }
        }

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

        function renderTypeChart(data) {
            const ctx = document.getElementById('typeChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.map(item => item.event_type),
                    datasets: [{
                        label: 'Eventos',
                        data: data.map(item => item.count),
                        backgroundColor: '#6366F1',
                        borderColor: '#4F46E5',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function loadUpcomingEvents(events) {
            const container = document.getElementById('upcomingEventsList');
            container.innerHTML = '';
            
            events.forEach(event => {
                const eventCard = `
                    <div class="bg-gray-50 rounded-lg p-4 flex justify-between items-center">
                        <div>
                            <h4 class="font-semibold text-gray-800">${event.name}</h4>
                            <p class="text-sm text-gray-600">${event.location}</p>
                            <p class="text-xs text-gray-500">${new Date(event.start_at).toLocaleDateString()}</p>
                        </div>
                        <div class="text-right">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full ${getTypeBadge(event.event_type)}">
                                ${event.event_type}
                            </span>
                            <p class="text-sm text-gray-600 mt-1">${event.registrations_count || 0} registraciones</p>
                        </div>
                    </div>
                `;
                container.innerHTML += eventCard;
            });
        }

        function getStatusBadge(status) {
            const badges = {
                'published': 'bg-green-100 text-green-800',
                'draft': 'bg-gray-100 text-gray-800',
                'cancelled': 'bg-red-100 text-red-800',
                'completed': 'bg-blue-100 text-blue-800',
                'postponed': 'bg-yellow-100 text-yellow-800'
            };
            return badges[status] || 'bg-gray-100 text-gray-800';
        }

        function getTypeBadge(type) {
            const badges = {
                'rally': 'bg-red-100 text-red-800',
                'meeting': 'bg-blue-100 text-blue-800',
                'fundraiser': 'bg-green-100 text-green-800',
                'debate': 'bg-purple-100 text-purple-800',
                'volunteer': 'bg-orange-100 text-orange-800',
                'other': 'bg-gray-100 text-gray-800'
            };
            return badges[type] || 'bg-gray-100 text-gray-800';
        }

        function applyFilters() {
            currentFilters = {
                status: document.getElementById('statusFilter').value,
                event_type: document.getElementById('typeFilter').value,
                date_from: document.getElementById('dateFromFilter').value,
                date_to: document.getElementById('dateToFilter').value
            };
            
            // Remove empty filters
            Object.keys(currentFilters).forEach(key => {
                if (!currentFilters[key]) {
                    delete currentFilters[key];
                }
            });
            
            currentPage = 1;
            loadEvents();
        }

        function clearFilters() {
            document.getElementById('statusFilter').value = '';
            document.getElementById('typeFilter').value = '';
            document.getElementById('dateFromFilter').value = '';
            document.getElementById('dateToFilter').value = '';
            currentFilters = {};
            currentPage = 1;
            loadEvents();
        }

        function sortTable(field) {
            if (currentSort.field === field) {
                currentSort.order = currentSort.order === 'asc' ? 'desc' : 'asc';
            } else {
                currentSort.field = field;
                currentSort.order = 'asc';
            }
            loadEvents();
        }

        function updatePagination(data) {
            const pagination = document.getElementById('pagination');
            const totalPages = data.last_page;
            
            let paginationHTML = `
                <div class="text-sm text-gray-700">
                    Mostrando ${data.from || 0} a ${data.to || 0} de ${data.total} resultados
                </div>
                <div class="flex space-x-2">
            `;
            
            if (data.prev_page_url) {
                paginationHTML += `<button onclick="changePage(${data.current_page - 1})" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Anterior</button>`;
            }
            
            for (let i = 1; i <= Math.min(totalPages, 5); i++) {
                const activeClass = i === data.current_page ? 'bg-blue-500 text-white' : 'border border-gray-300 hover:bg-gray-50';
                paginationHTML += `<button onclick="changePage(${i})" class="px-3 py-1 rounded ${activeClass}">${i}</button>`;
            }
            
            if (data.next_page_url) {
                paginationHTML += `<button onclick="changePage(${data.current_page + 1})" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Siguiente</button>`;
            }
            
            paginationHTML += '</div>';
            pagination.innerHTML = paginationHTML;
        }

        function changePage(page) {
            currentPage = page;
            loadEvents();
        }

        function viewEvent(id) {
            alert(`Ver evento ${id} - Funcionalidad pendiente`);
        }

        function editEvent(id) {
            alert(`Editar evento ${id} - Funcionalidad pendiente`);
        }

        function manageRegistrations(id) {
            alert(`Gestionar registraciones ${id} - Funcionalidad pendiente`);
        }

        function addEvent() {
            alert('Agregar evento - Funcionalidad pendiente');
        }

        function exportEvents() {
            alert('Exportar eventos - Funcionalidad pendiente');
        }
    </script>
@endpush