@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