{% extends 'base.html' %}
{% load static %}


{% block content %}
<style>
  th {
    background-color: #f2f2f2;
    font-weight: bold;
    font-size: 14px;
}
</style>

<div class="user-management-wrapper">

  <div class="user-management">
    <div class="header4">
      <h1>User Management</h1>
      <button id="createUserBtn" class="btn btn-primary" style="background-color: rgb(10,107,74)">
        <i class="fas fa-user-plus"></i> Create User
      </button>
    </div>
    
    <div class="tab-container">
      <button class="tab-btn active" data-tab="all">All</button>
      <button class="tab-btn" data-tab="admin">Admin</button>
      <button class="tab-btn" data-tab="superAdmin">Super Admin</button>
      <button class="tab-btn" data-tab="manager">Manager</button>
      <button class="tab-btn" data-tab="driver">Driver</button>
      <button class="tab-btn" data-tab="vehicle">Vehicle</button>
      <button class="tab-btn" data-tab="normalUsers">Normal Users</button>
      <button class="tab-btn" data-tab="naturalist">Naturalist</button>
    </div>
    
    <div id="usersTab" class="tab-content active">
      <div class="action-buttons">
        <button class="btn btn-secondary">
          <i class="fas fa-file-export"></i> Export
        </button>
        <button class="btn btn-secondary">
          <i class="fas fa-filter"></i> Filter
        </button>
      </div>
      
      <table id="userTable">
        <thead>
          <tr>
            <th>USER NAME</th>
            <th>EMAIL ADDRESS</th>
            <th>PHONE NUMBER</th>
            <th>ROLE</th>
            <th>TIME STAMP</th>
            <th>ACTION</th>
          </tr>
        </thead>
        <tbody>
          <!-- User table rows will be dynamically populated -->
        </tbody>
      </table>
    </div>
    
    <div id="vehiclesTab" class="tab-content">
      <div class="action-buttons">
        <button id="createVehicleBtn" class="btn btn-primary">
          <i class="fas fa-plus"></i> Add Vehicle
        </button>
      </div>
      
      <table id="vehicleTable">
        <thead>
          <tr>
            <th>VEHICLE NUMBER</th>
            <th>DRIVER NAME</th>
            <th>GPS DEVICE ID</th>
            <th>DASHCAM DEVICE ID</th>
            <th>TIME STAMP</th>
            <th>ACTION</th>
          </tr>
        </thead>
        <tbody>
          <!-- Vehicle table rows will be dynamically populated -->
        </tbody>
      </table>
    </div>
    
    <div class="pagination">
      <button class="pagination-btn" id="prevPage">&lt;</button>
      <button class="pagination-btn active">1</button>
      <button class="pagination-btn">2</button>
      <button class="pagination-btn">3</button>
      <button class="pagination-btn">4</button>
      <button class="pagination-btn">5</button>
      <button class="pagination-btn" id="nextPage">&gt;</button>
    </div>
  </div>

  <!-- Modals remain unchanged -->
  <div id="createUserModal" class="modal">
    <div class="modal-content">
      <h2>Create User</h2>
      <form id="createUserForm">
        <input type="text" id="userName" placeholder="User Name" required>
        <input type="email" id="userEmail" placeholder="Email Address" required>
        <input type="tel" id="userPhone" placeholder="Phone Number" required>
        <select id="userRole" required>
          <option value="">Select Role or Create</option>
          <option value="admin">Admin</option>
          <option value="super-admin">Super Admin</option>
          <option value="user">User</option>
        </select>
        <input type="text" id="userId" placeholder="ID Name" required>
        <input type="password" id="userPassword" placeholder="Create Password" required>
        <div class="form-actions">
          <button type="button" id="cancelCreate" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary">Create User</button>
        </div>
      </form>
    </div>
  </div>
  
  <div id="createVehicleModal" class="modal">
    <div class="modal-content">
      <h2>Create Vehicle</h2>
      <form id="createVehicleForm">
        <input type="text" id="vehicleNumber" placeholder="Enter Vehicle Number" required>
        <select id="driverName" required>
          <option value="">Select Driver</option>
          <!-- Add driver options dynamically -->
        </select>
        <select id="gpsDeviceId" required>
          <option value="">Select GPS Device ID</option>
          <!-- Add GPS device options dynamically -->
        </select>
        <select id="dashcamDeviceId" required>
          <option value="">Select Dashcam Device ID</option>
          <!-- Add dashcam device options dynamically -->
        </select>
        <div class="form-actions">
          <button type="button" id="cancelCreateVehicle" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary">Create Vehicle</button>
        </div>
      </form>
    </div>
  </div>
  
