@extends('frontend.layouts.app')

@section ('title', app_name() . ' | Payment Complete')

@push('after-styles')
	<style>
        .navbar{
            display: none;
        }
        h5 {
        	width: 100%;
        }
        .el-button {
        	padding: 12px 10px !important;
        }
        .el-card__body {
        	padding: 10px !important;
        }
        @media (max-width:576px){
        	.wizard-icon-circle {
	        	width: 50px !important;
	        	height: 50px !important;
	        }
	        .wizard-progress-with-circle {
	        	top: 30px !important;
	        }
	        .stepTitle {
	        	font-size: 11px !important;	
	        }
        }
	</style>
@endpush

@section('body_class')
    class="bg-light"
@endsection

@section('content')

<section class="bg-light">
	<div class="container">
		<div class="row">
			<div class="col-md-12 order-md-2 mb-4">
				<div class="py-3 text-center">
			        <img class="d-block mx-auto" src="{{ $project->logo }}" alt="" width="100" height="100">
			        <h3>{{ $project->name }}</h3>
			        <p class="lead">{{ $project->description }}</p>
			    </div>
				<ul class="list-group mb-3">
					<li class="list-group-item d-flex justify-content-between lh-condensed text-center align-items-center d-flex justify-content-between align-items-center"><h5>Your Order Information</h5></li>
					<li class="list-group-item d-flex justify-content-between lh-condensed">
						<div>
							<h6 class="my-0">Item Name</h6>
							<small class="text-muted">{{ $order['item_description'] }}</small>
						</div>
						<span class="text-muted">{{ $order['item_name'] }}</span>
					</li>
					<li class="list-group-item d-flex justify-content-between lh-condensed">
						<div>
							<h6 class="my-0">Order Number</h6>
						</div>
						<span class="text-muted">{{ $order['order_no'] }}</span>
					</li>
					<li class="list-group-item d-flex justify-content-between lh-condensed">
						<div>
							<h6 class="my-0">Amount</h6>
							<small class="text-muted">By MMK</small>
						</div>
						<span class="text-muted">{{ $order['amount'] }}</span>
					</li>
				</ul>
            	<form-component :order-created="{{ $order['order_created'] }}" :payment-data="{{ json_encode(['payment_id' => $payment]) }}"></form-component>
			</div>
		</div>
	</div>
</section>

@endsection

@push('after-scripts')
	{{ script("js/plugin/jquery.isloading.js") }}
	<script>
		$(function() {
	        $('.payment_cancel').on('click', function() {
	        	swal({
				  title: 'Are you sure want to cancel?',
				  text: "You won't be able to revert this!",
				  type: 'warning',
				  showCancelButton: true,
				  confirmButtonColor: '#3085d6',
				  cancelButtonColor: '#d33',
				  cancelButtonText: 'No',
				  confirmButtonText: 'Yes, Cancel it!'
				}).then((result) => {
					if (result.value) {
						window.location = '{{ $project->frontend_callback }}';
					}
				})
	        });
	    });
	</script>
@endpush