{% extends "layout/ver_baru/base_admin.html" %}
{% load static %}
{% block title %}Manajemen Sales Force - CWN{% endblock %}
{% block content %}
<!-- Tailwind CDN (kalau belum ada) -->
<!-- <script src="https://cdn.tailwindcss.com"></script> -->

<div class="container mx-auto px-4 py-4">
    <div class="bg-gradient-to-r rounded mb-4 from-red-600 to-red-700 text-white py-3 px-4">
      <h2 class="text-lg font-semibold text-center">Manajemen Sales Force</h2>
    </div>

    <div class="bg-white shadow rounded-lg p-4">

      <div class="flex justify-between items-center mb-4">
        <!-- Search bar -->
        <form method="get" class="flex w-2/3">
          <input type="text" name="q" value="{{ query }}" placeholder="Cari Sales Force..."
                class="flex-grow p-2 border border-gray-400 rounded-l-lg text-sm">
          <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-r-lg text-sm">
            Cari
          </button>
        </form>

        <!-- Button tambah -->
        <button id="openAddModal"
                class="bg-red-600 hover:bg-red-700 text-white px-4 py-1 rounded-lg ml-4 mr-2 text-sm">
            + Tambah Sales Force
        </button>
        <a href="{% url 'download_salesforce_excel' %}"
          class="bg-green-600 hover:bg-green-700 text-white px-4 py-1 rounded-lg text-center text-sm">
            Download Data (XLSX)
        </a>
      </div>

      <!-- Tabel -->
      <div class="overflow-x-auto">
          <table class="w-full border bg-white text-sm text-left">
              <thead class="bg-gray-800 text-white">
                  <tr>
                      <th class="p-2 border">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">TL</th>
                      <th class="p-2 border">Aksi</th>
                  </tr>
              </thead>
              <tbody id="sfTable">
                  {% for sf in all_sf %}
                  <tr class="border hover:bg-gray-100" data-id="{{ sf.sf_id }}">
                      <td class="p-2 border">{{ sf.sf_id }}</td>
                      <td class="p-2 border">{{ sf.user_name }}</td>
                      <td class="p-2 border">{{ sf.email }}</td>
                      <td class="p-2 border">{{ sf.no_hp }}</td>
                      <td class="p-2 border">{{ sf.tl__user_name }}</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="{{ sf.sf_id }}"
                                  data-name="{{ sf.user_name }}"
                                  data-email="{{ sf.email }}"
                                  data-nohp="{{ sf.no_hp }}"
                                  data-tl="{{ sf.tl_id }}">
                              Edit
                          </button>
                          <button class="deleteBtn bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm"
                                  data-id="{{ sf.sf_id }}">
                              Hapus
                          </button>
                      </td>
                  </tr>
                  {% endfor %}
              </tbody>
          </table>
          <div class="flex justify-center mt-4 space-x-1">
            {% if all_sf.has_previous %}
              <a href="?q={{ query }}&page={{ all_sf.previous_page_number }}"
                class="px-3 py-1 border rounded bg-gray-200">&laquo;</a>
            {% endif %}

            {% for num in page_range %}
              {% if num == all_sf.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 all_sf.has_next %}
              <a href="?q={{ query }}&page={{ all_sf.next_page_number }}"
                class="px-3 py-1 border rounded bg-gray-200">&raquo;</a>
            {% endif %}
          </div>
      </div>
    </div>
</div>

