@extends('layouts.goberdata')

@section('title', 'Donaciones Globales')
@section('page_title', 'Donaciones Globales')
@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="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-yellow-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        💰 Donaciones Globales
                    </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-2">
                <div class="w-full">
                    <!-- Global 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-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">Total Recaudado</p>
                                <i class="fas fa-dollar-sign text-3xl opacity-50"></i>
                            </div>
                            <p id="totalAmount" class="text-4xl font-bold">$0</p>
                            <p class="text-xs opacity-75 mt-1">Todas las campañas</p>
                        </div>
                        <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 Donaciones</p>
                                <i class="fas fa-hand-holding-usd text-3xl opacity-50"></i>
                            </div>
                            <p id="totalDonations" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Registradas</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">Campañas Activas</p>
                                <i class="fas fa-flag text-3xl opacity-50"></i>
                            </div>
                            <p id="activeCampaigns" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Con donaciones</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">Promedio</p>
                                <i class="fas fa-chart-line text-3xl opacity-50"></i>
                            </div>
                            <p id="averageDonation" class="text-4xl font-bold">$0</p>
                            <p class="text-xs opacity-75 mt-1">Por donación</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">Recaudación por Campaña</h3>
                            <div class="chart-container">
                                <canvas id="campaignChart"></canvas>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Donaciones por Método</h3>
                            <div class="chart-container">
                                <canvas id="methodChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Campaign Comparison -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Comparación por Campaña</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">Campaña</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Recaudado</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Donaciones</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Promedio</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Completadas</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pendientes</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="campaignsTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Top Donors -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Top Donantes Globales</h3>
                        <div class="space-y-4" id="topDonorsContainer">
                            <!-- Top donors will be loaded here -->
                        </div>
                    </div>

                    <!-- Recent Activity -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Actividad Reciente</h3>
                        <div class="space-y-4" id="recentActivityContainer">
                            <!-- Recent activity will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
