uldp-degree-mangement-system/views/admin/level/create.ejs

<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);">Create New Level Type</h1>
      <p class="text-muted mb-0">Add a new level type to the system</p>
    </div>
    <div>
      <a href="/admin/level" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Back to Level Management
      </a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-8 mx-auto">
      <div class="card border-0 shadow-sm">
        <div class="card-body p-4">
          <form action="/admin/level/create" method="POST">
            <div class="mb-4">
              <label for="newType" class="form-label fw-medium">New Level Type Name</label>
              <input type="text" class="form-control" id="newType" name="newType" required
                placeholder="Enter new level type (e.g. foundation, diploma, etc.)">
              <div class="form-text">
                <i class="fas fa-info-circle me-1"></i>
                This will be used in URLs and as an identifier in the system.
                Use only lowercase letters, numbers, and hyphens.
              </div>
            </div>

            <div class="alert alert-info">
              <i class="fas fa-lightbulb me-2"></i>
              <strong>Tips:</strong>
              <ul class="mb-0 mt-2">
                <li>Choose a descriptive, concise name for the level type</li>
                <li>Avoid using special characters or spaces</li>
                <li>Use hyphens instead of spaces if needed (e.g. "pre-master" instead of "pre master")</li>
                <li>The system will automatically convert your entry to lowercase and replace spaces with hyphens</li>
                <li>Special characters will be removed automatically</li>
              </ul>
            </div>
            
            <div class="alert alert-success">
              <i class="fas fa-check-circle me-2"></i>
              <strong>Sample Data Included:</strong>
              <p class="mb-1 mt-2">When you create a new level type, it will be pre-populated with sample data including:</p>
              <ul class="mb-0">
                <li>Banner information</li>
                <li>Overview with paragraphs</li>
                <li>Contact and social information</li>
                <li>Entry requirements</li>
                <li>Quick links and action buttons</li>
                <li>"Why Study" section with 4 sample items</li>
              </ul>
              <p class="mt-2 mb-0">You can easily edit all this content after creation.</p>
            </div>
            
            <% if (existingTypes && existingTypes.length > 0) { %>
              <div class="mb-4">
                <label class="form-label fw-medium">Existing Level Types</label>
                <div class="list-group">
                  <% existingTypes.forEach(type => { %>
                    <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                      <div>
                        <strong><%= type.charAt(0).toUpperCase() + type.slice(1) %></strong>
                      </div>
                      <a href="/admin/level?type=<%= type %>" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-edit me-1"></i>Edit
                      </a>
                    </div>
                  <% }); %>
                </div>
              </div>
            <% } %>

            <div class="d-grid gap-2 mt-4">
              <button type="submit" class="btn btn-primary">
                <i class="fas fa-plus-circle me-1"></i>Create Level Type
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div> 

<!-- Modal tùy chỉnh -->
<div id="customModal" class="custom-modal">
  <div class="custom-modal-content">
    <div class="custom-modal-header">
      <h5 class="custom-modal-title">Notification</h5>
      <button type="button" class="custom-modal-close">&times;</button>
    </div>
    <div class="custom-modal-body">
      <p id="modalMessage">Content of the notification will appear here.</p>
    </div>
    <div class="custom-modal-footer">
      <button type="button" class="btn btn-primary custom-modal-ok">OK</button>
    </div>
  </div>
</div>

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

<script>
// Xử lý form
document.addEventListener('DOMContentLoaded', function() {
  // Khởi tạo modal tùy chỉnh
  CustomModal.init('customModal');
  
  const form = document.querySelector('form');
  
  // Xử lý form submit
  form.addEventListener('submit', function(e) {
    const typeInput = document.getElementById('newType');
    const typeValue = typeInput.value.trim();
    
    // Kiểm tra giá trị nhập vào
    if (!typeValue) {
      e.preventDefault();
      CustomModal.alert('Please enter a name for the level type.');
      return;
    }
    
    // Kiểm tra định dạng
    if (/[^a-zA-Z0-9\s\-]/.test(typeValue)) {
      e.preventDefault();
      CustomModal.alert('The level type name should only contain letters, numbers, hyphens, and spaces.');
      return;
    }
  });
});
</script>