<?php include 'header.php'; ?>

<!-- Normal Sub Header -->
<?php include 'template-parts/breadcrumb-only.php'; ?>

<div class="uk-container uk-container-small">

    <!-- Progress Steps -->
    <div class="checkout-progress">
        <div class="progress-steps">
            <div class="step active">
                <span uk-icon="icon: credit-card; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                <span class="step-label">Payment</span>
            </div>
            <div class="step">
                <span uk-icon="icon: check-circle; ratio: 1" class="uk-icon" aria-hidden="true"></span>
                <span class="step-label">Confirmation</span>
            </div>
        </div>
    </div>

    <div class="info-card mb-24">
        <div class="info-card-inner">
            <div class="uk-text-center">
                <h2>Payment Failed!</h2>
                <p>We're sorry, but your payment could not be processed.</p>
            </div>

            <div class="uk-flex uk-flex-middle gap-16 uk-margin-medium">
                <div>
                    <span uk-icon="icon: order-failed; ratio: 1.4" class="uk-icon uk-text-danger" aria-hidden="true"></span>
                </div>
                <div>
                    <div class="uk-h5 uk-margin-remove f600">
                        Transaction Details
                    </div>
                    <p class="order-confirm-id uk-margin-remove" id="confirm-id">Error Code: PAY-001</p>
                </div>
            </div>

            <div class="session-detail">
                <span class="detail-label">Order ID</span>
                <span class="detail-value">#CS-2024-001247</span>
            </div>
            <div class="session-detail">
                <span class="detail-label">Amount</span>
                <span class="detail-value">224.25 SAR</span>
            </div>
            <div class="session-detail">
                <span class="detail-label">Payment Method</span>
                <span class="detail-value">Visa •••• 4532</span>
            </div>
            <div class="session-detail">
                <span class="detail-label">Time</span>
                <span class="detail-value">Dec 12, 2024 • 3:45 PM</span>
            </div>
            <div class="session-detail">
                <span class="detail-label">Status</span>
                <span class="detail-value uk-text-danger">Failed</span>
            </div>

        </div>
    </div>

    <div class="payment-success-btn uk-grid uk-flex-center gap-12 uk-grid-small" uk-grid>
        <a href="trainers.php" class="uk-button uk-button-primary">Book Another Session</a>
        <a href="contact.php" class="uk-button uk-button-default">Need help?</a>
    </div>


</div><!-- .uk-container -->



<?php include 'footer.php'; ?>