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


@section('content')

<div class="bk-packages-page">
	<div class="title-wrapper justify-content-start">
		<h2 class="page-title">Bookkeeping Service subscription packages</h2>
		<label class="toggle-switch">
			<input type="checkbox" id="subscriptionType">
			<span class="slider"></span>
			<span class="labels" data-on="Monthly" data-off="Annually"></span>
		</label>
	</div>
	<div class="row package-list">
		<div class="col-md-3 mb-3">
			<div class="package-box">
				<div class="package-box-header">
					<h3 class="header-title">Demi</h3>
					<p class="header-desc">Monthly revenue under HK$50K</p>
					<div class="package-box-price">
						<div class="package-box-price-inner" data-price-type="annually">
							HK<span class="bigger-text">$14,000</span>
						</div>
						<div class="package-box-price-inner" data-price-type="monthly" style="display: none;">
							HK<span class="bigger-text">$1,283</span>
						</div>
					</div>
				</div>
				<div class="package-box-body">
					<div class="package-box-body-content">
						<span class="package-box-body-title">Annual Support</span>
						<ul class="package-box-body-list">
							<li>Annual review by Accountant</li>
							<li>Numstation software</li>
							<li>Annual bookkeeping</li>
							<li>Annual management reports</li>
						</ul>
						<span class="package-box-body-title">Government &Tax Filings</span>
						<ul class="package-box-body-list">
							<li>Unaudited Financial Statements</li>
						</ul>
					</div>
				</div>
				<a href="{{ route('wave.user.book-keeping.checkout', ['package_id' => 1]) }}" class="btn mx-auto btn-get-started">
					<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
					Get Started
				</a>
			</div>
		</div>
		<div class="col-md-3 mb-3">
			<div class="package-box">
				<div class="package-box-header">
					<h3 class="header-title">Short</h3>
					<p class="header-desc">Monthly revenue under HK$100K</p>
					<div class="package-box-price">
						<div class="package-box-price-inner" data-price-type="annually">
							HK<span class="bigger-text">$18,000</span>
						</div>
						<div class="package-box-price-inner" data-price-type="monthly" style="display: none;">
							HK<span class="bigger-text">$1,650</span>
						</div>
					</div>
				</div>
				<div class="package-box-body">
					<div class="package-box-body-content">
						<span class="package-box-body-title">Annual Support</span>
						<ul class="package-box-body-list">
							<li>Numstation software</li>
							<li>Daily bookkeeping</li>
							<li>Monthly management reports</li>
						</ul>
						<span class="package-box-body-title">Government &Tax Filings</span>
						<ul class="package-box-body-list">
							<li>Unaudited Financial Statements</li>
						</ul>
					</div>
				</div>
				<a href="{{ route('wave.user.book-keeping.checkout', ['package_id' => 2]) }}" class="btn mx-auto btn-get-started">
					<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
					Get Started
				</a>
			</div>
		</div>
		<div class="col-md-3 mb-3">
			<div class="package-box">
				<div class="package-box-header">
					<h3 class="header-title">Tall</h3>
					<p class="header-desc">Monthly revenue under HK$300K</p>
					<div class="package-box-price">
						<div class="package-box-price-inner" data-price-type="annually">
							HK<span class="bigger-text">$22,000</span>
						</div>
						<div class="package-box-price-inner" data-price-type="monthly" style="display: none;">
							HK<span class="bigger-text">$2,420</span>
						</div>
					</div>
				</div>
				<div class="package-box-body">
					<div class="package-box-body-content">
						<span class="package-box-body-title">Annual Support</span>
						<ul class="package-box-body-list">
							<li>Numstation software</li>
							<li>Daily bookkeeping</li>
							<li>Monthly management reports</li>
						</ul>
						<span class="package-box-body-title">Government &Tax Filings</span>
						<ul class="package-box-body-list">
							<li>Unaudited Financial Statements</li>
						</ul>
					</div>
				</div>
				<a href="{{ route('wave.user.book-keeping.checkout', ['package_id' => 3]) }}" class="btn mx-auto btn-get-started">
					<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
					Get Started
				</a>
			</div>
		</div>
		<div class="col-md-3 mb-3">
			<div class="package-box">
				<div class="package-box-header">
					<h3 class="header-title">Grange</h3>
					<p class="header-desc">Monthly revenue <span class="fw-800">over</span> HK$50K</p>
					<div class="package-box-price">
						<div class="package-box-price-inner" data-price-type="annually">
							<span class="bigger-text">Custom</span>
						</div>
						<div class="package-box-price-inner" data-price-type="monthly" style="display: none;">
							<span class="bigger-text">Custom</span>
						</div>
					</div>
				</div>
				<div class="package-box-body">
					<div class="package-box-body-content">
						<span class="package-box-body-title">Annual Support</span>
						<ul class="package-box-body-list without-style">
							<li>Custom</li>
						</ul>
						<span class="package-box-body-title">Government &Tax Filings</span>
						<ul class="package-box-body-list without-style">
							<li>Custom</li>
						</ul>
					</div>
				</div>
				<a href="{{ route('wave.user.book-keeping.checkout', ['package_id' => 4]) }}" class="btn mx-auto btn-get-started">
					<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
					Get Started
				</a>
			</div>
		</div>
	</div>
</div>

@endsection

@section('script')
    <script>
        $(function() {
			setPrice();

            $('#subscriptionType').click(function() {
				setPrice();
            });

			function setPrice() {
				$('.package-list .package-box-price-inner').hide();
				
				if ($('#subscriptionType').is(':checked')) {
					$('.package-list .package-box-price-inner[data-price-type="monthly"]').show();
				}
				else {
					$('.package-list .package-box-price-inner[data-price-type="annually"]').show();
				}
			}
        });
    </script>
@endsection