<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Approval Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row mt-4">
    <div class="col-2"></div>

    <div class="col-12 col-md-8 mx-auto p-3">

      <!-- Header with buttons -->
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h4>Trip Plan Approval</h4>
        <div>

          <?php if ($status == "Approval pending"){ ?> 
          <button class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#approveModal">Approve</button>
          <?php } ?>

          <?php if ($status == "Approval pending"){ ?>
          <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#rejectModal">Reject</button>
          <?php } ?>

        </div>
      </div>

      <!-- Main content -->
      <div class="card p-3">
        <?= $html; ?>
      </div>
    </div>

    <div class="col-2"></div>
  </div>
</div>

<!-- Approve Modal -->
<div class="modal fade" id="approveModal" tabindex="-1" aria-labelledby="approveModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm Approval</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to approve this trip plan?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
        <button type="button" class="btn btn-success" id="confirmApprove">Yes, Approve</button>
      </div>
    </div>
  </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="rejectForm">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Reject Reason</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <textarea class="form-control" name="reason" id="reason" rows="3" placeholder="Enter reason for rejection" required></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-danger">Submit Reason</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script>
    // Approve AJAX
    $('#confirmApprove').on('click', function () {
     
        const data = {
            plan_id: <?= $plan_id ?>,
            user_id: <?= $user_id ?>,
            delegation_user_id: <?= $delegation_user_id ?? 0 ?>
        };

        $.ajax({
            url: "<?= base_url('/approvePlan') ?>",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify(data),
            beforeSend: function() {
                $('#loader').show(); 
            },
            success: function(response) {
                location.reload();
            },
            error: function(xhr) {
                $('#loader').hide();
                alert('Approval failed: ' + xhr.responseText);
            }
        });

  });

  // Reject AJAX
  $('#rejectForm').on('submit', function (e) {
    e.preventDefault();
    const reason = $('#reason').val();
    if (!reason.trim()) {
      alert('Please enter a reason.');
      return;
    }
         data = {
            plan_id: <?= $plan_id ?>,
            user_id: <?= $user_id ?>,
            delegation_user_id: <?= $delegation_user_id ?? 0 ?>,
            reason : reason
        };

        $.ajax({
            url: "<?= base_url('/rejectPlan') ?>",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify(data),
            beforeSend: function() {
                $('#loader').show(); 
            },
            success: function(response) {
                location.reload();
            },
            error: function(xhr) {
                $('#loader').hide();
                alert('Approval failed: ' + xhr.responseText);
            }
        });
   
  });
</script>
<!-- Loader Spinner -->
<div id="loader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center; padding-top: 20%;">
    <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

</body>
</html>
