<x-admin-layout>
    <div class="px-0 md:px-6 pt-0 md:pt-6 pb-8 font-sans bg-slate-50 min-h-screen">
        <div class="bg-white border-y md:border border-gray-200 shadow-sm md:rounded-sm overflow-hidden mb-6">
            <div
                class="bg-gray-50/50 px-4 md:px-6 py-4 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <h3 class="text-lg font-bold text-gray-900 flex items-center">
                    <svg class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 002-2h2a2 2 0 002 2" />
                    </svg>
                    Détails de la Cotisation : #{{ $contribution->id }}
                </h3>
                <div class="flex items-center space-x-2 w-full sm:w-auto justify-end">
                    <a href="{{ route('admin.contributions.edit', $contribution) }}"
                        class="flex-1 sm:flex-initial px-4 py-2 bg-emerald-600 text-white rounded-sm hover:bg-emerald-700 transition-all text-sm font-medium shadow-sm flex items-center justify-center">
                        <svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                        Modifier
                    </a>
                    <a href="{{ route('admin.contributions.index') }}"
                        class="flex-1 sm:flex-initial px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-sm hover:bg-gray-50 transition-all text-sm font-medium shadow-sm flex items-center justify-center">
                        <svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                        Retour
                    </a>
                </div>
            </div>

            <div class="p-4 md:p-6">
                <!-- Info Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Projet</span>
                        <span
                            class="text-sm font-bold text-slate-900">{{ optional($contribution->project)->name ?? '-' }}</span>
                    </div>

                    <div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Membre</span>
                        <div class="flex flex-col">
                            <span
                                class="text-sm font-bold text-slate-900 capitalize">{{ optional($contribution->user)->full_name ?? optional($contribution->user)->name ?? '-' }}</span>
                            @if(optional($contribution->user)->email)
                                <span class="text-[11px] text-slate-500">{{ $contribution->user->email }}</span>
                            @endif
                        </div>
                    </div>

                    <div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Montant</span>
                        <span
                            class="text-sm font-black text-slate-900">{{ \App\Models\Setting::format($contribution->amount ?? 0) }}</span>
                    </div>

                    <div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Date de paiement</span>
                        <span
                            class="text-sm text-slate-900 font-semibold">{{ optional($contribution->payment_date)->format('d/m/Y') ?? '-' }}</span>
                    </div>

                    <div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Année de gestion</span>
                        <span
                            class="text-sm text-slate-900 font-bold">Gestion {{ optional($contribution->managementYear)->year ?? '-' }}</span>
                    </div>

                    <div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Compte de dépôt</span>
                        <span
                            class="text-sm text-slate-900 font-bold">{{ optional($contribution->account)->name ?? '-' }}</span>
                    </div>

                    <div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Statut</span>
                        <span @class([
                            'px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider',
                            'bg-green-100 text-green-700 border border-green-200' => $contribution->status === 'paye',
                            'bg-red-100 text-red-700 border border-red-200' => $contribution->status !== 'paye',
                        ])>
                            {{ $contribution->status === 'paye' ? 'Payé' : 'Non payé' }}
                        </span>
                    </div>

                    <div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Enregistré par</span>
                        <span
                            class="text-sm text-slate-700 italic">{{ optional($contribution->recorder)->name ?? '-' }}</span>
                    </div>

                    <div class="md:col-span-2">
                        <div class="h-px bg-slate-100 my-2"></div>
                        <span class="block text-xs font-bold text-slate-500 uppercase mb-1">Notes</span>
                        <span
                            class="text-sm text-slate-900 whitespace-pre-line bg-slate-50 p-4 rounded-sm border border-slate-100 block">{{ $contribution->notes ?? 'Aucune note.' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-admin-layout>