@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