@extends('layouts.goberdata')

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

@push('styles')
<script>
        // Role guard: only volunteers should stay here
        (function () {
            try {
                const user = JSON.parse(localStorage.getItem('user') || '{}');
                const roles = user.roles || (user.role ? [user.role] : []);
                if (roles.includes('admin') || roles.includes('candidate')) {
                    window.location.replace('/admin/dashboard');
                    return;
                }
                if (roles.includes('coordinator')) {
                    window.location.replace('/dashboard');
                    return;
                }
            } catch (_) {
                window.location.replace('/login');
            }
        })();
    </script>
@endpush

@section('content')
<!-- Top Bar -->
    <div class="gd-header text-white p-4">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <a href="{{ url('/volunteer/dashboard') }}" class="text-white hover:text-teal-200">← Volver</a>
                <h1 class="text-xl font-bold">📅 Eventos de Campaña</h1>
            </div>
            <a href="{{ url('/logout') }}" class="bg-white text-teal-700 px-4 py-2 rounded-lg font-semibold">Salir</a>
        </div>
    </div>

    <div class="container mx-auto p-6 max-w-6xl">
        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-blue-100 rounded-lg">
                        <span class="text-blue-600 text-xl">📅</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-500">Total Eventos</p>
                        <p class="text-lg font-semibold text-gray-900" id="totalEvents">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-green-100 rounded-lg">
                        <span class="text-green-600 text-xl">✅</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-500">Asistidos</p>
                        <p class="text-lg font-semibold text-gray-900" id="attendedEvents">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-yellow-100 rounded-lg">
                        <span class="text-yellow-600 text-xl">⏳</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-500">Próximos</p>
                        <p class="text-lg font-semibold text-gray-900" id="upcomingEvents">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-4">
                <div class="flex items-center">
                    <div class="p-2 bg-purple-100 rounded-lg">
                        <span class="text-purple-600 text-xl">🎯</span>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-gray-500">Mi Próximo</p>
                        <p class="text-lg font-semibold text-gray-900" id="nextEvent">-</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Check-in Form -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">📍 Check-in en Evento</h3>
            <form id="checkinForm" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Evento</label>
                    <select id="eventSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                        <option value="">Seleccionar evento...</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Hora de Llegada</label>
                    <input type="time" id="arrivalTime" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Rol en el Evento</label>
                    <select id="eventRole" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                        <option value="">Seleccionar rol...</option>
                        <option value="setup">Montaje</option>
                        <option value="registration">Registro</option>
                        <option value="security">Seguridad</option>
                        <option value="support">Apoyo General</option>
                        <option value="cleanup">Limpieza</option>
                    </select>
                </div>
                <div class="md:col-span-3">
                    <button type="submit" class="bg-teal-600 text-white px-6 py-2 rounded-lg hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
                        Hacer Check-in
                    </button>
                </div>
            </form>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <div class="flex flex-wrap gap-4">
                <select id="statusFilter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">
                    <option value="">Todos los estados</option>
                    <option value="upcoming">Próximos</option>
                    <option value="ongoing">En Curso</option>
                    <option value="completed">Completados</option>
                    <option value="cancelled">Cancelados</option>
                </select>
                <select id="typeFilter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">
                    <option value="">Todos los tipos</option>
                    <option value="rally">Mitin</option>
                    <option value="meeting">Reunión</option>
                    <option value="community">Comunitario</option>
                    <option value="fundraising">Recaudación</option>
                    <option value="other">Otros</option>
                </select>
                <input type="date" id="dateFrom" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Desde">
                <input type="date" id="dateTo" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Hasta">
                <button onclick="applyFilters()" class="bg-teal-600 text-white px-4 py-2 rounded-md hover:bg-teal-700">Filtrar</button>
            </div>
        </div>

        <!-- Events Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="eventsGrid">
            <!-- Events will be loaded here -->
        </div>
    </div>
@endsection

