{{-- Admin Contribution Details --}}
<x-app-layout title="Contribution Details">

    <x-module-hero title="Contribution Details" :description="'Reference: ' . $contribution->reference_number" icon="fa-hand-holding-usd">
        <x-slot name="backButton">
            <a href="{{ route('admin.contributions.index') }}" class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to Contributions
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view contributions')
                <a href="{{ route('admin.contributions.index') }}" class="module-hero-tab active-tab">
                    <i class="fas fa-list"></i> All Contributions
                </a>
            @endcan
            @can('create contributions')
                <a href="{{ route('admin.contributions.create') }}" class="module-hero-tab">
                    <i class="fas fa-plus"></i> Record Contribution
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-3"></i> {{ session('success') }}
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            {{-- Main Content --}}
            <div class="lg:col-span-2 space-y-6">

                {{-- Member Information --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-user text-green-600"></i> Member Information
                        </h3>
                    </div>
                    <div class="p-6">
                        @if($contribution->member)
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                                    <span class="text-green-700 font-bold">{{ $contribution->member->initials }}</span>
                                </div>
                                <div>
                                    <div class="font-semibold text-gray-900">{{ $contribution->member->full_name }}</div>
                                    <div class="text-gray-500 text-sm">{{ $contribution->member->membership_code }}</div>
                                    <a href="{{ route('admin.members.show', $contribution->member) }}" class="text-green-600 hover:underline text-sm">
                                        View Member Profile
                                    </a>
                                </div>
                            </div>
                        @else
                            <p class="text-gray-500 text-sm">Member information not available</p>
                        @endif
                    </div>
                </div>

                {{-- Contribution Details --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-file-invoice-dollar text-green-600"></i> Contribution Details
                        </h3>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Reference Number</label>
                            <p class="text-gray-900 font-mono text-sm">{{ $contribution->reference_number }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Category</label>
                            <p class="text-gray-900 text-sm">{{ $contribution->membershipCategory?->name }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Amount</label>
                            <p class="text-2xl font-bold text-green-600">{{ number_format($contribution->amount, 2) }} {{ $contribution->currency }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Total with Penalty</label>
                            <p class="text-2xl font-bold text-gray-900">{{ number_format($contribution->amount + $contribution->penalty_amount, 2) }} {{ $contribution->currency }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Due Date</label>
                            <p class="text-gray-900 text-sm">{{ $contribution->due_date?->format('M d, Y') }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Period</label>
                            <p class="text-gray-900 text-sm">{{ $contribution->period ?? 'N/A' }}</p>
                        </div>
                        @if($contribution->paid_date)
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Paid Date</label>
                                <p class="text-gray-900 text-sm">{{ $contribution->paid_date->format('M d, Y') }}</p>
                            </div>
                        @endif
                        @if($contribution->notes)
                            <div class="md:col-span-2">
                                <label class="block text-xs font-medium text-gray-500 mb-1">Notes</label>
                                <p class="text-gray-900 text-sm">{{ $contribution->notes }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                @if($contribution->penalty_amount > 0)
                    <div class="bg-red-50 border border-red-200 rounded-lg p-6">
                        <h3 class="text-base font-semibold text-red-800 flex items-center gap-2 mb-4">
                            <i class="fas fa-exclamation-triangle"></i> Penalty Applied
                        </h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-medium text-red-600 mb-1">Penalty Amount</label>
                                <p class="text-xl font-bold text-red-900">{{ number_format($contribution->penalty_amount, 2) }} {{ $contribution->currency }}</p>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-red-600 mb-1">Days Overdue</label>
                                <p class="text-red-900 text-sm">{{ $contribution->getDaysOverdue() }} days</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- Sidebar --}}
            <div class="space-y-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="text-base font-semibold text-gray-900">Status</h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div class="text-center">
                            @php
                                $sc = ['paid'=>'bg-green-100 text-green-700 border-green-300','pending'=>'bg-yellow-100 text-yellow-700 border-yellow-300','overdue'=>'bg-red-100 text-red-700 border-red-300'];
                                $sc2 = $sc[$contribution->status] ?? 'bg-gray-100 text-gray-700 border-gray-300';
                            @endphp
                            <span class="px-6 py-2 rounded-lg border text-base font-semibold {{ $sc2 }}">{{ ucfirst($contribution->status) }}</span>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Created</label>
                            <p class="text-gray-900 text-sm">{{ $contribution->created_at->format('M d, Y H:i') }}</p>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 mb-1">Last Updated</label>
                            <p class="text-gray-900 text-sm">{{ $contribution->updated_at->format('M d, Y H:i') }}</p>
                        </div>
                    </div>
                </div>

                @if($contribution->isPaid())
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                            <h3 class="text-base font-semibold text-gray-900">Payment Info</h3>
                        </div>
                        <div class="p-6 space-y-4">
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Payment Reference</label>
                                <p class="text-gray-900 font-mono text-sm">{{ $contribution->payment_reference ?? 'N/A' }}</p>
                            </div>
                            <div>
                                <label class="block text-xs font-medium text-gray-500 mb-1">Paid On</label>
                                <p class="text-gray-900 text-sm">{{ $contribution->paid_date?->format('M d, Y H:i') }}</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

</x-app-layout>
