first commit

This commit is contained in:
benjibennn
2023-12-22 12:35:55 +08:00
commit 9f89a732d6
872 changed files with 156291 additions and 0 deletions

View File

@@ -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(&quot;http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png&quot;) 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&nbsp;<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(&quot;http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png&quot;) 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&nbsp;<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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</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&nbsp;<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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</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

View File

@@ -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

View File

@@ -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(&quot;http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png&quot;) 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&nbsp;<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(&quot;http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png&quot;) 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&nbsp;<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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</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&nbsp;<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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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(&quot;http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png&quot;) 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&nbsp;<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(&quot;http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png&quot;) 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&nbsp;<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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</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&nbsp;<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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</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