@extends('layouts.goberdata')

@section('title', 'Donaciones')
@section('page_title', 'Donaciones')
@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')
<!-- Header -->
            <header class="flex justify-between items-center p-6 bg-white border-b border-gray-200 shadow-sm">
                <h1 class="text-2xl font-semibold text-gray-800">Gestión de Donaciones</h1>
                <div class="flex items-center space-x-4">
                    <button onclick="exportDonations()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                        <i class="fas fa-download mr-2"></i>Exportar
                    </button>
                    <button onclick="addDonation()" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">
                        <i class="fas fa-plus mr-2"></i>Nueva Donación
                    </button>
                </div>
            </header>

            <!-- Main Content -->
            <main class="flex-1 bg-gray-100 p-3">
                <div class="w-full">
                    <!-- 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">Donaciones completadas</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">Registros en sistema</p>
                        </div>
                        <div class="bg-gradient-to-br from-yellow-500 to-yellow-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">Hoy</p>
                                <i class="fas fa-calendar-day text-3xl opacity-50"></i>
                            </div>
                            <p id="todayAmount" class="text-4xl font-bold">$0</p>
                            <p class="text-xs opacity-75 mt-1">Recaudado hoy</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">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">Donaciones por Estado</h3>
                            <div class="chart-container">
                                <canvas id="statusChart"></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 Funds -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Fondos de Campaña</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="fundsContainer">
                            <!-- Funds will be loaded here -->
                        </div>
                    </div>

                    <!-- Filters -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Filtros</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Estado</label>
                                <select id="statusFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                    <option value="completed">Completadas</option>
                                    <option value="pending">Pendientes</option>
                                    <option value="failed">Fallidas</option>
                                    <option value="refunded">Reembolsadas</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Método de Pago</label>
                                <select id="methodFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                                    <option value="">Todos</option>
                                    <option value="credit_card">Tarjeta de Crédito</option>
                                    <option value="bank_transfer">Transferencia</option>
                                    <option value="cash">Efectivo</option>
                                    <option value="crypto">Criptomoneda</option>
                                    <option value="check">Cheque</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Fecha Desde</label>
                                <input type="date" id="dateFromFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Fecha Hasta</label>
                                <input type="date" id="dateToFilter" class="w-full border border-gray-300 rounded-lg px-3 py-2">
                            </div>
                        </div>
                        <div class="mt-4 flex justify-between">
                            <button onclick="clearFilters()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
                                <i class="fas fa-times mr-2"></i>Limpiar Filtros
                            </button>
                            <button onclick="applyFilters()" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                                <i class="fas fa-search mr-2"></i>Aplicar Filtros
                            </button>
                        </div>
                    </div>

                    <!-- Donations Table -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Lista de Donaciones</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 cursor-pointer" onclick="sortTable('id')">
                                            ID <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('amount')">
                                            Monto <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('payment_method')">
                                            Método <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('status')">
                                            Estado <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('created_at')">
                                            Fecha <i class="fas fa-sort ml-1"></i>
                                        </th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Donante</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="donationsTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                        <div id="pagination" class="mt-4 flex justify-between items-center">
                            <!-- Pagination will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
