first commit
This commit is contained in:
benjibennn
@@ -0,0 +1,132 @@
|
||||
@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
|
||||
@@ -0,0 +1,45 @@
|
||||
@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">
|
||||
<p class="card-body-title d-flex align-items-center justify-content-center">
|
||||
<img class="img-fluid mr-50" src="{{ asset('themes/tailwind/images/tick-circle-blue.png') }}">
|
||||
<span>Payment successful</span>
|
||||
</p>
|
||||
<div class="cart-summary-wrapper mx-auto">
|
||||
<div class="summary-computations-wrapper" style="margin-bottom: 92px;">
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Total amount paid</span>
|
||||
<span class="summary-row-desc sky-blue-text">HK$18,000</span>
|
||||
</div>
|
||||
<hr class="summary-row-separator">
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Payment method</span>
|
||||
<span class="summary-row-desc sky-blue-text">Credit card</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Transaction date</span>
|
||||
<span class="summary-row-desc sky-blue-text">2023/05/25 18:28</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Transaction number</span>
|
||||
<span class="summary-row-desc sky-blue-text">254678943</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<a href="{{ route('wave.user.book-keeping.checkout', ['package_id' => 1]) }}" class="btn py-20 blue-btn mr-5">Back</a>
|
||||
<button type="button" class="btn py-20 yellow-btn">Print</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,151 @@
|
||||
@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="/" method="POST" 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">Bookkeeping Service subscription packages</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title fs-20">{{ $subscription->name_english }}</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<ul>
|
||||
<li class="summary-row-title fs-20">Annually</li>
|
||||
</ul>
|
||||
<span class="summary-row-desc fs-20 sky-blue-text">HK${{ number_format($subscription->price, 2) }}</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${{ number_format($subscription->price, 2) }}</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="" required>
|
||||
</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="" required>
|
||||
</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="" required>
|
||||
</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="" required>
|
||||
</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="" required>
|
||||
</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="" required>
|
||||
</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="" placeholder="00/00" required>
|
||||
</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="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-end">
|
||||
<a href="{{ route('wave.user.book-keeping.account-overview') }}" class="btn red-btn py-20 mr-5">Cancel</a>
|
||||
<a href="{{ route('wave.user.book-keeping.checkout-payment-success') }}" class="btn yellow-btn py-20">Pay</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,215 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
@section('style')
|
||||
<style>
|
||||
.pagination-link {
|
||||
padding: 35px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
.pagination-link .flex.justify-between.flex-1.sm\:hidden {
|
||||
justify-content: unset !important;
|
||||
}
|
||||
.pagination-link p.text-sm.text-gray-700.leading-5 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
img.doc-file-img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="document-library-page">
|
||||
<div class="title-wrapper">
|
||||
<form action="{{ Request::url() }}" method="GET" class="theme-form search-wrapper mb-2">
|
||||
<span class="search-title">Document/Record search</span>
|
||||
<div class="search-input-wrapper">
|
||||
<a class="filter-modal" href="#" data-bs-toggle="modal" data-bs-target="#searchFilterModal">
|
||||
<img src="{{ asset('themes/tailwind/images/filter-icon.png') }}">
|
||||
</a>
|
||||
<input type="text" name="s" value="{{ $search }}" class="form-control" required>
|
||||
</div>
|
||||
<button type="submit" class="btn blue-btn">Search</button>
|
||||
</form>
|
||||
<div class="title-actions-wrapper">
|
||||
<a href="{{ route('wave.user.book-keeping.list') }}" class="btn yellow-btn mb-2">Back to list</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-wrapper">
|
||||
<div class="table-responsive mb-5">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="custom-radio-checkbox">
|
||||
<input type="checkbox" id="checkAll" value="all">
|
||||
<label for="checkAll"></label>
|
||||
</div>
|
||||
Document Name
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col">Document Category</th>
|
||||
<th scope="col">Document Size</th>
|
||||
<th scope="col">Date Uploaded</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($documents as $doc)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="custom-radio-checkbox">
|
||||
<input type="checkbox" class="download-checkbox" id="row-{{ $doc->id }}" value="{{ $doc->id }}">
|
||||
<label for="row-{{ $doc->id }}"></label>
|
||||
</div>
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
{{ $doc->file_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ $doc->category->name }}</td>
|
||||
<td><span class="green-text">{{ $doc->file_size }}</span></td>
|
||||
<td>{{ $doc->created_at }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#pdfViewModal-{{ $doc->id }}" >View</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="{{ $doc->url }}" id="download-doc-{{ $doc->id }}" class="action-btn text-underline sky-blue-text" target="_blank" >Download</a>
|
||||
</div>
|
||||
<div class="modal fade doc-file-img-modal" id="pdfViewModal-{{ $doc->id }}" tabindex="-1" role="dialog" aria-labelledby="pdfViewModal-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img class="doc-file-img" src="{{ $doc->url }}" style="margin: 0 auto;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button type="button" class="btn blue-btn mx-auto mb-5" id="download-all-file" >Download</button>
|
||||
<div class="pagination-link" >{{ $documents->links() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Add Search Filter Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="searchFilterModal" tabindex="-1" aria-labelledby="searchFilterModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">Search</p>
|
||||
|
||||
<form action="{{ url('/user/book-keeping/document-library') }}" method="get" class="theme-form">
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document category</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="category_id" >
|
||||
<option value="all" selected >Any</option>
|
||||
@foreach($document_category as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Status</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="status" >
|
||||
<option value="all" selected>All</option>
|
||||
<option value="completed" >ORC Completed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-5 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Keyword</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" name="s" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Date uploaded</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="fix_date" id="dateFilter">
|
||||
<option value="all" selected >Any Time</option>
|
||||
<option value="today">Today</option>
|
||||
<option value="2">Yesterday</option>
|
||||
<option value="7">Last 7 days</option>
|
||||
<option value="30">Last 30 days</option>
|
||||
<option value="90">Last 90 days</option>
|
||||
<option value="custom">Custom...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3" id="customDateFields" style="display: none;">
|
||||
<div class="col-md-12">
|
||||
<label class="col-form-label">Between</label>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col date-picker-wrapper">
|
||||
<img src="{{ asset('themes/tailwind/images/calendar-2.png') }}">
|
||||
<input type="date" class="form-control" name="data_from" placeholder="After">
|
||||
</div>
|
||||
<div class="col date-picker-wrapper">
|
||||
<img src="{{ asset('themes/tailwind/images/calendar-2.png') }}">
|
||||
<input type="date" class="form-control" name="date_to" placeholder="Before">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn blue-btn mx-3">Search</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
$(function() {
|
||||
$('#searchFilterModal #dateFilter').change(function() {
|
||||
if ($(this).val() == 'custom') {
|
||||
$('#searchFilterModal #customDateFields').show();
|
||||
}
|
||||
else {
|
||||
$('#searchFilterModal #customDateFields').hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#checkAll').click(function(){
|
||||
$('.download-checkbox').prop('checked', $(this).prop('checked'));
|
||||
});
|
||||
|
||||
$('#download-all-file').click(function(){
|
||||
console.log('testtest');
|
||||
$('.download-checkbox').each(function(){
|
||||
if ($(this).prop('checked')) {
|
||||
console.log('#download-doc-' + $(this).val());
|
||||
$('#download-doc-' + $(this).val())[0].click();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
513
resources/views/themes/tailwind/user/book-keeping/list.blade.php
Normal file
513
resources/views/themes/tailwind/user/book-keeping/list.blade.php
Normal file
@@ -0,0 +1,513 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
@section('style')
|
||||
<style>
|
||||
img.doc-file-img {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="bk-list-page">
|
||||
<div class="title-wrapper">
|
||||
<h2 class="page-title">Bookkeeping Service</h2>
|
||||
<div class="title-actions-wrapper">
|
||||
<button type="button" class="btn yellow-btn mr-4" data-bs-toggle="modal" data-bs-target="#newDocumentModal">New Queue</button>
|
||||
<a href="{{ route('wave.user.book-keeping.document-library') }}" class="btn blue-btn">Document Library</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-nav-tabs">
|
||||
<ul class="nav nav-tabs nav-justified">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#queueList">
|
||||
<img src="{{ asset('themes/tailwind/images/queue-list-icon.png') }}">
|
||||
In Queue List
|
||||
<span class="tab-count">{{ $documents_list->count() }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#completedList">
|
||||
<img src="{{ asset('themes/tailwind/images/tick-circle-2.png') }}">
|
||||
Completed List
|
||||
<span class="tab-count">{{ $documents_complete->count() }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="queueList">
|
||||
<div class="table-responsive">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Document Name</th>
|
||||
<th scope="col">Document Category</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Last Status Timestamp</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($documents_list as $doc)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
@php
|
||||
$ext = pathinfo($doc->file_name, PATHINFO_EXTENSION);
|
||||
@endphp
|
||||
@if ($ext == 'pdf')
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/pdf.svg') }}">
|
||||
@else
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
@endif
|
||||
{{ $doc->file_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ $doc->category->name }}</td>
|
||||
<td>{{ $doc->status }}</td>
|
||||
<td>{{ $doc->created_at }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#pdfViewModal-{{ $doc->id }}" >View</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#documentPropertiesModal-{{ $doc->id }}">Properties</a>
|
||||
</div>
|
||||
<div class="modal fade" id="pdfViewModal-{{ $doc->id }}" tabindex="-1" role="dialog" aria-labelledby="pdfViewModal-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img src="{{ $doc->file_url }}" class="doc-file-img" style="margin: 0 auto;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Add Document Properties Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="documentPropertiesModal-{{ $doc->id }}" tabindex="-1" aria-labelledby="documentPropertiesModal-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">Properties</p>
|
||||
|
||||
<form action="#" class="theme-form">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->name }}.{{ $ext }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Original name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->file_name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document ID :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">--</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document type :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">Bookkeeping</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document category :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->category->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Xero Amount :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">$00</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Status :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->status }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Last status timestamp :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->updated_at }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="form-separator mb-4">
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->company->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company ID :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->company->id }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Uploaded on :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->created_at }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Uploaded by :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->user->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Back</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="empty-state-wrapper {{ $documents_list->count() == 0 ? '' : 'd-none' }}">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/empty-state-img.svg') }}">
|
||||
<span class="empty-text d-block text-center w-100">It’s empty here...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="completedList">
|
||||
<div class="table-responsive">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Document Name</th>
|
||||
<th scope="col">Document Category</th>
|
||||
<th scope="col">Status</th>
|
||||
<th scope="col">Xero Status</th>
|
||||
<th scope="col">Xero Amount</th>
|
||||
<th scope="col">Last Status Timestamp</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($documents_complete as $doc)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
@php
|
||||
$ext = pathinfo($doc->file_name, PATHINFO_EXTENSION);
|
||||
@endphp
|
||||
@if ($ext == 'pdf')
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/pdf.svg') }}">
|
||||
@else
|
||||
<img class="img-fluid mr-2" width="30" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
@endif
|
||||
{{ $doc->file_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ $doc->category->name }}</td>
|
||||
<td>{{ $doc->status }}</td>
|
||||
<td>{{ $doc->xero_status }}</td>
|
||||
<td>{{ $doc->xero_amount }}</td>
|
||||
<td>{{ $doc->created_at }}</td>
|
||||
<td>
|
||||
<div class="table-actions">
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#pdfViewModal-{{ $doc->id }}" >View</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#documentPropertiesModal-com-{{ $doc->id }}">Properties</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#userDetailsModal">Download</a>
|
||||
</div>
|
||||
<div class="modal fade" id="pdfViewModal-{{ $doc->id }}" tabindex="-1" role="dialog" aria-labelledby="pdfViewModal-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<img class="doc-file-img" src="{{ $doc->file_url }}" style="margin: 0 auto;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Add Document Properties Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="documentPropertiesModal-com-{{ $doc->id }}" tabindex="-1" aria-labelledby="documentPropertiesModal-com-{{ $doc->id }}Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">Properties</p>
|
||||
|
||||
<form action="#" class="theme-form">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->name }}.{{ $ext }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Original name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->file_name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document ID :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">--</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document type :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">Bookkeeping</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document category :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->category->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Xero Amount :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">$00</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Status :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->status }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Last status timestamp :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->updated_at }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="form-separator mb-4">
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company name :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->company->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company ID :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->company->id }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Uploaded on :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->created_at }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Uploaded by :</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="col-form-label">{{ $doc->user->name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Back</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="empty-state-wrapper {{ $documents_complete->count() == 0 ? '' : 'd-none' }}">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/empty-state-img.svg') }}">
|
||||
<span class="empty-text d-block text-center w-100">It’s empty here...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Add Upload Document Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="newDocumentModal" tabindex="-1" aria-labelledby="newDocumentModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">Upload Document</p>
|
||||
|
||||
<form action="{{ route('wave.user.book-keeping.add.document') }}" id="add-document-form" class="theme-form">
|
||||
<div class="mb-4 file-upload-wrapper">
|
||||
<img class="img-fluid mx-auto" width="107" src="{{ asset('themes/tailwind/images/file-upload-icon.png') }}">
|
||||
<span class="file-upload-desc empty-state">
|
||||
Drag and drop files here or choose file.
|
||||
<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</span>
|
||||
<span class="file-upload-desc with-value" style="display: none;"></span>
|
||||
<input type="file" name="document" accept="application/msword, image/*" required >
|
||||
<button type="button" class="btn yellow-btn file-upload-btn mx-auto">Choose File</button>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document name</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" name="name" class="form-control" value="" required >
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document description</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textarea class="form-control" name="description" required ></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Document category</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="bookkeeping_document_category_id" required >
|
||||
@foreach($document_category as $category)
|
||||
<option value="{{ $category->id }}" >{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn blue-btn mx-3">Submit</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade validation-modal style2" id="invalidFormatModal" tabindex="-1" aria-labelledby="validationModal1Label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="text-center error-message">{{ __("Unable to Preview file format") }}</p>
|
||||
<button type="button" class="btn br-0" data-bs-dismiss="modal">{{ __("Back") }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
$(function() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
|
||||
$('.password-hide-show').click(function() {
|
||||
var type = $(this).parent().find('input').attr('type');
|
||||
|
||||
if (type == 'password') {
|
||||
$(this).parent().find('input').attr('type', 'text');
|
||||
}
|
||||
else {
|
||||
$(this).parent().find('input').attr('type', 'password');
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '.pdf-prev-btn', function(){
|
||||
$('#pdfViewModal').modal('show');
|
||||
});
|
||||
$(document).on('click', '.undefined-format-btn', function(){
|
||||
$('#invalidFormatModal').modal('show');
|
||||
});
|
||||
|
||||
$(document).on('submit', '#add-document-form', function(e){
|
||||
e.preventDefault();
|
||||
var url = $(this).attr('action');
|
||||
var form_data = new FormData($(this)[0]);
|
||||
|
||||
$.ajax({
|
||||
url:url,
|
||||
type: 'post',
|
||||
data:form_data,
|
||||
dataType:'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success:function(data){
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,177 @@
|
||||
@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
|
||||
Reference in New Issue
Block a user