<x-app-layout>

<x-module-hero
    title="Process Payment"
    description="Complete payment for your training registration"
    icon="fa-credit-card">

    <x-slot name="backButton">
        <a href="{{ route('training.registrations.show', $registration) }}"
           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 Registration
        </a>
    </x-slot>

    <x-slot name="tabs">
        <a href="{{ route('training.registrations.my') }}"
           class="module-hero-tab {{ request()->routeIs('training.registrations.my') ? '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-user text-sm"></i> My Registrations
        </a>
        <a href="{{ route('training.registrations.show', $registration) }}"
           class="module-hero-tab {{ request()->routeIs('training.registrations.show') ? '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-eye text-sm"></i> Registration Details
        </a>
        <a href="{{ route('training.registrations.payment', $registration) }}"
           class="module-hero-tab border-b-2 border-[#1e293b]
                  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> Payment
        </a>
    </x-slot>

</x-module-hero>

<div class="p-6">

    {{-- Registration Summary --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5 mb-6">
        <h3 class="font-semibold text-gray-800 mb-4 text-sm">Registration Summary</h3>
        <div class="flex items-start gap-4">
            @if($registration->trainingPackage->featured_image)
                <img src="{{ $registration->trainingPackage->featured_image }}"
                     alt="{{ $registration->trainingPackage->name }}"
                     class="w-16 h-16 object-cover rounded-lg">
            @else
                <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-book text-green-600 text-xl"></i>
                </div>
            @endif
            <div class="flex-1">
                <h4 class="font-semibold text-gray-900 text-sm">{{ $registration->trainingPackage->name }}</h4>
                <div class="text-xs text-gray-500 mt-1">{{ $registration->user->name }} – {{ $registration->user->email }}</div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {{-- Payment Amount --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
            <h3 class="font-semibold text-gray-800 mb-4 text-sm">Payment Details</h3>
            <div class="space-y-3">
                <div class="flex justify-between py-2 border-b border-gray-100 text-sm">
                    <span class="text-gray-600">Training Fee</span>
                    <span class="font-medium">{{ $registration->trainingPackage->getFormattedFee() }}</span>
                </div>
                @if(isset($registration->discount_amount) && $registration->discount_amount > 0)
                    <div class="flex justify-between py-2 border-b border-gray-100 text-sm text-green-600">
                        <span>Discount</span>
                        <span>-{{ number_format($registration->discount_amount, 0) }} {{ $registration->trainingPackage->currency }}</span>
                    </div>
                @endif
                <div class="flex justify-between py-2 text-base font-bold">
                    <span>Total</span>
                    <span class="text-green-600">{{ $registration->trainingPackage->getFormattedFee() }}</span>
                </div>
            </div>
        </div>

        {{-- Payment Methods --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
            <h3 class="font-semibold text-gray-800 mb-4 text-sm">Payment Method</h3>
            <form action="{{ route('training.registrations.payment.process', $registration) }}" method="POST">
                @csrf

                <x-payment-method-toggle />

                <div class="mt-5 flex gap-3">
                    <a href="{{ route('training.registrations.show', $registration) }}"
                       class="flex-1 px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50 transition text-center">
                        Cancel
                    </a>
                    <button type="submit"
                            class="flex-1 px-4 py-2.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 transition">
                        <i class="fas fa-lock mr-1"></i> Process Payment
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Security Notice --}}
    <div class="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
        <div class="flex items-start gap-3">
            <i class="fas fa-shield-alt text-blue-600 mt-0.5"></i>
            <div>
                <h4 class="font-medium text-blue-900 text-sm">Secure Payment</h4>
                <p class="text-xs text-blue-700 mt-1">Your payment information is encrypted and secure. We do not store your financial details.</p>
            </div>
        </div>
    </div>
</div>

</x-app-layout>


