{{-- Member Pay Contribution --}}
<x-app-layout title="Pay Contribution">

    <x-module-hero title="Pay Contribution" description="Complete your contribution payment via MTN MoMo" icon="fa-credit-card">
        <x-slot name="backButton">
            <a href="{{ route('member.contributions') }}" 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">
            <a href="{{ route('member.dashboard') }}" class="module-hero-tab">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            <a href="{{ route('member.contributions') }}" class="module-hero-tab active-tab">
                <i class="fas fa-hand-holding-usd"></i> Contributions
            </a>
        </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
        @if($errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <p class="font-semibold mb-2 text-sm">Please correct the following errors:</p>
                <ul class="list-disc list-inside text-sm">
                    @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        @endif

        <div class="max-w-5xl">

            {{-- Contribution Details --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
                <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 space-y-3">
                    <div class="flex justify-between items-center py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Reference Number</span>
                        <span class="font-mono text-gray-900 text-sm">{{ $contribution->reference_number }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Period</span>
                        <span class="text-gray-900 text-sm">{{ $contribution->period ?? 'N/A' }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Category</span>
                        <span class="text-gray-900 text-sm">{{ $contribution->membershipCategory?->name }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Due Date</span>
                        <span class="text-gray-900 text-sm">{{ $contribution->due_date?->format('M d, Y') }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-gray-100">
                        <span class="text-gray-500 text-sm">Base Amount</span>
                        <span class="text-gray-900 text-sm">{{ number_format($contribution->amount, 2) }} {{ $contribution->currency }}</span>
                    </div>
                    @if($contribution->penalty_amount > 0)
                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                            <span class="text-red-500 text-sm">Penalty Amount</span>
                            <span class="text-red-600 font-medium text-sm">+{{ number_format($contribution->penalty_amount, 2) }} {{ $contribution->currency }}</span>
                        </div>
                    @endif
                    <div class="flex justify-between items-center py-3 bg-green-50 rounded-lg px-4">
                        <span class="text-gray-700 font-semibold text-sm">Total Amount</span>
                        <span class="text-2xl font-bold text-green-600">{{ number_format($contribution->amount + $contribution->penalty_amount, 2) }} {{ $contribution->currency }}</span>
                    </div>
                </div>
            </div>

            {{-- Payment Form --}}
            <form action="{{ route('member.contributions.process-payment', $contribution) }}" method="POST">
                @csrf
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden mb-6">
                    <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-mobile-alt text-green-600"></i> Payment via MTN MoMo
                        </h3>
                    </div>
                    <div class="p-6">
                        {{-- Payment Method Toggle (Mobile Money + Bank Card) --}}
                        <div class="mb-6">
                            <x-payment-method-toggle />
                        </div>

                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                            <h4 class="font-semibold text-blue-900 mb-2 text-sm">Payment Process</h4>
                            <ol class="text-xs text-blue-700 space-y-1">
                                <li>1. Choose your preferred payment method above</li>
                                <li>2. Enter your phone number or card details</li>
                                <li>3. Click "Pay Now" to initiate payment</li>
                                <li>4. For MoMo: approve the prompt on your phone</li>
                                <li>5. Payment will be confirmed automatically</li>
                            </ol>
                        </div>

                        <button type="submit" class="w-full px-4 py-3 bg-yellow-500 text-yellow-900 rounded-lg hover:bg-yellow-400 transition font-bold text-base flex items-center justify-center gap-2">
                            <i class="fas fa-lock text-lg"></i>
                            Pay Now
                        </button>
                    </div>
                </div>
            </form>

            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 text-center">
                <i class="fas fa-lock text-gray-400 mr-2"></i>
                <span class="text-xs text-gray-600">Your payment is secure and encrypted. We never store your PIN.</span>
            </div>
        </div>
    </div>

</x-app-layout>
