cms.uldp.edu.vn/views/admin/department/index.ejs

<!-- Header section -->
<div class="container">
  <div class="d-flex justify-content-between align-items-center mt-4 mb-4">
    <div>
      <h1 class="h3 mb-0" style="color: var(--primary-dark);">Department Management</h1>
      <p class="text-muted mb-0">Manage all departments in the system</p>
    </div>
    <div>
      <a href="/admin/department/create" class="btn btn-primary">
        <i class="fas fa-plus-circle me-1"></i>Create New Department
      </a>
    </div>
  </div>

  <div class="row">
    <div class="col-12">
      <div class="card border-0 shadow-sm">
        <div class="card-body p-4">
          <% if (departments && departments.length > 0) { %>
            <div class="table-responsive">
              <table class="table table-hover align-middle">
                <thead>
                  <tr>
                    <th scope="col" style="width: 50px">#</th>
                    <th scope="col">Department Name</th>
                    <th scope="col">Slug</th>
                    <th scope="col" style="width: 200px">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <% departments.forEach((department, index) => { %>
                    <tr>
                      <td><%= index + 1 %></td>
                      <td>
                        <span class="fw-medium"><%= department.name %></span>
                      </td>
                      <td>
                        <code class="text-muted"><%= department.slug %></code>
                      </td>
                      <td>
                        <div class="btn-group" role="group">
                          <a href="/admin/department/edit/<%= department._id %>" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-edit me-1"></i>Edit
                          </a>
                          <button type="button" class="btn btn-sm btn-outline-danger" 
                            data-custom-modal="open"
                            data-id="<%= department._id %>"
                            data-name="<%= department.name %>">
                            <i class="fas fa-trash-alt me-1"></i>Delete
                          </button>
                        </div>
                      </td>
                    </tr>
                  <% }); %>
                </tbody>
              </table>
            </div>
          <% } else { %>
            <div class="text-center py-5">
              <i class="fas fa-folder-open text-muted mb-3" style="font-size: 3rem;"></i>
              <h5 class="text-muted mb-3">No Departments Found</h5>
              <a href="/admin/department/create" class="btn btn-primary">
                <i class="fas fa-plus-circle me-1"></i>Create First Department
              </a>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Custom Modal -->
<div id="customModal" class="custom-modal">
  <div class="custom-modal-content">
    <div class="custom-modal-header">
      <h5 class="custom-modal-title">Delete Confirmation</h5>
      <button type="button" class="custom-modal-close">&times;</button>
    </div>
    <div class="custom-modal-body">
      <p id="modalMessage">Are you sure you want to delete this department?</p>
    </div>
    <div class="custom-modal-footer">
      <button type="button" class="btn btn-secondary custom-modal-cancel">Cancel</button>
      <button type="button" class="btn btn-danger custom-modal-ok">Delete Permanently</button>
    </div>
  </div>
</div>

<!-- Import custom modal CSS -->
<link rel="stylesheet" href="/css/custom-modal.css">

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Khởi tạo modal tùy chỉnh
    CustomModal.init('customModal', {
      closeOnOutsideClick: true,
      animationDuration: 300
    });

    // Lắng nghe click vào nút xóa
    document.addEventListener('click', function(e) {
      if (e.target.getAttribute('data-custom-modal') === 'open' || 
          e.target.parentElement.getAttribute('data-custom-modal') === 'open') {
        
        // Lấy button hoặc icon parent nếu click vào icon
        const button = e.target.getAttribute('data-custom-modal') === 'open' ? 
                      e.target : e.target.parentElement;
        
        const id = button.getAttribute('data-id');
        const name = button.getAttribute('data-name');
        
        // Sử dụng CustomModal.confirm thay vì xử lý trực tiếp
        CustomModal.confirm(
          `Are you sure you want to delete department "${name}"? This action cannot be undone.`,
          function() {
            // Hành động khi xác nhận
            window.location.href = `/admin/department/delete/${id}`;
          },
          null,
          'Delete Confirmation'
        );
      }
    });
  });
</script>