@endsection

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

        let currentPage = 1;
        let currentFilters = {};
        let currentSort = { field: 'created_at', order: 'desc' };

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

        async function loadDashboardData() {
            try {
                const response = await fetch('/api/donations/dashboard', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Donations Dashboard Data:', data);

                // Update stats cards
                document.getElementById('totalAmount').textContent = '$' + data.stats.total_amount.toLocaleString();
                document.getElementById('totalDonations').textContent = data.stats.total_donations.toLocaleString();
                document.getElementById('todayAmount').textContent = '$' + data.stats.today_amount.toLocaleString();
                document.getElementById('averageDonation').textContent = '$' + data.stats.average_donation.toLocaleString();

                // Render charts
                renderStatusChart(data.donations_by_status);
                renderMethodChart(data.donations_by_method);

                // Load campaign funds
                loadCampaignFunds(data.campaign_funds);

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

        async function loadDonations() {
            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    per_page: 25,
                    sort_by: currentSort.field,
                    sort_order: currentSort.order,
                    ...currentFilters
                });

                const response = await fetch(`/api/donations?${params}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                console.log('Donations Data:', data);

                // Populate table
                const tbody = document.getElementById('donationsTableBody');
                tbody.innerHTML = '';
                
                data.data.forEach(donation => {
                    const row = `
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${donation.id}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${donation.amount.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 ${getMethodBadge(donation.payment_method)}">
                                    ${donation.payment_method}
                                </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 ${getStatusBadge(donation.status)}">
                                    ${donation.status}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${new Date(donation.created_at).toLocaleDateString()}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${donation.donor_display_name || 'Anónimo'}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="viewDonation(${donation.id})" class="text-blue-600 hover:text-blue-900 mr-2">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button onclick="editDonation(${donation.id})" class="text-green-600 hover:text-green-900 mr-2">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button onclick="sendReceipt(${donation.id})" class="text-purple-600 hover:text-purple-900">
                                    <i class="fas fa-receipt"></i>
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });

                // Update pagination
                updatePagination(data);

            } catch (error) {
                console.error('Error loading donations:', error);
                alert('Error al cargar la lista de donaciones. Por favor, intente de nuevo.');
            }
        }

        function renderStatusChart(data) {
            const ctx = document.getElementById('statusChart').getContext('2d');
            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: data.map(item => item.payment_status),
                    datasets: [{
                        data: data.map(item => item.count),
                        backgroundColor: ['#10B981', '#F59E0B', '#EF4444', '#6B7280', '#8B5CF6'],
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }

        function renderMethodChart(data) {
            const ctx = document.getElementById('methodChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: data.map(item => item.payment_method),
                    datasets: [{
                        label: 'Donaciones',
                        data: data.map(item => item.count),
                        backgroundColor: '#6366F1',
                        borderColor: '#4F46E5',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function loadCampaignFunds(funds) {
            const container = document.getElementById('fundsContainer');
            container.innerHTML = '';
            
            funds.forEach(fund => {
                const progressPercentage = fund.target_amount > 0 ? (fund.current_amount / fund.target_amount) * 100 : 0;
                const fundCard = `
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="font-semibold text-gray-800 mb-2">${fund.name}</h4>
                        <p class="text-sm text-gray-600 mb-3">${fund.description}</p>
                        <div class="mb-2">
                            <div class="flex justify-between text-sm">
                                <span>$${fund.current_amount.toLocaleString()}</span>
                                <span>$${fund.target_amount.toLocaleString()}</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: ${Math.min(progressPercentage, 100)}%"></div>
                            </div>
                        </div>
                        <div class="text-xs text-gray-500">
                            ${progressPercentage.toFixed(1)}% completado
                        </div>
                    </div>
                `;
                container.innerHTML += fundCard;
            });
        }

        function getStatusBadge(status) {
            const badges = {
                'completed': 'bg-green-100 text-green-800',
                'pending': 'bg-yellow-100 text-yellow-800',
                'failed': 'bg-red-100 text-red-800',
                'refunded': 'bg-gray-100 text-gray-800',
                'cancelled': 'bg-red-100 text-red-800'
            };
            return badges[status] || 'bg-gray-100 text-gray-800';
        }

        function getMethodBadge(method) {
            const badges = {
                'credit_card': 'bg-blue-100 text-blue-800',
                'bank_transfer': 'bg-green-100 text-green-800',
                'cash': 'bg-yellow-100 text-yellow-800',
                'crypto': 'bg-purple-100 text-purple-800',
                'check': 'bg-gray-100 text-gray-800'
            };
            return badges[method] || 'bg-gray-100 text-gray-800';
        }

        function applyFilters() {
            currentFilters = {
                payment_status: document.getElementById('statusFilter').value,
                payment_method: document.getElementById('methodFilter').value,
                date_from: document.getElementById('dateFromFilter').value,
                date_to: document.getElementById('dateToFilter').value
            };
            
            // Remove empty filters
            Object.keys(currentFilters).forEach(key => {
                if (!currentFilters[key]) {
                    delete currentFilters[key];
                }
            });
            
            currentPage = 1;
            loadDonations();
        }

        function clearFilters() {
            document.getElementById('statusFilter').value = '';
            document.getElementById('methodFilter').value = '';
            document.getElementById('dateFromFilter').value = '';
            document.getElementById('dateToFilter').value = '';
            currentFilters = {};
            currentPage = 1;
            loadDonations();
        }

        function sortTable(field) {
            if (currentSort.field === field) {
                currentSort.order = currentSort.order === 'asc' ? 'desc' : 'asc';
            } else {
                currentSort.field = field;
                currentSort.order = 'asc';
            }
            loadDonations();
        }

        function updatePagination(data) {
            const pagination = document.getElementById('pagination');
            const totalPages = data.last_page;
            
            let paginationHTML = `
                <div class="text-sm text-gray-700">
                    Mostrando ${data.from || 0} a ${data.to || 0} de ${data.total} resultados
                </div>
                <div class="flex space-x-2">
            `;
            
            if (data.prev_page_url) {
                paginationHTML += `<button onclick="changePage(${data.current_page - 1})" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Anterior</button>`;
            }
            
            for (let i = 1; i <= Math.min(totalPages, 5); i++) {
                const activeClass = i === data.current_page ? 'bg-blue-500 text-white' : 'border border-gray-300 hover:bg-gray-50';
                paginationHTML += `<button onclick="changePage(${i})" class="px-3 py-1 rounded ${activeClass}">${i}</button>`;
            }
            
            if (data.next_page_url) {
                paginationHTML += `<button onclick="changePage(${data.current_page + 1})" class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50">Siguiente</button>`;
            }
            
            paginationHTML += '</div>';
            pagination.innerHTML = paginationHTML;
        }

        function changePage(page) {
            currentPage = page;
            loadDonations();
        }

        function viewDonation(id) {
            alert(`Ver donación ${id} - Funcionalidad pendiente`);
        }

        function editDonation(id) {
            alert(`Editar donación ${id} - Funcionalidad pendiente`);
        }

        function sendReceipt(id) {
            alert(`Enviar recibo ${id} - Funcionalidad pendiente`);
        }

        function addDonation() {
            alert('Agregar donación - Funcionalidad pendiente');
        }

        function exportDonations() {
            alert('Exportar donaciones - Funcionalidad pendiente');
        }
    </script>
@endpush