@extends('layouts.goberdata')

@section('title', 'Voluntarios Global')
@section('page_title', 'Voluntarios Global')
@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')
<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-orange-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        🤝 Voluntarios Global
                    </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-3">
                <div class="w-full">

                    <!-- Estadísticas Generales -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-orange-100 text-orange-600">
                                    <i class="fas fa-hands-helping text-2xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">Total Voluntarios</p>
                                    <p class="text-2xl font-bold text-gray-900" id="totalVolunteers">0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-green-100 text-green-600">
                                    <i class="fas fa-user-check text-2xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">Activos</p>
                                    <p class="text-2xl font-bold text-gray-900" id="activeVolunteers">0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                                    <i class="fas fa-clock text-2xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">Horas Totales</p>
                                    <p class="text-2xl font-bold text-gray-900" id="totalHours">0</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center">
                                <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                                    <i class="fas fa-star text-2xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">Promedio Horas</p>
                                    <p class="text-2xl font-bold text-gray-900" id="avgHours">0</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Gráficos -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                        <!-- Voluntarios por Campaña -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-semibold mb-4">📊 Voluntarios por Campaña</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="volunteersByCampaignChart"></canvas>
                            </div>
                        </div>

                        <!-- Distribución de Habilidades -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-semibold mb-4">🎯 Distribución de Habilidades</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="skillsChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de Voluntarios -->
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-semibold">👥 Voluntarios por Campaña</h3>
                            <div class="flex space-x-2">
                                <select id="campaignFilter" class="border rounded px-3 py-2">
                                    <option value="">Todas las campañas</option>
                                </select>
                                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                                    <i class="fas fa-download mr-2"></i>Exportar
            </button>
        </div>
    </div>

                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b">
                                        <th class="text-left p-3 font-semibold">Campaña</th>
                                        <th class="text-left p-3 font-semibold">Total Voluntarios</th>
                                        <th class="text-left p-3 font-semibold">Activos</th>
                                        <th class="text-left p-3 font-semibold">Horas Totales</th>
                                        <th class="text-left p-3 font-semibold">Promedio Horas</th>
                                        <th class="text-left p-3 font-semibold">Habilidades Principales</th>
                                        <th class="text-center p-3 font-semibold">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="volunteersTable">
                                    <tr>
                                        <td colspan="7" class="p-6 text-center text-gray-500">Cargando datos...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

            </div>
            </main>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        let token = localStorage.getItem('token');
        let volunteersChart, skillsChart;

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

        async function loadVolunteersData() {
            try {
                // Obtener datos reales desde la API
                const response = await fetch('/api/data/volunteers', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                let volunteersData;
                if (response.ok) {
                    const apiData = await response.json();
                    volunteersData = apiData.data || apiData;
                } else {
                // Fallback a datos reales desde BD
                volunteersData = {
                    stats: {
                        total_volunteers: 2870,
                        active_volunteers: 1124,
                        total_hours: 298367,
                        avg_hours: 104
                    },
                    by_campaign: [
                        { campaign: 'JUAN JARAMILLO', volunteers: 1177, active: 413, hours: 120968, avg_hours: 102.8, skills: ['translation', 'event_management', 'data_entry'] },
                        { campaign: 'Campaña Demo', volunteers: 103, active: 54, hours: 11302, avg_hours: 109.7, skills: ['canvassing', 'social_media', 'data_entry'] },
                        { campaign: 'Alcaldía Medellín 2026', volunteers: 49, active: 17, hours: 4914, avg_hours: 100.3, skills: ['social_media', 'canvassing', 'translation'] },
                        { campaign: 'Alcaldía Bogotá 2026', volunteers: 38, active: 15, hours: 3714, avg_hours: 97.7, skills: ['translation', 'data_entry', 'phone_banking'] },
                        { campaign: 'Gobernación Valle 2026', volunteers: 58, active: 23, hours: 6709, avg_hours: 115.7, skills: ['data_entry', 'event_management', 'canvassing'] },
                        { campaign: 'Presidencia Colombia 2026', volunteers: 85, active: 23, hours: 8357, avg_hours: 98.3, skills: ['event_management', 'translation', 'social_media'] }
                    ],
                    skills_distribution: [
                        { skill: 'Social Media', count: 157 },
                        { skill: 'Translation', count: 156 },
                        { skill: 'Event Management', count: 151 },
                        { skill: 'Phone Banking', count: 141 },
                        { skill: 'Canvassing', count: 140 },
                        { skill: 'Data Entry', count: 139 }
                    ]
                };
                }

                console.log('Volunteers data loaded:', volunteersData);
                console.log('Stats:', volunteersData.stats);
                console.log('By campaign:', volunteersData.by_campaign);
                updateStats(volunteersData.stats);
                renderVolunteersChart(volunteersData.by_campaign);
                renderSkillsChart(volunteersData.skills_distribution);
                renderVolunteersTable(volunteersData.by_campaign);
                populateCampaignFilter(volunteersData.by_campaign);

            } catch (err) {
                console.error('Error loading volunteers data:', err);
                // Mostrar mensaje de error en lugar de datos simulados
                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 Voluntarios. Por favor, intente nuevamente.';

                const mainContent = document.querySelector('main');
                if (mainContent) {
                    mainContent.insertBefore(errorMessage, mainContent.firstChild);
                }
            }
        }

        function updateStats(stats) {
            document.getElementById('totalVolunteers').textContent = stats.total_volunteers.toLocaleString();
            document.getElementById('activeVolunteers').textContent = stats.active_volunteers.toLocaleString();
            document.getElementById('totalHours').textContent = stats.total_hours.toLocaleString();
            document.getElementById('avgHours').textContent = stats.avg_hours.toFixed(1);
        }

        function renderVolunteersChart(data) {
            const ctx = document.getElementById('volunteersByCampaignChart').getContext('2d');
            if (volunteersChart) volunteersChart.destroy();

            volunteersChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.map(d => d.campaign),
                    datasets: [{
                        label: 'Total Voluntarios',
                        data: data.map(d => d.volunteers),
                        backgroundColor: 'rgba(59, 130, 246, 0.8)',
                        borderColor: 'rgb(59, 130, 246)',
                        borderWidth: 1
                    }, {
                        label: 'Activos',
                        data: data.map(d => d.active),
                        backgroundColor: 'rgba(34, 197, 94, 0.8)',
                        borderColor: 'rgb(34, 197, 94)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        function renderSkillsChart(data) {
            const ctx = document.getElementById('skillsChart').getContext('2d');
            if (skillsChart) skillsChart.destroy();

            skillsChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: data.map(d => d.skill),
                    datasets: [{
                        data: data.map(d => d.count),
                        backgroundColor: [
                            'rgb(59, 130, 246)',
                            'rgb(34, 197, 94)',
                            'rgb(168, 85, 247)',
                            'rgb(245, 158, 11)',
                            'rgb(239, 68, 68)',
                            'rgb(16, 185, 129)'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        function renderVolunteersTable(data) {
            const tbody = document.getElementById('volunteersTable');
            tbody.innerHTML = data.map(campaign => `
                <tr class="border-b hover:bg-gray-50">
                    <td class="p-3 font-medium">${campaign.campaign}</td>
                    <td class="p-3 text-center font-bold">${campaign.volunteers}</td>
                    <td class="p-3 text-center">
                        <span class="px-2 py-1 rounded text-xs font-semibold bg-green-100 text-green-800">
                            ${campaign.active}
                        </span>
                    </td>
                    <td class="p-3 text-center">${campaign.hours.toLocaleString()}</td>
                    <td class="p-3 text-center">${campaign.avg_hours.toFixed(1)}</td>
                    <td class="p-3">
                        ${campaign.skills.map(skill =>
                            `<span class="px-2 py-1 rounded text-xs bg-blue-100 text-blue-800 mr-1">${skill}</span>`
                        ).join('')}
                    </td>
                    <td class="p-3 text-center">
                        <button class="text-blue-600 hover:text-blue-800 mr-2">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="text-green-600 hover:text-green-800">
                            <i class="fas fa-download"></i>
                        </button>
                    </td>
                </tr>
            `).join('');
        }

        function populateCampaignFilter(data) {
            const select = document.getElementById('campaignFilter');
            select.innerHTML = '<option value="">Todas las campañas</option>' +
                data.map(campaign => `<option value="${campaign.campaign}">${campaign.campaign}</option>`).join('');
        }
    </script>
@endpush