<x-admin.layout>
    <x-slot name="title">Payment Successful</x-slot>
    <x-slot name="heading">Payment Status</x-slot>

    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">

                <div class="card shadow-lg border-0 rounded-4 text-center p-5" style="background: #f9fff9;">

                    {{-- Success Icon --}}
                    <div class="mb-4">
                        <i class="fas fa-check-circle text-success" style="font-size: 4rem; animation: bounce 1s;"></i>
                    </div>

                    {{-- Success Message --}}
                    <h3 class="mb-3 fw-bold text-success">Payment Successful!</h3>
                    <p class="fs-6 text-muted mb-4">
                        Thank you for your payment. Your transaction has been completed successfully.
                    </p>

                    {{-- Action Button --}}
                    <a href="{{ route('my-application') }}" class="btn btn-gradient-primary px-5 py-2 shadow-sm text-white" style="background: linear-gradient(135deg, #28a745, #1e7e34); border: none;">
                        <i class="fas fa-arrow-left me-2"></i> Go to My Applications
                    </a>

                </div>

            </div>
        </div>
    </div>

    {{-- Optional CSS for animation --}}
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-15px); }
            60% { transform: translateY(-8px); }
        }
        .btn-gradient-primary:hover {
            opacity: 0.9;
            transform: scale(1.05);
            transition: all 0.3s ease;
        }
    </style>
</x-admin.layout>
