{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Manajemen Team Leader - CWN{% endblock %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="container mx-auto px-4 py-4">
  <h2 class="text-center text-white p-3 rounded mb-6 bg-red-700 font-bold text-xl">Manajemen Team Leader</h2>
    <div class="bg-white shadow rounded-lg">
        <!-- Header Card -->
        <div class="flex items-center justify-between border-b px-4 py-3">
          <!-- Search bar -->
          <form method="get" class="flex w-1/2">
            <input type="text" name="q" value="{{ query }}" placeholder="Cari Team Leader..."
                  class="flex-grow p-2 border border-gray-400 rounded-l-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500">
            <button type="submit"
                    class="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-r-lg text-sm">
              Cari
            </button>
          </form>

          <!-- Tombol aksi -->
          <div class="flex space-x-2 ml-4">
            <button id="openAddModal"
                    class="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-lg text-sm">
              + Tambah TL
            </button>
            <a href="{% url 'download_team_leader' %}"
              class="bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded-lg text-sm">
              Download XLSX
            </a>
          </div>
        </div>

        <!-- Notifikasi -->
        {% if success %}
        <script>
            Swal.fire({ icon: 'success', title: 'Berhasil', text: '{{ success }}' });
        </script>
        {% elif error %}
        <script>
            Swal.fire({ icon: 'error', title: 'Gagal', text: '{{ error }}' });
        </script>
        {% endif %}

        <!-- Tabel -->
        <div class="overflow-x-auto p-4">
            <table class="w-full border text-sm text-left">
                <thead class="bg-gray-800 text-white">
                    <tr>
                        <th class="p-2 border">TL ID</th>
                        <th class="p-2 border">Nama</th>
                        <th class="p-2 border">Email</th>
                        <th class="p-2 border">No HP</th>
                        <th class="p-2 border">WOK</th>
                        <th class="p-2 border">Branch ID</th>
                        <th class="p-2 border">Status</th>
                        <th class="p-2 border">Verifikasi</th>
                        <th class="p-2 border">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for tl in tl_list %}
                    <tr class="border hover:bg-gray-50">
                        <td class="p-2 border">{{ tl.tl_id }}</td>
                        <td class="p-2 border">{{ tl.user_name }}</td>
                        <td class="p-2 border">{{ tl.email }}</td>
                        <td class="p-2 border">{{ tl.no_hp }}</td>
                        <td class="p-2 border">{{ tl.wok_name }}</td>
                        <td class="p-2 border">{{ tl.branch_id }}</td>
                        <td class="p-2 border">{{ tl.status }}</td>
                        <td class="p-2 border">{{ tl.verifikasi }}</td>
                        <td class="p-2 border space-x-2">
                            <button class="editBtn bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm"
                                    data-id="{{ tl.tl_id }}"
                                    data-name="{{ tl.user_name }}"
                                    data-email="{{ tl.email }}"
                                    data-nohp="{{ tl.no_hp }}"
                                    data-wok="{{ tl.wok_id }}"
                                    data-branch="{{ tl.branch_id }}"
                                    data-tele="{{ tl.tele_uid }}"
                                    data-status="{{ tl.status }}">
                                Edit
                            </button>
                            <button class="deleteBtn bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm"
                                    data-id="{{ tl.tl_id }}">
                                Hapus
                            </button>
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="100%" class="text-center p-4">Tidak ada data</td></tr>
                    {% endfor %}
                </tbody>
            </table>
            <div class="flex justify-center mt-4 space-x-1">
              {% if tl_list.has_previous %}
                <a href="?q={{ query }}&page={{ tl_list.previous_page_number }}"
                  class="px-3 py-1 border rounded bg-gray-200">&laquo;</a>
              {% endif %}

              {% for num in tl_list.paginator.page_range %}
                {% if num == tl_list.number %}
                  <span class="px-3 py-1 border rounded bg-red-600 text-white">{{ num }}</span>
                {% else %}
                  <a href="?q={{ query }}&page={{ num }}"
                    class="px-3 py-1 border rounded bg-gray-200 hover:bg-gray-300">{{ num }}</a>
                {% endif %}
              {% endfor %}

              {% if tl_list.has_next %}
                <a href="?q={{ query }}&page={{ tl_list.next_page_number }}"
                  class="px-3 py-1 border rounded bg-gray-200">&raquo;</a>
              {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah/Edit -->
<div id="tlModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
  <div class="bg-white rounded-lg p-6 w-full max-w-2xl">
    <h3 id="modalTitle" class="text-xl font-bold mb-4">Tambah Team Leader</h3>
    <form method="POST" id="tlForm" action="{% url 'manage_team_leader' %}">
      {% csrf_token %}
      <input type="hidden" name="form_mode" id="form_mode" value="create">

      <div class="grid grid-cols-2 gap-4">
        <input type="text" name="tl_id" id="tl_id" placeholder="TL ID" required class="p-2 border rounded">
        <input type="text" name="user_name" id="user_name" placeholder="Nama" required class="p-2 border rounded">
        <input type="email" name="email" id="email" placeholder="Email" required class="p-2 border rounded">
        <input type="text" name="no_hp" id="no_hp" placeholder="No HP" required class="p-2 border rounded">
        <select name="wok_id" id="wok_id" class="p-2 border rounded" required>
            <option value="">Pilih Wilayah Operasional Kerja</option>
            {% for wok in wok_options %}
            <option value="{{ wok.wok_id }}">{{ wok.wok_name }} ({{ wok.wok_id }})</option>
            {% endfor %}
        </select>
        <input type="text" name="branch_id" id="branch_id" placeholder="Branch ID" required class="p-2 border rounded">
        <input type="text" name="tele_uid" id="tele_uid" placeholder="Telegram UID (opsional)" class="p-2 border rounded col-span-2">
        <input type="text" name="status" id="status" placeholder="Status" class="p-2 border rounded col-span-2">
      </div>

      <div class="flex justify-end mt-4 space-x-2">
        <button type="button" class="closeModal bg-gray-400 text-white px-4 py-2 rounded">Batal</button>
        <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">Simpan</button>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const addBtn = document.getElementById("openAddModal");
  const modal = document.getElementById("tlModal");
  const closeBtns = document.querySelectorAll(".closeModal");
  const modalTitle = document.getElementById("modalTitle");
  const formMode = document.getElementById("form_mode");
  const tlForm = document.getElementById("tlForm");

  // buka modal tambah
  addBtn.addEventListener("click", () => {
    formMode.value = "create";
    modalTitle.textContent = "Tambah Team Leader";
    tlForm.reset();
    modal.classList.remove("hidden");
  });

  // tutup modal
  closeBtns.forEach(btn => btn.addEventListener("click", () => modal.classList.add("hidden")));

  // edit data
  document.querySelectorAll(".editBtn").forEach(btn => {
    btn.addEventListener("click", () => {
      formMode.value = "update";
      modalTitle.textContent = "Edit Team Leader";
      document.getElementById("tl_id").value = btn.dataset.id;
      document.getElementById("user_name").value = btn.dataset.name;
      document.getElementById("email").value = btn.dataset.email;
      document.getElementById("no_hp").value = btn.dataset.nohp;
      document.getElementById("wok_id").value = btn.dataset.wok;
      document.getElementById("branch_id").value = btn.dataset.branch;
      document.getElementById("tele_uid").value = btn.dataset.tele;
      document.getElementById("status").value = btn.dataset.status;
      modal.classList.remove("hidden");
    });
  });

  // hapus data
  document.querySelectorAll(".deleteBtn").forEach(btn => {
    btn.addEventListener("click", () => {
      Swal.fire({
        title: 'Apakah Anda yakin?',
        text: "Data ini akan dihapus permanen!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!'
      }).then((result) => {
        if (result.isConfirmed) {
          const form = document.createElement("form");
          form.method = "POST";
          form.action = "{% url 'manage_team_leader' %}";

          const csrf = document.createElement("input");
          csrf.type = "hidden";
          csrf.name = "csrfmiddlewaretoken";
          csrf.value = "{{ csrf_token }}";

          const mode = document.createElement("input");
          mode.type = "hidden";
          mode.name = "form_mode";
          mode.value = "delete";

          const idField = document.createElement("input");
          idField.type = "hidden";
          idField.name = "tl_id";
          idField.value = btn.dataset.id;

          form.appendChild(csrf);
          form.appendChild(mode);
          form.appendChild(idField);
          document.body.appendChild(form);
          form.submit();
        }
      });
    });
  });
});
</script>
{% endblock %}