<x-app-layout>
    {{-- Hero Section --}}
    <div class="bg-gradient-to-r from-green-600 to-green-700 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <i class="fas fa-credit-card text-white text-3xl mr-4"></i>
                    <div>
                        <h1 class="text-3xl font-bold text-white">Pay Contribution</h1>
                        <p class="text-green-100 mt-1">Complete your contribution payment via MTN MoMo</p>
                    </div>
                </div>
                <a href="{{ route('member.contributions.show', $contribution) }}"
                   class="px-4 py-2 bg-white text-green-700 rounded-lg hover:bg-gray-50 transition font-medium">
                    <i class="fas fa-arrow-left mr-2"></i>Back
                </a>
            </div>
        </div>
    </div>

    {{-- Main Content --}}
    <div class="py-12">
        <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">

            @if(session('error'))
                <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
                </div>
            @endif

            @if($errors->any())
                <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                    <ul class="list-disc list-inside space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Contribution Summary --}}
            <div class="theme-card rounded-lg shadow-md overflow-hidden mb-6">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-receipt text-green-600 mr-3"></i>
                        Payment Summary
                    </h3>
                </div>
                <div class="p-6">
                    <dl class="space-y-3">
                        <div class="flex justify-between text-sm">
                            <dt class="text-gray-500">Period</dt>
                            <dd class="font-medium text-gray-900">{{ $contribution->period ?? 'N/A' }}</dd>
                        </div>
                        <div class="flex justify-between text-sm">
                            <dt class="text-gray-500">Category</dt>
                            <dd class="font-medium text-gray-900">{{ $contribution->membershipCategory?->name ?? 'N/A' }}</dd>
                        </div>
                        <div class="flex justify-between text-sm">
                            <dt class="text-gray-500">Due Date</dt>
                            <dd class="font-medium {{ $contribution->status === 'overdue' ? 'text-red-600' : 'text-gray-900' }}">
                                {{ $contribution->due_date?->format('F d, Y') ?? 'N/A' }}
                            </dd>
                        </div>
                        <div class="flex justify-between text-sm">
                            <dt class="text-gray-500">Base Amount</dt>
                            <dd class="font-medium text-gray-900">{{ number_format($contribution->amount, 2) }} {{ $contribution->currency ?? 'SSP' }}</dd>
                        </div>
                        @if($contribution->penalty_amount > 0)
                        <div class="flex justify-between text-sm">
                            <dt class="text-gray-500">Late Penalty</dt>
                            <dd class="font-medium text-red-600">{{ number_format($contribution->penalty_amount, 2) }} {{ $contribution->currency ?? 'SSP' }}</dd>
                        </div>
                        @endif
                        <div class="flex justify-between text-base font-bold border-t pt-3">
                            <dt>Total Due</dt>
                            <dd class="text-green-700 text-lg">
                                {{ number_format($contribution->amount + ($contribution->penalty_amount ?? 0), 2) }} {{ $contribution->currency ?? 'SSP' }}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            {{-- Payment Form --}}
            <div class="theme-card rounded-lg shadow-md overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-mobile-alt text-green-600 mr-3"></i>
                        MTN Mobile Money Payment
                    </h3>
                </div>
                <div class="p-6">
                    <form method="POST"
                          action="{{ route('member.contributions.process-payment', $contribution) }}"
                          x-data="{ loading: false }"
                          @submit="loading = true">
                        @csrf

                        {{-- Payment Method Toggle --}}
                        <div class="mb-5">
                            <x-payment-method-toggle />
                        </div>

                        {{-- Amount (read-only) --}}
                        <div class="mb-5">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Amount</label>
                            <input type="text"
                                   value="{{ number_format($contribution->amount + ($contribution->penalty_amount ?? 0), 2) }} {{ $contribution->currency ?? 'SSP' }}"
                                   readonly
                                   class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg bg-gray-50 text-gray-700 cursor-not-allowed">
                            <input type="hidden" name="amount" value="{{ $contribution->amount + ($contribution->penalty_amount ?? 0) }}">
                            <input type="hidden" name="currency" value="{{ $contribution->currency ?? 'SSP' }}">
                        </div>

                        {{-- Payer Message --}}
                        <div class="mb-5">
                            <label for="payer_message" class="block text-sm font-medium text-gray-700 mb-2">
                                Message (optional)
                            </label>
                            <input type="text"
                                   id="payer_message"
                                   name="payer_message"
                                   value="{{ old('payer_message', 'Contribution payment for ' . ($contribution->period ?? 'membership')) }}"
                                   maxlength="160"
                                   class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent transition">
                        </div>

                        {{-- Security Notice --}}
                        <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                            <div class="flex items-start">
                                <i class="fas fa-shield-alt text-blue-600 mt-0.5 mr-3"></i>
                                <div class="text-sm text-blue-700">
                                    <p class="font-medium mb-1">Secure Payment</p>
                                    <p>You will receive a prompt on your MTN MoMo phone to approve this payment. Do not share your PIN with anyone.</p>
                                </div>
                            </div>
                        </div>

                        {{-- Submit Button --}}
                        <button type="submit"
                                :disabled="loading"
                                class="w-full py-3 px-6 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center">
                            <i x-show="!loading" class="fas fa-paper-plane mr-2"></i>
                            <i x-show="loading" class="fas fa-spinner fa-spin mr-2"></i>
                            <span x-text="loading ? 'Processing...' : 'Initiate Payment'"></span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
