      <div class="modal fade" id="add-official<?= htmlentities($user_session); ?>">
          <div class="modal-dialog modal-sm">
              <div class="modal-content">
                  <div class="modal-header">
                      <h4 class="modal-title">Manage Official</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-official"></div>
                    <form method="POST">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Full Name:</label>
                                    <input class="form-control input-sm" type="text" id="full_name" alt="full_name" placeholder="Lastname, Firstname Middlename"/>
                                </div>
                                 <div class="form-group">
                                    <label>Positions:</label>
                                    <select id="position" alt="position" class="form-control">
                                        <option selected="" disabled="">-- Select Positions -- </option>
                                        <option value="Punong Barangay">Punong Barangay</option>
                                        <option value="Chairman, Committee on Education and Agriculture">Chairman, Committee on Education and Agriculture</option>
                                        <option value="Chairman, Committee on infrastructure">Chairman, Committee on infrastructure</option>
                                        <option value="Chairman, Committee on Appropriation, Woman and Family, VAWC">Chairman, Committee on Appropriation, Woman and Family, VAWC</option>
                                        <option value="Chairman, Committee on Peace & Order">Chairman, Committee on Peace & Order</option>
                                        <option value="Chairman, Committee on Social Services & Human Right">Chairman, Committee on Social Services & Human Right</option>
                                        <option value="Chairman, Committee on Solid Waste, Vice-Chairman of Peace & Order">Chairman, Committee on Solid Waste, Vice-Chairman of Peace & Order</option>
                                        <option value="Chairman, Committee on Health & Sanitation">Chairman, Committee on Health & Sanitation</option>
                                        <option value="SK Chairperson">SK Chairperson</option>
                                        <option value="Barangay Secretary">Barangay Secretary</option>
                                        <option value="Barangay Treasurer">Barangay Treasurer</option>
                                        <option value="Barangay Administrative Assistant">Barangay Administrative Assistant</option>
                                        <option value="Barangay Clerk">Barangay Clerk</option>
                                    </select>
                                </div>
     <!--                            <div class="form-group">
                                    <label>Contact #:</label>
                                    <input name="txt_contact" class="form-control input-sm" type="number" placeholder="Contact #"/>
                                </div>
                                <div class="form-group">
                                    <label>Address:</label>
                                    <input name="txt_address" class="form-control input-sm" type="text" placeholder="Address"/>
                                </div>
                                <div class="form-group">
                                    <label>Start Term:</label>
                                    <input id="txt_sterm" name="txt_sterm" class="form-control input-sm" type="date" placeholder="Start Term"/>
                                </div>
                                <div class="form-group">
                                    <label>End Term:</label>
                                    <input name="txt_eterm" class="form-control input-sm" type="date" placeholder="End Term"/>
                                </div> -->
                            </div>
                        </div>
                  </div>
                  <div class="modal-footer justify-content-between">
                      <input type="hidden" alt="user" id="user" value="<?= htmlentities($user_session); ?>">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-success" id="add-off">Add</button>
                  </div>
                  </form>
              </div>
          </div>
      </div>
      <script>
          document.addEventListener('DOMContentLoaded', () => {
              let btn = document.querySelector('#add-off');
              btn.addEventListener('click', () => {

                  const full_name = document.querySelector('input[alt=full_name]').value;
                  const position = $('#position option:selected').val();
                  const user = document.querySelector('input[alt=user]').value;

                  var data = new FormData(this.form);

                  data.append('full_name', full_name);
                  data.append('position', position);
                  data.append('user', user);

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

                          async: false,
                          cache: false,

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

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

              });
          });
      </script>
