{% extends 'base.html' %}
{% block content %}

<!-- ✅ Bootstrap + DataTables CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<!-- ✅ jQuery + DataTables JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<style>
  body {
    background: #f0f2f5;
    font-family: Arial, sans-serif;
  }

  .dashboard-header,
  .filters-section,
  .datatable-section {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 1600px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .filter-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }

  .filter-group {
    flex: 1;
  }

  .filter-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
  }

  .custom-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
  }

  .table-header {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
  }

  .table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
  }

  .status-active {
    color: #28a745;
    font-weight: 600;
  }

  .status-inactive {
    color: #dc3545;
    font-weight: 600;
  }
</style>

<!-- ✅ Header -->
<div class="dashboard-header">
  <h4>Employee Activation</h4>
</div>

<!-- ✅ Filters Section -->
<div class="filters-section">
  <div class="filter-row">
    <div class="filter-group">
      <div class="filter-label">Company</div>
      <select class="custom-select" id="company">
        {% for i in company_data %}
          <option value="{{ i.id }}">{{ i.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="filter-group">
      <div class="filter-label">Branch</div>
      <select class="custom-select" id="branch">
        <option value="">Select a Branch</option>
      </select>
    </div>
    <div class="filter-group">
      <div class="filter-label">Status</div>
      <select class="custom-select" id="active">
        <option value="">Select Status</option>
        <option value="0">Active</option>
        <option value="1">In active</option>
      </select>
    </div>
  </div>
</div>

<!-- ✅ Data Table Section -->
<div class="datatable-section">
  <div class="table-header">Employee Details</div>
  <div id="table-container">
    <table id="employee-table" class="display nowrap" style="width:100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>Firstname</th>
          <th>Phone</th>
          <th>Join Date</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <!-- Table body will be populated dynamically -->
      </tbody>
    </table>
  </div>
</div>

<!-- ✅ JavaScript -->
<script>
  // Global variable for DataTable
  let dataTable;
  let isTableInitialized = false;
  
  // Load branches based on selected company
  document.getElementById('company').addEventListener('change', function() {
    const companyId = this.value;
    if (companyId) {
      fetch('/get_all_branch_details/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': '{{ csrf_token }}'
        },
        body: JSON.stringify({ companyId })
      })
      .then(response => response.json())
      .then(data => {
        const branchSelect = document.getElementById('branch');
        branchSelect.innerHTML = '<option value="">Select a Branch</option>';
        data.forEach(branch => {
          const option = document.createElement('option');
          option.value = branch.id;
          option.text = branch.name;
          branchSelect.appendChild(option);
        });
      })
      .catch(error => console.error('Error fetching branches:', error));
    }
  });

  // Load employees based on selected branch and status
  document.getElementById('active').addEventListener('change', function() {
    const branchId = document.getElementById('branch').value;
    const active = this.value;

    if (branchId && active !== "") {
      loadEmployeeData(branchId, active);
    }
  });

  // Function to load employee data and create/update the table
  function loadEmployeeData(branchId, active) {
    fetch('/get_all_employee_list/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': '{{ csrf_token }}'
      },
      body: JSON.stringify({ branchId, active })
    })
    .then(response => response.json())
    .then(data => {
      // If table exists, destroy it completely
      if (isTableInitialized) {
        dataTable.destroy();
        document.getElementById('table-container').innerHTML = `
          <table id="employee-table" class="display nowrap" style="width:100%">
            <thead>
              <tr>
                <th>ID</th>
                <th>Firstname</th>
                <th>Phone</th>
                <th>Join Date</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        `;
      }

      // Create HTML for table rows
      const tbody = document.querySelector('#employee-table tbody');
      data.forEach(emp => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${emp.userdeta_id}</td>
          <td>${emp.userdeta_firstname}</td>
          <td>${emp.userdeta_phone || 'N/A'}</td>
          <td>${emp.userdeta_createddate || 'N/A'}</td>
          <td>
            ${emp.userdat_isdeleted === 0
              ? `<button class="btn btn-success btn-sm" onclick="showUserId(${emp.userdeta_id}, 'inactive', '1')">Active</button>`
              : `<button class="btn btn-danger btn-sm" onclick="showUserId(${emp.userdeta_id}, 'active', '0')">Inactive</button>`}
          </td>
        `;
        tbody.appendChild(row);
      });

      // Initialize DataTable
      dataTable = $('#employee-table').DataTable({
        pageLength: 10,
        lengthMenu: [5, 10, 25, 50, 100],
        responsive: true
      });
      
      isTableInitialized = true;
    })
    .catch(error => console.error('Error fetching employees:', error));
  }

  // Toggle employee active/inactive
  function showUserId(id, name, status) {
    const confirmAction = confirm(`Do you want to ${name} this employee?`);
    if (confirmAction) {
      fetch('/update_employee_status/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': getCSRFToken(),
        },
        body: JSON.stringify({ id: id, status: status })
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          alert(`Successfully ${name}`);
          // Refresh data by triggering current selection
          const branchId = document.getElementById('branch').value;
          const active = document.getElementById('active').value;
          if (branchId && active !== "") {
            loadEmployeeData(branchId, active);
          }
        } else {
          alert(`Failed to ${name}`);
        }
      })
      .catch(error => {
        console.error('Error:', error);
        alert("Something went wrong.");
      });
    }
  }

  // Get CSRF Token from cookies
  function getCSRFToken() {
    const cookie = document.cookie.match('(^|;)\\s*csrftoken\\s*=\\s*([^;]+)');
    return cookie ? cookie.pop() : '';
  }
</script>

{% endblock %}