@extends('admin.dashboard')

@section('donation-content')
<div>
    <!-- Donations Management Header -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
        <div>
            <h2 class="text-xl font-semibold text-gray-900 mb-2">Donations Management</h2>
            <p class="text-gray-600">Track and manage all donations made through the platform.</p>
        </div>
        <div class="mt-4 md:mt-0">
            <button type="button" onclick="exportDonations()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                Export to CSV
            </button>
        </div>
    </div>

    <!-- Filters and Search -->
    <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6 mb-6">
        <div class="md:flex md:items-center md:justify-between">
            <div class="flex-1 min-w-0">
                <form action="{{ route('admin.donations') }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
                        <div class="mt-1 relative rounded-md shadow-sm">
                            <input type="text" name="search" id="search" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Donor or recipient name">
                        </div>
                    </div>
                    
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                        <select id="status" name="status" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                            <option value="">All Statuses</option>
                            <option value="pending">Pending</option>
                            <option value="completed">Completed</option>
                            <option value="failed">Failed</option>
                            <option value="refunded">Refunded</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="date_from" class="block text-sm font-medium text-gray-700">Date From</label>
                        <div class="mt-1 relative rounded-md shadow-sm">
                            <input type="date" name="date_from" id="date_from" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                        </div>
                    </div>
                    
                    <div>
                        <label for="date_to" class="block text-sm font-medium text-gray-700">Date To</label>
                        <div class="mt-1 relative rounded-md shadow-sm">
                            <input type="date" name="date_to" id="date_to" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                        </div>
                    </div>
                    
                    <div class="md:col-span-4 flex justify-end">
                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            Filter
                        </button>
                        <button type="reset" class="ml-3 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            Reset
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Donation Statistics -->
    <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
        <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Donation Statistics
            </h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="bg-indigo-50 p-4 rounded-lg">
                    <div class="flex items-center justify-between">
                        <div class="text-indigo-600 text-lg font-semibold">Total Donations</div>
                        <div class="text-indigo-800 text-xl font-bold">{{ $totalDonations }}</div>
                    </div>
                    <div class="mt-2 text-sm text-indigo-500">
                        All time
                    </div>
                </div>
                
                <div class="bg-green-50 p-4 rounded-lg">
                    <div class="flex items-center justify-between">
                        <div class="text-green-600 text-lg font-semibold">This Month</div>
                        <div class="text-green-800 text-xl font-bold">{{ $thisMonthDonations }}</div>
                    </div>
                    <div class="mt-2 text-sm text-green-500">
                        {{ $percentChange > 0 ? '+' : '' }}{{ number_format($percentChange, 1) }}% from last month
                    </div>
                </div>
                
                <div class="bg-blue-50 p-4 rounded-lg">
                    <div class="flex items-center justify-between">
                        <div class="text-blue-600 text-lg font-semibold">Recurring Donations</div>
                        <div class="text-blue-800 text-xl font-bold">{{ $recurringDonations }}</div>
                    </div>
                    <div class="mt-2 text-sm text-blue-500">
                        Subscription-based
                    </div>
                </div>
                
                <div class="bg-purple-50 p-4 rounded-lg">
                    <div class="flex items-center justify-between">
                        <div class="text-purple-600 text-lg font-semibold">Avg. Donation</div>
                        <div class="text-purple-800 text-xl font-bold">{{ $avgDonation }}</div>
                    </div>
                    <div class="mt-2 text-sm text-purple-500">
                        Per transaction
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Donations Table -->
    <div class="flex flex-col">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Donor
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Recipient
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Amount
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Date
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Status
                                </th>
                                <th scope="col" class="relative px-6 py-3">
                                    <span class="sr-only">Actions</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($donations as $donation)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10">
                                                <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name={{ urlencode($donation->donor ? $donation->donor->name : 'Anonymous') }}&background=6366F1&color=fff" alt="{{ $donation->donor ? $donation->donor->name : 'Anonymous' }}">
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">
                                                    {{ $donation->donor ? $donation->donor->name : 'Anonymous' }}
                                                    @if($donation->is_anonymous)
                                                        <span class="text-xs text-gray-500">(Anonymous)</span>
                                                    @endif
                                                </div>
                                                <div class="text-sm text-gray-500">
                                                    {{ $donation->donor ? $donation->donor->email : 'N/A' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ $donation->elderly ? $donation->elderly->name : 'General Fund' }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">
                                            @if($globalCurrencyOverride)
                                                {{ \App\Services\CurrencyService::formatAmount($donation->amount, $defaultCurrency) }}
                                            @else
                                                {{ \App\Services\CurrencyService::formatAmount($donation->amount, $donation->currency) }}
                                            @endif
                                            @if($donation->is_recurring)
                                                <span class="text-xs text-blue-500 ml-1">(Recurring)</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {{ $donation->created_at->format('M d, Y H:i') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($donation->payment_status === 'completed')
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                Completed
                                            </span>
                                        @elseif($donation->payment_status === 'pending')
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                Pending
                                            </span>
                                        @elseif($donation->payment_status === 'failed')
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                Failed
                                            </span>
                                        @elseif($donation->payment_status === 'refunded')
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                                Refunded
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <div class="flex justify-end space-x-2">
                                            <button type="button" onclick="viewDonation({{ $donation->id }})" class="text-blue-600 hover:text-blue-900 bg-transparent border-0 cursor-pointer">
                                                View
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
                                        No donations found.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- View Donation Modal -->
    <div id="viewDonationModal" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div id="donationContent" class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                Donation Details
                            </h3>
                            <div class="mt-4">
                                <div class="animate-pulse">
                                    <div class="flex items-center space-x-4">
                                        <div class="rounded-full bg-gray-200 h-12 w-12"></div>
                                        <div class="flex-1 space-y-2">
                                            <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                                            <div class="h-4 bg-gray-200 rounded w-1/2"></div>
                                        </div>
                                    </div>
                                    <div class="space-y-2 mt-4">
                                        <div class="h-4 bg-gray-200 rounded"></div>
                                        <div class="h-4 bg-gray-200 rounded"></div>
                                        <div class="h-4 bg-gray-200 rounded"></div>
                                        <div class="h-4 bg-gray-200 rounded w-5/6"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" onclick="closeViewDonationModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
<script>
    function exportDonations() {
        // In a real application, this would trigger a CSV export
        alert('This would export all donations to a CSV file in a real application.');
    }

    function viewDonation(id) {
        // Show the modal with loading state
        document.getElementById('viewDonationModal').classList.remove('hidden');
        
        // Set up loading state
        document.getElementById('donationContent').innerHTML = `
            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                Donation Details
            </h3>
            <div class="mt-4">
                <div class="animate-pulse">
                    <div class="flex items-center space-x-4">
                        <div class="rounded-full bg-gray-200 h-12 w-12"></div>
                        <div class="flex-1 space-y-2">
                            <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                            <div class="h-4 bg-gray-200 rounded w-1/2"></div>
                        </div>
                    </div>
                    <div class="space-y-2 mt-4">
                        <div class="h-4 bg-gray-200 rounded"></div>
                        <div class="h-4 bg-gray-200 rounded"></div>
                        <div class="h-4 bg-gray-200 rounded"></div>
                        <div class="h-4 bg-gray-200 rounded w-5/6"></div>
                    </div>
                </div>
            </div>
        `;
        
        // Fetch donation details from the server
        fetch(`/admin/donations/${id}/details`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(donation => {
                // Update the modal with the donation details
                document.getElementById('donationContent').innerHTML = `
                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                        Donation Details
                    </h3>
                    <div class="mt-4 space-y-4">
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">Donor Information</h4>
                            <p class="mt-1 text-sm text-gray-900">${donation.donor ? donation.donor.name : 'Anonymous'}</p>
                            <p class="text-sm text-gray-500">${donation.donor ? donation.donor.email : 'N/A'}</p>
                            ${donation.is_anonymous ? '<p class="text-sm text-gray-500">(Anonymous donation)</p>' : ''}
                        </div>
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">Recipient</h4>
                            <p class="mt-1 text-sm text-gray-900">${donation.elderly ? donation.elderly.name : 'General Fund'}</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <h4 class="text-sm font-medium text-gray-500">Amount</h4>
                                <p class="mt-1 text-sm text-gray-900">${donation.formatted_amount}</p>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-gray-500">Date</h4>
                                <p class="mt-1 text-sm text-gray-900">${donation.formatted_date}</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <h4 class="text-sm font-medium text-gray-500">Status</h4>
                                <p class="mt-1 text-sm text-gray-900">${donation.payment_status.charAt(0).toUpperCase() + donation.payment_status.slice(1)}</p>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-gray-500">Payment Method</h4>
                                <p class="mt-1 text-sm text-gray-900">${donation.payment_method || 'N/A'}</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <h4 class="text-sm font-medium text-gray-500">Transaction ID</h4>
                                <p class="mt-1 text-sm text-gray-900">${donation.transaction_id || donation.transaction_reference || 'N/A'}</p>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-gray-500">Currency</h4>
                                <p class="mt-1 text-sm text-gray-900">${donation.currency}</p>
                            </div>
                        </div>
                        ${donation.is_recurring ? `
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">Recurring Details</h4>
                            <p class="mt-1 text-sm text-gray-900">
                                ${(donation.recurring_frequency ? donation.recurring_frequency.charAt(0).toUpperCase() + donation.recurring_frequency.slice(1) : 'Monthly')} subscription
                                ${donation.formatted_next_payment_date ? `(Next payment: ${donation.formatted_next_payment_date})` : ''}
                            </p>
                        </div>
                        ` : ''}
                        ${donation.message ? `
                        <div>
                            <h4 class="text-sm font-medium text-gray-500">Message</h4>
                            <p class="mt-1 text-sm text-gray-900">${donation.message}</p>
                        </div>
                        ` : ''}
                    </div>
                `;
            })
            .catch(error => {
                console.error('Error fetching donation details:', error);
                alert('Failed to load donation details. Please try again.');
            });
    }

    function closeViewDonationModal() {
        document.getElementById('viewDonationModal').classList.add('hidden');
    }

    // Mark Completed and Refund functionality removed
</script>
@endpush
@endsection