File "approval.php"

Full Path: /home/scheduling/public_html/admin-20260210145032/admin/approval.php
File size: 12.8 KB
MIME-type: text/x-php
Charset: utf-8

<?php
include "../include/conn.php";
?>
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manage Approvals</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="d-flex">
    <?php include("sidebar.php"); ?>
    <div class="w-100">
      <?php include("nav.php"); ?>

      <?php

      // 🧾 Fetch all curriculums for dropdown
      $curriculumQuery = "SELECT id, code, track FROM curriculum ORDER BY code ASC";
      $curriculumResult = $conn->query($curriculumQuery);

      // 🧾 Fetch approvals + linked curriculum
      $query = "SELECT a.*, a.curriculum_id, c.code AS curriculum_name, c.track 
FROM approval a 
LEFT JOIN curriculum c ON a.curriculum_id = c.id
ORDER BY a.id DESC
";
      $result = $conn->query($query);
      ?>

      <div class="content mt-5">
        <div class="container-fluid">
          <h2 class="mb-4">Manage Approvals / Heads</h2>

          <!-- 🔍 Filters -->
          <div class="row g-2 mb-3">
            <div class="col-md-4">
              <select id="curriculumFilter" class="form-select">
                <option value="">All Curriculums</option>
                <?php
                if ($curriculumResult && $curriculumResult->num_rows > 0) {
                  while ($cRow = $curriculumResult->fetch_assoc()) {
                    $display = htmlspecialchars($cRow['code'] . " (" . $cRow['track'] . ")");
                    echo "<option value='{$display}'>{$display}</option>";
                  }
                }
                ?>
              </select>
            </div>

            <div class="col-md-4">
              <input type="text" id="searchInput" class="form-control" placeholder="Search name...">
            </div>

            <div class="col-md-4 text-md-end">
              <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addApprovalModal">
                <i class="bi bi-plus-circle me-1"></i> Add Head
              </button>
            </div>
          </div>

          <div class="table-responsive">
            <table class="table table-hover align-middle">
              <thead class="bg-danger text-white">
                <tr>
                  <th>#</th>
                  <th>Curriculum</th>
                  <th>Name</th>
                  <th>Degree</th>
                  <th>Position</th>
                  <th>Type</th>
                  <th>Actions</th>
                </tr>
              </thead>