<!-- Modal Tambah -->
<div id="addModal" 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-lg">
    <h3 class="text-xl font-bold mb-4">Tambah Sales Force</h3>
    <form method="POST" action="{% url 'salesforce_create' %}">
      {% csrf_token %}
      <div class="grid grid-cols-2 gap-4">
        <input type="text" name="sf_id" placeholder="SF ID" required class="p-2 border rounded">
        <input type="text" name="username" placeholder="Nama" required class="p-2 border rounded">
        <input type="email" name="email" placeholder="Email" required class="p-2 border rounded">
        <input type="text" name="no_hp" placeholder="No HP" required class="p-2 border rounded">
        <select name="tl_id" class="p-2 border rounded col-span-2" required>
            <option value="" class="text-gray-100/30">Pilih TL</option>
            {% for tl in tl_options %}
            <option value="{{ tl.tl_id }}">{{ tl.user_name }} ({{ tl.tl_id }})</option>
            {% endfor %}
        </select>
        <input type="text" name="tele_uid" placeholder="Telegram UID (opsional)" 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 px-4 py-2 text-white 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>

<!-- Modal Edit -->
<div id="editModal" 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-lg">
    <h3 class="text-xl font-bold mb-4">Edit Sales Force</h3>
    <form method="POST" action="{% url 'salesforce_update' 0 %}" id="editForm">
      {% csrf_token %}
      <input type="hidden" name="sf_id" id="edit_sf_id">
      <div class="grid grid-cols-2 gap-4">
        <input type="text" name="username" id="edit_username" placeholder="Nama" required class="p-2 border rounded">
        <input type="email" name="email" id="edit_email" placeholder="Email" required class="p-2 border rounded">
        <input type="text" name="no_hp" id="edit_nohp" placeholder="No HP" required class="p-2 border rounded">
        <select name="tl_id" id="edit_tl_id" class="p-2 border rounded col-span-2" required>
            <option value="" class="text-gray-100/30">Pilih TL</option>
            {% for tl in tl_options %}
            <option value="{{ tl.tl_id }}">{{ tl.user_name }} ({{ tl.tl_id }})</option>
            {% endfor %}
        </select>
      </div>
      <div class="flex justify-end mt-4 space-x-2">
        <button type="button" class="closeModal bg-gray-400 px-4 py-2 text-white rounded">Batal</button>
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Update</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Hapus -->
<div id="deleteModal" 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-md text-center">
    <h3 class="text-xl font-bold mb-4">Yakin ingin menghapus?</h3>
    <form method="POST" action="{% url 'salesforce_delete' 0 %}" id="deleteForm">
      {% csrf_token %}
      <input type="hidden" name="sf_id" id="delete_sf_id">
      <div class="flex justify-center space-x-2 mt-4">
        <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">Hapus</button>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  
  // modal logic
  const openAddModal = document.getElementById("openAddModal");
  const addModal = document.getElementById("addModal");
  const editModal = document.getElementById("editModal");
  const deleteModal = document.getElementById("deleteModal");
  const closeButtons = document.querySelectorAll(".closeModal");

  openAddModal.addEventListener("click", () => addModal.classList.remove("hidden"));
  closeButtons.forEach(btn => btn.addEventListener("click", () => {
    addModal.classList.add("hidden");
    editModal.classList.add("hidden");
    deleteModal.classList.add("hidden");
  }));

  // edit button
  document.querySelectorAll(".editBtn").forEach(btn => {
    btn.addEventListener("click", () => {
      document.getElementById("edit_sf_id").value = btn.dataset.id;
      document.getElementById("edit_username").value = btn.dataset.name;
      document.getElementById("edit_email").value = btn.dataset.email;
      document.getElementById("edit_nohp").value = btn.dataset.nohp;
      document.getElementById("edit_tl_id").value = btn.dataset.tl;

      // set action url sesuai sf_id
      document.getElementById("editForm").action =
        "{% url 'salesforce_update' 0 %}".replace("0", btn.dataset.id);

      editModal.classList.remove("hidden");
    });
  });

  // delete button
  document.querySelectorAll(".deleteBtn").forEach(btn => {
    btn.addEventListener("click", () => {
      document.getElementById("delete_sf_id").value = btn.dataset.id;
      document.getElementById("deleteForm").action = "{% url 'salesforce_delete' 0 %}".replace("0", btn.dataset.id);
      deleteModal.classList.remove("hidden");
    });
  });
});
</script>
{% endblock %}