{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}List Anggota - CWN{% endblock %}
{% block content %}
{% load static %}

<div class="mt-6 space-y-6">

  <!-- Card -->
  <div class="bg-white shadow rounded-2xl overflow-hidden">
    <!-- Header -->
    <div class="bg-gradient-to-r from-red-600 to-red-700 text-white py-3 px-4">
      <h4 class="text-lg font-semibold text-center">Daftar Sales Force</h4>
    </div>

    <!-- Body -->
    <div class="p-6">

      <!-- Filter Row -->
      <div class="flex flex-wrap justify-center items-center gap-4 mb-6">
        <div class="w-64">
          <input type="text" id="searchInput"
                 class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500"
                 placeholder="Cari Sales Force...">
        </div>
        <div class="w-64">
          <select name="tl_id" id="tl_id"
                  class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-red-500 focus:border-red-500">
            <option value="x" selected>Pilih Team Leader</option>
            {% for tl in team_leader_options %}
              <option value="{{ tl.tl_id }}">{{ tl.user_name }} ({{ tl.tl_id }})</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <a href="{% url 'download_salesforce_excel' %}"
             class="inline-flex items-center px-4 py-2 rounded-lg bg-green-600 text-white shadow hover:bg-green-700 transition">
            <i class="fas fa-file-excel mr-2"></i> Download Excel
          </a>
        </div>
      </div>

      <!-- Data Count -->
      <div class="mb-4 text-sm text-gray-600">
        <strong>Menampilkan <span id="dataCount">{{ all_sf|length }}</span> Sales</strong>
      </div>

      <!-- Table -->
      <div class="overflow-x-auto">
        <table id="sfTable" class="min-w-full border border-gray-200 rounded-lg overflow-hidden">
          <thead class="bg-gray-700 text-white text-sm">
            <tr>
              <th class="px-4 py-2 text-left border-b">ID</th>
              <th class="px-4 py-2 text-left border-b">Nama</th>
              <th class="px-4 py-2 text-left border-b">Tanggal Reg</th>
              <th class="px-4 py-2 text-left border-b">Status</th>
              <th class="px-4 py-2 text-left border-b">Team Leader</th>
              <th class="px-4 py-2 text-left border-b">Terverifikasi</th>
            </tr>
          </thead>
          <tbody class="text-sm text-gray-700">
            {% for sf in all_sf %}
            <tr class="hover:bg-gray-50 transition" data-id="{{ sf.sf_id }}" data-tl-id="{{ sf.tl_id }}">
              <td class="px-4 py-2 border-b">{{ sf.sf_id }}</td>
              <td class="px-4 py-2 border-b" data-field="user_name">{{ sf.user_name }}</td>
              <td class="px-4 py-2 border-b" data-field="tanggal_reg">{{ sf.tanggal_reg }}</td>
              <td class="px-4 py-2 border-b" data-field="status">{{ sf.status }}</td>
              <td class="px-4 py-2 border-b" data-field="tl_id">{{ sf.tl__user_name }}</td>
              <td class="px-4 py-2 border-b" data-field="verifikasi_status">{{ sf.verifikasi_status }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      <div id="pagination" class="flex justify-center flex-wrap gap-2 mt-6"></div>

    </div>
  </div>

</div>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.getElementById('searchInput');
  const tlFilter = document.getElementById('tl_id');
  const table = document.getElementById('sfTable');
  const tbody = table.querySelector("tbody");
  const dataCount = document.getElementById('dataCount');
  const pagination = document.getElementById("pagination");

  let currentPage = 1;
  const rowsPerPage = 10;
  const maxButtons = 5;

  function getFilteredRows() {
    const searchVal = searchInput.value.toLowerCase();
    const selectedTlId = tlFilter.value;
    return Array.from(tbody.querySelectorAll("tr")).filter(row => {
      const rowText = row.innerText.toLowerCase();
      const rowTlId = row.getAttribute('data-tl-id');
      const matchesSearch = rowText.includes(searchVal);
      const matchesTl = (selectedTlId === 'x' || rowTlId === selectedTlId);
      return matchesSearch && matchesTl;
    });
  }

  function renderTable() {
    const rows = Array.from(tbody.querySelectorAll("tr"));
    const filteredRows = getFilteredRows();

    rows.forEach(row => row.style.display = "none");

    const totalPages = Math.ceil(filteredRows.length / rowsPerPage);
    if (currentPage > totalPages) currentPage = totalPages || 1;
    const start = (currentPage - 1) * rowsPerPage;
    const end = start + rowsPerPage;

    filteredRows.slice(start, end).forEach(row => row.style.display = "");

    pagination.innerHTML = "";

    const startPage = Math.floor((currentPage - 1) / maxButtons) * maxButtons + 1;
    const endPage = Math.min(startPage + maxButtons - 1, totalPages);

    if (startPage > 1) {
      const prev = document.createElement("button");
      prev.innerHTML = "&laquo;";
      prev.className = "px-3 py-1 rounded border text-gray-600 hover:bg-gray-100";
      prev.onclick = () => { currentPage = startPage - 1; renderTable(); };
      pagination.appendChild(prev);
    }

    for (let i = startPage; i <= endPage; i++) {
      const btn = document.createElement("button");
      btn.innerText = i;
      btn.className = "px-3 py-1 rounded border " + (i === currentPage ? "bg-red-600 text-white" : "text-gray-600 hover:bg-gray-100");
      btn.onclick = () => { currentPage = i; renderTable(); };
      pagination.appendChild(btn);
    }

    if (endPage < totalPages) {
      const next = document.createElement("button");
      next.innerHTML = "&raquo;";
      next.className = "px-3 py-1 rounded border text-gray-600 hover:bg-gray-100";
      next.onclick = () => { currentPage = endPage + 1; renderTable(); };
      pagination.appendChild(next);
    }

    dataCount.textContent = filteredRows.length;
  }

  searchInput.addEventListener('keyup', () => { currentPage = 1; renderTable(); });
  tlFilter.addEventListener('change', () => { currentPage = 1; renderTable(); });

  renderTable();
});
</script>
{% endblock %}

{% endblock %}