<main class="common_margin" id="main">
  <div class="main-wrap">
    <div class="w-50">
      <button class="btn btn-dark btn-md">
        <a href="javascript:history.go(-1)">Back</a>
      </button>
      <div class="my-leaves-top pt-3">
        <h1 class="my-leaves-heading">Leave Application</h1>
      </div>
      <?php if (!empty($leave)) { ?>
        <form action="<?= base_url() ?>teacher/ar_leave_application" method="post">
          <div class="pt-2">
            <?php foreach ($leave as $key => $value) { ?>

              <div class="row leave-app-row align-items-center">
                <div class="col-md-4">
                  <h6>To :</h6>
                </div>

                <div class="col-md-4">
                  <p><?= $value['teacher_name'] ?></p>
                </div>
              </div>

              <div class="row leave-app-row align-items-center">
                <div class="col-md-4">
                  <h6>From date :</h6>
                </div>

                <div class="col-md-4">
                  <p><?= date('d-m-Y', strtotime($value['from_date'])) ?></p>
                </div>
              </div>

              <div class="row leave-app-row align-items-center">
                <div class="col-md-4">
                  <h6>To date :</h6>
                </div>

                <div class="col-md-4">
                  <p><?= date('d-m-Y', strtotime($value['to_date'])) ?></p>
                </div>
              </div>

              <div class="row leave-app-row align-items-center">
                <div class="col-md-4">
                  <h6>Leave Title :</h6>
                </div>

                <div class="col-md-4">
                  <p><?= $value['title'] ?></p>
                </div>
              </div>
              <input type="hidden" name="id" value="<?= $value['id'] ?>">
              <div class="row leave-app-row-reason pt-4">
                <div class="col-md-12">
                  <h6>Reason :</h6>
                  <p>
                    <?= $value['reason'] ?>
                  </p>

                  <div class="leave-process-btns mt-5">
                    <button type="submit" class="submit-btn">Approve</button>
                    <a class="reject-btn mx-4 text-white d-flex align-items-center" data-toggle="modal" data-target="#exampleModalCenter">
                      Reject
                    </a>
                  </div>
                </div>
              </div>
        </form>
      <?php } ?>

    </div>

  <?php } ?>
  </div>
  </div>

  <!-- Modal -->
  <div class="modal leave-modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header leave-modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle">
            Reason for Rejection
          </h5>
        </div>
        <form action="<?= base_url() ?>teacher/ar_leave_application" method="post" id="rejected_form">
          <div class="modal-body">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="4" onkeypress="return lettersNumbersCheck(event)" name="rejected_msg" placeholder="Description"></textarea>
            <label id="exampleFormControlTextarea1-error" class="error mt-2" style="color:red" for="exampleFormControlTextarea1"></label>
          </div>
          <input type="hidden" name="id" value="<?= $leave_id ?>">
          <div class="modal-footer leave-modal-footer">
            <div class="leave-process-btns">
              <button type="submit" class="submit-btn">Submit</button>
              <a class="text-white d-flex align-items-center reject-btn mx-4" data-toggle="modal" data-target="#exampleModalCenter">
                Cancel
              </a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- /*Modals Ends*/ -->
</main>

<script type="text/javascript">
  function lettersNumbersCheck(e) {
    var keyCode = e.keyCode || e.which;

    //Regex for Valid Characters i.e. Alphabets and Numbers.
    var regex = /^[a-zA-Z0-9\-\s]+$/;

    //Validate TextBox value against the Regex.
    var isValid = regex.test(String.fromCharCode(keyCode));

    return isValid;
  }


  jQuery.validator.addMethod("alphanumeric", function(value, element) {
    return this.optional(element) || /^[a-z\0-9\-\s]+$/i.test(value);
  }, "Please enter alphanumeric Characters only");

  $("#rejected_form").validate({

    rules: {
      rejected_msg: {
        required: true,
        minlength: 3,
        alphanumeric: true
      },
    },
    messages: {

      rejected_msg: {
        required: "Please provide a reason",
        minlength: "Please enter more than 2 Characters"
      },

    },
    submitHandler: function(form, e) {
      form.submit();
    }
  });
</script>