@extends('layouts.admin')
@section('title', 'Finance Overview')
@section('page-title', 'Finance Overview')
@section('page-subtitle', 'Financial management dashboard')

@section('content')
<div class="space-y-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Total Donations</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($stats['total_donations'] ?? 0, 2) }}</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-green-500/20 flex items-center justify-center">
                    <i class="fas fa-hand-holding-usd text-green-500 text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-[var(--text-secondary)] mt-2">This month: {{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($stats['monthly_donations'] ?? 0, 2) }}</p>
        </div>
        
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Total Expenses</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($stats['total_expenses'] ?? 0, 2) }}</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-red-500/20 flex items-center justify-center">
                    <i class="fas fa-receipt text-red-500 text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-[var(--text-secondary)] mt-2">This month: {{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($stats['monthly_expenses'] ?? 0, 2) }}</p>
        </div>
        
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Active Pledges</p>
                    <p class="text-3xl font-bold font-cinzel text-[var(--text-primary)]">{{ number_format($stats['active_pledges'] ?? 0) }}</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-gold-500/20 flex items-center justify-center">
                    <i class="fas fa-handshake text-gold-500 text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-[var(--text-secondary)] mt-2">Outstanding: {{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($stats['outstanding_pledges'] ?? 0, 2) }}</p>
        </div>
        
        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Net Balance</p>
                    <p class="text-3xl font-bold font-cinzel text-{{ ($stats['net_balance'] ?? 0) >= 0 ? 'green' : 'red' }}-500">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format(abs($stats['net_balance'] ?? 0), 2) }}</p>
                </div>
                <div class="w-14 h-14 rounded-full bg-blue-500/20 flex items-center justify-center">
                    <i class="fas fa-wallet text-blue-500 text-2xl"></i>
                </div>
            </div>
            <p class="text-xs text-[var(--text-secondary)] mt-2">Income - Expenses</p>
        </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="card-royal p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
                    <i class="fas fa-arrow-up mr-2 text-green-500"></i> Recent Donations
                </h3>
                <a href="{{ route('admin.finance.donations.index') }}" class="text-sm text-gold-500 hover:text-gold-600">View All</a>
            </div>
            <div class="space-y-3">
                @forelse($recentDonations ?? [] as $donation)
                    <div class="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
                        <div>
                            <p class="text-[var(--text-primary)] font-medium">{{ $donation->is_anonymous ? 'Anonymous' : ($donation->member?->full_name ?? $donation->donor_name ?? 'N/A') }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $donation->donationType?->name ?? 'Donation' }}</p>
                        </div>
                        <div class="text-right">
                            <p class="text-green-500 font-semibold">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($donation->amount, 2) }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $donation->donation_date->format('M j, Y') }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-4">No recent donations</p>
                @endforelse
            </div>
        </div>
        
        <div class="card-royal p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)]">
                    <i class="fas fa-arrow-down mr-2 text-red-500"></i> Recent Expenses
                </h3>
                <a href="{{ route('admin.finance.expenses.index') }}" class="text-sm text-gold-500 hover:text-gold-600">View All</a>
            </div>
            <div class="space-y-3">
                @forelse($recentExpenses ?? [] as $expense)
                    <div class="flex items-center justify-between p-3 bg-[var(--bg-secondary)] rounded-lg">
                        <div>
                            <p class="text-[var(--text-primary)] font-medium">{{ Str::limit($expense->description, 30) }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $expense->category?->name ?? 'Uncategorized' }}</p>
                        </div>
                        <div class="text-right">
                            <p class="text-red-500 font-semibold">{{ church_setting('currency_symbol', 'GH₵') }}{{ number_format($expense->amount, 2) }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $expense->expense_date->format('M j, Y') }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-4">No recent expenses</p>
                @endforelse
            </div>
        </div>
    </div>
    
    <div class="card-royal p-6">
        <h3 class="font-cinzel font-semibold text-lg text-[var(--text-primary)] mb-4">
            <i class="fas fa-link mr-2 text-gold-500"></i> Quick Actions
        </h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ route('admin.finance.donations.create') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-plus-circle text-gold-500 text-2xl mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">New Donation</p>
            </a>
            <a href="{{ route('admin.finance.pledges.create') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-handshake text-gold-500 text-2xl mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">New Pledge</p>
            </a>
            <a href="{{ route('admin.finance.expenses.create') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-minus-circle text-red-500 text-2xl mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">New Expense</p>
            </a>
            <a href="{{ route('admin.finance.reports') }}" class="p-4 border border-[var(--border-color)] rounded-lg hover:bg-[var(--bg-secondary)] transition-colors text-center">
                <i class="fas fa-chart-pie text-gold-500 text-2xl mb-2"></i>
                <p class="text-[var(--text-primary)] font-medium">Financial Report</p>
            </a>
        </div>
    </div>
</div>
@endsection