@extends('layouts.admin')
@section('title', 'Tithes & Welfare')
@section('page-title', 'Tithes & Welfare')
@section('page-subtitle', 'Manage member contributions')

@section('content')
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <h2 class="text-xl font-cinzel font-semibold text-[var(--text-primary)]">Year {{ $year }}</h2>
        <div class="flex gap-2">
            <a href="{{ route('admin.tithe-welfare.index', ['year' => $year - 1]) }}" class="px-3 py-2 rounded-lg border border-[var(--border-color)] hover:bg-[var(--bg-secondary)]">
                <i class="fas fa-chevron-left"></i>
            </a>
            <select onchange="window.location.href='?year='+this.value" class="px-4 py-2 rounded-lg border border-[var(--border-color)] bg-[var(--bg-card)] text-[var(--text-primary)]">
                @for($y = now()->year; $y >= now()->year - 5; $y--)
                    <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                @endfor
            </select>
            <a href="{{ route('admin.tithe-welfare.index', ['year' => $year + 1]) }}" class="px-3 py-2 rounded-lg border border-[var(--border-color)] hover:bg-[var(--bg-secondary)]">
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg: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 Tithes</p>
                    <p class="text-2xl font-bold text-[var(--text-primary)]">GHS {{ number_format($stats['total_tithes'], 2) }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                    <i class="fas fa-hand-holding-usd text-green-600"></i>
                </div>
            </div>
        </div>

        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Total Welfare</p>
                    <p class="text-2xl font-bold text-[var(--text-primary)]">GHS {{ number_format($stats['total_welfare'], 2) }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                    <i class="fas fa-heart text-blue-600"></i>
                </div>
            </div>
        </div>

        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Members (Tithes)</p>
                    <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $stats['members_paid_tithe'] }} / {{ $stats['total_members'] }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                    <i class="fas fa-users text-purple-600"></i>
                </div>
            </div>
        </div>

        <div class="card-royal p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-[var(--text-secondary)]">Members (Welfare)</p>
                    <p class="text-2xl font-bold text-[var(--text-primary)]">{{ $stats['members_paid_welfare'] }} / {{ $stats['total_members'] }}</p>
                </div>
                <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
                    <i class="fas fa-users text-orange-600"></i>
                </div>
            </div>
        </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-[var(--text-primary)]">Recent Tithes</h3>
                <a href="{{ route('admin.tithe-welfare.tithes.index', ['year' => $year]) }}" class="text-gold-500 hover:underline text-sm">View All</a>
            </div>
            <div class="space-y-3">
                @forelse($recentTithes as $tithe)
                    <div class="flex items-center justify-between p-3 rounded-lg bg-[var(--bg-secondary)]">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                                <i class="fas fa-coins text-green-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-[var(--text-primary)]">{{ $tithe->member->full_name }}</p>
                                <p class="text-xs text-[var(--text-secondary)]">{{ $tithe->receipt_number }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-semibold text-[var(--text-primary)]">GHS {{ number_format($tithe->amount, 2) }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $tithe->payment_date->format('M d') }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-4">No tithes recorded yet</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-[var(--text-primary)]">Recent Welfare</h3>
                <a href="{{ route('admin.tithe-welfare.welfare.index', ['year' => $year]) }}" class="text-gold-500 hover:underline text-sm">View All</a>
            </div>
            <div class="space-y-3">
                @forelse($recentWelfare as $welfare)
                    <div class="flex items-center justify-between p-3 rounded-lg bg-[var(--bg-secondary)]">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                                <i class="fas fa-heart text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-[var(--text-primary)]">{{ $welfare->member->full_name }}</p>
                                <p class="text-xs text-[var(--text-secondary)]">{{ $welfare->receipt_number }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-semibold text-[var(--text-primary)]">GHS {{ number_format($welfare->amount, 2) }}</p>
                            <p class="text-xs text-[var(--text-secondary)]">{{ $welfare->payment_date->format('M d') }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-[var(--text-secondary)] py-4">No welfare contributions recorded yet</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <a href="{{ route('admin.tithe-welfare.tithes.index', ['year' => $year]) }}" class="card-royal p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center">
                    <i class="fas fa-coins text-2xl text-green-600"></i>
                </div>
                <div>
                    <h4 class="font-semibold text-[var(--text-primary)]">Tithes</h4>
                    <p class="text-sm text-[var(--text-secondary)]">Manage tithe records</p>
                </div>
            </div>
        </a>

        <a href="{{ route('admin.tithe-welfare.welfare.index', ['year' => $year]) }}" class="card-royal p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center">
                    <i class="fas fa-heart text-2xl text-blue-600"></i>
                </div>
                <div>
                    <h4 class="font-semibold text-[var(--text-primary)]">Welfare</h4>
                    <p class="text-sm text-[var(--text-secondary)]">Manage welfare contributions</p>
                </div>
            </div>
        </a>

        <a href="{{ route('admin.tithe-welfare.reports.index', ['year' => $year]) }}" class="card-royal p-6 hover:shadow-lg transition-shadow">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center">
                    <i class="fas fa-chart-bar text-2xl text-purple-600"></i>
                </div>
                <div>
                    <h4 class="font-semibold text-[var(--text-primary)]">Reports</h4>
                    <p class="text-sm text-[var(--text-secondary)]">View detailed reports</p>
                </div>
            </div>
        </a>
    </div>
</div>
@endsection