@extends('layouts.goberdata')

@section('title', 'Voluntarios')
@section('page_title', 'Voluntarios')
@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 class="gd-header text-white p-4 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold">🤝 Gestión de Voluntarios</h1>
                <p class="text-sm opacity-90">Equipo de campaña</p>
            </div>
            <button onclick="window.location.href='/admin/dashboard'" class="bg-white bg-opacity-20 px-4 py-2 rounded-lg hover:bg-opacity-30">
                <i class="fas fa-arrow-left mr-2"></i> Dashboard
            </button>
        </div>
    </div>
<div class="container mx-auto p-6">
        <!-- Estadísticas -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">Total Voluntarios</p>
                        <p id="statTotal" class="text-3xl font-bold text-orange-600">0</p>
                    </div>
                    <i class="fas fa-users text-4xl text-orange-200"></i>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">Horas Totales</p>
                        <p id="statHours" class="text-3xl font-bold text-green-600">0</p>
                    </div>
                    <i class="fas fa-clock text-4xl text-green-200"></i>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">Tareas Activas</p>
                        <p id="statTasks" class="text-3xl font-bold text-blue-600">0</p>
                    </div>
                    <i class="fas fa-tasks text-4xl text-blue-200"></i>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">Promedio Horas</p>
                        <p id="statAvg" class="text-3xl font-bold text-purple-600">0</p>
                    </div>
                    <i class="fas fa-chart-line text-4xl text-purple-200"></i>
                </div>
            </div>
        </div>

        <!-- Gráficos y Top Voluntarios -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-bold mb-4">Tareas por Tipo</h3>
                <div style="height: 300px;">
                    <canvas id="chartTasks"></canvas>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-bold mb-4">🏆 Top 10 Voluntarios</h3>
                <div id="topVolunteers" class="space-y-2 max-h-96 overflow-y-auto"></div>
            </div>
        </div>

        <!-- Voluntarios Recientes -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-lg font-bold mb-4">Voluntarios Recientes</h3>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-sm font-semibold">Nombre</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold">Email</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold">Teléfono</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold">Horas</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold">Estado</th>
                            <th class="px-4 py-3 text-left text-sm font-semibold">Ingreso</th>
                        </tr>
                    </thead>
                    <tbody id="volunteersTable">
                        <tr>
                            <td colspan="6" class="text-center py-8 text-gray-500">Cargando...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        const token = localStorage.getItem('auth_token');
        let dashboardData = null;

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

        loadDashboard();

        async function loadDashboard() {
            try {
                const response = await fetch('/api/volunteers/dashboard', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });
                dashboardData = await response.json();
                console.log('Volunteers Data:', dashboardData);
                updateStats();
                renderCharts();
                renderTopVolunteers();
                renderVolunteersTable();
            } catch (err) {
                console.error('Error:', err);
            }
        }

        function updateStats() {
            document.getElementById('statTotal').textContent = dashboardData.stats.total_volunteers;
            document.getElementById('statHours').textContent = dashboardData.stats.total_hours.toLocaleString();
            document.getElementById('statTasks').textContent = dashboardData.stats.active_tasks;
            document.getElementById('statAvg').textContent = dashboardData.stats.avg_hours_per_volunteer;
        }

        function renderCharts() {
            const ctx = document.getElementById('chartTasks');
            if (!ctx) return;

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: dashboardData.tasks_by_type.map(t => translateTaskType(t.task_type)),
                    datasets: [{
                        label: 'Tareas',
                        data: dashboardData.tasks_by_type.map(t => t.total),
                        backgroundColor: ['#f59e0b', '#3b82f6', '#10b981', '#8b5cf6']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        }

        function renderTopVolunteers() {
            const container = document.getElementById('topVolunteers');
            container.innerHTML = dashboardData.top_volunteers.map((v, i) => `
                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
                    <div class="flex items-center gap-3">
                        <span class="text-2xl">${i < 3 ? ['🥇', '🥈', '🥉'][i] : (i + 1) + '.'}</span>
                        <div>
                            <p class="font-semibold">${v.name}</p>
                            <p class="text-sm text-gray-600">${v.email}</p>
                        </div>
                    </div>
                    <span class="font-bold text-orange-600">${v.total_hours}h</span>
                </div>
            `).join('');
        }

        function renderVolunteersTable() {
            const tbody = document.getElementById('volunteersTable');
            if (dashboardData.recent_volunteers.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="text-center py-8 text-gray-500">No hay voluntarios registrados</td></tr>';
                return;
            }
            tbody.innerHTML = dashboardData.recent_volunteers.map(v => `
                <tr class="border-t hover:bg-gray-50">
                    <td class="px-4 py-3 font-semibold">${v.name}</td>
                    <td class="px-4 py-3 text-sm">${v.email}</td>
                    <td class="px-4 py-3 text-sm">${v.phone}</td>
                    <td class="px-4 py-3"><span class="font-bold text-orange-600">${v.total_hours}h</span></td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 rounded-full text-xs ${v.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
                            ${v.status === 'active' ? 'Activo' : 'Inactivo'}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-600">${formatDate(v.joined_at)}</td>
                </tr>
            `).join('');
        }

        function translateTaskType(type) {
            const translations = {
                'phone_banking': 'Llamadas',
                'door_to_door': 'Puerta a Puerta',
                'event_support': 'Apoyo Eventos'
            };
            return translations[type] || type;
        }

        function formatDate(dateStr) {
            return new Date(dateStr).toLocaleDateString('es-ES', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });
        }
    </script>
@endpush