Chillweb/numstation-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
9f89a732d6bf4f246656d610c2539db668664201
numstation-web/resources/views/themes/tailwind/user/general-information.blade.php
benjibennn 9f89a732d6 first commit
2023-12-22 12:35:55 +08:00

793 lines
28 KiB
PHP
Raw Blame History

@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
Reference in New Issue View Git Blame Copy Permalink