first commit

views/admin/level/create.ejs

@@ -0,0 +1,134 @@
+<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>