<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Reusable Bootstrap 5 admin form layout">
  <title>Admin Form Layout | LMS</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/form-layout.css">
</head>
<body>
  <div class="admin-layout" id="adminLayout">
    <aside class="admin-sidebar" id="adminSidebar">
      <div class="admin-sidebar__brand">
        <a href="index.html" class="brand">
          <span class="brand__icon"><i class="bi bi-mortarboard-fill"></i></span>
          <span class="brand__text">EduCore Admin</span>
        </a>
        <button class="admin-sidebar__close d-lg-none" id="closeSidebar" aria-label="Close sidebar">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>

      <nav class="admin-sidebar__menu" aria-label="Sidebar menu">
        <a href="index.html" class="menu-link"><i class="bi bi-grid"></i><span>Dashboard</span></a>
        <a href="#" class="menu-link"><i class="bi bi-people"></i><span>Students</span></a>
        <a href="#" class="menu-link"><i class="bi bi-person-workspace"></i><span>Instructors</span></a>
        <a href="#" class="menu-link"><i class="bi bi-collection-play"></i><span>Courses</span></a>
        <a href="#" class="menu-link"><i class="bi bi-journal-richtext"></i><span>Lessons</span></a>
        <a href="#" class="menu-link"><i class="bi bi-ui-checks-grid"></i><span>Quizzes</span></a>
        <a href="#" class="menu-link"><i class="bi bi-cart3"></i><span>Orders</span></a>
        <a href="#" class="menu-link"><i class="bi bi-bar-chart-line"></i><span>Reports</span></a>
        <a href="#" class="menu-link is-active"><i class="bi bi-layout-text-window-reverse"></i><span>CMS</span></a>
        <a href="#" class="menu-link"><i class="bi bi-patch-check"></i><span>Certificates</span></a>
        <a href="#" class="menu-link"><i class="bi bi-gear"></i><span>Settings</span></a>
      </nav>
    </aside>

    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <div class="admin-main">
      <header class="admin-topbar">
        <div class="admin-topbar__left">
          <button class="menu-toggle d-lg-none" id="openSidebar" aria-label="Open sidebar">
            <i class="bi bi-list"></i>
          </button>
          <h1 class="admin-page-title">Form Layout</h1>
        </div>

        <div class="admin-topbar__right">
          <button class="icon-btn" type="button" aria-label="Search"><i class="bi bi-search"></i></button>
          <div class="dropdown">
            <button class="icon-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Notifications">
              <i class="bi bi-bell"></i>
              <span class="notify-dot"></span>
            </button>
            <div class="dropdown-menu dropdown-menu-end shadow-sm topbar-dropdown p-0">
              <div class="dropdown-head">Notifications</div>
              <a class="dropdown-item" href="#">New content request submitted</a>
              <a class="dropdown-item" href="#">Draft page pending review</a>
              <a class="dropdown-item" href="#">System backup completed</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="profile-chip dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
              <span class="profile-chip__avatar">AD</span>
              <span class="d-none d-sm-inline">Admin</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow-sm">
              <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>Profile</a></li>
              <li><a class="dropdown-item" href="#"><i class="bi bi-sliders me-2"></i>Preferences</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
            </ul>
          </div>
        </div>
      </header>

      <main class="admin-content form-page">
        <section class="page-head">
          <div>
            <p class="page-head__eyebrow">Content Management</p>
            <h2>Reusable Form Template</h2>
            <p class="page-head__lead">Use this layout across students, instructors, courses, and CMS records for a consistent admin editing experience.</p>
          </div>
          <div class="page-head__actions">
            <button type="button" class="btn btn-outline-secondary rounded-pill px-3">Cancel</button>
            <button type="submit" form="adminEntityForm" class="btn btn-primary rounded-pill px-3">Save Changes</button>
          </div>
        </section>

        <section class="form-shell">
          <form id="adminEntityForm" class="needs-validation" novalidate>
            <div id="formFeedback" class="alert d-none mb-3" role="alert"></div>

            <div class="form-block">
              <h3>Basic Information</h3>
              <div class="row g-3 g-lg-4">
                <div class="col-12 col-md-6">
                  <label class="form-label" for="firstName">First Name</label>
                  <input class="form-control" id="firstName" name="firstName" required>
                  <div class="invalid-feedback">First name is required.</div>
                </div>

                <div class="col-12 col-md-6">
                  <label class="form-label" for="lastName">Last Name</label>
                  <input class="form-control" id="lastName" name="lastName" required>
                  <div class="invalid-feedback">Last name is required.</div>
                </div>

                <div class="col-12 col-md-6">
                  <label class="form-label" for="email">Email Address</label>
                  <input type="email" class="form-control" id="email" name="email" required>
                  <div class="invalid-feedback">Please provide a valid email.</div>
                </div>

                <div class="col-12 col-md-6">
                  <label class="form-label" for="phone">Phone Number</label>
                  <input type="tel" class="form-control" id="phone" name="phone" pattern="[0-9+\-\s()]{8,}">
                  <div class="invalid-feedback">Please enter a valid phone number.</div>
                </div>
              </div>
            </div>

            <div class="form-block">
              <h3>Access and Status</h3>
              <div class="row g-3 g-lg-4">
                <div class="col-12 col-md-6">
                  <label class="form-label" for="role">Role</label>
                  <select class="form-select" id="role" name="role" required>
                    <option value="" selected disabled>Select role</option>
                    <option>Student</option>
                    <option>Instructor</option>
                    <option>Admin</option>
                  </select>
                  <div class="invalid-feedback">Please select a role.</div>
                </div>

                <div class="col-12 col-md-6">
                  <label class="form-label" for="status">Status</label>
                  <select class="form-select" id="status" name="status" required>
                    <option value="" selected disabled>Select status</option>
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Pending</option>
                  </select>
                  <div class="invalid-feedback">Please select status.</div>
                </div>
              </div>
            </div>

            <div class="form-block">
              <h3>Address Details</h3>
              <div class="row g-3 g-lg-4">
                <div class="col-12">
                  <label class="form-label" for="address">Address</label>
                  <input class="form-control" id="address" name="address" required>
                  <div class="invalid-feedback">Address is required.</div>
                </div>

                <div class="col-12 col-lg-4">
                  <label class="form-label" for="city">City</label>
                  <input class="form-control" id="city" name="city" required>
                  <div class="invalid-feedback">City is required.</div>
                </div>

                <div class="col-12 col-md-6 col-lg-4">
                  <label class="form-label" for="state">State</label>
                  <input class="form-control" id="state" name="state" required>
                  <div class="invalid-feedback">State is required.</div>
                </div>

                <div class="col-12 col-md-6 col-lg-4">
                  <label class="form-label" for="zip">Zip</label>
                  <input class="form-control" id="zip" name="zip" pattern="[0-9]{4,10}" required>
                  <div class="invalid-feedback">Enter a valid zip code.</div>
                </div>
              </div>
            </div>

            <div class="form-block form-block--last">
              <h3>Additional Notes</h3>
              <div class="row g-3 g-lg-4">
                <div class="col-12">
                  <label class="form-label" for="notes">Notes</label>
                  <textarea class="form-control" id="notes" name="notes" rows="4" placeholder="Add internal notes..."></textarea>
                </div>

                <div class="col-12">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="terms" required>
                    <label class="form-check-label" for="terms">
                      I confirm the submitted information is accurate.
                    </label>
                    <div class="invalid-feedback">You must confirm before submitting.</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-actions-mobile d-md-none">
              <button type="button" class="btn btn-outline-secondary rounded-pill px-3 w-100">Cancel</button>
              <button type="submit" class="btn btn-primary rounded-pill px-3 w-100">Save Changes</button>
            </div>
          </form>
        </section>
      </main>

      <footer class="admin-footer">
        <p>Copyright 2026 EduCore LMS Admin. Built for scalable education operations.</p>
      </footer>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/main.js"></script>
  <script src="js/form-layout.js"></script>
</body>
</html>
