@extends('layouts.goberdata')

@section('title', 'Dashboard General')
@section('page_title', 'Dashboard General')
@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')
<!-- Header -->
    <div class="gd-header text-white p-6 shadow-lg">
        <div class="container mx-auto max-w-7xl flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold">📈 Dashboard General</h1>
                <p class="text-sm opacity-90">Vista completa de tu campaña</p>
            </div>
            <a href="{{ url('/') }}" class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                ← Volver
            </a>
        </div>
    </div>

    <div class="container mx-auto max-w-7xl p-6">

        <!-- KPIs Principales -->
        <div class="grid grid-cols-5 gap-4 mb-6">
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-lg shadow-lg">
                <p class="text-sm opacity-90">Voluntarios</p>
                <p class="text-4xl font-bold">250</p>
                <p class="text-sm mt-1">180 activos</p>
            </div>
            <div class="bg-gradient-to-br from-green-500 to-green-600 text-white p-6 rounded-lg shadow-lg">
                <p class="text-sm opacity-90">Eventos</p>
                <p class="text-4xl font-bold">45</p>
                <p class="text-sm mt-1">8 próximos</p>
            </div>
            <div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-6 rounded-lg shadow-lg">
                <p class="text-sm opacity-90">PQRS</p>
                <p class="text-4xl font-bold">320</p>
                <p class="text-sm mt-1">12 nuevas</p>
            </div>
            <div class="bg-gradient-to-br from-orange-500 to-orange-600 text-white p-6 rounded-lg shadow-lg">
                <p class="text-sm opacity-90">Leads QR</p>
                <p class="text-4xl font-bold">245</p>
                <p class="text-sm mt-1">28 esta semana</p>
            </div>
            <div class="bg-gradient-to-br from-pink-500 to-pink-600 text-white p-6 rounded-lg shadow-lg">
                <p class="text-sm opacity-90">Balance</p>
                <p class="text-4xl font-bold">$15M</p>
                <p class="text-sm mt-1">Finanzas</p>
            </div>
        </div>

        <!-- Gráficos Principales -->
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-bold text-gray-800 mb-4">👥 Voluntarios - Últimos 6 Meses</h3>
                <div style="height: 250px;">
                    <canvas id="volunteersChart"></canvas>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-bold text-gray-800 mb-4">📅 Asistencia a Eventos</h3>
                <div style="height: 250px;">
                    <canvas id="eventsChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Finanzas -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">💰 Finanzas de Campaña</h3>
            <div class="grid grid-cols-3 gap-6">
                <div class="text-center p-6 bg-green-50 rounded-lg">
                    <p class="text-sm text-gray-600 mb-2">Ingresos Totales</p>
                    <p class="text-4xl font-bold text-green-600">$50M</p>
                    <p class="text-sm text-gray-500 mt-2">COP</p>
                </div>
                <div class="text-center p-6 bg-red-50 rounded-lg">
                    <p class="text-sm text-gray-600 mb-2">Gastos Totales</p>
                    <p class="text-4xl font-bold text-red-600">$35M</p>
                    <p class="text-sm text-gray-500 mt-2">COP</p>
                </div>
                <div class="text-center p-6 bg-blue-50 rounded-lg">
                    <p class="text-sm text-gray-600 mb-2">Balance Disponible</p>
                    <p class="text-4xl font-bold text-blue-600">$15M</p>
                    <p class="text-sm text-green-600 font-semibold mt-2">+30% vs presupuesto</p>
                </div>
            </div>
            <div class="mt-6">
                <div style="height: 200px;">
                    <canvas id="financeChart"></canvas>
                </div>
            </div>
        </div>

        <!-- PQRS -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">📋 PQRS - Estado Actual</h3>
            <div class="grid grid-cols-4 gap-4 mb-4">
                <div class="bg-blue-50 p-4 rounded-lg text-center">
                    <p class="text-3xl font-bold text-blue-600">320</p>
                    <p class="text-sm text-gray-600">Total</p>
                </div>
                <div class="bg-yellow-50 p-4 rounded-lg text-center">
                    <p class="text-3xl font-bold text-yellow-600">45</p>
                    <p class="text-sm text-gray-600">En proceso</p>
                </div>
                <div class="bg-green-50 p-4 rounded-lg text-center">
                    <p class="text-3xl font-bold text-green-600">272</p>
                    <p class="text-sm text-gray-600">Resueltas</p>
                </div>
                <div class="bg-red-50 p-4 rounded-lg text-center">
                    <p class="text-3xl font-bold text-red-600">3</p>
                    <p class="text-sm text-gray-600">Vencidas</p>
                </div>
            </div>
            <div style="height: 200px;">
                <canvas id="pqrsChart"></canvas>
            </div>
        </div>

        <!-- Actividad Reciente -->
        <div class="grid grid-cols-2 gap-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-bold text-gray-800 mb-4">📍 Leads QR Recientes</h3>
                <div class="space-y-3">
                    <div class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                        <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
                            JG
                        </div>
                        <div class="flex-1">
                            <p class="font-semibold">Juan García</p>
                            <p class="text-sm text-gray-600">Barrio: Centro • QR: AFICHE-001</p>
                        </div>
                        <span class="text-xs text-gray-500">Hace 15 min</span>
                    </div>
                    <div class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                        <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
                            ML
                        </div>
                        <div class="flex-1">
                            <p class="font-semibold">María López</p>
                            <p class="text-sm text-gray-600">Barrio: Norte • QR: AFICHE-023</p>
                        </div>
                        <span class="text-xs text-gray-500">Hace 1 hora</span>
                    </div>
                    <div class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                        <div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold">
                            CR
                        </div>
                        <div class="flex-1">
                            <p class="font-semibold">Carlos Ruiz</p>
                            <p class="text-sm text-gray-600">Barrio: Sur • QR: AFICHE-015</p>
                        </div>
                        <span class="text-xs text-gray-500">Hace 3 horas</span>
                    </div>
                </div>
            </div>

            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-bold text-gray-800 mb-4">🎉 Próximos Eventos</h3>
                <div class="space-y-3">
                    <div class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50">
                        <p class="font-semibold">Asamblea Comunitaria Norte</p>
                        <p class="text-sm text-gray-600">📅 Sábado 24 de febrero • 10:00 AM</p>
                        <p class="text-xs text-blue-600 mt-1">85 confirmados</p>
                    </div>
                    <div class="border-l-4 border-green-500 pl-4 py-2 bg-green-50">
                        <p class="font-semibold">Jornada de Salud - Barrio Centro</p>
                        <p class="text-sm text-gray-600">📅 Domingo 25 de febrero • 9:00 AM</p>
                        <p class="text-xs text-green-600 mt-1">120 confirmados</p>
                    </div>
                    <div class="border-l-4 border-purple-500 pl-4 py-2 bg-purple-50">
                        <p class="font-semibold">Capacitación Voluntarios</p>
                        <p class="text-sm text-gray-600">📅 Lunes 26 de febrero • 6:00 PM</p>
                        <p class="text-xs text-purple-600 mt-1">45 confirmados</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Info -->
        <div class="mt-6 bg-blue-50 border-l-4 border-blue-500 p-4">
            <p class="text-sm text-blue-800">
                <strong>💡 Dashboard DEMO</strong>: Vista general de todas las métricas de tu campaña.
                En producción, todos estos datos serían reales y se actualizarían automáticamente.
            </p>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        // Volunteers Chart
        const volunteersCtx = document.getElementById('volunteersChart').getContext('2d');
        new Chart(volunteersCtx, {
            type: 'line',
            data: {
                labels: ['Sep', 'Oct', 'Nov', 'Dic', 'Ene', 'Feb'],
                datasets: [{
                    label: 'Voluntarios Totales',
                    data: [85, 120, 158, 195, 225, 250],
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    fill: true,
                    tension: 0.4
                }, {
                    label: 'Voluntarios Activos',
                    data: [65, 95, 120, 145, 165, 180],
                    borderColor: '#22c55e',
                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: { beginAtZero: true }
                }
            }
        });

        // Events Chart
        const eventsCtx = document.getElementById('eventsChart').getContext('2d');
        new Chart(eventsCtx, {
            type: 'bar',
            data: {
                labels: ['Sep', 'Oct', 'Nov', 'Dic', 'Ene', 'Feb'],
                datasets: [{
                    label: 'Asistencia Promedio (%)',
                    data: [65, 72, 78, 75, 82, 76],
                    backgroundColor: '#8b5cf6',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        ticks: {
                            callback: (value) => value + '%'
                        }
                    }
                }
            }
        });

        // Finance Chart
        const financeCtx = document.getElementById('financeChart').getContext('2d');
        new Chart(financeCtx, {
            type: 'bar',
            data: {
                labels: ['Sep', 'Oct', 'Nov', 'Dic', 'Ene', 'Feb'],
                datasets: [{
                    label: 'Ingresos',
                    data: [5, 8, 12, 10, 9, 6],
                    backgroundColor: '#22c55e',
                }, {
                    label: 'Gastos',
                    data: [4, 6, 8, 7, 6, 4],
                    backgroundColor: '#ef4444',
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: (value) => '$' + value + 'M'
                        }
                    }
                }
            }
        });

        // PQRS Chart
        const pqrsCtx = document.getElementById('pqrsChart').getContext('2d');
        new Chart(pqrsCtx, {
            type: 'doughnut',
            data: {
                labels: ['Resueltas', 'En Proceso', 'Vencidas'],
                datasets: [{
                    data: [272, 45, 3],
                    backgroundColor: ['#22c55e', '#f59e0b', '#ef4444'],
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 15,
                            padding: 10
                        }
                    }
                }
            }
        });
    </script>
@endpush