{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Manage DJP - CWN{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="max-w-7xl mx-auto px-4 mt-6">
  <h2 class="text-center text-white py-3 rounded-lg mb-6 bg-red-600 text-xl font-semibold">
    Monitoring Aktivitas CLOCK IN DJP
  </h2>

  <!-- FILTER FORM -->
  <form method="get" class="bg-white shadow rounded-lg p-4 mb-6">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
      <div>
        <label class="block text-sm font-medium">Nama Tugas</label>
        <input type="text" name="nama_tugas" class="w-full border rounded px-2 py-1"
          value="{{ request.GET.nama_tugas }}" placeholder="Cari Nama Tugas">
      </div>
      <div>
        <label class="block text-sm font-medium">Nama ODP</label>
        <input type="text" name="nama_odp" class="w-full border rounded px-2 py-1"
          value="{{ request.GET.nama_odp }}" placeholder="Cari Nama ODP">
      </div>
      <div>
        <label class="block text-sm font-medium">Nama Sales</label>
        <select name="user_sales" class="w-full border rounded px-2 py-1">
          <option value="">-- Nama Sales --</option>
          {% for sales in sales_list %}
            <option value="{{ sales }}" {% if request.GET.user_sales == sales %}selected{% endif %}>{{ sales }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium">Nama TL</label>
        <select name="user_leader" class="w-full border rounded px-2 py-1">
          <option value="">-- Nama TL --</option>
          {% for leader in leader_list %}
            <option value="{{ leader }}" {% if request.GET.user_leader == leader %}selected{% endif %}>{{ leader }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium">Kategori Tugas</label>
        <select name="kategori_tugas" class="w-full border rounded px-2 py-1">
          <option value="">-- Kategori Tugas --</option>
          {% for kategori in kategori_list %}
            <option value="{{ kategori }}" {% if request.GET.kategori_tugas == kategori %}selected{% endif %}>{{ kategori }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium">Status</label>
        <select name="status" class="w-full border rounded px-2 py-1">
          <option value="">-- Status --</option>
          {% for st in status_list %}
            <option value="{{ st }}" {% if request.GET.status == st %}selected{% endif %}>{{ st }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium">Clock In</label>
        <input type="date" name="tanggal_mulai" class="w-full border rounded px-2 py-1"
          value="{{ request.GET.tanggal_mulai }}">
      </div>
      <div>
        <label class="block text-sm font-medium">Clock Out</label>
        <input type="date" name="tanggal_akhir" class="w-full border rounded px-2 py-1"
          value="{{ request.GET.tanggal_akhir }}">
      </div>
    </div>
    <div class="flex justify-end mt-4">
      <button type="submit"
          class="px-12 py-2 bg-red-600 text-white rounded hover:bg-red-700">
          Filter
      </button>
    </div>
  </form>

  <!-- UPLOAD FORM -->
  <div class="bg-white shadow rounded-lg mb-6">
    <div class="bg-red-600 text-white px-4 py-2 rounded-t-lg">
      <strong>Upload Data Clockin DJP via Excel</strong>
    </div>
    <div class="p-4">
      <form id="excel-upload-form" method="post" enctype="multipart/form-data"
        action="{% url 'upload_excel_clockin' %}">
        {% csrf_token %}
        <div class="mb-3">
          <div id="drop-area"
            class="border-2 border-dashed border-gray-400 rounded p-6 text-center cursor-pointer bg-gray-50 hover:bg-gray-100">
            <p class="text-gray-500 mb-2">Tarik & letakkan file Excel di sini, atau klik untuk memilih</p>
            <input type="file" id="excel_file" name="excel_file" class="hidden" accept=".xlsx,.xls">
            <span id="file-name" class="text-sm block mt-2"></span>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <button type="submit"
            class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Upload</button>
          <a href="https://docs.google.com/spreadsheets/d/1qsg19eTWd3WkYQwtSiAsSmP7QrF3WcKB/edit?usp=sharing"
            class="text-indigo-600 hover:underline" target="_blank">Download Contoh Format Excel</a>
        </div>
      </form>
    </div>
  </div>

  <!-- TABEL -->
  <div class="bg-white shadow rounded-lg">
    <div class="bg-red-600 text-white px-4 py-2 rounded-t-lg">
      CLOCK IN DJP
    </div>
    <div class="p-4 overflow-x-auto">
      <div class="max-w-[1200px]">
        <table id="dataTable" class="w-full border text-sm text-left text-gray-700">
          <thead class="bg-gray-100">
            <tr>
              <th class="px-2 py-1">No</th>
              <th class="px-2 py-1">ODP</th>
              <th class="px-2 py-1">Nama Tugas</th>
              <th class="px-2 py-1">Kategori</th>
              <th class="px-2 py-1">Latitude</th>
              <th class="px-2 py-1">Longitude</th>
              <th class="px-2 py-1">Check In</th>
              <th class="px-2 py-1">Check Out</th>
              <th class="px-2 py-1">Sales</th>
              <th class="px-2 py-1">TL</th>
              <th class="px-2 py-1">Status</th>
              <th class="px-2 py-1">Aksi</th>
            </tr>
          </thead>
          <tbody>
            {% for item in data %}
            <tr data-tugas-id="{{ item.tugas_id }}" class="border-b">
              <td class="px-2 py-1">{{ forloop.counter }}</td>
              <td class="px-2 py-1">{{ item.odp }}</td>
              <td class="px-2 py-1">{{ item.nama_tugas }}</td>
              <td class="px-2 py-1">{{ item.kategori_tugas }}</td>
              <td class="px-2 py-1">{{ item.latitude }}</td>
              <td class="px-2 py-1">{{ item.longitude }}</td>
              <td class="px-2 py-1">{{ item.tanggal_mulai }}</td>
              <td class="px-2 py-1">{{ item.tanggal_akhir }}</td>
              <td class="px-2 py-1">{{ item.user_sales_force }}</td>
              <td class="px-2 py-1">{{ item.user_team_leader }}</td>
              <td class="px-2 py-1">{{ item.status }}</td>
              <td class="px-2 py-1">
                <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600 text-xs">Edit</button>
                <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700 text-xs">Delete</button>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="12" class="text-center py-2">Tidak ada data ODP.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </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 shadow-lg w-full max-w-3xl p-6">
    <h3 class="text-lg font-semibold mb-4">Edit Data Clock In</h3>
    <form id="editForm">
      {% csrf_token %}
      <input type="hidden" id="edit_tugas_id" name="tugas_id">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm font-medium">Nama Tugas</label>
          <input type="text" id="edit_nama_tugas" name="nama_tugas" class="w-full border rounded px-2 py-1">
        </div>
        <div>
          <label class="block text-sm font-medium">ODP</label>
          <input type="text" id="edit_odp" name="odp" class="w-full border rounded px-2 py-1">
        </div>
        <div>
          <label class="block text-sm font-medium">Kategori</label>
          <input type="text" id="edit_kategori_tugas" name="kategori_tugas" class="w-full border rounded px-2 py-1">
        </div>
        <div>
          <label class="block text-sm font-medium">Status</label>
          <input type="text" id="edit_status" name="status" class="w-full border rounded px-2 py-1">
        </div>
      </div>
      <div class="flex justify-end gap-2 mt-6">
        <button type="button" id="closeEditBtn"
          class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">Batal</button>
        <button type="submit"
          class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">Simpan</button>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
    // === Helper ambil CSRF dari cookie ===
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== "") {
            const cookies = document.cookie.split(";");
            for (let cookie of cookies) {
                cookie = cookie.trim();
                if (cookie.startsWith(name + "=")) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    const csrftoken = getCookie("csrftoken");

    // === Pagination ===
    let currentPage = 1;
    const rowsPerPage = 10;

    function paginateTable() {
    const table = document.getElementById("dataTable");
    const tbody = table.querySelector("tbody");
    const rows = Array.from(tbody.querySelectorAll("tr"));
    const totalPages = Math.ceil(rows.length / rowsPerPage);

    let pagination = document.querySelector(".pagination");
    if (!pagination) {
        pagination = document.createElement("div");
        pagination.className = "pagination flex justify-center mt-3 space-x-1";
        table.parentElement.appendChild(pagination);
    }
    pagination.innerHTML = "";

    // tampilkan rows sesuai halaman
    const start = (currentPage - 1) * rowsPerPage;
    const end = start + rowsPerPage;
    rows.forEach((row, i) => {
        row.style.display = i >= start && i < end ? "" : "none";
    });

    // === tombol Prev («) ===
    const prevBtn = document.createElement("button");
    prevBtn.innerHTML = "&laquo;";
    prevBtn.className = "px-2 py-1 border rounded bg-gray-100 disabled:opacity-50";
    prevBtn.disabled = currentPage === 1;
    prevBtn.onclick = () => { currentPage--; paginateTable(); };
    pagination.appendChild(prevBtn);

    // === angka halaman (maksimal 5 angka) ===
    let startPage = Math.max(1, currentPage - 2);
    let endPage = Math.min(totalPages, startPage + 4);

    // kalau sudah dekat akhir, geser window biar tetap 5 angka
    if (endPage - startPage < 4) {
        startPage = Math.max(1, endPage - 4);
    }

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

    // === tombol Next (») ===
    const nextBtn = document.createElement("button");
    nextBtn.innerHTML = "&raquo;";
    nextBtn.className = "px-2 py-1 border rounded bg-gray-100 disabled:opacity-50";
    nextBtn.disabled = currentPage === totalPages;
    nextBtn.onclick = () => { currentPage++; paginateTable(); };
    pagination.appendChild(nextBtn);
    }
    paginateTable();

    // === Modal ===
    const editModal = document.getElementById("editModal");
    const closeEditBtn = document.getElementById("closeEditBtn");
    function openEditModal() { editModal.classList.remove("hidden"); }
    function closeEditModal() { editModal.classList.add("hidden"); }
    closeEditBtn.addEventListener("click", closeEditModal);

    // === Edit ===
    document.querySelectorAll(".edit-btn").forEach(btn => {
        btn.addEventListener("click", e => {
        const row = e.target.closest("tr");
        document.getElementById("edit_tugas_id").value = row.dataset.tugasId;
        document.getElementById("edit_nama_tugas").value = row.children[2].innerText.trim();
        document.getElementById("edit_odp").value = row.children[1].innerText.trim();
        document.getElementById("edit_kategori_tugas").value = row.children[3].innerText.trim();
        document.getElementById("edit_status").value = row.children[10].innerText.trim();
        openEditModal();
        });
    });

    document.getElementById("editForm").addEventListener("submit", e => {
        e.preventDefault();
        const data = {
        tugas_id: document.getElementById("edit_tugas_id").value,
        nama_tugas: document.getElementById("edit_nama_tugas").value,
        odp: document.getElementById("edit_odp").value,
        kategori_tugas: document.getElementById("edit_kategori_tugas").value,
        status: document.getElementById("edit_status").value,
        };
        fetch("{% url 'update_clockin_ajax' %}", {
        method: "POST",
        headers: { "Content-Type": "application/json", "X-CSRFToken": csrftoken },
        body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(res => {
        if (res.status === "success") {
            Swal.fire("Berhasil", "Data berhasil diperbarui!", "success");
            closeEditModal();
            location.reload();
        } else {
            Swal.fire("Gagal", res.message || "Update gagal", "error");
        }
        });
    });

    // === Delete ===
    document.querySelectorAll(".delete-btn").forEach(btn => {
        btn.addEventListener("click", e => {
        const row = e.target.closest("tr");
        const tugasId = row.dataset.tugasId;
        Swal.fire({ title: "Hapus data ini?", showCancelButton: true }).then(result => {
            if (result.isConfirmed) {
            fetch("{% url 'delete_clockin_ajax' %}", {
                method: "POST",
                headers: { "Content-Type": "application/json", "X-CSRFToken": csrftoken },
                body: JSON.stringify({ tugas_id: tugasId })
            })
            .then(r => r.json())
            .then(res => {
                if (res.status === "success") {
                row.remove();
                Swal.fire("Terhapus!", "", "success");
                paginateTable();
                } else {
                Swal.fire("Gagal", res.message || "Delete gagal", "error");
                }
            });
            }
        });
        });
    });

    // === Upload Excel ===
    const dropArea = document.getElementById("drop-area");
    const fileInput = document.getElementById("excel_file");
    const fileNameSpan = document.getElementById("file-name");
    function showFileName(file) {
        fileNameSpan.textContent = file ? file.name : "";
        fileNameSpan.className = file ? "text-green-600 font-semibold text-sm" : "";
    }
    dropArea.addEventListener("click", () => fileInput.click());
    fileInput.addEventListener("change", () => showFileName(fileInput.files[0]));
    ["dragenter", "dragover"].forEach(ev => {
        dropArea.addEventListener(ev, e => { e.preventDefault(); dropArea.classList.add("bg-gray-200"); });
    });
    ["dragleave", "drop"].forEach(ev => {
        dropArea.addEventListener(ev, e => { e.preventDefault(); dropArea.classList.remove("bg-gray-200"); });
    });
    dropArea.addEventListener("drop", e => {
        e.preventDefault();
        const file = e.dataTransfer.files[0];
        if (file) {
        fileInput.files = e.dataTransfer.files;
        showFileName(file);
        }
    });
});
</script>
{% endblock %}