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
|
||||
@@ -0,0 +1,414 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
<section style="margin: 50px;">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px;background: linear-gradient(90deg, #7db979, #26bbaa);margin-right: 0px;">
|
||||
<div class="justify-content-start" style="margin-left: 20px;">
|
||||
<div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 332px;">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/refresh-3.png" style="width: 80px;margin-left: 10px;">
|
||||
<h1 style="font-size: 20px;color: rgb(0,0,0);margin-bottom: 0px;">Change Company Director</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 20px;"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
|
||||
</div>
|
||||
<div class="card-body scstyle-15" style="overflow: auto;height: 65vh;">
|
||||
<form>
|
||||
<div style="margin-right: 150px;margin-left: 150px;">
|
||||
<div class="col">
|
||||
<div class="row" style="margin: 0px;">
|
||||
<div class="col-xxl-12" style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<h1 style="font-size: 24px;text-align: center;color: rgb(7,7,7);">Change of Company Director (Appointment / Cessation)</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Cessation to Act as Director</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">HKID / Passport number</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Reason for Cessation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 60px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" id="formCheck-1" name="reason">
|
||||
<label class="form-check-label" for="formCheck-1">Resignation/Other</label>
|
||||
</div>
|
||||
<div class="form-check" style="margin-left: 42px;">
|
||||
<input class="form-check-input" type="radio" id="formCheck-2" name="reason">
|
||||
<label class="form-check-label" for="formCheck-2">Deceased</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Cessation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<hr class="new2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Appointment of Director</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Alias(English)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Alias(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Correspondence Address</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Alternate to</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Email address</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">HKID / Passport number</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Appointment</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="background: #F4F7FA;">
|
||||
<div class="container">
|
||||
<div class="row" style="margin-top: 10px;margin-bottom: 10px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Verify documents and identity</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-21.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-22.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Please upload a copy of the following documents</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="address" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months</h1>
|
||||
</div>
|
||||
<div id="modal-open-1">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-1" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin: 20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-1" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="transferee" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months <br>(Transferee)</h1>
|
||||
</div>
|
||||
<div id="modal-open-2">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-2" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin:20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-2" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-end align-items-xxl-center">
|
||||
<div style="padding-right: 10px;">
|
||||
<div id="modal-open-3">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h6 style="color: #364257;">Your enquiry submitted successfully</h6>
|
||||
</div>
|
||||
<div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button style=" color: white;background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;" type="button" data-bs-dismiss="modal">Back</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="background: #009B9A;border-top-left-radius: 50px; color: white;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Save as draft</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px;border-style: none;">
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}">
|
||||
<button type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px; color: white;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Leave</button></a>
|
||||
</div>
|
||||
<div><a href="{{ route('wave.user.payment-flow.index') }}"><button type="button" style=" color: white;background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Next</button></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@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
|
||||
@@ -0,0 +1,69 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
<section style="margin-right: 50px; margin-left: 50px; margin-top: 50px; margin-bottom: 50px;">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px; background: linear-gradient(90deg, #7db979, #26bbaa); margin-right: 0px;">
|
||||
<div class="justify-content-start" style="margin-left: 20px;">
|
||||
<div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 593px;">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-27.png" style="width: 80px; margin-left: 10px;">
|
||||
<h1 style="font-size: 20px; color: rgb(0,0,0); margin-bottom: 0px;">Change in Particulars of Company Secretary or Director </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 20px;"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
|
||||
</div>
|
||||
<div class="card-body" style="overflow: auto; height: 50vh;">
|
||||
<form>
|
||||
<div style="margin-right: 150px; margin-left: 150px;">
|
||||
<div class="col">
|
||||
<div class="row" style="margin: 0px;">
|
||||
<div class="col-xxl-12" style="margin-top: 20px; margin-bottom: 20px;">
|
||||
<h1 style="font-size: 24px; text-align: center; color: rgb(7,7,7);">Change in Particulars of Company Secretary or Director </h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row" style="margin: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div style="padding-right: 10px;">
|
||||
<div id="modal-open-3">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h6 style="color: #364257;">Your enquiry submitted successfully</h6>
|
||||
</div>
|
||||
<div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button style="color: white; background: #9B0025; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;" type="button" data-bs-dismiss="modal">Back</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="background: #009B9A; border-top-left-radius: 50px; color: white; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Save as draft</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px; border-style: none;"><a href="{{ route('wave.user.company-secretary.index') }}"><button type="button" style="background: #009B9A; border-top-left-radius: 50px; border-top-right-radius: 50px; color: white; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Leave</button></a></div>
|
||||
<div><a href="{{ route('wave.user.payment-flow.index') }}"><button type="button" style="color: white; background: #9B0025; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Next</button></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@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
|
||||
@@ -0,0 +1,393 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
<section style="margin-right: 50px;margin-left: 50px;margin-top: 50px;margin-bottom: 50px;">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px;background: linear-gradient(90deg, #7db979, #26bbaa);margin-right: 0px;">
|
||||
<div class="justify-content-start" style="margin-left: 20px;">
|
||||
<div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 363px;">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-26.png" style="width: 80px;margin-left: 10px;">
|
||||
<h1 style="font-size: 20px;color: rgb(0,0,0);margin-bottom: 0px;">Change of Company Secretary </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 20px;"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
|
||||
</div>
|
||||
<div class="card-body scstyle-15" style="overflow: auto;height: 65vh;">
|
||||
<form>
|
||||
<div style="margin-right: 150px;margin-left: 150px;">
|
||||
<div class="col">
|
||||
<div class="row" style="margin: 0px;">
|
||||
<div class="col-xxl-12" style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<h1 style="font-size: 24px;text-align: center;color: rgb(7,7,7);">Change of Company Secretary </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Cessation to Act as Company Secretary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Reason for Cessation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 60px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" id="formCheck-1" name="reason">
|
||||
<label class="form-check-label" for="formCheck-1">Resignation/Other</label>
|
||||
</div>
|
||||
<div class="form-check" style="margin-left: 42px;">
|
||||
<input class="form-check-input" type="radio" id="formCheck-2" name="reason">
|
||||
<label class="form-check-label" for="formCheck-2">Deceased</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Cessation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<hr class="new2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Appointment of Company Secretary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Correspondence Address</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Email address</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Company Number</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Appointment</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="background: #F4F7FA;">
|
||||
<div class="container">
|
||||
<div class="row" style="margin-top: 10px;margin-bottom: 10px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Verify documents and identity</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-21.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-22.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Please upload a copy of the following documents</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="address" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="modal-open-1">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-1" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin:20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-1" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="transferee" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months <br>(Transferee)</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="modal-open-2">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-2" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin:20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-2" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-end align-items-xxl-center">
|
||||
<div style="padding-right: 10px;">
|
||||
<div id="modal-open-3">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h6 style="color: #364257;">Your enquiry submitted successfully</h6>
|
||||
</div>
|
||||
<div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button style=" color: white;background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;" type="button" data-bs-dismiss="modal">Back</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="background: #009B9A;border-top-left-radius: 50px; color: white;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Save as draft</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px;border-style: none;"><a href="{{ route('wave.user.company-secretary.index') }}"><button type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px; color: white;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Leave</button></a></div>
|
||||
<div><a href="{{ route('wave.user.payment-flow.index') }}"><button type="button" style=" color: white;background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Next</button></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@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
|
||||
@@ -0,0 +1,31 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="cs-checkout-page h-100">
|
||||
<div class="card-wrapper h-100 flex-direction-column d-flex">
|
||||
<div class="card-title-wrapper">
|
||||
<h2 class="card-main-title">Checkout</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-body mx-auto h-100 d-flex justify-content-center flex-direction-column">
|
||||
<p class="card-body-title d-flex align-items-center justify-content-center mt-auto">
|
||||
<img class="img-fluid mr-50" src="{{ asset('themes/tailwind/images/tick-circle-failed.png') }}">
|
||||
<span>Payment failed</span>
|
||||
</p>
|
||||
<p class="card-body-desc mb-auto">
|
||||
Your payment was not successfully processed.
|
||||
<br>
|
||||
Please try a different payment method.
|
||||
</p>
|
||||
<div class="cart-summary-wrapper mx-auto">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="btn py-20 blue-btn mr-5">Back</a>
|
||||
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="btn py-20 yellow-btn">Try Again</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,45 @@
|
||||
@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">
|
||||
<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$32,500</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.company-secretary.limited-company') }}" 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,180 @@
|
||||
@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
|
||||
@@ -0,0 +1,100 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="cs-main-page">
|
||||
<div class="title-wrapper justify-content-start">
|
||||
<h2 class="page-title">Company Secretary service</h2>
|
||||
</div>
|
||||
<div class="cs-main-page-body">
|
||||
<div class="row button-row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<a href="#" class="btn w-100">
|
||||
<img class="img-fluid mr-5" width="30" src="{{ asset('themes/tailwind/images/document-text.png') }}">
|
||||
<span class="mr-5">Document Queue</span>
|
||||
<span class="count-circle mr-5">10</span>
|
||||
<img class="img-fluid" width="8" src="{{ asset('themes/tailwind/images/chevron-right.png') }}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<a href="#" class="btn w-100">
|
||||
<img class="img-fluid mr-5" width="30" src="{{ asset('themes/tailwind/images/document-text.png') }}">
|
||||
<span class="mr-5">Document Queue</span>
|
||||
<span class="count-circle mr-5">10</span>
|
||||
<img class="img-fluid" width="8" src="{{ asset('themes/tailwind/images/chevron-right.png') }}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<a href="#" class="btn w-100">
|
||||
<img class="img-fluid mr-5" width="30" src="{{ asset('themes/tailwind/images/document-text.png') }}">
|
||||
<span class="mr-5">Document Queue</span>
|
||||
<span class="count-circle mr-5">10</span>
|
||||
<img class="img-fluid" width="8" src="{{ asset('themes/tailwind/images/chevron-right.png') }}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-action-row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/noun-company-1716851.png') }}">
|
||||
<span class="box-action-title">Incorporation of Hong Kong Limited Company</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('records-change-company-name') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/refresh-2.png') }}">
|
||||
<span class="box-action-title">Change Company Name</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('records-change-company-name') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/location2.png') }}">
|
||||
<span class="box-action-title">Change Company Address</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.change-director') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/refresh-3.png') }}">
|
||||
<span class="box-action-title">Change of Company Director (Appointment / Cessation)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-action-row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.change-secretary') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/refresh-4.png') }}">
|
||||
<span class="box-action-title">Change of Company Secretary (Appointment / Cessation)</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.resignation') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/noun-unemployed-4944356.png') }}">
|
||||
<span class="box-action-title">Resignation of Reserve Director</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.change-particulars') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/refresh-5.png') }}">
|
||||
<span class="box-action-title">Change in Particulars of Company Secretary or Director</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('records-transfer-of-shares') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/noun-transfer-5791219.png') }}">
|
||||
<span class="box-action-title">Transfer of shares</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-action-row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('records-service-enquiry') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/noun-curious-5576487.png') }}">
|
||||
<span class="box-action-title">Other Requests</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,452 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="cs-limited-company-page">
|
||||
<div class="card-wrapper">
|
||||
<div class="card-header">
|
||||
<div class="card-header-top">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="img-fluid mr-5" width="74" src="{{ asset('themes/tailwind/images/noun-company-1716851.png') }}">
|
||||
<h2 class="top-title">Incorporation of Hong Kong Limited Company</h2>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress-step active" data-step="1"></div>
|
||||
<div class="progress-step-separator"></div>
|
||||
<div class="progress-step" data-step="2"></div>
|
||||
<div class="progress-step-separator"></div>
|
||||
<div class="progress-step" data-step="3"></div>
|
||||
<div class="progress-step-separator"></div>
|
||||
<div class="progress-step" data-step="4"></div>
|
||||
<div class="progress-step-separator"></div>
|
||||
<div class="progress-step" data-step="5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header-bottom form-steps-title" data-step="1">
|
||||
<h2 class="bottom-title">Please enter your company name</h2>
|
||||
</div>
|
||||
<div class="card-header-bottom form-steps-title" data-step="2" style="display: none;">
|
||||
<h2 class="bottom-title">Will you be a director of this company?</h2>
|
||||
</div>
|
||||
<div class="card-header-bottom form-steps-title" data-step="3" style="display: none;">
|
||||
<h2 class="bottom-title">How many shareholders will you have?</h2>
|
||||
</div>
|
||||
<div class="card-header-bottom form-steps-title" data-step="4" style="display: none;">
|
||||
<h2 class="bottom-title">Do you need to set up an Airwallex account and a corporate Visa card?</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="#" class="theme-form h-100">
|
||||
<div class="form-steps" data-step="1">
|
||||
<div class="card-body card-body-s">
|
||||
<div class="row w-100">
|
||||
<div class="col-md-12">
|
||||
<input type="text" class="form-control">
|
||||
<p class="form-field-desc">*Company name availability subject to final confirmation from the company registry</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-end mb-3 mx-4 mobile-flex-column">
|
||||
<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>
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2 change-form-step" data-target="2">Next</button>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-steps" data-step="2" style="display: none;">
|
||||
<div class="card-body card-body-s">
|
||||
<div class="row w-100">
|
||||
<div class="col-md-12">
|
||||
<div class="custom-radio-selection">
|
||||
<label class="radio-select" for="is_director_yes">
|
||||
<input type="radio" id="is_director_yes" name="is_director" value="yes">
|
||||
<i class="fa fa-check fs-20 mr-5"></i>
|
||||
<span>
|
||||
Yes
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio-select" for="is_director_no">
|
||||
<input type="radio" id="is_director_no" name="is_director" value="no">
|
||||
<i class="fa fa-times fs-20 mr-5"></i>
|
||||
<span>
|
||||
No
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn grey-btn py-20 mb-2 change-form-step" data-target="1">Previous</button>
|
||||
|
||||
<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>
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2 change-form-step" data-target="3">Next</button>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-steps" data-step="3" style="display: none;">
|
||||
<div class="card-body card-body-l">
|
||||
<div class="w-100 mb-4">
|
||||
<label class="col-form-label">Number of shareholders:</label>
|
||||
<div class="number-input-wrapper">
|
||||
<button type="button" class="btn number-input-btn minus">
|
||||
<i class="fa fa-minus"></i>
|
||||
</button>
|
||||
<input type="number" class="form-control text-center" value="2">
|
||||
<button type="button" class="btn number-input-btn plus">
|
||||
<i class="fa fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<label class="col-form-label">Are there any corporate shareholders?</label>
|
||||
<div class="custom-radio-selection justify-content-between">
|
||||
<label class="radio-select" for="has_corporate_shareholders_yes">
|
||||
<input type="radio" id="has_corporate_shareholders_yes" name="has_corporate_shareholders" value="yes">
|
||||
<i class="fa fa-check fs-20 mr-5"></i>
|
||||
<span>
|
||||
I have a corporate shareholder(s)
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio-select" for="has_corporate_shareholders_no">
|
||||
<input type="radio" id="has_corporate_shareholders_no" name="has_corporate_shareholders" value="no">
|
||||
<i class="fa fa-times fs-20 mr-5"></i>
|
||||
<span>
|
||||
I don't have a corporate shareholder
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn grey-btn py-20 mb-2 change-form-step" data-target="2">Previous</button>
|
||||
|
||||
<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>
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2 change-form-step" data-target="4">Next</button>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-steps" data-step="4" style="display: none;">
|
||||
<div class="card-body card-body-s">
|
||||
<div class="row w-100">
|
||||
<div class="col-md-12">
|
||||
<div class="custom-radio-selection">
|
||||
<label class="radio-select" for="set_up_airwallex_account_yes">
|
||||
<input type="radio" id="set_up_airwallex_account_yes" name="set_up_airwallex_account" value="yes">
|
||||
<i class="fa fa-check fs-20 mr-5"></i>
|
||||
<span>
|
||||
Yes
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio-select" for="set_up_airwallex_account_no">
|
||||
<input type="radio" id="set_up_airwallex_account_no" name="set_up_airwallex_account" value="no">
|
||||
<i class="fa fa-times fs-20 mr-5"></i>
|
||||
<span>
|
||||
No
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn grey-btn py-20 mb-2 change-form-step" data-target="3">Previous</button>
|
||||
|
||||
<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>
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2 change-form-step" data-target="5">Next</button>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-steps" data-step="5" style="display: none;">
|
||||
<div class="card-body card-body-xl">
|
||||
<div class="title-wrapper justify-content-center">
|
||||
<h2 class="page-title">Here are our incorporation packages</h2>
|
||||
</div>
|
||||
<div class="row package-list w-100 mb-3">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="package-box mx-3">
|
||||
<div class="package-box-header">
|
||||
<h3 class="header-title">
|
||||
3 year Comp Sec
|
||||
<span class="d-block">(2 Shareholders)</span>
|
||||
</h3>
|
||||
<div class="package-box-price">
|
||||
<div class="package-box-price-inner">
|
||||
HK<span class="bigger-text">$19,100</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>Including any govt fees first year</li>
|
||||
<li>Including Hong Kong registered address</li>
|
||||
<li>Including digital company kit set in </li>
|
||||
<li>Numstation app</li>
|
||||
<li>Unlimited CR E-Submission</li>
|
||||
</ul>
|
||||
<p class="package-box-body-desc">*Register fee :HK$ 9,500</p>
|
||||
</div>
|
||||
<hr class="package-box-body-separator">
|
||||
<div class="package-box-body-content">
|
||||
<span class="package-box-body-title">Optional</span>
|
||||
<div class="package-box-body-optional-list">
|
||||
<div class="optional-list-row">
|
||||
<div class="optional-list-row-title">3-5 Shareholders</div>
|
||||
<div class="optional-list-row-price">
|
||||
+HK$1,000<span>/year</span>
|
||||
</div>
|
||||
<div class="toggle-switch2">
|
||||
<input type="checkbox" id="optional1">
|
||||
<label for="optional1"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body-optional-list">
|
||||
<div class="optional-list-row">
|
||||
<div class="optional-list-row-title">6-10 Shareholders</div>
|
||||
<div class="optional-list-row-price">
|
||||
+HK$2,000<span>/year</span>
|
||||
</div>
|
||||
<div class="toggle-switch2">
|
||||
<input type="checkbox" id="optional2">
|
||||
<label for="optional2"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body-optional-list">
|
||||
<div class="optional-list-row">
|
||||
<div class="optional-list-row-title">10+ Shareholders</div>
|
||||
<div class="optional-list-row-price">
|
||||
<span>be discussed</span>
|
||||
</div>
|
||||
<div class="toggle-switch2">
|
||||
<input type="checkbox" id="optional3">
|
||||
<label for="optional3"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body-optional-list">
|
||||
<div class="optional-list-row">
|
||||
<div class="optional-list-row-title">Auto payroll</div>
|
||||
<div class="optional-list-row-price">
|
||||
<span>be discussed</span>
|
||||
</div>
|
||||
<div class="toggle-switch2">
|
||||
<input type="checkbox" id="optional4">
|
||||
<label for="optional4"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('wave.user.company-secretary.checkout') }}" 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-6 mb-3">
|
||||
<div class="package-box mx-3">
|
||||
<div class="package-box-header">
|
||||
<h3 class="header-title">
|
||||
3 year Comp Sec
|
||||
<span class="d-block">(2 Shareholders)</span>
|
||||
</h3>
|
||||
<div class="package-box-price">
|
||||
<div class="package-box-price-inner">
|
||||
HK<span class="bigger-text">$19,100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body first">
|
||||
<span class="package-box-body-title">Annual Support</span>
|
||||
<ul class="package-box-body-list">
|
||||
<li>Including any govt fees first year</li>
|
||||
<li>Including Hong Kong registered address</li>
|
||||
<li>Including digital company kit set in </li>
|
||||
<li>Numstation app</li>
|
||||
<li>Unlimited CR E-Submission</li>
|
||||
</ul>
|
||||
<hr class="package-box-separator">
|
||||
<span class="package-box-body-title">Optional</span>
|
||||
</div>
|
||||
<a href="{{ route('wave.user.company-secretary.checkout') }}" 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>
|
||||
<div class="card-body">
|
||||
<div class="title-wrapper w-100">
|
||||
<h2 class="page-title">Digital Bookkeeping</h2>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section row">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="digital-bookkeeping-section-box">
|
||||
<span class="digital-bookkeeping-section-box-title">Demi</span>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$14,000<span>/year</span></div>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$1,283<span>/month</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="digital-bookkeeping-section-box">
|
||||
<span class="digital-bookkeeping-section-box-title">Short</span>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$18,000<span>/year</span></div>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$1,650<span>/month</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="digital-bookkeeping-section-box">
|
||||
<span class="digital-bookkeeping-section-box-title">Tall</span>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$22,000<span>/year</span></div>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$2,420<span>/month</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="digital-bookkeeping-section-box">
|
||||
<span class="digital-bookkeeping-section-box-title">Grange</span>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">Custom<span>/year</span></div>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">Custom<span>/month</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn grey-btn py-20 mb-2 change-form-step" data-target="4">Previous</button>
|
||||
|
||||
<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') }}" class="btn blue-btn py-20 mx-2 mb-2">Next</a>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
$(function() {
|
||||
$('.change-form-step').click(function() {
|
||||
var target = $(this).attr('data-target');
|
||||
|
||||
if (target && $('.form-steps[data-step="' + target + '"]').length) {
|
||||
$('.progress-step').removeClass('active');
|
||||
$('.progress-step').removeClass('done');
|
||||
$('.form-steps-title').hide();
|
||||
$('.form-steps').hide();
|
||||
|
||||
$('.progress-step[data-step="' + target + '"]').addClass('active');
|
||||
$('.form-steps-title[data-step="' + target + '"]').show();
|
||||
$('.form-steps[data-step="' + target + '"]').show();
|
||||
|
||||
$('.progress-step').each(function( index ) {
|
||||
if ($(this).hasClass('active')) {
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
$(this).addClass('done');
|
||||
}
|
||||
});
|
||||
|
||||
if (target == 5) {
|
||||
$('.card-header').addClass('no-bg-img');
|
||||
$('.card-wrapper').addClass('br-0');
|
||||
}
|
||||
else {
|
||||
$('.card-header').removeClass('no-bg-img');
|
||||
$('.card-wrapper').removeClass('br-0');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.custom-radio-selection .radio-select input[type="radio"]').change(function() {
|
||||
$(this).parents('.custom-radio-selection').find('.radio-select').removeClass('checked');
|
||||
$(this).parent().addClass('checked');
|
||||
});
|
||||
|
||||
$('.number-input-wrapper .number-input-btn.minus').click(function() {
|
||||
var inputValue = parseInt($(this).parents('.number-input-wrapper').find('input').val());
|
||||
if (inputValue !== NaN) {
|
||||
inputValue--;
|
||||
|
||||
if (inputValue <= 0) {
|
||||
$(this).parents('.number-input-wrapper').find('input').val('0');
|
||||
}
|
||||
else {
|
||||
$(this).parents('.number-input-wrapper').find('input').val(inputValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.number-input-wrapper .number-input-btn.plus').click(function() {
|
||||
var inputValue = parseInt($(this).parents('.number-input-wrapper').find('input').val());
|
||||
if (inputValue !== NaN) {
|
||||
inputValue++;
|
||||
$(this).parents('.number-input-wrapper').find('input').val(inputValue);
|
||||
}
|
||||
});
|
||||
|
||||
$('.toggle-switch2 input[type="checkbox"]').change(function() {
|
||||
if ($(this).is(':checked')) {
|
||||
$(this).parents('.optional-list-row').addClass('selected');
|
||||
}
|
||||
else {
|
||||
$(this).parents('.optional-list-row').removeClass('selected');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,317 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
<section style="margin-right: 50px;margin-left: 50px;margin-top: 50px;margin-bottom: 50px;">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px;background: linear-gradient(90deg, #7db979, #26bbaa);margin-right: 0px;">
|
||||
<div class="justify-content-start" style="margin-left: 20px;">
|
||||
<div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 379px;">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-28.png" style="width: 80px;margin-left: 10px;">
|
||||
<h1 style="font-size: 20px;color: rgb(0,0,0);margin-bottom: 0px;">Resignation of Reserve Director </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 20px;"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
|
||||
</div>
|
||||
<div class="card-body scstyle-15" style="overflow: auto;height: 65vh;">
|
||||
<form>
|
||||
<div style="margin-right: 150px;margin-left: 150px;">
|
||||
<div class="col">
|
||||
<div class="row" style="margin: 0px;">
|
||||
<div class="col-xxl-12" style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<h1 style="font-size: 24px;text-align: center;color: rgb(7,7,7);">Resignation of Reserve Director </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 350px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name of Reserve Director(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 350px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name of Reserve Director(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 350px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">HKID / Passport number</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex" style="margin-right: 80px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Resignation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="background: #F4F7FA;">
|
||||
<div class="container">
|
||||
<div class="row" style="margin-top: 10px;margin-bottom: 10px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Verify documents and identity</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-21.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-22.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Please upload a copy of the following documents</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="address" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="modal-open-1">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-1" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257;margin:20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-1" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="transferee" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months <br>(Transferee)</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="modal-open-2">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-2" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin:20px;" >Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-2" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div style="padding-right: 10px;">
|
||||
<div id="modal-open-3">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h6 style="color: #364257;">Your enquiry submitted successfully</h6>
|
||||
</div>
|
||||
<div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button style="color: white; background: #9B0025; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;" type="button" data-bs-dismiss="modal">Back</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="background: #009B9A; border-top-left-radius: 50px; color: white; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Save as draft</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px; border-style: none;"><a href="{{ route('wave.user.company-secretary.index') }}"><button type="button" style="background: #009B9A; border-top-left-radius: 50px; border-top-right-radius: 50px; color: white; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Leave</button></a></div>
|
||||
<div><a href="{{ route('wave.user.payment-flow.index') }}"><button type="button" style="color: white; background: #9B0025; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Next</button></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@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
|
||||
45
resources/views/themes/tailwind/user/dashboard.blade.php
Normal file
45
resources/views/themes/tailwind/user/dashboard.blade.php
Normal file
@@ -0,0 +1,45 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="dashboard-page">
|
||||
<h2 class="page-title text-center">{{ __("Here's what you can do to get started.") }}</h2>
|
||||
|
||||
<div class="row dashboard-boxes">
|
||||
<div class="col-md-4">
|
||||
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="dashboard-box">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/digital-transformation.png') }}">
|
||||
<span class="box-title">{{ __("Start a new company") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="{{ route('wave.user.book-keeping.packages') }}" class="dashboard-box">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/start-a-new-company.png') }}">
|
||||
<span class="box-title">{{ __("Bookkeeping Service") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="{{ route('settings-main') }}" class="dashboard-box">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/book-keeping-service.png') }}">
|
||||
<span class="box-title">{{ __("Have a question?") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row dashboard-boxes justify-content-center">
|
||||
<div class="col-md-4">
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="dashboard-box">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/have-a-question.png') }}">
|
||||
<span class="box-title">{{ __("Company Secretary Service") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="{{ route('records-digital-transformation') }}" class="dashboard-box">
|
||||
<img class="img-fluid mx-auto" src="{{ asset('themes/tailwind/images/company-secretary-service.png') }}">
|
||||
<span class="box-title">{{ __("Digital Transformation") }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,792 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
@section('style')
|
||||
<style>
|
||||
.custom-radio-checkbox [type="radio"]:checked,
|
||||
.custom-radio-checkbox [type="radio"]:not(:checked),
|
||||
.custom-radio-checkbox [type="checkbox"]:checked,
|
||||
.custom-radio-checkbox [type="checkbox"]:not(:checked) {
|
||||
position: relative;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<input type="hidden" id="company_update_details_url" value="{{ route('company.update.details') }}" >
|
||||
<input type="hidden" id="company_add_member_url" value="{{ route('company.add.member') }}" >
|
||||
<input type="hidden" id="company_delete_member_file_url" value="{{ route('company.delete.member.file') }}" >
|
||||
<div class="general-information-page">
|
||||
<div class="title-wrapper">
|
||||
<h2 class="page-title">General Information</h2>
|
||||
</div>
|
||||
<div class="card-wrapper p-4">
|
||||
<form action="#" class="theme-form" id="general-information-form" >
|
||||
<p class="card-title">Company registration information</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company name(English)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="{{ $company->name_english }}" id="company_name_english" required >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Company name(Chinese)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="{{ $company->name_chinese }}" id="company_name_chinese" required >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Registered office address(English)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="{{ $company->registered_office_address_english }}" id="company_registered_office_address_english" required >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Registered office address(Chinese)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="{{ $company->registered_office_address_chinese }}" id="company_registered_office_address_chinese" required >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">BR number</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="number" class="form-control" value="{{ $company->br_number }}" id="company_br_number" required >
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn blue-btn mx-auto">Save</button>
|
||||
</form>
|
||||
<p class="card-title">Company members</p>
|
||||
<div class="all-members">
|
||||
@foreach($company_members as $member)
|
||||
<div class="mb-5 company-member-box" >
|
||||
<form class="theme-form" >
|
||||
<input type="hidden" class="company_member_id" name="member_id" value="{{ $member->id }}" >
|
||||
<input type="hidden" class="company_document_number" name="document_number" value="none" >
|
||||
<input type="hidden" class="company_city" name="city" value="none" >
|
||||
<div class="title-wrapper">
|
||||
<p class="title">Member <span id="memberCount">1</span> - Natural Person</p>
|
||||
<button type="button" class="btn blue-btn add-new-member">New member</button>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="director" value="director" id="director" name="position" {{ $member->position === 'director' ? 'checked' : '' }} >
|
||||
Directors
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="shareholder" value="shareholder" id="shareholder" name="position" {{ $member->position === 'shareholder' ? 'checked' : '' }} >
|
||||
Shareholder
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="company_secretary" id="company_secretary" value="company_secretary" name="position" {{ $member->position === 'company_secretary' ? 'checked' : '' }} >
|
||||
Company Secretary
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Title</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100 company_member_title" name="title" required>
|
||||
<option value="mr" {{ $member->title === 'mr' ? 'selected' : '' }} >Mr</option>
|
||||
<option value="mrs" {{ $member->title === 'mrs' ? 'selected' : '' }} >Mrs</option>
|
||||
<option value="miss" {{ $member->title === 'miss' ? 'selected' : '' }} >Miss</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Name(English)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_name_english" name="name_english" value="{{ $member->name_english }}" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Name(Chinese)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_name_chinese" name="name_chinese" value="{{ $member->name_chinese }}" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Contact number</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="number" class="form-control" name="phone" value="{{ $member->phone }}" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Email</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="email" class="form-control member_email" name="email" value="{{ $member->email }}" required >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Date of Birth</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="date-field-wrapper">
|
||||
<input type="text" class="form-control text-center member_year_date" name="year_date" value="{{ $member->year_date }}" placeholder="YYYY" maxlength="4" required>
|
||||
<span class="date-field-separator">/</span>
|
||||
<input type="text" class="form-control text-center member_month_date" name="month_date" value="{{ $member->month_date }}" placeholder="MM" maxlength="2" required>
|
||||
<span class="date-field-separator">/</span>
|
||||
<input type="text" class="form-control text-center member_day_date" name="day_date" value="{{ $member->day_date }}" placeholder="DD" maxlength="2" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Type of document</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100 member_document_type" name="document_type" required>
|
||||
<option value="HongKong(HKID)" {{ $member->document_type === 'HongKong(HKID)' ? 'seclected' : '' }} >HongKong(HKID)</option>
|
||||
<option value="Passport" {{ $member->document_type === 'Passport' ? 'seclected' : '' }} >Passport</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">City</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_country" name="country" value="{{ $member->country }}" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Address(English)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_address_english" name="address_english" value="{{ $member->address_english }}" required >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Address(Chinese)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_address_chinese" name="address_chinese" value="{{ $member->address_chinese }}" required >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label pt-0">Copy of document</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="all-copy-of-documents">
|
||||
@foreach($member->documents as $document)
|
||||
<div class="single-copy-of-document data-file-{{ $document->id }} mb-2">
|
||||
<div class="non-empty-state">
|
||||
<span class="file-name blue-text text-underline">{{ $document->filename }}</span>
|
||||
<a href="#" class="delete-file red-text text-underline" data-file-id="{{ $document->id }}" >Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="empty-state">
|
||||
<input type="file" class="upload-document-file" name="document_file" style="display:none;" >
|
||||
<button type="button" class="upload-file sky-blue-text text-underline">Upload</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn blue-btn mx-auto">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endforeach
|
||||
@if($company_members->isEmpty())
|
||||
<div class="mb-5 company-member-box" >
|
||||
<form class="theme-form" >
|
||||
<input type="hidden" class="company_member_id" name="member_id" value="0" >
|
||||
<input type="hidden" class="company_document_number" name="document_number" value="none" >
|
||||
<input type="hidden" class="company_city" name="city" value="none" >
|
||||
<div class="title-wrapper">
|
||||
<p class="title">Member <span id="memberCount">1</span> - Natural Person</p>
|
||||
<button type="button" class="btn blue-btn add-new-member">New member</button>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="director" value="director" id="director" name="position" checked >
|
||||
Directors
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="shareholder" value="shareholder" id="shareholder" name="position" >
|
||||
Shareholder
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="company_secretary" id="company_secretary" value="company_secretary" name="position" >
|
||||
Company Secretary
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Title</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100 company_member_title" name="title" required>
|
||||
<option value="mr" selected>Mr</option>
|
||||
<option value="mrs">Mrs</option>
|
||||
<option value="miss">Miss</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Name(English)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_name_english" name="name_english" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Name(Chinese)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_name_chinese" name="name_chinese" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Contact number</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="number" class="form-control" name="phone" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Email</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="email" class="form-control member_email" name="email" value="" required >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Date of Birth</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="date-field-wrapper">
|
||||
<input type="text" class="form-control text-center member_year_date" name="year_date" placeholder="YYYY" maxlength="4" required>
|
||||
<span class="date-field-separator">/</span>
|
||||
<input type="text" class="form-control text-center member_month_date" name="month_date" placeholder="MM" maxlength="2" required>
|
||||
<span class="date-field-separator">/</span>
|
||||
<input type="text" class="form-control text-center member_day_date" name="day_date" placeholder="DD" maxlength="2" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Type of document</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100 member_document_type" name="document_type" required>
|
||||
<option value="HongKong(HKID)" selected>HongKong(HKID)</option>
|
||||
<option value="Passport">Passport</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">City</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_country" name="country" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Address(English)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_address_english" name="address_english" value="" required >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Address(Chinese)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_address_chinese" name="address_chinese" value="" required >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label pt-0">Copy of document</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="all-copy-of-documents">
|
||||
</div>
|
||||
<div class="empty-state">
|
||||
<input type="file" class="upload-document-file" name="document_file" style="display:none;" >
|
||||
<button type="button" class="upload-file sky-blue-text text-underline">Upload</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn blue-btn mx-auto">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-member mb-5 company-member-box" style="display:none;" >
|
||||
<form class="theme-form" >
|
||||
<input type="hidden" class="company_member_id" name="member_id" value="0" >
|
||||
<input type="hidden" class="company_document_number" name="document_number" value="none" >
|
||||
<input type="hidden" class="company_city" name="city" value="none" >
|
||||
<div class="title-wrapper">
|
||||
<p class="title">Member <span id="memberCount">1</span> - Natural Person</p>
|
||||
<button type="button" class="btn blue-btn add-new-member">New member</button>
|
||||
</div>
|
||||
<div class="body-wrapper">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="director" value="director" name="position" checked >
|
||||
Directors
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="shareholder" value="shareholder" name="position" >
|
||||
Shareholder
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="custom-radio-checkbox">
|
||||
<label>
|
||||
<input type="radio" class="company_secretary" value="company_secretary" name="position" >
|
||||
Company Secretary
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Title</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100 company_member_title" name="title" required>
|
||||
<option value="mr" selected>Mr</option>
|
||||
<option value="mrs">Mrs</option>
|
||||
<option value="miss">Miss</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Name(English)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_name_english" name="name_english" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Name(Chinese)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_name_chinese" name="name_chinese" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Contact number</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="number" class="form-control" name="phone" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Email</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="email" class="form-control member_email" name="email" value="" required >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Date of Birth</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="date-field-wrapper">
|
||||
<input type="text" class="form-control text-center member_year_date" name="year_date" placeholder="YYYY" maxlength="4" required>
|
||||
<span class="date-field-separator">/</span>
|
||||
<input type="text" class="form-control text-center member_month_date" name="month_date" placeholder="MM" maxlength="2" required>
|
||||
<span class="date-field-separator">/</span>
|
||||
<input type="text" class="form-control text-center member_day_date" name="day_date" placeholder="DD" maxlength="2" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Type of document</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100 member_document_type" name="document_type" required>
|
||||
<option value="HongKong(HKID)" selected>HongKong(HKID)</option>
|
||||
<option value="Passport">Passport</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">City</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_country" name="country" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Address(English)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_address_english" name="address_english" value="" required >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Address(Chinese)</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control member_address_chinese" name="address_chinese" value="" required >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label pt-0">Copy of document</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="all-copy-of-documents">
|
||||
</div>
|
||||
<div class="empty-state">
|
||||
<input type="file" class="upload-document-file" name="document_file" style="display:none;" >
|
||||
<button type="button" class="upload-file sky-blue-text text-underline">Upload</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn blue-btn mx-auto">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- Saved Success Modal --}}
|
||||
<div class="modal fade validation-modal style2" id="validationModal1" 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">All changes have been saved!</p>
|
||||
<button type="button" class="btn" data-bs-dismiss="modal">Back</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
var company_update_details_url = $('#company_update_details_url').val();
|
||||
var company_add_member_url = $('#company_add_member_url').val();
|
||||
var company_delete_member_file_url = $('#company_delete_member_file_url').val();
|
||||
var invalidChars = ["-", "e", "+", "E"];
|
||||
|
||||
$("input[type='number']").on("keydown", function(e){
|
||||
if(invalidChars.includes(e.key)){
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
$(document).on('click', '.add-new-member', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var parentWrapper = $(this).parents('.all-members').first();
|
||||
var cloneWrapper = $('.single-member').first().clone();
|
||||
|
||||
cloneWrapper.find('#memberCount').text(parentWrapper.find('.single-member').length + 1);
|
||||
cloneWrapper.find('input[type="text"], input[type="tel"], input[type="number"]').val('');
|
||||
cloneWrapper.find('select').each(function( index ) {
|
||||
$(this).val($(this).find("option:first").val());
|
||||
});
|
||||
cloneWrapper.removeClass('single-member');
|
||||
cloneWrapper.find('.all-copy-of-documents .single-copy-of-document:not(:last-child)').remove();
|
||||
cloneWrapper.show();
|
||||
parentWrapper.append(cloneWrapper);
|
||||
});
|
||||
|
||||
$(document).on('click', '.upload-file', function(){
|
||||
var member_con = $(this).parents('.company-member-box');
|
||||
member_con.find('.upload-document-file').click();
|
||||
});
|
||||
|
||||
$('#general-information-form').submit(function(e){
|
||||
e.preventDefault();
|
||||
updateCompanyDetails();
|
||||
});
|
||||
|
||||
$(document).on('submit', '.company-member-box form', function(e){
|
||||
e.preventDefault();
|
||||
var form_data = new FormData($(this)[0]);
|
||||
var form = $(this);
|
||||
|
||||
$.ajax({
|
||||
url: company_add_member_url,
|
||||
type: 'post',
|
||||
data:form_data,
|
||||
dataType:'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success:function(data){
|
||||
console.log('company-member-box', data);
|
||||
form.find('.company_member_id').val(data.data.id);
|
||||
data.data.documents.forEach(function(file){
|
||||
form.find('.all-copy-of-documents').append(`<div class="single-copy-of-document data-file-${ file.id } mb-2">
|
||||
<div class="non-empty-state">
|
||||
<span class="file-name blue-text text-underline">${ file.filename }</span>
|
||||
<a href="#" class="delete-file red-text text-underline" data-file-id="${ file.id }" >Delete</a>
|
||||
</div>
|
||||
</div>`);
|
||||
});
|
||||
form.find('.upload-document-file').val(null);
|
||||
Swal.fire(
|
||||
'Updated!',
|
||||
data.message,
|
||||
'success'
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-file', function(e){
|
||||
e.preventDefault();
|
||||
var file_id = $(this).attr('data-file-id');
|
||||
Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this file!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#3085d6",
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: "Yes, delete it!"
|
||||
}).then(function(result) {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: company_delete_member_file_url,
|
||||
type: 'post',
|
||||
data:{
|
||||
id:file_id
|
||||
},
|
||||
dataType:'json',
|
||||
success:function(data){
|
||||
$('.data-file-' + file_id).remove();
|
||||
Swal.fire(
|
||||
'Success!',
|
||||
data.message,
|
||||
'success'
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('keypress', '.member_country', function(e){
|
||||
var regex = new RegExp("^[a-zA-Z ]+$");
|
||||
var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
|
||||
if (!regex.test(key)) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('change', '.upload-document-file', function(){
|
||||
$(this).after('<span>' + $(this).val().split(/(\\|\/)/g).pop() + '</span>');
|
||||
});
|
||||
});
|
||||
|
||||
function updateCompanyDetails()
|
||||
{
|
||||
$.ajax({
|
||||
url: company_update_details_url,
|
||||
type: 'post',
|
||||
data:{
|
||||
name_english: $('#company_name_english').val(),
|
||||
name_chinese: $('#company_name_chinese').val(),
|
||||
name_chinese: $('#company_name_chinese').val(),
|
||||
registered_office_address_english: $('#company_registered_office_address_english').val(),
|
||||
registered_office_address_chinese: $('#company_registered_office_address_chinese').val(),
|
||||
registered_office_address_chinese: $('#company_registered_office_address_chinese').val(),
|
||||
br_number: $('#company_br_number').val(),
|
||||
},
|
||||
dataType:'json',
|
||||
success:function(data){
|
||||
Swal.fire(
|
||||
'Updated!',
|
||||
data.message,
|
||||
'success'
|
||||
);
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
345
resources/views/themes/tailwind/user/layouts/app.blade.php
Normal file
345
resources/views/themes/tailwind/user/layouts/app.blade.php
Normal file
@@ -0,0 +1,345 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Route;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
$routeName = Route::currentRouteName();
|
||||
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ app()->getLocale() }}">
|
||||
<head>
|
||||
|
||||
{{-- @if(isset($seo->title))
|
||||
<title>{{ $seo->title }}</title>
|
||||
@else
|
||||
<title>{{ setting('site.title', 'Laravel Wave') . ' - ' . setting('site.description', 'The Software as a Service Starter Kit built on Laravel & Voyager') }}</title>
|
||||
@endif --}}
|
||||
<title>{{ config('app.name', 'Numstation') }}</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- † -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta name="url" content="{{ url('/') }}">
|
||||
|
||||
<link rel="icon" href="{{ setting('site.favicon', '/wave/favicon.png') }}" type="image/x-icon">
|
||||
|
||||
{{-- Social Share Open Graph Meta Tags --}}
|
||||
@if(isset($seo->title) && isset($seo->description) && isset($seo->image))
|
||||
<meta property="og:title" content="{{ $seo->title }}">
|
||||
<meta property="og:url" content="{{ Request::url() }}">
|
||||
<meta property="og:image" content="{{ $seo->image }}">
|
||||
<meta property="og:type" content="@if(isset($seo->type)){{ $seo->type }}@else{{ 'article' }}@endif">
|
||||
<meta property="og:description" content="{{ $seo->description }}">
|
||||
<meta property="og:site_name" content="{{ setting('site.title') }}">
|
||||
|
||||
<meta itemprop="name" content="{{ $seo->title }}">
|
||||
<meta itemprop="description" content="{{ $seo->description }}">
|
||||
<meta itemprop="image" content="{{ $seo->image }}">
|
||||
|
||||
@if(isset($seo->image_w) && isset($seo->image_h))
|
||||
<meta property="og:image:width" content="{{ $seo->image_w }}">
|
||||
<meta property="og:image:height" content="{{ $seo->image_h }}">
|
||||
@endif
|
||||
@endif
|
||||
|
||||
<meta name="robots" content="index,follow">
|
||||
<meta name="googlebot" content="index,follow">
|
||||
|
||||
@if(isset($seo->description))
|
||||
<meta name="description" content="{{ $seo->description }}">
|
||||
@endif
|
||||
|
||||
<!-- Styles -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
|
||||
<link href="{{ asset('themes/' . $theme->folder . '/css/app.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('themes/' . $theme->folder . '/css/dataTable.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('themes/' . $theme->folder . '/css/style.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('themes/' . $theme->folder . '/css/user-dashboard-style.css') }}" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css">
|
||||
@yield('style')
|
||||
|
||||
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/tinymce.min.js') }}"></script>
|
||||
<script>
|
||||
tinymce.init({
|
||||
selector:'.tinymce',
|
||||
menubar: false,
|
||||
toolbar: "undo redo spellcheckdialog | blocks fontsize | bold italic | link image | alignleft aligncenter alignright alignjustify | indent outdent",
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen page-{{ $routeName }} @if(Request::is('/')){{ 'bg-white' }}@else{{ 'bg-gray-50' }}@endif @if(config('wave.dev_bar')){{ 'pb-10' }}@endif">
|
||||
|
||||
<main class="flex-grow overflow-x-hidden">
|
||||
<section class="main-section-dashboard">
|
||||
@include('theme::user.partials.sidebar')
|
||||
<div class="main-content" style="background-image: url({{ asset('themes/tailwind/images/user-dashboard-bg.png') }})">
|
||||
@include('theme::user.partials.navigation')
|
||||
<div class="main-inside-content">
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@if(config('wave.dev_bar'))
|
||||
@include('theme::partials.dev_bar')
|
||||
@endif
|
||||
|
||||
<!-- Full Screen Loader -->
|
||||
<div id="fullscreenLoader" class="fixed inset-0 top-0 left-0 z-50 flex flex-col items-center justify-center hidden w-full h-full bg-gray-900 opacity-50">
|
||||
<svg class="w-5 h-5 mr-3 -ml-1 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<p id="fullscreenLoaderMessage" class="mt-4 text-sm font-medium text-white uppercase"></p>
|
||||
</div>
|
||||
<!-- End Full Loader -->
|
||||
|
||||
{{-- Chat --}}
|
||||
<div class="chat-wrapper">
|
||||
<div class="chat-box-wrapper" style="display:none;">
|
||||
<div class="chat-form-steps" data-step="1" id="formStep1">
|
||||
<div class="chat-form-header">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<img width="46" class="img-fluid" src="{{ asset('themes/tailwind/images/message-2.png') }}">
|
||||
<h2 class="chat-form-title">{{ __("How we can help?") }}</h2>
|
||||
</div>
|
||||
<p class="chat-form-desc">{{ __("Send us a message and we will reply within 10 minutes.") }}</p>
|
||||
</div>
|
||||
<div class="chat-service-list">
|
||||
<div class="chat-service-box change-chat-form-step" data-title="{{ __("Bookkeeping Service") }}" data-service-type="bookkeeping" data-target="2">
|
||||
<img width="28" class="img-fluid chat-service-box-icon" src="{{ asset('themes/tailwind/images/chat-bookkeeping-service.png') }}">
|
||||
<span class="chat-service-box-title">{{ __("Bookkeeping Service") }}</span>
|
||||
<img width="8" class="img-fluid chat-service-box-chevron" src="{{ asset('themes/tailwind/images/chevron-right-green.png') }}">
|
||||
</div>
|
||||
<div class="chat-service-box change-chat-form-step" data-title="{{ __("Company Secretary Service") }}" data-service-type="company_secretary" data-target="2">
|
||||
<img width="28" class="img-fluid chat-service-box-icon" src="{{ asset('themes/tailwind/images/chat-company-secretary.png') }}">
|
||||
<span class="chat-service-box-title">{{ __("Company Secretary Service") }}</span>
|
||||
<img width="8" class="img-fluid chat-service-box-chevron" src="{{ asset('themes/tailwind/images/chevron-right-green.png') }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-form-steps step2" data-step="2" id="formStep2" style="display:none;">
|
||||
<div class="chat-form-header">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center justify-content-center cursor-pointer change-chat-form-step" data-target="1">
|
||||
<img width="8" class="img-fluid" src="{{ asset('themes/tailwind/images/chevron-left.png') }}">
|
||||
<h2 class="chat-form-title"></h2>
|
||||
</div>
|
||||
<img width="40" class="img-fluid" src="{{ asset('themes/tailwind/images/customer-service-img.png') }}">
|
||||
</div>
|
||||
<p class="chat-form-desc">{{ __("Send us a message and we will reply within 10 minutes.") }}</p>
|
||||
</div>
|
||||
<div class="chat-messages-wrapper">
|
||||
<div class="chat-messages-body">
|
||||
{{-- <div class="chat-messages-date">18 August 2022</div>
|
||||
|
||||
<div class="chat-messages-box">
|
||||
<div class="chat-messages-bubble">
|
||||
Hi. I am Logistics Manager at companyA. My Name is Ellen.
|
||||
</div>
|
||||
<div class="chat-messages-timespan">1 day ago</div>
|
||||
</div>
|
||||
<div class="chat-messages-box from-sender">
|
||||
<div class="chat-messages-bubble">
|
||||
Hi Ellen! Thanks for bearing with us. How may we help you?
|
||||
</div>
|
||||
<div class="chat-messages-timespan">1 day ago</div>
|
||||
</div>
|
||||
<div class="chat-messages-box">
|
||||
<div class="chat-messages-bubble">
|
||||
I can't upload my documents successfully
|
||||
</div>
|
||||
<div class="chat-messages-timespan">4:34 pm</div>
|
||||
</div>
|
||||
<div class="chat-messages-box from-sender">
|
||||
<div class="chat-messages-bubble">
|
||||
What type of documents are you uploading?
|
||||
</div>
|
||||
<div class="chat-messages-timespan">4:34 pm</div>
|
||||
</div> --}}
|
||||
</div>
|
||||
<form action="{{ route('wave.user.dashboard.sendChat') }}" class="chat-messages-bottom" id="chatFrm">
|
||||
@csrf
|
||||
<input type="hidden" name="chat_service_type">
|
||||
<div class="chat-messages-input-wrapper">
|
||||
<input type="file" name="chat_message_file" style="display:none;">
|
||||
<img width="15" class="img-fluid upload-file cursor-pointer" src="{{ asset('themes/tailwind/images/camera.png') }}">
|
||||
<textarea name="chat_message" placeholder="{{ __("Type message...") }}" rows="1"></textarea>
|
||||
<img width="15" class="img-fluid" src="{{ asset('themes/tailwind/images/link.png') }}">
|
||||
</div>
|
||||
<button type="submit" class="chat-messages-send">
|
||||
<img width="23" class="img-fluid" src="{{ asset('themes/tailwind/images/send-icon.png') }}">
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-icon-button">
|
||||
<img src="{{ asset('themes/tailwind/images/chat-icon.png') }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@vite(['resources/js/app.js'])
|
||||
@include('theme::partials.toast')
|
||||
@if(session('message'))
|
||||
<script>setTimeout(function(){ popToast("{{ session('message_type') }}", "{{ session('message') }}"); }, 10);</script>
|
||||
@endif
|
||||
@waveCheckout
|
||||
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/jquery.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/dataTable.js') }}"></script>
|
||||
{{-- <script type="module">
|
||||
import Echo from 'https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.15.3/echo.js'
|
||||
import {Pusher} from 'https://js.pusher.com/8.0.1/pusher.min.js'
|
||||
window.Pusher = Pusher;
|
||||
window.Echo = new Echo({
|
||||
broadcaster: 'pusher',
|
||||
key: '{{ env("PUSHER_APP_KEY") }}',
|
||||
cluster: '{{ env("PUSHER_APP_CLUSTER") }}' ?? 'mt1',
|
||||
wsHost: '{{ env("PUSHER_HOST") }}' ? '{{ env("PUSHER_HOST") }}' : `ws-${'{{ env("PUSHER_APP_CLUSTER") }}'}.pusher.com`,
|
||||
wsPort: '{{ env("PUSHER_PORT") }}' ?? 80,
|
||||
wssPort: '{{ env("PUSHER_PORT") }}' ?? 443,
|
||||
forceTLS: ('{{ env("PUSHER_SCHEME") }}' ?? 'https') === 'https',
|
||||
enabledTransports: ['ws', 'wss'],
|
||||
});
|
||||
</script> --}}
|
||||
<script>
|
||||
$(function(e) {
|
||||
$(document).on('click', '.file-upload-wrapper .file-upload-btn', function(e) {
|
||||
$(this).parents('.file-upload-wrapper:first').find('input[type="file"]').trigger('click');
|
||||
});
|
||||
$(document).on('change', '.file-upload-wrapper input[type="file"]', function(e) {
|
||||
$(this).parents('.file-upload-wrapper:first').find('.file-upload-desc').hide();
|
||||
if ($(this)[0].files.length) {
|
||||
$(this).parents('.file-upload-wrapper:first').find('.file-upload-desc.with-value').text($(this)[0].files[0].name).show();
|
||||
}
|
||||
else {
|
||||
$(this).parents('.file-upload-wrapper:first').find('.file-upload-desc.empty-state').show();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// Chat
|
||||
window.Echo.channel(`chat-channel`).listen("ChatEvent", (e) => {
|
||||
if ($('.chat-wrapper .chat-box-wrapper').is(':visible') && $('.chat-box-wrapper .chat-messages-body[data-id="' + e.chatId + '"]').length > 0 && e.userId == '{{ auth()->user()->id }}') {
|
||||
var serviceType = $('.chat-box-wrapper .chat-messages-body[data-id="' + e.chatId + '"]').attr('data-service-type');
|
||||
getMessages(serviceType);
|
||||
}
|
||||
});
|
||||
$('.chat-icon-button').click(function() {
|
||||
if ($('.chat-wrapper .chat-box-wrapper').is(':visible')) {
|
||||
$('.chat-wrapper .chat-box-wrapper').hide();
|
||||
}
|
||||
else {
|
||||
$('.chat-wrapper .chat-box-wrapper').show();
|
||||
}
|
||||
});
|
||||
$('.change-chat-form-step').click(function() {
|
||||
var target = $(this).attr('data-target');
|
||||
var serviceType = $(this).attr('data-service-type');
|
||||
var currentStep = $('.chat-form-steps:visible').first().attr('id');
|
||||
|
||||
if (currentStep == 'formStep1') {
|
||||
var title = $(this).attr('data-title');
|
||||
$('.chat-form-steps[data-step="' + target + '"] .chat-form-title').text(title);
|
||||
$('#chatFrm input[name="chat_service_type"]').val(serviceType);
|
||||
$('.chat-box-wrapper .chat-messages-body').attr('data-service-type', serviceType);
|
||||
getMessages(serviceType);
|
||||
}
|
||||
|
||||
$('.chat-form-steps').hide();
|
||||
$('.chat-form-steps[data-step="' + target + '"]').show();
|
||||
});
|
||||
$(document).on( 'keyup', '#chatFrm textarea', function (){
|
||||
$(this).height( 0 );
|
||||
$(this).height( this.scrollHeight - 12 );
|
||||
}).keypress(function (e) {
|
||||
if(e.which === 13 && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
|
||||
$('#chatFrm').submit();
|
||||
}
|
||||
});
|
||||
$(document).on('click', '#chatFrm .upload-file', function(e) {
|
||||
$('#chatFrm input[name="chat_message_file"]').click();
|
||||
});
|
||||
$(document).on('change', '#chatFrm input[name="chat_message_file"]', function(e) {
|
||||
if ($(this).val()) {
|
||||
$('#chatFrm').submit();
|
||||
}
|
||||
});
|
||||
$('#chatFrm').submit(function(e) {
|
||||
e.preventDefault();
|
||||
var action = $(this).attr('action');
|
||||
var button = $(this).find('button[type="submit"]');
|
||||
var data = new FormData(this);
|
||||
|
||||
if (!button.is(':disabled') && action && ($('#chatFrm [name="chat_message"]').val() != '' || $('#chatFrm [name="chat_message_file"]').val() != '')) {
|
||||
button.attr('disabled', 'disabled');
|
||||
$('#chatFrm [name="chat_message"]').val('');
|
||||
|
||||
$.ajax({
|
||||
url: action,
|
||||
type: "post",
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success:function(data) {
|
||||
button.removeAttr('disabled');
|
||||
getMessages($('#chatFrm input[name="chat_service_type"]').val());
|
||||
},
|
||||
error: function(data) {
|
||||
var errors = data.responseJSON.errors;
|
||||
$.each(errors, function(index, error) {
|
||||
popToast('danger', errors[0]);
|
||||
return false;
|
||||
});
|
||||
|
||||
button.removeAttr('disabled');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
function getMessages(serviceType) {
|
||||
var url = "{{ route('wave.user.dashboard.getChatMessages', [':serviceType']) }}";
|
||||
url = url.replace(":serviceType", serviceType);
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: "get",
|
||||
dataType: 'json',
|
||||
success:function(response) {
|
||||
var data = response.data;
|
||||
var html = '';
|
||||
|
||||
data.forEach(function(item) {
|
||||
html += '<div class="chat-messages-date">' + item.date + '</div>';
|
||||
item.messages.forEach(function(message) {
|
||||
html += `
|
||||
<div class="chat-messages-box ` + (message.is_own_message ? '' : 'from-sender') + `">
|
||||
<div class="chat-messages-bubble">
|
||||
` + message.message + `
|
||||
</div>
|
||||
<div class="chat-messages-timespan">` + message.elapsed_time + `</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
});
|
||||
|
||||
$('.chat-box-wrapper .chat-messages-body').attr('data-id', response.chat_id);
|
||||
$('.chat-box-wrapper .chat-messages-body').html(html);
|
||||
$('.chat-box-wrapper .chat-messages-body').scrollTop($('.chat-box-wrapper .chat-messages-body')[0].scrollHeight);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@yield('script')
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,100 @@
|
||||
<div class="main-dashboard-navigation">
|
||||
<div class="main-dashboard-title">
|
||||
<h1 class="h2-title black">{{ __("Hi, :Name Welcome back!", ['name' => auth()->user()->name]) }}</h1>
|
||||
</div>
|
||||
<div class="main-dashboard-buttons">
|
||||
<ul>
|
||||
<li class="has-dropdown">
|
||||
@php
|
||||
$company_list = getUserCompanies();
|
||||
$company_detail = getCompanyDetails(auth()->user()->company_id);
|
||||
@endphp
|
||||
<a href="#" class="with-dropdown"><img src="{{ asset('themes/tailwind/images/sample-company.png') }}">{{ $company_detail ? $company_detail->name : 'Company Name' }}</a>
|
||||
<ul class="dropdown user-selection">
|
||||
@foreach($company_list as $company)
|
||||
<li class="{{ auth()->user()->admin_active_company_id === $company->id ? 'active' : '' }}"><a class="" href="{{ route('cms.change-active-company', [$company->id]) }}"><img src="{{ asset('themes/tailwind/images/sample-company.png') }}"> {{ $company->name ?? 'Company Name' }}</a></li>
|
||||
@endforeach
|
||||
<li>
|
||||
<div class="user-selection__buttons">
|
||||
<button class="btn rounded-btn" type="button">{{ __("Add account") }}</button>
|
||||
<a href="{{ route('wave.logout') }}" class="btn rounded-btn btn-error" >{{ __("Log out this account") }}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-dropdown">
|
||||
<a href="#" class="with-dropdown"><img src="{{ asset('themes/tailwind/images/language-black.png') }}"> {{ strtoupper(app()->getLocale()) }}</a>
|
||||
<ul class="dropdown user-selection">
|
||||
@foreach(config('app.available_locales') as $available_locale => $locale_name)
|
||||
<li class="{{ $available_locale === app()->getLocale() ? 'active' : '' }}"><a class="change-language" href="{{ route('language', [$available_locale]) }}">{{ $locale_name }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
<li class="has-dropdown">
|
||||
<a href=""><img src="{{ asset('themes/tailwind/images/notification-black.png') }}"></a>
|
||||
<ul class="dropdown notification-selection">
|
||||
<h3 class="dropdown-title">{{ __("Notification") }}</h3>
|
||||
<div class="dropdown-list-item">
|
||||
<div class="dropdown-sidetext">
|
||||
<h4 class="dropdown-subtitle">{{ __("Service Chat") }}</h4>
|
||||
</div>
|
||||
<ul class="dropdown-list">
|
||||
<li class="w-100">
|
||||
<div class="item-list">
|
||||
<img src="{{ asset('themes/tailwind/images/message-icon.png') }}">
|
||||
<span class="w-100">{{ __("You got a new reply!") }}</span>
|
||||
<a href="#">{{ __("Check") }}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-list-item">
|
||||
<div class="dropdown-sidetext">
|
||||
<h4 class="dropdown-subtitle">{{ __("Bookkeeping Queue") }}</h4>
|
||||
</div>
|
||||
<ul class="dropdown-list">
|
||||
<li class="w-100">
|
||||
<div class="item-list">
|
||||
<img src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="w-100">ABC Ltd_202301Bank statement_... <i class="success item-list-note font-bold">{{ __("Entry Completed") }}</i></span>
|
||||
<a href="#">{{ __("Check") }}</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="w-100">
|
||||
<div class="item-list">
|
||||
<img src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="w-100">CED Ltd_202301Bank statement_... <i class="success item-list-note font-bold">{{ __("Entry Completed") }}</i></span>
|
||||
<a href="#">{{ __("Check") }}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-list-item">
|
||||
<div class="dropdown-sidetext">
|
||||
<h4 class="dropdown-subtitle">{{ __("Com Sec Service Queue") }}</h4>
|
||||
</div>
|
||||
<ul class="dropdown-list">
|
||||
<li class="w-100">
|
||||
<div class="item-list">
|
||||
<img src="{{ asset('themes/tailwind/images/jpg.svg') }}">
|
||||
<span class="w-100">Copy of Lee HKID <i class="item-list-note success font-bold">{{ __("Entry Completed") }}</i></span>
|
||||
<a href="#">{{ __("Check") }}</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="w-100">
|
||||
<div class="item-list">
|
||||
<img src="{{ asset('themes/tailwind/images/pdf.svg') }}">
|
||||
<span class="w-100">Copy of DCE Ltd.CI <i class="failed item-list-note font-bold">{{ __("Failed") }}</i></span>
|
||||
<a href="#">{{ __("Check") }}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ route('settings-main') }}"><img src="{{ asset('themes/tailwind/images/setting-black.png') }}"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
<?php
|
||||
$routeName = Route::currentRouteName();
|
||||
?>
|
||||
<div class="main-sidebar">
|
||||
<div class="sidebar-head">
|
||||
<a href=""><img src="{{ asset('themes/tailwind/images/logo-square.svg') }}"></a>
|
||||
</div>
|
||||
<ul class="sidebar-list-navigation">
|
||||
<li class="<?= ($routeName == 'wave.user.dashboard' ? 'active' : ''); ?>">
|
||||
<a href="{{ route('wave.user.dashboard') }}"><img src="{{ asset('themes/tailwind/images/user-sidebar-icon-1.png') }}"></a>
|
||||
</li>
|
||||
<li class="<?= ($routeName == 'wave.user.general-information' ? 'active' : ''); ?>">
|
||||
<a href="{{ route('wave.user.general-information') }}"><img src="{{ asset('themes/tailwind/images/user-sidebar-icon-2.png') }}"></a>
|
||||
</li>
|
||||
<li class="<?= ($routeName == 'wave.user.user-management' ? 'active' : ''); ?>">
|
||||
<a href="{{ route('wave.user.user-management') }}"><img src="{{ asset('themes/tailwind/images/user-sidebar-icon-3.png') }}"></a>
|
||||
</li>
|
||||
<li class="<?= ($routeName == 'wave.user.book-keeping.account-overview' || $routeName == 'wave.user.book-keeping.list' || $routeName == 'wave.user.book-keeping.document-library' || $routeName == 'wave.user.book-keeping.packages' || $routeName == 'wave.user.book-keeping.checkout' || $routeName == 'wave.user.book-keeping.checkout-payment-success' ? 'active' : ''); ?>">
|
||||
<a href="{{ route('wave.user.book-keeping.account-overview') }}"><img src="{{ asset('themes/tailwind/images/user-sidebar-icon-4.png') }}"></a>
|
||||
</li>
|
||||
<li class="<?= ($routeName == 'wave.user.company-secretary.index' || $routeName == 'wave.user.company-secretary.limited-company' || $routeName == 'wave.user.company-secretary.change-director' || $routeName == 'wave.user.company-secretary.change-particulars' || $routeName == 'wave.user.company-secretary.change-secretary' || $routeName == 'wave.user.company-secretary.resignation' || $routeName == 'wave.user.payment-flow.index' || $routeName == 'wave.user.payment-flow.cart-summary' || $routeName == 'wave.user.payment-flow.payment-success' || $routeName == 'wave.user.company-secretary.checkout' || $routeName == 'wave.user.company-secretary.checkout-payment-success' || $routeName == 'wave.user.company-secretary.checkout-payment-failed' ? 'active' : ''); ?>">
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}"><img src="{{ asset('themes/tailwind/images/user-sidebar-icon-5.png') }}"></a>
|
||||
</li>
|
||||
<li class="{{ $routeName == 'account-my-account' ? 'active' : '' }}">
|
||||
<a href="{{ route('account-my-account') }}"><img src="{{ asset('themes/tailwind/images/user-sidebar-icon-6.png') }}"></a>
|
||||
</li>
|
||||
<li class="{{ $routeName == 'wave.user.terms-and-condition' ? 'active' : '' }}">
|
||||
<a href="{{ route('wave.user.terms-and-condition') }}"><img src="{{ asset('themes/tailwind/images/user-sidebar-icon-7.png') }}"></a>
|
||||
</li>
|
||||
<li class="{{ $routeName == 'wave.user.privacy-policy' ? 'active' : '' }}">
|
||||
<a href="{{ route('wave.user.privacy-policy') }}"><img src="{{ asset('themes/tailwind/images/user-sidebar-icon-8.png') }}"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,155 @@
|
||||
@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
|
||||
@@ -0,0 +1,95 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
|
||||
<div class="bk-checkout-page">
|
||||
<div class="card-wrapper">
|
||||
<div class="card-title-wrapper d-flex justify-content-end align-items-center">
|
||||
<div>
|
||||
<svg width="100" height="26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="13" cy="13" r="12" fill="#F3CF5D" stroke="#F3CF5D" stroke-width="1.5"/>
|
||||
<circle cx="13" cy="13" r="7" fill="white"/>
|
||||
<circle cx="87" cy="13" r="12" fill="#F4F7FA" stroke="#F4F7FA" stroke-width="1.5"/>
|
||||
<path d="M35 13H64" stroke="#F4F7FA" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-body mx-auto">
|
||||
<form action="#" class="theme-form">
|
||||
<p class="card-body-title">Company Secretary subscription packages</p>
|
||||
|
||||
<div class="bk-packages-page" style="width: 100%; margin: 0 auto;">
|
||||
<div class="row package-list">
|
||||
<div class="col-md-12 flex justify-center">
|
||||
<div class="package-box" style="width: 70%;">
|
||||
<div class="package-box-header">
|
||||
<h3 class="header-title">Company Secretary service</h3>
|
||||
<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 class="package-box-price" style="width: 40%; margin-left: 30%;">
|
||||
<div class="package-box-price-inner" data-price-type="annually">HK<span class="bigger-text">$4,600</span></div>
|
||||
<div class="package-box-price-inner" data-price-type="monthly" style="display: none;">HK<span class="bigger-text">$422</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="package-box-body" style="text-align: center; align-self: center;">
|
||||
<span class="package-box-body-title">Service include</span>
|
||||
<ul class="package-box-body-list">
|
||||
<li>Corporate Secretary essentials</li>
|
||||
<li>Personal support by your Corporate Secretary via chat</li>
|
||||
<li>Annual General Meeting papers</li>
|
||||
<li>Annual Returns Filing</li>
|
||||
<li>Forever free documents e‑storage</li>
|
||||
<li>Automated and timely reminders on filing deadlines</li>
|
||||
<li>Online shares distribution management & capital table</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>
|
||||
</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.cart-summary') }}" class="btn blue-btn py-20">Checkout</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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
|
||||
@@ -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$422</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.payment-flow.cart-summary') }}" 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,14 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
<div class="flex flex-col py-20 px-10 sm:px-6 lg:px-8 min-h-screen main-wrapper terms-and-condition-page" style="background: transparent;">
|
||||
<div class="mx-auto page-title-wrapper">
|
||||
<h3 class="page-title">Privacy Policy</h3>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto box-wrapper">
|
||||
{!! $siteSetting ? $siteSetting->privacy_policy : '' !!}
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,15 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="flex flex-col py-20 px-10 sm:px-6 lg:px-8 min-h-screen main-wrapper terms-and-condition-page" style="background: transparent;">
|
||||
<div class="mx-auto page-title-wrapper">
|
||||
<h3 class="page-title">Terms and Conditions</h3>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto box-wrapper">
|
||||
{!! $siteSetting ? $siteSetting->terms_and_conditions : '' !!}
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
545
resources/views/themes/tailwind/user/user-management.blade.php
Normal file
545
resources/views/themes/tailwind/user/user-management.blade.php
Normal file
@@ -0,0 +1,545 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="user-management-page">
|
||||
<div class="title-wrapper">
|
||||
<h2 class="page-title">{{ __("User") }}</h2>
|
||||
<button type="button" class="btn blue-btn" data-bs-toggle="modal" data-bs-target="#newUserModal">{{ __("New user") }}</button>
|
||||
</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="#userList">
|
||||
<img src="{{ asset('themes/tailwind/images/user-icon.png') }}">
|
||||
{{ __("User List") }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#userAccessRight">
|
||||
<img src="{{ asset('themes/tailwind/images/security-safe.png') }}">
|
||||
{{ __("User Access Right") }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#accessLog">
|
||||
<img src="{{ asset('themes/tailwind/images/access-log-icon.png') }}">
|
||||
{{ __("Access Log") }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="userList">
|
||||
<div class="table-responsive">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">{{ __("First name") }}</th>
|
||||
<th scope="col">{{ __("Last name") }}</th>
|
||||
<th scope="col">{{ __("User email") }}</th>
|
||||
<th scope="col">{{ __("User role") }}</th>
|
||||
<th scope="col">{{ __("Status") }}</th>
|
||||
<th scope="col">{{ __("Action") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($company_users as $user)
|
||||
<tr>
|
||||
<td>{{ $user->first_name }}</td>
|
||||
<td>{{ $user->last_name }}</td>
|
||||
<td>{{ $user->email }}</td>
|
||||
<td>{{ $user->userRole->display_name }}</td>
|
||||
<td><span class="green-text">{{ $user->status }}</span></td>
|
||||
<td>
|
||||
<input type="hidden" id="user-{{ $user->id }}-details" value="{{ json_encode($user) }}" >
|
||||
<div class="table-actions">
|
||||
<!-- <a href="#" class="action-btn text-underline sky-blue-text" data-bs-toggle="modal" data-bs-target="#userDetailsModal">View</a>
|
||||
<span class="action-separator">|</span> -->
|
||||
<a href="#" class="action-btn text-underline sky-blue-text btn-edit-user" data-user-id="{{ $user->id }}" data-bs-toggle="modal" data-bs-target="#userDetailsModal" >{{ __("Edit") }}</a>
|
||||
<span class="action-separator">|</span>
|
||||
<a href="#" class="action-btn text-underline red-text btn-delete-user" data-user-id="{{ $user->id }}" >{{ __("Archive") }}</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="userAccessRight">
|
||||
<div class="table-responsive">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">{{ __("Access right") }}</th>
|
||||
@foreach($roles as $role)
|
||||
<th scope="col">{{ $role->display_name }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($permission_group as $group)
|
||||
<tr style="background: #F4F7FA;">
|
||||
<td colspan="5" class="fw-600">{{ $group->name }}</td>
|
||||
</tr>
|
||||
@foreach($group->permissions as $permission)
|
||||
<tr>
|
||||
<td>{{ $permission->display_name }}</td>
|
||||
@foreach($roles as $role)
|
||||
<td>
|
||||
<div class="custom-radio-checkbox">
|
||||
<input type="checkbox" id="checkbox-{{ $permission->id }}-{{ $role->id }}" class="update_permission" value="" data-permission-id="{{ $permission->id }}" data-role-id="{{ $role->id }}" {{ checkRoleHasPermission($permission->id, $role->id) ? 'checked' : '' }} >
|
||||
<label for="checkbox-{{ $permission->id }}-{{ $role->id }}">
|
||||
</label>
|
||||
</div>
|
||||
</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="accessLog">
|
||||
<div class="table-responsive">
|
||||
<table class="table custom-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">{{ __("User email") }}</th>
|
||||
<th scope="col">{{ __("Date") }}</th>
|
||||
<th scope="col">{{ __("Time") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($user_logs as $log)
|
||||
<tr>
|
||||
<td>{{ $log->description }}</td>
|
||||
<td>{{ explode(' ', $log->created_at)[0] }}</td>
|
||||
<td>{{ explode(' ', $log->created_at)[1] }}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Add User Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="newUserModal" tabindex="-1" aria-labelledby="newUserModalLabel" 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">{{ __("New User") }}</p>
|
||||
<div id="create_user_error" ></div>
|
||||
<form id="form_create_user" action="{{ route('wave.management.create.user') }}" method="POST" class="theme-form" >
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 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" name="first_name" id="create_first_name" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("New Password") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="password-wrapper">
|
||||
<input type="password" class="form-control" name="password" id="create_password" value="" autocomplete="off" required>
|
||||
<img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Current Password</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="password" class="form-control" name="create_password" id="create_password" value="">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 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" name="last_name" id="create_last_name" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Confirm Password") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="password-wrapper">
|
||||
<input type="password" class="form-control" name="confirm_password" id="create_confirm_password" value="" required>
|
||||
<img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Phone") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" name="phone" id="create_phone" value="" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Email") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="email" class="form-control" name="email" id="create_email" value="" autocomplete="off" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Role") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="role_id" id="create_role" required>
|
||||
<option value="" selected>-- {{ __("Select Role") }} --</option>
|
||||
@foreach($roles as $role)
|
||||
<option value="{{ $role->id }}" >{{ $role->display_name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Status") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="status" id="create_status" required>
|
||||
<option value="active" selected>{{ __("Active") }}</option>
|
||||
<option value="inactive">{{ __("Inactive") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn blue-btn mx-3">{{ __("Save") }}</button>
|
||||
<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('wave.management.delete.user') }}" id="user_delete_form" >
|
||||
<input type="hidden" name="user_id" id="delete_user_id" value="" >
|
||||
</form>
|
||||
|
||||
{{-- User Detail Modal --}}
|
||||
<div class="modal fade custom-modal style2" id="userDetailsModal" tabindex="-1" aria-labelledby="userDetailsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content mx-auto">
|
||||
<div class="modal-body p-0">
|
||||
<p class="modal-title">{{ __("User Detail") }}</p>
|
||||
<div id="update_user_error" ></div>
|
||||
<form action="{{ route('wave.management.update.user') }}" id="update_user_form" class="theme-form">
|
||||
<input type="hidden" name="user_id" id="update_user_id" value="" >
|
||||
<div class="row mb-4 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="" name="first_name" id="update_first_name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 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="" name="last_name" id="update_last_name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 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="" name="phone" id="update_phone" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 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="" name="email" id="update_email" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Password") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="password" class="form-control" value="" name="password" id="update_password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Confirm Password") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="password" class="form-control" value="" name="confirm_password" id="update_confirm_password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">{{ __("Role") }}</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="w-100" name="role_id" id="update_role_id" required>
|
||||
<option value="" selected>-- {{ __("Select Role") }} --</option>
|
||||
@foreach($roles as $role)
|
||||
<option value="{{ $role->id }}" >{{ $role->display_name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</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">
|
||||
<select class="w-100" name="status" id="update_status" required>
|
||||
<option value="active" selected>{{ __("Active") }}</option>
|
||||
<option value="inactive">{{ __("Inactive") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button type="submit" class="btn blue-btn mx-3">{{ __("Update") }}</button>
|
||||
<button type="button" class="btn red-btn" data-bs-dismiss="modal">{{ __("Back") }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="add_permission_role_url" value="{{ route('user.role.add-permission') }}" >
|
||||
<input type="hidden" id="remove_permission_role_url" value="{{ route('user.role.remove-permission') }}" >
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
var add_permission_role_url = $('#add_permission_role_url').val();
|
||||
var remove_permission_role_url = $('#remove_permission_role_url').val();
|
||||
$('.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('submit', '#form_create_user', function(e){
|
||||
e.preventDefault();
|
||||
$('#create_user_error').html('');
|
||||
if ($('#create_password').val() != $('#create_confirm_password').val()) {
|
||||
$('#create_user_error').html('<div class="alert alert-danger" role="alert">Password didint match!</div>');
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: $(this).attr('action'),
|
||||
type: 'post',
|
||||
data: $(this).serialize(),
|
||||
dataType:'json',
|
||||
success:function(response) {
|
||||
console.log('response', response);
|
||||
if (response.success) {
|
||||
$('#create_user_error').html(`<div class="alert alert-success" role="alert">${response.message}</div>`);
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
error:function(err) {
|
||||
var error = err.responseJSON;
|
||||
$('#create_user_error').html(`<div class="alert alert-danger" role="alert">${error.message}</div>`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.btn-edit-user', function(e){
|
||||
e.preventDefault();
|
||||
let user_id = $(this).attr('data-user-id');
|
||||
let user_data = $('#user-' + user_id + '-details').val();
|
||||
user_data = JSON.parse(user_data);
|
||||
|
||||
$('#update_user_error').html('');
|
||||
$('#update_first_name').val(user_data.first_name);
|
||||
$('#update_last_name').val(user_data.last_name);
|
||||
$('#update_phone').val(user_data.phone);
|
||||
$('#update_email').val(user_data.email);
|
||||
$('#update_role_id').val(user_data.role_id);
|
||||
$('#update_status').val(user_data.status);
|
||||
$('#update_user_id').val(user_data.id);
|
||||
});
|
||||
|
||||
$(document).on('submit', '#update_user_form', function(e){
|
||||
e.preventDefault();
|
||||
let password = $('#update_password').val();
|
||||
let confirm_password = $('#update_confirm_password').val();
|
||||
|
||||
if (password != '' && confirm_password != '') {
|
||||
if (passowrd != confirm_passowrd) {
|
||||
$('#update_user_error').html(`<div class="alert alert-danger" role="alert">Password didint match!</div>`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: $(this).attr('action'),
|
||||
type: 'post',
|
||||
data: $(this).serialize(),
|
||||
dataType:'json',
|
||||
success:function(response) {
|
||||
if (response.success) {
|
||||
$('#update_user_error').html(`<div class="alert alert-success" role="alert">${response.message}</div>`);
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 2000);
|
||||
} else {
|
||||
$('#update_user_error').html(`<div class="alert alert-danger" role="alert">${response.message}</div>`);
|
||||
}
|
||||
},
|
||||
error:function(err) {
|
||||
var error = err.responseJSON;
|
||||
$('#update_user_error').html(`<div class="alert alert-danger" role="alert">${error.message}</div>`);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$(document).on('click', '.btn-delete-user', function(e){
|
||||
e.preventDefault();
|
||||
let user_id = $(this).attr('data-user-id');
|
||||
|
||||
$('#delete_user_id').val(user_id);
|
||||
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, delete it!'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
$.ajax({
|
||||
url: $('#user_delete_form').attr('action'),
|
||||
type: 'post',
|
||||
data: $('#user_delete_form').serialize(),
|
||||
dataType:'json',
|
||||
success:function(response) {
|
||||
if (response.success) {
|
||||
Swal.fire(
|
||||
'Deleted!',
|
||||
response.message,
|
||||
'success'
|
||||
);
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
error:function(err) {
|
||||
var error = err.responseJSON;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.update_permission', function(){
|
||||
var permission_id = $(this).attr('data-permission-id');
|
||||
var role_id = $(this).attr('data-role-id');
|
||||
|
||||
console.log('permission_id', permission_id);
|
||||
console.log('role_id', role_id);
|
||||
|
||||
if ($(this).prop('checked')) {
|
||||
$.ajax({
|
||||
url: add_permission_role_url,
|
||||
type: 'post',
|
||||
data: {
|
||||
permission_id: permission_id,
|
||||
role_id: role_id,
|
||||
},
|
||||
dataType:'json',
|
||||
success:function(response) {
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$.ajax({
|
||||
url: remove_permission_role_url,
|
||||
type: 'post',
|
||||
data: {
|
||||
permission_id: permission_id,
|
||||
role_id: role_id,
|
||||
},
|
||||
dataType:'json',
|
||||
success:function(response) {
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user