@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