</div>
<script>
 
    const createUserBtn = document.getElementById('createUserBtn');
    const createUserModal = document.getElementById('createUserModal');
    const cancelCreate = document.getElementById('cancelCreate');
    const createUserForm = document.getElementById('createUserForm');
    const userEmailInput = document.getElementById('userEmail');
  
    const createVehicleBtn = document.getElementById('createVehicleBtn');
    const createVehicleModal = document.getElementById('createVehicleModal');
    const cancelCreateVehicle = document.getElementById('cancelCreateVehicle');
    const createVehicleForm = document.getElementById('createVehicleForm');
  
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
  
    // Event listeners
    createUserBtn.addEventListener('click', () => {
      createUserModal.style.display = 'block';
    });
  
    cancelCreate.addEventListener('click', () => {
      createUserModal.style.display = 'none';
    });
  
    createVehicleBtn.addEventListener('click', () => {
      createVehicleModal.style.display = 'block';
    });
  
    cancelCreateVehicle.addEventListener('click', () => {
      createVehicleModal.style.display = 'none';
    });
  
    window.addEventListener('click', (event) => {
      if (event.target === createUserModal) {
        createUserModal.style.display = 'none';
      }
      if (event.target === createVehicleModal) {
        createVehicleModal.style.display = 'none';
      }
    });
  
    createUserForm.addEventListener('submit', (e) => {
      e.preventDefault();
      console.log('User form submitted');
      createUserModal.style.display = 'none';
    });
  
    createVehicleForm.addEventListener('submit', (e) => {
      e.preventDefault();
      console.log('Vehicle form submitted');
      createVehicleModal.style.display = 'none';
    });
  
    userEmailInput.addEventListener('input', () => {
      if (userEmailInput.validity.typeMismatch) {
        userEmailInput.setCustomValidity('Please enter a valid email address');
      } else {
        userEmailInput.setCustomValidity('');
      }
    });
  
    // Tab functionality
    tabButtons.forEach(button => {
      button.addEventListener('click', () => {
        const tabName = button.getAttribute('data-tab');
        tabButtons.forEach(btn => btn.classList.remove('active'));
        tabContents.forEach(content => content.classList.remove('active'));
        button.classList.add('active');
        
        if (tabName === 'vehicle') {
          document.getElementById('vehiclesTab').classList.add('active');
        } else {
          document.getElementById('usersTab').classList.add('active');
          filterUsers(tabName);
        }
      });
    });
  
    // Dummy data for tables
    const users = [
      { name: 'Krutik Kapadia', email: 'kaleigh.leffler@yahoo.com', phone: '+91 9876543210', role: 'Admin', timestamp: '11:32 PM - 09/05/2024' },
      { name: 'Krutik Kapadia', email: 'lang.ethyl@johnston.net', phone: '+91 9876543210', role: 'Super Admin', timestamp: '11:32 PM - 09/05/2024' },
      { name: 'Krutik Kapadia', email: 'kamron.adams@hotmail.com', phone: '+91 9876543210', role: 'Manager', timestamp: '11:32 PM - 09/05/2024' },
      { name: 'Krutik Kapadia', email: 'tillman.michel@tromp.com', phone: '+91 9876543210', role: 'Normal Users', timestamp: '11:32 PM - 09/05/2024' },
      { name: 'Krutik Kapadia', email: 'destiny02@gmail.com', phone: '+91 9876543210', role: 'Admin', timestamp: '11:32 PM - 09/05/2024' },
    ];
  
    const vehicles = [
      { number: 'GJ-05-KK-5321', driver: 'Krutik Kapadia', gps: '#213566449616', dashcam: '235654614', timestamp: '11:32 PM - 09/05/2024' },
      { number: 'GJ-05-KK-5322', driver: 'John Doe', gps: '#213566449617', dashcam: '235654615', timestamp: '11:33 PM - 09/05/2024' },
      { number: 'GJ-05-KK-5323', driver: 'Jane Smith', gps: '#213566449618', dashcam: '235654616', timestamp: '11:34 PM - 09/05/2024' },
    ];
  
    const userTable = document.getElementById('userTable').getElementsByTagName('tbody')[0];
    const vehicleTable = document.getElementById('vehicleTable').getElementsByTagName('tbody')[0];
  
    function populateUserTable(filteredUsers) {
      userTable.innerHTML = '';
      filteredUsers.forEach(user => {
        const row = userTable.insertRow();
        row.innerHTML = `
          <td>${user.name}</td>
          <td>${user.email}</td>
          <td>${user.phone}</td>
          <td><span class="role-badge ${user.role.toLowerCase().replace(' ', '-')}">${user.role}</span></td>
          <td>${user.timestamp}</td>
 <td>
    <button class="action-btn edit">
        <img src="{% static 'images/edit.png' %}" alt="Edit">
    </button>
    <button class="action-btn delete">
        <img src="{% static 'images/del.png' %}" alt="Delete">
    </button>
</td>

        `;
      });
    }
  
    function populateVehicleTable() {
      vehicleTable.innerHTML = '';
      vehicles.forEach(vehicle => {
        const row = vehicleTable.insertRow();
        row.innerHTML = `
          <td>${vehicle.number}</td>
          <td>${vehicle.driver}</td>
          <td>${vehicle.gps}</td>
          <td>${vehicle.dashcam}</td>
          <td>${vehicle.timestamp}</td>
          <td>
            <button class="action-btn edit"> <img src="{% static 'images/edit.png' %}" alt="Edit"></button>
            <button class="action-btn delete"> <img src="{% static 'images/del.png' %}" alt="Delete"></button>
          </td>
        `;
      });
    }
  
    function filterUsers(role) {
      if (role === 'all') {
        populateUserTable(users);
      } else {
        const filteredUsers = users.filter(user => user.role.toLowerCase() === role.toLowerCase());
        populateUserTable(filteredUsers);
      }
    }
  
    // Initial population
    populateUserTable(users);
    populateVehicleTable();
  

</script>

{% endblock %}