@extends('layouts.site')

@section('meta')
    <meta name="description" content="Complete payment for your training registration">
@endsection

@section('content')
{{-- Hero Section --}}
<section class="bg-gradient-to-r from-green-600 to-green-700 text-white py-12">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl">
            <h1 class="text-3xl font-bold mb-2">Complete Your Payment</h1>
            <p class="text-green-100">Pay for your training registration using MTN Mobile Money or Bank Card</p>
        </div>
    </div>
</section>

{{-- Breadcrumb --}}
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-green-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('public.training.index') }}" class="hover:text-green-600 transition">Training Programs</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('public.training.show', $package) }}" class="hover:text-green-600 transition">{{ $package->name }}</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium">Payment</span>
        </nav>
    </div>
</div>

{{-- Payment Section --}}
<section class="py-12 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto">

            @if(session('info'))
                <div class="mb-6 p-4 bg-blue-100 border border-blue-400 text-blue-700 rounded-lg flex items-center gap-3">
                    <i class="fas fa-info-circle"></i> {{ session('info') }}
                </div>
            @endif
            @if(session('warning'))
                <div class="mb-6 p-4 bg-yellow-100 border border-yellow-400 text-yellow-700 rounded-lg flex items-center gap-3">
                    <i class="fas fa-exclamation-triangle"></i> {{ session('warning') }}
                </div>
            @endif
            @if(session('error'))
                <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-3">
                    <i class="fas fa-times-circle"></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 text-sm space-y-1">
                        @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                    </ul>
                </div>
            @endif

            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">

                {{-- Payment Form --}}
                <div class="lg:col-span-3">
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                        <div class="p-6 border-b border-gray-200">
                            <h2 class="font-semibold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-credit-card text-green-600"></i>
                                Choose Payment Method
                            </h2>
                        </div>
                        <div class="p-6">

                            {{-- Pending notice --}}
                            <div class="mb-5 p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-center gap-3">
                                <div class="w-9 h-9 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-clock text-yellow-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-yellow-800 text-sm">Payment Pending</p>
                                    <p class="text-xs text-yellow-700">Complete your payment below to confirm registration.</p>
                                </div>
                            </div>

                            <form action="{{ route('public.training.payment.process', [$package, $registration]) }}" method="POST">
                                @csrf

                                {{-- Unified payment toggle (Mobile Money + Bank Card) --}}
                                <div class="mb-5">
                                    <x-payment-method-toggle />
                                </div>

                                <div class="mb-5 p-4 bg-blue-50 border border-blue-100 rounded-lg text-xs text-blue-700 space-y-1">
                                    <p class="font-semibold text-blue-800 mb-1 flex items-center gap-1.5">
                                        <i class="fas fa-info-circle text-blue-500"></i> How to Pay
                                    </p>
                                    <p><span class="font-semibold">Mobile Money:</span> Enter your MTN MoMo number → approve the prompt on your phone → done.</p>
                                    <p><span class="font-semibold">Bank Card:</span> Enter your card details → payment is processed instantly.</p>
                                </div>

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

                    <div class="mt-4 text-center text-xs text-gray-500">
                        <i class="fas fa-shield-alt text-green-500 mr-1"></i>
                        Your payment is secured. We never store your PIN or full card details.
                    </div>
                </div>

                {{-- Order Summary --}}
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-xl shadow-sm border border-gray-200 sticky top-4">
                        <div class="p-5 border-b border-gray-200">
                            <h3 class="font-semibold text-gray-800 text-sm">Order Summary</h3>
                        </div>
                        <div class="p-5">
                            <div class="flex gap-3 mb-5">
                                <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-book text-green-600 text-xl"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800 text-sm">{{ $package->name }}</p>
                                    <p class="text-xs text-gray-500">{{ $package->duration_hours ?? '—' }} hours</p>
                                </div>
                            </div>

                            <div class="space-y-2 border-t border-gray-100 pt-4 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-gray-600">Training Fee</span>
                                    <span class="font-medium text-gray-800">{{ $package->getFormattedFee() }}</span>
                                </div>
                                <div class="flex justify-between text-xs text-gray-400">
                                    <span>Processing Fee</span>
                                    <span>Free</span>
                                </div>
                            </div>

                            <div class="flex justify-between border-t border-gray-200 pt-4 mt-3">
                                <span class="font-semibold text-gray-800 text-sm">Total</span>
                                <span class="font-bold text-lg text-green-600">{{ $package->getFormattedFee() }}</span>
                            </div>

                            <div class="mt-5 p-3 bg-gray-50 rounded-lg space-y-2 text-xs">
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Registration</span>
                                    <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full font-medium">
                                        {{ ucfirst($registration->status) }}
                                    </span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500">Payment</span>
                                    <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full font-medium">
                                        {{ ucfirst($registration->payment_status) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection
