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

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

<div class="user-management-wrapper">
  <div class="user-management">
    <div class="header4">
      <h1>Zone Management</h1>
      <button id="createUserBtn" class="btn btn-primary" style="background-color: rgb(10,107,74)">
        <i class="fas fa-user-plus"></i> Create Gate
      </button>
    </div>
    
    <div class="tab-container">
      <button class="tab-btn active" data-tab="gateTab">Gate</button>
      <button class="tab-btn" data-tab="zoneTab">Zone</button>
      <button class="tab-btn" data-tab="touristAreaTab">Tourist Area</button>
      <button class="tab-btn" data-tab="nationalParkTab">National Park</button>
    </div>

    <div id="gateTab" 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>GATE NAME</th>
            <th>ZONE NAME</th>
            <th>TOTAL VEHICLE</th>
            <th>TOURISM</th>
            <th>NATIONAL PARK</th>
          </tr>
        </thead>
        <tbody>
          <!-- User table rows will be dynamically populated -->
        </tbody>
      </table>
    </div>
    
    <div id="zoneTab" class="tab-content">
      <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="zoneTable">
        <thead>
          <tr>
            <th>ZONE NAME</th>
            <th>NUMBER OF GATES</th>
            <th>TOTAL AREA</th>
            <th>TOURIST ATTRACTIONS</th>
          </tr>
        </thead>
        <tbody>
          <!-- Zone table rows will be dynamically populated -->
        </tbody>
      </table>
    </div>
    
    <div id="touristAreaTab" class="tab-content">
      <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="touristAreaTable">
        <thead>
          <tr>
            <th>TOURIST AREA NAME</th>
            <th>ZONE NAME</th>
            <th>VISITOR COUNT</th>
            <th>ATTRACTIONS</th>
          </tr>
        </thead>
        <tbody>
          <!-- Tourist Area table rows will be dynamically populated -->
        </tbody>
      </table>
    </div>
    
    <div id="nationalParkTab" class="tab-content">
      <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="nationalParkTable">
        <thead>
          <tr>
            <th>NATIONAL PARK NAME</th>
            <th>ZONE NAME</th>
            <th>AREA SIZE</th>
            <th>ANIMALS</th>
          </tr>
        </thead>
        <tbody>
          <!-- National Park 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 -->
  <div id="createUserModal" class="modal">
    <div class="modal-content">
      <h2>Create Gate</h2>
      <form id="createUserForm">
        <input type="text" id="userName" placeholder="Gate Name" required>
        
        <select name="zone" id="zoneSelect">
          <option value="volvo">Volvo</option>
          <!-- Add more options dynamically if needed -->
        </select>

        <div style="margin-bottom: 10px;">
          <input type="text" id="latitude" placeholder="Latitude" required style="width: 48%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
          <input type="text" id="longitude" placeholder="Longitude" required style="width: 48%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; float: right;">
        </div>

        <div style="margin-bottom: 20px; clear: both; position: relative;">
          <label style="display: block; margin-bottom: 5px;">Assign Vehicle</label>
          <div style="border: 1px solid #ccc; border-radius: 4px; padding: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;" onclick="toggleDropdown()">
            <span>Select Vehicles</span>
            <span style="font-size: 12px;">&#9660;</span> <!-- Downward arrow icon -->
          </div>
          <div id="dropdown" style="display: none; position: absolute; width: 100%; border: 1px solid #ccc; background: white; z-index: 1000;">
            <label style="display: block; margin-bottom: 5px;">
              <input type="checkbox" name="vehicle" value="GJ-05-AG-2689" style="margin-right: 5px;"> GJ-05-AG-2689
            </label>
            <label style="display: block; margin-bottom: 5px;">
              <input type="checkbox" name="vehicle" value="GJ-05-AG-2690" style="margin-right: 5px;"> GJ-05-AG-2690
            </label>
            <label style="display: block;">
              <input type="checkbox" name="vehicle" value="GJ-05-AG-2691" style="margin-right: 5px;"> GJ-05-AG-2691
            </label>
          </div>
        </div>

        <div class="form-actions">
          <button type="button" id="cancelCreate" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary">Create Gate</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>

    document.addEventListener('DOMContentLoaded', function() {
      const createUserBtn = document.getElementById('createUserBtn');
      const tabButtons = document.querySelectorAll('.tab-btn');
  
      tabButtons.forEach(button => {
        button.addEventListener('click', () => {
          const tabName = button.getAttribute('data-tab');
  
          // Update button text based on the selected tab
          if (tabName === 'gateTab') {
            createUserBtn.innerHTML = '<i class="fas fa-user-plus"></i> Create Gate';
          } else if (tabName === 'zoneTab') {
            createUserBtn.innerHTML = '<i class="fas fa-plus"></i> Create Zone';
          } else if (tabName === 'touristAreaTab') {
            createUserBtn.innerHTML = '<i class="fas fa-plus"></i> Create Tourist Area';
          } else if (tabName === 'nationalParkTab') {
            createUserBtn.innerHTML = '<i class="fas fa-plus"></i> Create National Park';
          }
        });
      });
    });

  
