@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