@extends('layouts.app')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/gliderjs/glider.min.css')}}" />
@endsection

@section('content')
<section class="lg:container mx-4 mt-24">
    <div class="my-4 flex flex-col items-center justify-center">

        @if($trx->payment_rescode != "00")
        <!-- Transaction Process -->
        <div class="md:w-3/12 text-center">
            <img src="{{ asset('images/empty-state/transaction-process.png')}}" alt="transaksi sedang diproses" />
            <h3 class="mb-6 font-semibold text-black text-xl">Transaksi Sedang Diproses</h3>
            <p class="text-sm text-gray-500">Kode pembayaran:</p>
            <p class="my-6 text-xl font-bold text-black">{{$trx->order_id}}</p>
            <p class="text-sm text-gray-500">Simpan kode pembayaran Anda, apabila voucher tidak masuk ke email. Untuk melacak silahkan gunakan kode pembayaran ini.</p>
            <a href="{{url('myTransactionPending')}}" class="mt-6 font-semibold h-10 rounded-xl px-8 py-2.5 text-sm cursor-pointer bg-primary hover:bg-primary-dark text-white transition-all ease-out duration-300" data-twe-ripple-init data-twe-ripple-color="light">Cek Status Pembayaran</a>
        </div>
        @else
        <!-- Transaction Success -->
        <div class="md:w-3/12 text-center">
            <img src="{{ asset('images/empty-state/transaction-success.png')}}" alt="transaksi sukses" />
            <h3 class="mb-6 font-semibold text-black text-xl">Transaksi Berhasil</h3>
            <p class="text-sm text-gray-500">Kode pembayaran:</p>
            <p class="my-6 text-xl font-bold text-black">{{$trx->order_id}}</p>
            <p class="text-sm text-gray-500">Simpan kode pembayar anda, apabila voucher tidak masuk ke email. Untuk mentracking silahkan gunakan kode pembayaran ini.</p>
            <a href="{{url('myTransactionPending')}}" class="mt-6 font-semibold h-10 rounded-xl px-8 py-2.5 text-sm cursor-pointer bg-primary hover:bg-primary-dark text-white transition-all ease-out duration-300" data-twe-ripple-init data-twe-ripple-color="light">Cek Status Pembayaran</a>
        </div>
        @endif
    </div>
</section>
@endsection