<!-- 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);">Create New Department</h1>
      <p class="text-muted mb-0">Add a new department to the system</p>
    </div>
    <div>
      <a href="/admin/department" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Back to Department 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/department/create" method="POST" id="createForm">
            <div class="mb-4">
              <label for="name" class="form-label fw-medium">Department Name</label>
              <input type="text" class="form-control" id="name" name="name" required
                placeholder="Enter department name">
              <div class="form-text">
                <i class="fas fa-info-circle me-1"></i>
                Enter the full name of the department (e.g. Business, Engineering)
              </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>Department name should be clear and descriptive</li>
                <li>Use proper capitalization</li>
                <li>Avoid abbreviations unless commonly known</li>
              </ul>
            </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 Department
              </button>
            </div>
          </form>
        </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">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>
document.addEventListener('DOMContentLoaded', function() {
  // Initialize custom modal
  CustomModal.init('customModal', {
    closeOnOutsideClick: true,
    animationDuration: 300
  });
  
  const form = document.getElementById('createForm');
  const nameInput = document.getElementById('name');
  
  form.addEventListener('submit', function(e) {
    // Validate department name
    if (!nameInput.value.trim()) {
      e.preventDefault();
      CustomModal.alert('Please enter a department name.');
      return;
    }
    
    // Check for special characters
    if (/[^a-zA-Z0-9\s-]/.test(nameInput.value.trim())) {
      e.preventDefault();
      CustomModal.alert('Department name can only contain letters, numbers, spaces and hyphens.');
      return;
    }
  });
});
</script>