@push('scripts')
<script>
        let events = [];
        let filteredEvents = [];

        // Load events data
        async function loadEvents() {
            try {
                const response = await fetch('/api/volunteer/events');
                const data = await response.json();
                events = data.events || [];
                filteredEvents = [...events];
                updateStats();
                renderEvents();
                populateEventSelect();
            } catch (error) {
                console.error('Error loading events:', error);
                loadFallbackData();
            }
        }

        function loadFallbackData() {
            events = [
                {
                    id: 1,
                    title: 'Mitin en Plaza Principal',
                    description: 'Gran mitin de campaña en el centro de la ciudad',
                    event_type: 'rally',
                    start_date: '2025-10-25T18:00:00Z',
                    end_date: '2025-10-25T20:00:00Z',
                    location: 'Plaza Principal',
                    status: 'upcoming',
                    max_volunteers: 20,
                    current_volunteers: 15,
                    attended: false
                },
                {
                    id: 2,
                    title: 'Reunión Comunitaria Norte',
                    description: 'Reunión con líderes del barrio norte',
                    event_type: 'meeting',
                    start_date: '2025-10-26T19:00:00Z',
                    end_date: '2025-10-26T21:00:00Z',
                    location: 'Centro Comunitario Norte',
                    status: 'upcoming',
                    max_volunteers: 10,
                    current_volunteers: 8,
                    attended: false
                },
                {
                    id: 3,
                    title: 'Evento de Recaudación',
                    description: 'Evento para recaudar fondos para la campaña',
                    event_type: 'fundraising',
                    start_date: '2025-10-20T17:00:00Z',
                    end_date: '2025-10-20T22:00:00Z',
                    location: 'Hotel Central',
                    status: 'completed',
                    max_volunteers: 15,
                    current_volunteers: 12,
                    attended: true
                }
            ];
            filteredEvents = [...events];
            updateStats();
            renderEvents();
            populateEventSelect();
        }

        function updateStats() {
            const totalEvents = events.length;
            const attendedEvents = events.filter(e => e.attended).length;
            const upcomingEvents = events.filter(e => e.status === 'upcoming').length;
            const nextEvent = events.filter(e => e.status === 'upcoming').length > 0 ? 'Próximo' : 'N/A';

            document.getElementById('totalEvents').textContent = totalEvents;
            document.getElementById('attendedEvents').textContent = attendedEvents;
            document.getElementById('upcomingEvents').textContent = upcomingEvents;
            document.getElementById('nextEvent').textContent = nextEvent;
        }

        function renderEvents() {
            const grid = document.getElementById('eventsGrid');
            grid.innerHTML = '';

            filteredEvents.forEach(event => {
                const card = document.createElement('div');
                card.className = 'bg-white rounded-lg shadow overflow-hidden';

                const eventDate = new Date(event.start_date);
                const isUpcoming = event.status === 'upcoming';
                const isCompleted = event.status === 'completed';

                card.innerHTML = `
                    <div class="p-6">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-lg font-medium text-gray-900">${event.title}</h3>
                            <span class="px-2 py-1 text-xs font-medium rounded-full ${getStatusBadgeClass(event.status)}">
                                ${getStatusLabel(event.status)}
                            </span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4">${event.description}</p>

                        <div class="space-y-2 text-sm text-gray-500">
                            <div class="flex items-center">
                                <span class="mr-2">📅</span>
                                ${eventDate.toLocaleDateString()} - ${eventDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                            </div>
                            <div class="flex items-center">
                                <span class="mr-2">📍</span>
                                ${event.location}
                            </div>
                            <div class="flex items-center">
                                <span class="mr-2">👥</span>
                                ${event.current_volunteers}/${event.max_volunteers} voluntarios
                            </div>
                            <div class="flex items-center">
                                <span class="mr-2">🏷️</span>
                                ${getTypeLabel(event.event_type)}
                            </div>
                        </div>

                        <div class="mt-4 flex justify-between items-center">
                            ${isUpcoming ? `
                                <button onclick="registerForEvent(${event.id})" class="bg-teal-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-teal-700">
                                    Registrarse
                                </button>
                            ` : ''}
                            ${isCompleted && event.attended ? `
                                <span class="text-green-600 text-sm font-medium">✅ Asistido</span>
                            ` : ''}
                        </div>
                    </div>
                `;

                grid.appendChild(card);
            });
        }

        function populateEventSelect() {
            const select = document.getElementById('eventSelect');
            select.innerHTML = '<option value="">Seleccionar evento...</option>';

            const upcomingEvents = events.filter(e => e.status === 'upcoming');
            upcomingEvents.forEach(event => {
                const option = document.createElement('option');
                option.value = event.id;
                option.textContent = `${event.title} - ${new Date(event.start_date).toLocaleDateString()}`;
                select.appendChild(option);
            });
        }

        function getStatusBadgeClass(status) {
            const classes = {
                'upcoming': 'bg-blue-100 text-blue-800',
                'ongoing': 'bg-green-100 text-green-800',
                'completed': 'bg-gray-100 text-gray-800',
                'cancelled': 'bg-red-100 text-red-800'
            };
            return classes[status] || 'bg-gray-100 text-gray-800';
        }

        function getStatusLabel(status) {
            const labels = {
                'upcoming': 'Próximo',
                'ongoing': 'En Curso',
                'completed': 'Completado',
                'cancelled': 'Cancelado'
            };
            return labels[status] || status;
        }

        function getTypeLabel(type) {
            const labels = {
                'rally': 'Mitin',
                'meeting': 'Reunión',
                'community': 'Comunitario',
                'fundraising': 'Recaudación',
                'other': 'Otros'
            };
            return labels[type] || type;
        }

        // Check-in form submission
        document.getElementById('checkinForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            const formData = {
                event_id: document.getElementById('eventSelect').value,
                arrival_time: document.getElementById('arrivalTime').value,
                role: document.getElementById('eventRole').value
            };

            try {
                const response = await fetch('/api/volunteer/events/checkin', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData)
                });

                if (response.ok) {
                    // Reset form
                    document.getElementById('checkinForm').reset();
                    // Reload data
                    loadEvents();
                    alert('Check-in realizado exitosamente');
                } else {
                    alert('Error al realizar el check-in');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Error al realizar el check-in');
            }
        });

        // Register for event
        function registerForEvent(eventId) {
            if (confirm('¿Deseas registrarte para este evento?')) {
                // Here you would make an API call to register for the event
                alert('Registro exitoso para el evento');
                loadEvents(); // Reload to update the UI
            }
        }

        // Filter functions
        function applyFilters() {
            const statusFilter = document.getElementById('statusFilter').value;
            const typeFilter = document.getElementById('typeFilter').value;
            const dateFrom = document.getElementById('dateFrom').value;
            const dateTo = document.getElementById('dateTo').value;

            filteredEvents = events.filter(event => {
                const statusMatch = !statusFilter || event.status === statusFilter;
                const typeMatch = !typeFilter || event.event_type === typeFilter;
                const eventDate = new Date(event.start_date).toISOString().split('T')[0];
                const dateMatch = (!dateFrom || eventDate >= dateFrom) && (!dateTo || eventDate <= dateTo);

                return statusMatch && typeMatch && dateMatch;
            });

            renderEvents();
        }

        // Set default arrival time to current time
        const now = new Date();
        const timeString = now.toTimeString().slice(0, 5);
        document.getElementById('arrivalTime').value = timeString;

        // Load data on page load
        document.addEventListener('DOMContentLoaded', loadEvents);
    </script>
@endpush