@extends('website.layouts.master')

@section('site_title')المحفظة - @endsection
@section('content')
		<section class="page-title">
			<div class="container">
				<div class="row">
					<div class="col-6">
						<div class="title-icon">
							<i class="fas fa-tools"></i>
							<h5 class="mt-0">شحن المحفظة</h5>
						</div>
						<div class="page-text">
							<p class="mb-0">
								لديك
								<span class="balance">
									{{ Auth::guard('web')->user()['balance'] }} ريال سعودي
								</span>
								في رصيدك
							</p>
						</div>
					</div>
					<div class="col-6 pl-0">
						<div class="page-text">
							<a href="{{ route('website.users.wallet') }}" class="back-to-store">العودة للمحفظة</a>
						</div>
					</div>
				</div>
			</div>

		</section>
		@include('website.includes.user_menu')

		<section class="points-usage title-margin">
				<div class="container-fluid">
					<h5>اشحن رصيدك الآن</h5>
					<div class="row">
						<form action="{{ route('website.users.store_charge_wallet') }}" method="POST" class="paymentWidgets" data-brands="VISA MASTER MADA"></form>
					</div>
				</div>
		</section>
@endsection

@push('page_level_style')
	<style type="text/css">
		@media (min-width: 992px){
			.page-title .title-icon i {
				margin-left: 20px;
			}
		}
		.wpwl-group {
			direction: ltr;
		}
		.wpwl-form {
			background-color: #006a8a;
		}
		.wpwl-label {
			color: #fff;
		}
		.wpwl-button-pay {
			color: #4cae4c;
			background-color: #fff;
			border-color: #fff;
		}
	</style>
@endpush

@push('page_level_script')
	<script type="text/javascript">
		var wpwlOptions = {
			locale: "en"
		}
	</script>
	<script src="https://oppwa.com/v1/paymentWidgets.js?checkoutId={{ $checkout->id }}"></script>
@endpush