<x-admin.layout>
    <x-slot name="title">Payment Failed</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: #fff5f5;">

                    {{-- Failed Icon --}}
                    <div class="mb-4">
                        <i class="fas fa-times-circle text-danger" style="font-size: 4rem; animation: shake 0.8s;"></i>
                    </div>

                    {{-- Failed Message --}}
                    <h3 class="mb-3 fw-bold text-danger">Payment Failed</h3>
                    <p class="fs-6 text-muted mb-4">
                        Unfortunately, your payment could not be processed. Please try again or contact support.
                    </p>

                    {{-- Action Button --}}
                    <a href="{{ route('my-application') }}" class="btn btn-gradient-danger px-5 py-2 shadow-sm text-white" style="background: linear-gradient(135deg, #dc3545, #b02a37); border: none;">
                        <i class="fas fa-redo me-2"></i> Try Again
                    </a>

                </div>

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

    {{-- Optional CSS for animation --}}
    <style>
        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-8px);
            }

            50% {
                transform: translateX(8px);
            }

            75% {
                transform: translateX(-8px);
            }
        }

        .btn-gradient-danger:hover {
            opacity: 0.9;
            transform: scale(1.05);
            transition: all 0.3s ease;
        }
    </style>
</x-admin.layout>
