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


@section('content')

<div class="bk-checkout-page">
	<div class="card-wrapper">
		<div class="card-title-wrapper">
			<h2 class="card-main-title">Checkout</h2>
		</div>

		<div class="card-body mx-auto">
			<form action="#" class="theme-form">
				<p class="card-body-title">Cart Summary</p>
				<div class="cart-summary-wrapper mx-auto">
					<div class="summary-computations-wrapper">
						<div class="summary-row">
							<span class="summary-row-title">Company Secretary subscription packages</span>
						</div>
						<div class="summary-row">
							<span class="summary-row-title fs-20">Company Secretary service</span>
							<span class="summary-row-desc fs-20 sky-blue-text">HK$422</span>
						</div>
						<div class="summary-row">
							<ul>
								<li class="summary-row-title fs-20">Monthly</li>
							</ul>
							<span class="summary-row-desc fs-20 sky-blue-text">HK$422</span>
						</div>
						<hr class="summary-row-separator">
						<div class="summary-row mb-0">
							<span class="summary-row-title fs-32 fw-600">Total</span>
							<span class="summary-row-desc fs-20 sky-blue-text">HK$422</span>
						</div>
					</div>

					<div class="summary-form-box">
						<h3 class="summary-form-box-title">Your contact details</h3>
						
						<div class="row">
							<div class="col-md-6">
								<div class="row mb-30 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">First name</label>
									</div>
									<div class="col">
										<input type="text" class="form-control" value="TAI MING">
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="row mb-30 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">Last name</label>
									</div>
									<div class="col">
										<input type="text" class="form-control" value="CHAN">
									</div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-md-6">
								<div class="row mb-30 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">Email</label>
									</div>
									<div class="col">
										<input type="email" class="form-control" value="taiming@gmail.com">
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="row mb-30 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">Phone</label>
									</div>
									<div class="col">
										<input type="number" class="form-control" value="56894786">
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="summary-form-box">
						<h3 class="summary-form-box-title">Payment details</h3>
						<h3 class="summary-form-box-title d-flex align-items-center">
							<span class="mr-3">Credit Card</span>
							<div class="d-flex">
								<img class="img-fluid" src="{{ asset('themes/tailwind/images/mastercard.png') }}">
								<img class="img-fluid" src="{{ asset('themes/tailwind/images/visacard.png') }}">
							</div>
						</h3>
						
						<div class="row">
							<div class="col-md-6">
								<div class="row mb-30 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">Cardholders name</label>
									</div>
									<div class="col">
										<input type="text" class="form-control" value="TAI MING">
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="row mb-30 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">Card number</label>
									</div>
									<div class="col">
										<input type="text" class="form-control" value="0000 0000 0000 0000">
									</div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-md-6">
								<div class="row mb-30 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">Expiration</label>
									</div>
									<div class="col">
										<input type="text" class="form-control" value="09 / 24">
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="row mb-30 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">CVC</label>
									</div>
									<div class="col">
										<input type="number" class="form-control" value="CVC">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="d-flex justify-content-between align-items-center">
                    <a href="{{ route('wave.user.payment-flow.index') }}" class="btn gray-btn py-20">Previous</a>
                    <div class="d-flex justify-content-center align-items-center">
                        <a href="{{ route('wave.user.payment-flow.index') }}" class="btn blue-btn py-20 mr-5">Save and Leave</a>
                        <a href="{{ route('wave.user.payment-flow.payment-success') }}" class="btn yellow-btn py-20">Pay</a>
                    </div>
                </div>
			</form>
		</div>
	</div>
</div>
@endsection