@extends("web.layouts.master")

@section("content")
    <section class="height-auto text-center background-light-grey">
        <div class="container pos-vertical-center">
            <div class="row">
                <div class="col-12 col-md-10 text-center" data-aos="fade-zoom-in" data-aos-duration="1500">
                    <div class="feature custom-feature" style="padding-top: 100px; padding-bottom: 20px;">
                        <p class="font-size-48 text-dark-grey Font-Manrope-ExtraBold mb-5">THANK YOU</p>
                        <p class="font-size-18 text-dark-grey Font-Manrope-SemiBold pt-4 mb-3">Your payment has been received</p>
                        <p class="font-size-16 text-dark-grey Font-Manrope-Regular">Check your email to get an E-Member card</p>

                        <img src="{{ asset("web/assets/order-success-placeholder.png") }}" class="my-4"/>

                        <p class="font-size-14 text-dark-grey Font-Manrope-Light mt-4 mb-2">E-Ticket sent to the email address:</p>
                        <p class="font-size-18 text-dark-grey Font-Manrope-Bold mb-5">budianto@gmail.com</p>

                        <div class="row">
                            <div class="col-12 col-md-12">
                                <div class="row">
                                    <div class="col-4 col-md-4"></div>
                                    <div class="col-4 col-md-4">
                                        <a class="btn custom-btn custom-btn-danger type--uppercase mb-5" href="{{ route("web.ticket.index") }}">
                                            <span class="btn__text font-size-18 Font-Manrope-ExtraBold">
                                                Find Ticket
                                                <img src="{{ asset("web/assets/icons/chevron-right.png") }}" style="margin-top: -2px; margin-right: 10px;" width="25" height="25"  class="mb-1"/>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="col-4 col-md-4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
@endsection