181 lines
6.2 KiB
PHP
181 lines
6.2 KiB
PHP
|
@extends('theme::user.layouts.app')
|
||
|
|
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
|
||
|
|
<div class="cs-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">Digital Company Registration fee</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-row">
|
||
|
|
<span class="summary-row-title fs-20">1 year Comp Sec</span>
|
||
|
|
<span class="summary-row-desc fs-20 sky-blue-text">HK$13,500</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-row">
|
||
|
|
<ul>
|
||
|
|
<li class="summary-row-title fs-20">3-5 Shareholders </li>
|
||
|
|
</ul>
|
||
|
|
<span class="summary-row-desc fs-20 sky-blue-text">+HK$1,000/year</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-row">
|
||
|
|
<span class="summary-row-title">Digital Bookkeeping fee</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-row">
|
||
|
|
<span class="summary-row-title fs-20">Short</span>
|
||
|
|
<span class="summary-row-desc fs-20 sky-blue-text">HK$18,000/year</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$32,500</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 align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||
|
|
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="btn grey-btn py-20 mb-2">Previous</a>
|
||
|
|
|
||
|
|
<div class="d-flex align-items-center justify-content-end mobile-flex-column w-100">
|
||
|
|
<button type="button" class="btn blue-btn py-20 mx-2 mb-2" data-bs-toggle="modal" data-bs-target="#saveDraftModal">Save as draft</button>
|
||
|
|
<a href="{{ route('wave.user.company-secretary.checkout-payment-success') }}" class="btn yellow-btn py-20 mx-2 mb-2">Pay Now</a>
|
||
|
|
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Saved Draft Modal --}}
|
||
|
|
<div class="modal fade validation-modal" id="saveDraftModal" tabindex="-1" aria-labelledby="saveDraftModalLabel" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||
|
|
<div class="modal-content mx-auto w-100">
|
||
|
|
<div class="modal-body p-0">
|
||
|
|
<p class="text-center message-title">Data saved successfully</p>
|
||
|
|
<p class="text-center message">You can edit this draft on [Document draft] panel.</p>
|
||
|
|
<div class="d-flex">
|
||
|
|
<button type="button" class="btn blue-btn mx-2" data-bs-dismiss="modal">Check</button>
|
||
|
|
<button type="button" class="btn red-btn mx-2" data-bs-dismiss="modal">Back</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|