      <div class="modal fade" id="approve-Modal<?= htmlentities($user_session); ?>">
          <div class="modal-dialog modal-sm">
              <div class="modal-content">
                  <div class="modal-header">
                      <h4 class="modal-title">Approve SAP Form</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
              <div class="modal-body">
                <div id="msg-approve"></div>  
                <form method="POST">
                  <div class="form-group">
                    <label>SAP Form #:</label>
                    <input type="text" id="edit_sapformno" alt="sapform_no" class="form-control">
                  </div>
                  <div class="form-group">
                    <label>Purpose:</label>
                    <input type="text" id="edit_purpose" alt="purpose" class="form-control">
                  </div>
<!--                     <div class="form-group">
                    <label>OR Number:</label>
                    <input type="text" id="purpose" alt="purpose" class="form-control">
                  </div> -->
                <div class="form-group">
                    <label>Financial Service Provider:</label>
                    <input type="text" id="edit_totalmembersofthefamily" alt="financial_serviceprovider" class="form-control">
                  </div>
                </div>
                  <div class="modal-footer justify-content-between">
                      <input type="hidden" alt="recordedBy" id="recordedBy" value="<?= htmlentities($user_session); ?>">
                      <input type="hidden" alt="sapform_id" id="edit_sapformid" >
                       <input type="hidden" alt="edit_fullname" id="edit_fullname" >
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary" id="edit-approve">Approve</button>
                  </div>
                  </form>
              </div>
          </div>
      </div>
            <script>
          document.addEventListener('DOMContentLoaded', () => {
              let btn = document.querySelector('#edit-approve');
              btn.addEventListener('click', () => {

                 const sapform_no = document.querySelector('input[id=edit_sapformno]').value;
                 const purpose = document.querySelector('input[id=edit_purpose]').value;
                 const financial_serviceprovider = document.querySelector('input[id=edit_totalmembersofthefamily]').value;
                 const recordedBy = document.querySelector('input[id=recordedBy]').value;
                 const full_name = document.querySelector('input[id=edit_fullname]').value;
                 const sapform_id = document.querySelector('input[id=edit_sapformid]').value;


                  var data = new FormData(this.form);
                  
                  data.append('sapform_no', sapform_no);
                  data.append('purpose', purpose);
                  data.append('financial_serviceprovider', financial_serviceprovider);
                  data.append('recordedBy', recordedBy);
                  data.append('full_name', full_name);
                  data.append('sapform_id', sapform_id);
       

                  if (sapform_no == '') {
                      $('#msg-approve').html("<div class='alert alert-danger'><i class='fa fa-info'></i> Please input required field!</div>");
                  } else {
                      $.ajax({
                          url: '../controllers/approve_sapform.php',
                          type: "POST",
                          data: data,
                          processData: false,
                          contentType: false,

                          async: false,
                          cache: false,

                          success: function(data) {
                              $('#msg-approve').html(data);

                          },
                          error: function(data) {
                              console.log("Failed");
                          }
                      });
                  }

              });
          });
      </script>
