@extends('template.main-template')

@section('content')

<main class="bg_gray" style="overflow-x: hidden;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div id="confirm" style="display: flex; flex-direction: column; align-items: center;">
                    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script><lottie-player src="https://lottie.host/22567fcd-5452-4b0d-bcd3-53a4e1399da8/F9TEP8VLcE.json" background="##ffffff" speed="0.7" style="width: 2200px; height: 200px" autoplay direction="1" mode="normal"></lottie-player>
                <h2>Payment Failed</h2>
                <p>There was an error processing your payment. Please try again or contact support!</p>
                <a href="{{ route('customer.order', $order->id) }}" class="btn btn-danger">View Order</a>
                </div>
            </div>
        </div>
        <!-- /row -->
    </div>
</main>

@endsection

@push('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js" integrity="sha512-jEnuDt6jfecCjthQAJ+ed0MTVA++5ZKmlUcmDGBv2vUI/REn6FuIdixLNnQT+vKusE2hhTk2is3cFvv5wA+Sgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@endpush
@push('css')
<link href="{{ asset('template/css/checkout.css') }}" rel="stylesheet">
@endpush