@extends('theme::user.layouts.app')

@section('style')
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
@endsection

@section('content')

	<div class="bk-account-overview-page">
		<h2 class="page-title text-center">Account overview</h2>

		<div class="payment-gateways">
			<div class="payment-gateway-box">
				<div class="box-header">
					<span class="box-title">HSBC</span>
				</div>
				<div class="box-body">
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Sales</span>
						<span class="box-body-price">$ 335,867.99</span>
					</div>
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Expenses</span>
						<span class="box-body-price">$ 565,247.51</span>
					</div>
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Bill to pay</span>
						<span class="box-body-price">$ 565,247.51</span>
					</div>
				</div>
			</div>
			<div class="payment-gateway-box">
				<div class="box-header">
					<span class="box-title">Stripe</span>
				</div>
				<div class="box-body">
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Sales</span>
						<span class="box-body-price">$ 324,867.99</span>
					</div>
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Expenses</span>
						<span class="box-body-price">$ 235,247.03</span>
					</div>
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Bill to pay</span>
						<span class="box-body-price">$ 235,247.03</span>
					</div>
				</div>
			</div>
			<div class="payment-gateway-box">
				<div class="box-header">
					<span class="box-title">Visa card</span>
				</div>
				<div class="box-body">
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Sales</span>
						<span class="box-body-price">$ 45,867.99</span>
					</div>
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Expenses</span>
						<span class="box-body-price">$ 785,087.08</span>
					</div>
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Bill to pay</span>
						<span class="box-body-price">$ 785,087.08</span>
					</div>
				</div>
			</div>
			<div class="payment-gateway-box">
				<div class="box-header">
					<span class="box-title">Mastercard</span>
				</div>
				<div class="box-body">
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Sales</span>
						<span class="box-body-price">$ 356,237.99</span>
					</div>
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Expenses</span>
						<span class="box-body-price">$ 156,087.00</span>
					</div>
					<div class="box-body-price-wrapper">
						<span class="box-body-title">Bill to pay</span>
						<span class="box-body-price">$ 156,087.00</span>
					</div>
				</div>
			</div>
		</div>

		<a href="{{ route('wave.user.book-keeping.list') }}" class="btn mx-auto apply-booking-service-btn w-100">
			<img class="img-fluid" src="{{ asset('themes/tailwind/images/apply-booking-service-icon.png') }}">
			<span class="btn-title">Apply for Bookkeeping Service</span>
			<img class="img-fluid" src="{{ asset('themes/tailwind/images/chevron-right.png') }}">
		</a>
	</div>

@endsection

@section('script')
	<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

	<script>
		$(function() {
			$('.payment-gateways').slick({
 				infinite: false,
				slidesToShow: 3,
				slidesToScroll: 1,
				prevArrow:"<div class='next-prev-button prev-button a-left control-c prev slick-prev'><img src='{{ asset('themes/tailwind/images/arrow-left.png') }}'></div>",
				nextArrow:"<div class='next-prev-button next-button a-right control-c next slick-next'><img src='{{ asset('themes/tailwind/images/arrow-right.png') }}'></div>",
				responsive: [{
					breakpoint: 768,
					settings: {
						arrows: false,
						slidesToShow: 1
					}
				}]
			});

			$('.payment-gateways').on('wheel', (function(e) {
				e.preventDefault();

				if (e.originalEvent.deltaY < 0) {
					$(this).slick('slickPrev');
				}else {
					$(this).slick('slickNext');
				}
			}));
		});
	</script>
@endsection