@extends('layouts.app')

@section('title', 'Tableau de bord | EasyMutuelle')
@section('page_title', 'Tableau de bord')

@section('content')
<div class="space-y-6">
    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div class="stat-card">
            <div class="text-sm font-medium text-slate-500">Adhérents</div>
            <div class="mt-3 flex items-end justify-between">
                <div class="text-3xl font-bold text-slate-900">{{ number_format($membersCount, 0, ',', ' ') }}</div>
                <span class="badge-success">+12%</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="text-sm font-medium text-slate-500">Cotisations</div>
            <div class="mt-3 flex items-end justify-between">
                <div class="text-2xl font-bold text-slate-900">{{ number_format($monthlyContributions, 0, ',', ' ') }} FCFA</div>
                <span class="badge-success">+8%</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="text-sm font-medium text-slate-500">Paiements</div>
            <div class="mt-3 flex items-end justify-between">
                <div class="text-2xl font-bold text-slate-900">{{ number_format($paymentsTotal, 0, ',', ' ') }} FCFA</div>
                <span class="badge-warning">À surveiller</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="text-sm font-medium text-slate-500">Prêts actifs</div>
            <div class="mt-3 flex items-end justify-between">
                <div class="text-3xl font-bold text-slate-900">{{ $loansCount }}</div>
                <span class="badge-danger">{{ number_format($aidsTotal, 0, ',', ' ') }} FCFA</span>
            </div>
        </div>
    </div>

    <div class="grid gap-6 xl:grid-cols-[1.5fr_1fr]">
        <div class="card-surface rounded-2xl p-6">
            <div class="mb-5 flex items-center justify-between">
                <h2 class="text-xl font-bold text-slate-900">Activités récentes</h2>
                <span class="text-sm text-slate-500">Derniers événements</span>
            </div>

            <div class="space-y-4">
                @forelse($recentPayments as $payment)
                    <div class="flex items-center justify-between border-b border-slate-100 pb-4 last:border-b-0 last:pb-0">
                        <div>
                            <div class="font-medium text-slate-800">{{ $payment->member?->fullName() ?? 'Adhérent' }}</div>
                            <div class="text-sm text-slate-500">Paiement reçu · {{ $payment->method }}</div>
                        </div>
                        <div class="text-right">
                            <div class="font-bold text-emerald-700">{{ number_format($payment->amount, 0, ',', ' ') }} FCFA</div>
                            <div class="text-xs text-slate-400">{{ $payment->received_at?->format('d/m/Y') }}</div>
                        </div>
                    </div>
                @empty
                    <p class="text-sm text-slate-500">Aucune activité récente pour le moment.</p>
                @endforelse
            </div>
        </div>

        <div class="card-surface rounded-2xl p-6">
            <div class="mb-5 flex items-center justify-between">
                <h2 class="text-xl font-bold text-slate-900">Réunions</h2>
                <span class="badge-success">{{ count($recentMeetings) }} plans</span>
            </div>

            <div class="space-y-4">
                @forelse($recentMeetings as $meeting)
                    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                        <div class="font-medium text-slate-800">{{ $meeting->title }}</div>
                        <div class="mt-2 text-sm text-slate-500">{{ $meeting->scheduled_at?->format('d/m/Y à H:i') }} · {{ $meeting->location }}</div>
                    </div>
                @empty
                    <p class="text-sm text-slate-500">Aucune réunion prévue.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="grid gap-6 xl:grid-cols-[1.3fr_1fr]">
        <div class="card-surface rounded-2xl p-6">
            <div class="mb-5 flex items-center justify-between">
                <h2 class="text-xl font-bold text-slate-900">Adhérents récents</h2>
                <a href="{{ route('members.index') }}" class="text-sm font-medium text-[#0f4c5c]">Voir tout</a>
            </div>

            <div class="overflow-hidden rounded-xl border border-slate-200">
                <table class="min-w-full text-left text-sm">
                    <thead class="bg-slate-100 text-slate-600">
                        <tr>
                            <th class="px-4 py-3 font-semibold">Nom</th>
                            <th class="px-4 py-3 font-semibold">Statut</th>
                            <th class="px-4 py-3 font-semibold">Catégorie</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentMembers as $member)
                            <tr class="border-t border-slate-200 bg-white">
                                <td class="px-4 py-3 font-medium text-slate-800">
                                    <a href="{{ route('members.show', $member) }}" class="hover:text-[#0f4c5c]">{{ $member->fullName() }}</a>
                                </td>
                                <td class="px-4 py-3"><span class="badge-success">{{ $member->status }}</span></td>
                                <td class="px-4 py-3 text-slate-600">{{ $member->category }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="px-4 py-6 text-center text-slate-500">Aucun adhérent enregistré.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card-surface rounded-2xl p-6">
            <div class="mb-5 flex items-center justify-between">
                <h2 class="text-xl font-bold text-slate-900">Vue rapide</h2>
            </div>

            <div class="space-y-4">
                <div class="rounded-xl bg-[#e8f4f6] p-4">
                    <div class="text-sm text-slate-600">Membres actifs</div>
                    <div class="mt-2 text-2xl font-bold text-[#0f4c5c]">{{ $activeMembersCount }}</div>
                </div>
                <div class="rounded-xl bg-emerald-50 p-4">
                    <div class="text-sm text-slate-600">Montant des aides</div>
                    <div class="mt-2 text-2xl font-bold text-emerald-700">{{ number_format($aidsTotal, 0, ',', ' ') }} FCFA</div>
                </div>
                <div class="rounded-xl bg-amber-50 p-4">
                    <div class="text-sm text-slate-600">État financier</div>
                    <div class="mt-2 text-2xl font-bold text-amber-700">Sain</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection