@extends('web.layouts.layout')
@section('meta_title', 'Payment Failed')
<meta name="description" content="Your payment could not be processed. Please try again or contact support.">
<meta name="keywords" content="payment failed, enrollment, course, error">

@section('content')
<main>
    <!-- breadcrumb area start -->
    <section class="bd-breadcrumb-area p-relative fix z-index-11">
        <div class="bd-breadcrumb-bg-two" data-background="assets/images/breadcrumb/breadcrumb-bg-2.webp"></div>
        <div class="bd-breadcrumb-wrapper p-relative">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="bd-breadcrumb style-two d-flex-center">
                            <div class="bd-breadcrumb-content">
                                <h1 class="bd-breadcrumb-title">Payment Failed</h1>
                                <div class="bd-breadcrumb-list">
                                    <span><a href="/">Home</a></span>
                                    <span class="divider"><i class="fa-regular fa-angle-right"></i></span>
                                    <span class="active">Payment Failed</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb area end -->

    <!-- Payment Failed Section -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <div class="error-icon mb-4">
                        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM15.59 7L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z" fill="#dc3545"/>
                        </svg>
                    </div>
                    <h2 class="mb-3">Payment Failed</h2>
                    <p class="lead mb-4">We couldn't process your payment. Please try again or contact our support team for assistance.</p>
                    <a href="{{ url('/') }}" class="btn btn-primary btn-lg me-2">Return to Home</a>
                    <!-- <a href="{{ route('payment.initiate') }}" class="btn btn-secondary btn-lg">Try Again</a> -->
                </div>
            </div>
        </div>
    </section>
</main>

<!-- CSS for Styling -->
<style>
    .error-icon svg {
        animation: popIn 0.5s ease;
    }
    .lead {
        font-size: 1.25rem;
        color: #333;
    }
    @keyframes popIn {
        0% { transform: scale(0); opacity: 0; }
        70% { transform: scale(1.2); opacity: 1; }
        100% { transform: scale(1); }
    }
</style>
@endsection