@endsection

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

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

        async function loadGlobalData() {
            try {
                // Simular datos globales ya que no tenemos endpoint específico
                const mockData = {
                    stats: {
                        total_amount: 1250000,
                        total_donations: 272,
                        active_campaigns: 23,
                        average_donation: 4595
                    },
                    campaigns: [
                        { name: 'Campaña Bogotá', amount: 350000, donations: 85, average: 4118, completed: 75, pending: 10 },
                        { name: 'Campaña Medellín', amount: 280000, donations: 70, average: 4000, completed: 65, pending: 5 },
                        { name: 'Campaña Cali', amount: 250000, donations: 60, average: 4167, completed: 55, pending: 5 },
                        { name: 'Campaña Barranquilla', amount: 200000, donations: 45, average: 4444, completed: 40, pending: 5 },
                        { name: 'Campaña Cartagena', amount: 170000, donations: 12, average: 14167, completed: 10, pending: 2 }
                    ],
                    methods: [
                        { method: 'credit_card', count: 120, amount: 600000 },
                        { method: 'bank_transfer', count: 80, amount: 400000 },
                        { method: 'cash', count: 50, amount: 150000 },
                        { method: 'crypto', count: 15, amount: 75000 },
                        { method: 'check', count: 7, amount: 25000 }
                    ],
                    top_donors: [
                        { name: 'Empresa ABC', amount: 50000, campaign: 'Campaña Bogotá', date: '2025-10-20' },
                        { name: 'Fundación XYZ', amount: 40000, campaign: 'Campaña Medellín', date: '2025-10-19' },
                        { name: 'Donante Anónimo', amount: 35000, campaign: 'Campaña Cali', date: '2025-10-18' },
                        { name: 'Corporación DEF', amount: 30000, campaign: 'Campaña Barranquilla', date: '2025-10-17' },
                        { name: 'Asociación GHI', amount: 25000, campaign: 'Campaña Cartagena', date: '2025-10-16' }
                    ],
                    recent_activity: [
                        { campaign: 'Campaña Bogotá', action: 'Nueva donación recibida', amount: 5000, time: '1 hora' },
                        { campaign: 'Campaña Medellín', action: 'Donación completada', amount: 3000, time: '2 horas' },
                        { campaign: 'Campaña Cali', action: 'Nueva donación recibida', amount: 7500, time: '3 horas' },
                        { campaign: 'Campaña Barranquilla', action: 'Donación completada', amount: 2000, time: '4 horas' },
                        { campaign: 'Campaña Cartagena', action: 'Nueva donación recibida', amount: 10000, time: '5 horas' }
                    ]
                };

                // Update stats cards
                document.getElementById('totalAmount').textContent = '$' + mockData.stats.total_amount.toLocaleString();
                document.getElementById('totalDonations').textContent = mockData.stats.total_donations.toLocaleString();
                document.getElementById('activeCampaigns').textContent = mockData.stats.active_campaigns.toLocaleString();
                document.getElementById('averageDonation').textContent = '$' + mockData.stats.average_donation.toLocaleString();

                // Render charts
                renderCampaignChart(mockData.campaigns);
                renderMethodChart(mockData.methods);

                // Load campaign comparison
                loadCampaignComparison(mockData.campaigns);

                // Load top donors
                loadTopDonors(mockData.top_donors);

                // Load recent activity
                loadRecentActivity(mockData.recent_activity);

            } catch (error) {
                console.error('Error loading global donations data:', error);
                alert('Error al cargar los datos globales de donaciones. Por favor, intente de nuevo.');
            }
        }

        function renderCampaignChart(campaigns) {
            const ctx = document.getElementById('campaignChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: campaigns.map(c => c.name),
                    datasets: [{
                        label: 'Recaudación ($)',
                        data: campaigns.map(c => c.amount),
                        backgroundColor: '#10B981',
                        borderColor: '#059669',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '$' + value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
        }

        function renderMethodChart(methods) {
            const ctx = document.getElementById('methodChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: methods.map(m => m.method),
                    datasets: [{
                        data: methods.map(m => m.count),
                        backgroundColor: ['#6366F1', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }

        function loadCampaignComparison(campaigns) {
            const tbody = document.getElementById('campaignsTableBody');
            tbody.innerHTML = '';

            campaigns.forEach(campaign => {
                const row = `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${campaign.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${campaign.amount.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.donations}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${campaign.average.toLocaleString()}</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 bg-green-100 text-green-800">
                                ${campaign.completed}
                            </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 bg-yellow-100 text-yellow-800">
                                ${campaign.pending}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button onclick="viewCampaignDonations('${campaign.name}')" class="text-blue-600 hover:text-blue-900 mr-2">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="exportCampaignDonations('${campaign.name}')" class="text-green-600 hover:text-green-900">
                                <i class="fas fa-download"></i>
                            </button>
                        </td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        function loadTopDonors(donors) {
            const container = document.getElementById('topDonorsContainer');
            container.innerHTML = '';

            donors.forEach((donor, index) => {
                const donorCard = `
                    <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3">
                                ${index + 1}
                            </div>
                            <div>
                                <span class="font-semibold text-gray-800">${donor.name}</span>
                                <span class="text-gray-600 ml-2">- ${donor.campaign}</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="text-lg font-semibold text-green-600">$${donor.amount.toLocaleString()}</span>
                            <span class="text-xs text-gray-500 ml-2">${donor.date}</span>
            </div>
                    </div>
                `;
                container.innerHTML += donorCard;
            });
        }

        function loadRecentActivity(activities) {
            const container = document.getElementById('recentActivityContainer');
            container.innerHTML = '';

            activities.forEach(activity => {
                const activityItem = `
                    <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                        <div>
                            <span class="font-semibold text-gray-800">${activity.campaign}</span>
                            <span class="text-gray-600 ml-2">${activity.action}</span>
                        </div>
                        <div class="text-right">
                            <span class="text-sm font-semibold text-green-600">$${activity.amount.toLocaleString()}</span>
                            <span class="text-xs text-gray-500 ml-2">${activity.time}</span>
        </div>
    </div>
                `;
                container.innerHTML += activityItem;
            });
        }

        function viewCampaignDonations(campaignName) {
            alert(`Ver donaciones de ${campaignName} - Funcionalidad pendiente`);
        }

        function exportCampaignDonations(campaignName) {
            alert(`Exportar donaciones de ${campaignName} - Funcionalidad pendiente`);
        }
    </script>
@endpush