<x-app-layout>
    <x-module-hero
        title="Make Payment"
        description="Complete your mentorship programme payment"
        icon="fa-credit-card">

        <x-slot name="backButton">
            <a href="{{ route('mentorship.applications.show', $application) }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Application
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view mentorship payments')
                <a href="{{ route('mentorship.payments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-credit-card text-sm"></i> All Payments
                </a>
            @endcan
            @can('view own mentorship payments')
                <a href="{{ route('mentorship.payments.my-payments') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.my-payments') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-history text-sm"></i> My Payments
                </a>
            @endcan
            @can('view mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-list text-sm"></i> Programmes
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

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

        <div class="max-w-3xl mx-auto space-y-4">
            {{-- Application Details --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-info-circle text-green-600"></i> Application Details
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    <div>
                        <p class="text-xs text-gray-500">Programme</p>
                        <p class="font-semibold text-gray-900">{{ $application->programme->title ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Applicant</p>
                        <p class="font-semibold text-gray-900">{{ $application->name }}</p>
                        <p class="text-xs text-gray-500">{{ $application->email }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Role Preference</p>
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                            {{ $application->role_preference === 'mentor' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800' }}">
                            {{ ucfirst($application->role_preference) }}
                        </span>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Application Status</p>
                        <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
                            {{ $application->status_label }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- Fee Summary --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-file-invoice-dollar text-green-600"></i> Fee Summary
                </h3>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between pb-3 border-b border-gray-100">
                        <span class="text-gray-600">Programme Fee</span>
                        <span class="font-semibold text-gray-900">{{ $application->formatted_payment_amount }}</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b border-gray-100">
                        <span class="text-gray-600">Processing Fee</span>
                        <span class="font-semibold text-gray-900">0.00 {{ $application->payment_currency }}</span>
                    </div>
                    <div class="flex justify-between pt-1">
                        <span class="text-base font-semibold text-gray-900">Total Amount</span>
                        <span class="text-xl font-bold text-green-600">{{ $application->formatted_payment_amount }}</span>
                    </div>
                </div>
            </div>

            {{-- Payment Form --}}
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                    <i class="fas fa-mobile-alt text-green-600"></i> Payment via MTN Mobile Money
                </h3>

                <div class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <i class="fas fa-info-circle text-yellow-500 mt-0.5"></i>
                        <div>
                            <h4 class="text-sm font-medium text-yellow-800">Payment Instructions</h4>
                            <ul class="mt-1 text-xs text-yellow-700 list-disc list-inside space-y-1">
                                <li>Enter your MTN Mobile Money number</li>
                                <li>You will receive a prompt on your phone to confirm payment</li>
                                <li>Enter your MTN MoMo PIN to complete the transaction</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <form method="POST" action="{{ route('mentorship.payments.store') }}" id="payment-form">
                    @csrf
                    <input type="hidden" name="application_id" value="{{ $application->id }}">

                    <div class="mb-4">
                        <x-payment-method-toggle />
                    </div>

                    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
                        <div class="flex justify-between items-center">
                            <span class="text-green-800 font-medium text-sm">Amount to Pay:</span>
                            <span class="text-xl font-bold text-green-600">{{ $application->formatted_payment_amount }}</span>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="flex items-start gap-2 cursor-pointer">
                            <input type="checkbox" name="terms" required
                                   class="mt-0.5 w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500">
                            <span class="text-sm text-gray-700">
                                I confirm that I am authorized to make this payment and agree to the Terms & Conditions
                            </span>
                        </label>
                    </div>

                    <div class="flex gap-3">
                        <button type="submit" id="submit-btn"
                                class="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition font-semibold">
                            <i class="fas fa-lock"></i> Pay Now
                        </button>
                        <a href="{{ route('mentorship.applications.show', $application) }}"
                           class="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition text-sm text-gray-700">
                            Cancel
                        </a>
                    </div>
                </form>
            </div>

            <div class="text-center text-xs text-gray-500">
                <i class="fas fa-lock text-green-500 mr-1"></i>
                Your payment is secured with 256-bit SSL encryption
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.getElementById('payment-form').addEventListener('submit', function() {
            const btn = document.getElementById('submit-btn');
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
        });
    </script>
    @endpush
</x-app-layout>
