@extends('web.layouts.main')

@push('stylesheets')
<link rel="stylesheet" type="text/css" href="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets_web/libraries/slick-1.8.1/slick-theme.min.css') }}">
@endpush

@section('content')

@include('web.components.page-header', ['heading' => trans('text.my-account')])

<div class="container mb-5">
	@include('web.layouts.header.my-account-nav')

	<div class="custom-group-panel mb-5">
		<div class="row">
			<div class="col-lg-3 pe-lg-1 mb-3 mb-lg-0">
				<div class="custom-group-panel-nav bg-quaternary border-radius overflow-hidden h-100">
					<ul class="list-unstyled">
						<li class="text-primary font-weight-bold"><a>{{ trans('text.add/withdraw-funds') }}</a></li>
						<li {{ Route::is('web.credit-card-deposit') ? 'class=active' : '' }}>
							<a href="{{ route('web.credit-card-deposit', $locale) }}">
								{{ $funds_nav_sections['credit-card-deposit'] }} <svg xmlns="http://www.w3.org/2000/svg" width="20.541" height="20.541" viewBox="0 0 20.541 20.541"><path id="Path_8435" data-name="Path 8435" d="M0,0,12.695.3l.3,12.695" transform="translate(9.235 1.085) rotate(45)" fill="none" stroke="#e11117" stroke-width="3"/></svg>
							</a>
						</li>
						<li {{ Route::is('web.zain-cash-deposit') ? 'class=active' : '' }}>
							<a href="{{ route('web.zain-cash-deposit', $locale) }}">
								{{ $funds_nav_sections['zain-cash-deposit'] }} <svg xmlns="http://www.w3.org/2000/svg" width="20.541" height="20.541" viewBox="0 0 20.541 20.541"><path id="Path_8435" data-name="Path 8435" d="M0,0,12.695.3l.3,12.695" transform="translate(9.235 1.085) rotate(45)" fill="none" stroke="#e11117" stroke-width="3"/></svg>
							</a>
						</li>
						<li {{ Route::is('web.vouchers-coupons') ? 'class=active' : '' }}>
							<a href="{{ route('web.vouchers-coupons', $locale) }}">
								{{ $funds_nav_sections['vouchers-coupons'] }} <svg xmlns="http://www.w3.org/2000/svg" width="20.541" height="20.541" viewBox="0 0 20.541 20.541"><path id="Path_8435" data-name="Path 8435" d="M0,0,12.695.3l.3,12.695" transform="translate(9.235 1.085) rotate(45)" fill="none" stroke="#e11117" stroke-width="3"/></svg>
							</a>
						</li>
						<li {{ Route::is('web.wire-transfer-deposit') ? 'class=active' : '' }}>
							<a href="{{ route('web.wire-transfer-deposit', $locale) }}">
								{{ $funds_nav_sections['wire-transfer-deposit'] }} <svg xmlns="http://www.w3.org/2000/svg" width="20.541" height="20.541" viewBox="0 0 20.541 20.541"><path id="Path_8435" data-name="Path 8435" d="M0,0,12.695.3l.3,12.695" transform="translate(9.235 1.085) rotate(45)" fill="none" stroke="#e11117" stroke-width="3"/></svg>
							</a>
						</li>
						<li {{ Route::is('web.funds-deposit') ? 'class=active' : '' }}>
							<a href="{{ route('web.funds-deposit', $locale) }}">
								{{ $funds_nav_sections['funds-deposit'] }} <svg xmlns="http://www.w3.org/2000/svg" width="20.541" height="20.541" viewBox="0 0 20.541 20.541"><path id="Path_8435" data-name="Path 8435" d="M0,0,12.695.3l.3,12.695" transform="translate(9.235 1.085) rotate(45)" fill="none" stroke="#e11117" stroke-width="3"/></svg>
							</a>
						</li>
						{{-- <li {{ Route::is('web.send-wire-transfer') ? 'class=active' : '' }}>
							<a href="{{ route('web.send-wire-transfer', $locale) }}">
								{{ $funds_nav_sections['send-wire-transfer'] }} <svg xmlns="http://www.w3.org/2000/svg" width="20.541" height="20.541" viewBox="0 0 20.541 20.541"><path id="Path_8435" data-name="Path 8435" d="M0,0,12.695.3l.3,12.695" transform="translate(9.235 1.085) rotate(45)" fill="none" stroke="#e11117" stroke-width="3"/></svg>
							</a>
						</li> --}}
						{{-- <li {{ Route::is('web.check-withdrawal') ? 'class=active' : '' }}>
							<a href="{{ route('web.check-withdrawal', $locale) }}">
								{{ $funds_nav_sections['check-withdrawal'] }} <svg xmlns="http://www.w3.org/2000/svg" width="20.541" height="20.541" viewBox="0 0 20.541 20.541"><path id="Path_8435" data-name="Path 8435" d="M0,0,12.695.3l.3,12.695" transform="translate(9.235 1.085) rotate(45)" fill="none" stroke="#e11117" stroke-width="3"/></svg>
							</a>
						</li> --}}
					</ul>
				</div>
			</div>
			<div class="col-lg-9 ps-lg-1">
				<div class="custom-group-panel-content bg-quaternary border-radius">
					<div class="text-center">
						<p class="h4 font-weight-bold text-uppercase mb-3">{{ $section->title }}</p>
						<div class="row justify-content-center mb-4">
							<div class="col-lg-8">
								<div>
									{!! $section->text !!}
								</div>
							</div>
						</div>
					</div>

					@yield('funds')

				</div>
			</div>
		</div>
	</div>
</div>

<div class="mb-5">
	@include('web.components.shortcuts')
</div>

<div class="mb-5 pb-5">
	@include('web.components.are-you-a-winner')
</div>

@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('assets_web/libraries/slick-1.8.1/slick.min.js') }}"></script>
@endpush