<tbody id="approvalTableBody">
<?php
if ($result && $result->num_rows > 0) {
    $count = 1;
    while ($row = $result->fetch_assoc()) {

        $curriculumDisplay = htmlspecialchars($row['curriculum_name'] . " (" . $row['track'] . ")");
        $jsonData = htmlspecialchars(json_encode($row, JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP), ENT_QUOTES);

        echo "
        <tr>
            <td>{$count}</td>
            <td>{$curriculumDisplay}</td>
            <td>" . htmlspecialchars($row['name']) . "</td>
            <td>" . htmlspecialchars($row['degree']) . "</td>
            <td>" . htmlspecialchars($row['position']) . "</td>
            <td>" . htmlspecialchars($row['type']) . "</td>
            <td>
                <button class='btn btn-warning btn-sm text-white me-1'
                        onclick='openEditModal({$jsonData})'>
                    <i class=\"bi bi-pencil-square\"></i> Edit
                </button>
            </td>
        </tr>";
        $count++;
    }
} else {
    echo "<tr><td colspan='7' class='text-center'>No heads found.</td></tr>";
}
?>
</tbody>

            </table>
          </div>
        </div>
      </div>

      <!-- 🔎 JS Filter Logic -->
      <script>
        const searchInput = document.getElementById('searchInput');
        const curriculumFilter = document.getElementById('curriculumFilter');
        const rows = document.querySelectorAll('#approvalTableBody tr');

        function filterTable() {
          const search = searchInput.value.toLowerCase().trim();
          const curriculum = curriculumFilter.value.toLowerCase();

          let visibleCount = 0;

          rows.forEach(row => {
            const curriculumCell = row.cells[1]?.textContent.toLowerCase() || '';
            const nameCell = row.cells[2]?.textContent.toLowerCase() || '';

            const matchesCurriculum = !curriculum || curriculumCell.includes(curriculum);
            const matchesName = !search || nameCell.includes(search);

            const matches = matchesCurriculum && matchesName;
            row.style.display = matches ? '' : 'none';
            if (matches) visibleCount++;
          });

          // Show "no results" message
          if (visibleCount === 0) {
            if (!document.getElementById('noResultsRow')) {
              const tbody = document.getElementById('approvalTableBody');
              const noRow = document.createElement('tr');
              noRow.id = 'noResultsRow';
              noRow.innerHTML = `<td colspan="7" class="text-center text-muted">No results found.</td>`;
              tbody.appendChild(noRow);
            }
          } else {
            const existing = document.getElementById('noResultsRow');
            if (existing) existing.remove();
          }
        }

        // 🔁 Apply filters when user types or changes curriculum
        searchInput.addEventListener('keyup', filterTable);
        curriculumFilter.addEventListener('change', filterTable);
      </script>

    </div>
  </div>

  <!-- Add Approval Modal -->
  <div class="modal fade" id="addApprovalModal" tabindex="-1">
    <div class="modal-dialog">
      <form id="addApprovalForm" class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title">Add Head / Approval</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Curriculum</label>
            <select class="form-select" name="curriculum_id" required>
              <option value="">Select Curriculum</option>
              <?php
              $curQuery = $conn->query("SELECT * FROM curriculum WHERE status='Active'");
              while ($cur = $curQuery->fetch_assoc()) {
                echo "<option value='{$cur['id']}'>" . htmlspecialchars($cur['code'] . " (" . $cur['track']) . ")</option>";
              }
              ?>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" name="name" required>
          </div>
          <div class="mb-3">
            <label for="degree" class="form-label">Degree</label>
            <input
              type="text"
              class="form-control"
              name="degree"
              id="degree"
              placeholder="Enter degree (e.g., PhD, DIT, Deng)"
              required>
          </div>

          <div class="mb-3">
            <label class="form-label">Position</label>
            <input type="text" class="form-control" name="position" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Type</label>
            <select class="form-select" name="type" required>
              <option value="">Select Type</option>
              <option value="Prepared by">Prepared by</option>
              <option value="Checked by">Checked by</option>
              <option value="Verified by">Verified by</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Edit Approval Modal -->
  <div class="modal fade" id="editApprovalModal" tabindex="-1">
    <div class="modal-dialog">
      <form id="editApprovalForm" class="modal-content">
        <div class="modal-header bg-warning text-white">
          <h5 class="modal-title">Edit Head / Approval</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" id="editApprovalId">
          <div class="mb-3">
            <label class="form-label">Curriculum</label>
            <select class="form-select" name="curriculum_id" id="editCurriculum" required>
              <option value="">Select Curriculum</option>
              <?php
              $curQuery = $conn->query("SELECT * FROM curriculum WHERE status='Active'");
              while ($cur = $curQuery->fetch_assoc()) {
                echo "<option value='{$cur['id']}'>" . htmlspecialchars($cur['code'] . " (" . $cur['track']) . ")</option>";
              }
              ?>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" name="name" id="editApprovalName" required>
          </div>
          <div class="mb-3">
            <label for="editApprovalDegree" class="form-label">Degree</label>
            <input
              type="text"
              class="form-control"
              name="degree"
              id="editApprovalDegree"
              placeholder="Enter degree (e.g., PhD, DIT, Deng)"
              required>
          </div>

          <div class="mb-3">
            <label class="form-label">Position</label>
            <input type="text" class="form-control" name="position" id="editApprovalPosition" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Type</label>
            <select class="form-select" name="type" id="editApprovalType" required>
              <option value="">Select Type</option>
              <option value="Prepared by">Prepared by</option>
              <option value="Checked by">Checked by</option>
              <option value="Verified by">Verified by</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-warning text-white">Save Changes</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <script>
    // Search Filter


    // Open Edit Modal
    function openEditModal(data) {
      $('#editApprovalId').val(data.id);
      $('#editCurriculum').val(data.curriculum_id);
      $('#editApprovalName').val(data.name);
      $('#editApprovalDegree').val(data.degree);
      $('#editApprovalPosition').val(data.position);
      $('#editApprovalType').val(data.type);
      new bootstrap.Modal(document.getElementById('editApprovalModal')).show();
    }

    // Add Approval AJAX
    $("#addApprovalForm").on("submit", function(e) {
      e.preventDefault();
      $.ajax({
        url: "function/approval_add.php",
        type: "POST",
        data: $(this).serialize(),
        success: function(response) {
          if (response.trim() === "success") {
            Swal.fire("Saved!", "Head added successfully.", "success").then(() => location.reload());
          } else {
            Swal.fire("Error", response, "error");
          }
        }
      });
    });

    // Update Approval AJAX
    $("#editApprovalForm").on("submit", function(e) {
      e.preventDefault();
      $.ajax({
        url: "function/approval_update.php",
        type: "POST",
        data: $(this).serialize(),
        success: function(response) {
          if (response.trim() === "success") {
            Swal.fire("Updated!", "Head updated successfully.", "success").then(() => location.reload());
          } else {
            Swal.fire("Error", response, "error");
          }
        }
      });
    });
  </script>
  <script src="javascript.js"></script>
</body>

</html>