<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Management</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .tabs-wrapper {
      margin-bottom: 20px;
    }
    .tab-container {
      display: flex;
      gap: 10px;
    }
    .tab {
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
    }
    .tab.active {
      background-color: #0056b3;
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
    }
    form div {
      margin-bottom: 15px;
    }
    form label {
      display: block;
      margin-bottom: 5px;
    }
    form input, form select, button {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    button {
      background-color: #007BFF;
      color: white;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    table, th, td {
      border: 1px solid #ccc;
    }
    th, td {
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: #f4f4f4;
    }
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
    }
    .modal.active {
      display: flex;
    }
    .modal-content {
      background: white;
      padding: 20px;
      border-radius: 5px;
      width: 400px;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .modal-header h2 {
      margin: 0;
    }
    .close-btn {
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<!-- Main Content without Sidebar -->
<div class="main-content">

  <!-- Tabs for switching between Register User and User List -->
  <div class="tabs-wrapper">
    <div class="tab-container">
      <div class="tab active" id="register-tab">Register User</div>
      <div class="tab" id="list-tab">User List</div>
    </div>
  </div>

  <!-- Tab content container -->
  <div class="tab-content active" id="register-user-container">
    <h2>Register New User</h2>
    <form id="user-form">
      <input type="hidden" id="user-id" name="user-id">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
      </div>

      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
      </div>
       <div>
        <label for="passcode">Passcode:</label>
        <input type="password" id="passcode" name="passcode" required>
      </div>

      <div>
        <label for="kitchen">Kitchen:</label>

        <select id="kitchen"  name="kitchen">
          <option value="">Select kitchen</option>
        </select>
        
      </div>


      <div>
        <label for="branch">Default Branch:</label>

        <select id="branch1"  name="branch" required>
          <!-- Options will be dynamically populated -->
        </select>
        
      </div>


   

      <div id="errorMessage" style="color: red;"></div>
      <div>
        <label for="branches">Allowed Branches:</label>

        <select id="branches" multiple  name="branches"  style="height: 150px; width: 100%;">
          <!-- Options will be dynamically populated -->
        </select>
        




      </div>


      <div>
        <label for="role">Role:</label>
        <select id="role" name="role" required>
          <option value="">Select a role</option>
          <!-- Options will be populated dynamically here -->
        </select>
      </div>
      <button type="submit">Register User</button>
    </form>
  </div>

  <div class="tab-content" id="users-list-container">
    <h2>Users List</h2>
    <table id="users-table">
      <thead>
        <tr>
          <th>Username</th>
          <th>Email</th>
          <th>PassCode</th>
          <th>Company</th>
          <th>Branch</th>
          <th>Role</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <!-- Dynamically added users will appear here -->
      </tbody>
    </table>
  </div>
</div>

<!-- Edit User Modal -->
<div class="modal" id="edit-modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2>Edit User</h2>
      <button class="close-btn" onclick="closeEditModal()">×</button>
    </div>
    <form id="edit-user-form">
      <input type="hidden" id="edit-user-id" name="edit-user-id">
      <div>
        <label for="edit-username">Username:</label>
        <input type="text" id="edit-username" name="edit-username" required>
      </div>
      <div>
        <label for="edit-email">Email:</label>
        <input type="email" id="edit-email" name="edit-email" required>
      </div>
      <div>
        <label for="edit-branch">Branch:</label>
        <select id="edit-branch" name="edit-branch" required>
          <option value="">Select a branch</option>
          <!-- Options will be populated dynamically here -->
        </select>
      </div>
      <div>
        <label for="edit-role">Role:</label>
        <select id="edit-role" name="edit-role" required>
          <option value="">Select a role</option>
          <!-- Options will be populated dynamically here -->
        </select>
      </div>
      <button type="submit">Update User</button>
    </form>
  </div>
</div>

<!-- Link to your JavaScript file -->
<script src="./js/user.js"></script>
<script>
  // Close the Edit Modal
  function closeEditModal() {
    document.getElementById('edit-modal').classList.remove('active');
  }
</script>
</body>
</html>