function toggleDropdown() {
  var dropdown = document.getElementById('dropdown');
  dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
  console.log("Dropdown toggled, current display: ", dropdown.style.display);
}

document.addEventListener('DOMContentLoaded', function() {
  console.log("Document loaded");

  // Select DOM elements
  const createUserBtn = document.getElementById('createUserBtn');
  const createUserModal = document.getElementById('createUserModal');
  const cancelCreate = document.getElementById('cancelCreate');
  const createUserForm = document.getElementById('createUserForm');
  
  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';
    console.log("Create User Button clicked");
  });
  
  cancelCreate.addEventListener('click', () => {
    createUserModal.style.display = 'none';
    console.log("Cancel Create clicked");
  });
  

  cancelCreateVehicle.addEventListener('click', () => {
    createVehicleModal.style.display = 'none';
    console.log("Cancel Create Vehicle clicked");
  });
  
  window.addEventListener('click', (event) => {
    if (event.target === createUserModal) {
      createUserModal.style.display = 'none';
      console.log("Clicked outside Create User Modal");
    }
    if (event.target === createVehicleModal) {
      createVehicleModal.style.display = 'none';
      console.log("Clicked outside Create Vehicle Modal");
    }
  });
  
  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';
  });
  
  // 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');
      
      // Switch tabs
      tabContents.forEach(content => {
        if (content.id === tabName) {
          content.classList.add('active');
          console.log(`Showing tab: ${tabName}`);
          if (tabName === 'gateTab') {
            filterUsers('all'); // Call function to update the gate tab content
          } else if (tabName === 'zoneTab') {
            populateZoneTable(); // Call function to update the zone tab content
          } else if (tabName === 'touristAreaTab') {
            populateTouristAreaTable(); // Call function to update the tourist area tab content
          } else if (tabName === 'nationalParkTab') {
            populateNationalParkTable(); // Call function to update the national park tab content
          }
        }
      });
    });
  });
  
  // Dummy data for tables
  const users = [
    { name: 'Gate 1', zone: 'West Zone', totalVehicle: '25', tourism: 'Madhav National Park', nationalPark: 'Park 1' },
    { name: 'Gate 2', zone: 'East Zone', totalVehicle: '30', tourism: 'Sardar Patel Park', nationalPark: 'Park 2' }
  ];
  
  const zones = [
    { name: 'West Zone', gates: '5', area: '200 sq km', attractions: 'Several' },
    { name: 'East Zone', gates: '3', area: '150 sq km', attractions: 'Few' }
  ];
  
  const touristAreas = [
    { name: 'Madhav National Park', zone: 'West Zone', visitors: '5000', attractions: 'Wildlife' }
  ];
  
  const nationalParks = [
    { name: 'Park 1', zone: 'West Zone', size: '100 sq km', animals: 'Various' },
    { name: 'Park 2', zone: 'East Zone', size: '80 sq km', animals: 'Few' }
  ];
  
  const userTable = document.getElementById('userTable').getElementsByTagName('tbody')[0];
  const zoneTable = document.getElementById('zoneTable').getElementsByTagName('tbody')[0];
  const touristAreaTable = document.getElementById('touristAreaTable').getElementsByTagName('tbody')[0];
  const nationalParkTable = document.getElementById('nationalParkTable').getElementsByTagName('tbody')[0];
  
  function filterUsers(criteria) {
    userTable.innerHTML = '';
    users.forEach(user => {
      if (criteria === 'all' || user.name.includes(criteria)) {
        const row = userTable.insertRow();
        row.insertCell(0).textContent = user.name;
        row.insertCell(1).textContent = user.zone;
        row.insertCell(2).textContent = user.totalVehicle;
        row.insertCell(3).textContent = user.tourism;
        row.insertCell(4).textContent = user.nationalPark;
      }
    });
    console.log("User table filtered");
  }
  
  function populateZoneTable() {
    zoneTable.innerHTML = '';
    zones.forEach(zone => {
      const row = zoneTable.insertRow();
      row.insertCell(0).textContent = zone.name;
      row.insertCell(1).textContent = zone.gates;
      row.insertCell(2).textContent = zone.area;
      row.insertCell(3).textContent = zone.attractions;
    });
    console.log("Zone table populated");
  }
  
  function populateTouristAreaTable() {
    touristAreaTable.innerHTML = '';
    touristAreas.forEach(area => {
      const row = touristAreaTable.insertRow();
      row.insertCell(0).textContent = area.name;
      row.insertCell(1).textContent = area.zone;
      row.insertCell(2).textContent = area.visitors;
      row.insertCell(3).textContent = area.attractions;
    });
    console.log("Tourist Area table populated");
  }
  
  function populateNationalParkTable() {
    nationalParkTable.innerHTML = '';
    nationalParks.forEach(park => {
      const row = nationalParkTable.insertRow();
      row.insertCell(0).textContent = park.name;
      row.insertCell(1).textContent = park.zone;
      row.insertCell(2).textContent = park.size;
      row.insertCell(3).textContent = park.animals;
    });
    console.log("National Park table populated");
  }
  
  // Initialize default view
  filterUsers('all'); // Show all users by default
  populateZoneTable();
  populateTouristAreaTable();
  populateNationalParkTable();
});
</script>

{%endblock%}