{% extends "layout/ver_baru/base_admin.html" %}

{% block title %}Monitoring DJP - CWN{% endblock %}

{% block content %}

<div class="max-w-[1100px] mx-auto px-4">
    <h2 class="text-center text-white p-3 rounded mb-4 mt-2 bg-red-800">
        Monitoring Aktivitas CLOCK IN DJP
    </h2>

    <!-- FILTER FORM -->
    <form method="get" class="mb-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <input type="text" id="searchInput" name="nama_tugas"
                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500"
                placeholder="Cari Nama Tugas"
                value="{{ request.GET.nama_tugas }}" onkeyup="searchNamaTugas()">

            <input type="text" id="searchInputODP" name="nama_odp"
                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500"
                placeholder="Cari Nama ODP"
                value="{{ request.GET.nama_odp }}" onkeyup="searchNamaODP()">

            <select name="user_sales"
                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                <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>

            {% if request.session.role == 'Team Leader' %}
                <input type="text" name="user_leader" class="w-full border rounded-lg px-3 py-2 bg-gray-100"
                    value="{{ request.session.tl_name }}" readonly>
                <input type="hidden" name="user_leader" value="{{ request.session.tl_name }}">
            {% else %}
                <select name="user_leader"
                    class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                    <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>
            {% endif %}

            <select name="kategori_tugas"
                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                <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>

            <select name="status"
                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                <option value="">-- Status --</option>
                {% for st in status_list %}
                <option value="{{ st }}" {% if request.GET.status == st %}selected{% endif %}>{{ st }}</option>
                {% endfor %}
            </select>

            <input type="date" name="tanggal_mulai"
                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500"
                value="{{ request.GET.tanggal_mulai }}">

            <input type="date" name="tanggal_akhir"
                class="w-full border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500"
                value="{{ request.GET.tanggal_akhir }}">

            <button type="submit"
                class="col-span-1 bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition">
                Filter
            </button>
        </div>
    </form>

    <!-- 3 Card Atas -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Visitasi ODP -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="bg-red-700 text-white px-4 py-2 font-bold">Visitasi Approve (ODP)</div>
            <div class="p-3 overflow-x-auto">
                <table id="visit_odp" data-page-size="5" class="w-full text-sm text-center border">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="px-2 py-1 border">ODP</th>
                            <th class="px-2 py-1 border">Jumlah Visit</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for data in visit_sudah %}
                        <tr class="odd:bg-white even:bg-gray-50">
                            <td class="px-2 py-1 border">{{ data.odp }}</td>
                            <td class="px-2 py-1 border">{{ data.jumlah_visit }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Visitasi Sales -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="bg-red-700 text-white px-4 py-2 font-bold">Visitasi Approve per Sales</div>
            <div class="p-3 overflow-x-auto">
                <table id="visit_sales" data-page-size="5" class="w-full text-sm text-center border">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="px-2 py-1 border">ODP</th>
                            <th class="px-2 py-1 border">Sales Force</th>
                            <th class="px-2 py-1 border">Jumlah Visit</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for data in visit_sudah_sales %}
                        <tr class="odd:bg-white even:bg-gray-50">
                            <td class="px-2 py-1 border">{{ data.odp }}</td>
                            <td class="px-2 py-1 border">{{ data.user_sales }}</td>
                            <td class="px-2 py-1 border">{{ data.jumlah_visit }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Visitasi TL -->
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="bg-red-700 text-white px-4 py-2 font-bold">Visitasi Approve Team Leader</div>
            <div class="p-3 overflow-x-auto">
                <table id="visit_leader" data-page-size="5" class="w-full text-sm text-center border">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="px-2 py-1 border">ODP</th>
                            <th class="px-2 py-1 border">Team Leader</th>
                            <th class="px-2 py-1 border">Jumlah Visit</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for data in visit_sudah_leader %}
                        <tr class="odd:bg-white even:bg-gray-50">
                            <td class="px-2 py-1 border">{{ data.odp }}</td>
                            <td class="px-2 py-1 border">{{ data.user_leader }}</td>
                            <td class="px-2 py-1 border">{{ data.jumlah_visit }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- CLOCK IN -->
    <div class="bg-white shadow rounded-lg mt-6">
        <div class="bg-red-700 text-white px-4 py-2 font-bold">CLOCK IN DJP</div>
        <div class="p-3 overflow-x-auto">
            <table id="datatablesSimple" class="w-full text-xs text-center border">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="px-2 py-1 border">No</th>
                        <th class="px-2 py-1 border">ODP</th>
                        <th class="px-2 py-1 border">Nama Tugas</th>
                        <th class="px-2 py-1 border">Kategori Tugas</th>
                        <th class="px-2 py-1 border">Latitude</th>
                        <th class="px-2 py-1 border">Longitude</th>
                        <th class="px-2 py-1 border">Minimal Check Out</th>
                        <th class="px-2 py-1 border">Check In</th>
                        <th class="px-2 py-1 border">Check Out</th>
                        <th class="px-2 py-1 border">Nama Sales</th>
                        <th class="px-2 py-1 border">Nama TL</th>
                        <th class="px-2 py-1 border">Kondisi ODP</th>
                        <th class="px-2 py-1 border">Ket ODP</th>
                        <th class="px-2 py-1 border">Jumlah Rumah Sekitar</th>
                        <th class="px-2 py-1 border">Estimasi Prospek</th>
                        <th class="px-2 py-1 border">Feedback Lokasi</th>
                        <th class="px-2 py-1 border">Jumlah Kompetitor</th>
                        <th class="px-2 py-1 border">Catatan</th>
                        <th class="px-2 py-1 border">Competitor</th>
                        <th class="px-2 py-1 border">Prospect</th>
                        <th class="px-2 py-1 border">Status</th>
                    </tr>
                </thead>
                <tbody id="dataTableBody">
                    {% for item in data %}
                    <tr data-tugas-id="{{ item.tugas_id }}" class="odd:bg-white even:bg-gray-50">
                        <td class="border">{{ forloop.counter }}</td>
                        <td class="border">{{ item.odp }}</td>
                        <td class="border">{{ item.nama_tugas }}</td>
                        <td class="border">{{ item.kategori_tugas }}</td>
                        <td class="border">{{ item.latitude }}</td>
                        <td class="border">{{ item.longitude }}</td>
                        <td class="border">{{ item.minimal_check_out }}</td>
                        <td class="border">{{ item.tanggal_mulai }}</td>
                        <td class="border">{{ item.tanggal_akhir }}</td>
                        <td class="border">{{ item.user_sales_force }}</td>
                        <td class="border">{{ item.user_team_leader }}</td>
                        <td class="border">{{ item.odp_condition }}</td>
                        <td class="border">{{ item.odp_desc }}</td>
                        <td class="border">{{ item.num_house_around }}</td>
                        <td class="border">{{ item.prospect_estimate }}</td>
                        <td class="border">{{ item.feedback_location }}</td>
                        <td class="border">{{ item.number_competitor }}</td>
                        <td class="border">{{ item.notes }}</td>
                        <td class="border">{{ item.competitor }}</td>
                        <td class="border">{{ item.prospect }}</td>
                        <td class="border">{{ item.status }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="22" class="text-center py-2">Tidak ada data ODP.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <!-- Pagination -->
            <div id="paginationControls" class="flex justify-center mt-4 space-x-2"></div>
        </div>
    </div>
</div>

<!-- JS -->
<script>
function searchNamaTugas() {
    const input = document.getElementById("searchInput").value.toLowerCase();
    const rows = document.querySelectorAll("#dataTableBody tr");
    rows.forEach(row => {
        const cell = row.cells[2];
        if (cell) {
            row.style.display = cell.textContent.toLowerCase().includes(input) ? "" : "none";
        }
    });
}

function searchNamaODP() {
    const input = document.getElementById("searchInputODP").value.toLowerCase();
    const rows = document.querySelectorAll("#dataTableBody tr");
    rows.forEach(row => {
        const cell = row.cells[1];
        if (cell) {
            row.style.display = cell.textContent.toLowerCase().includes(input) ? "" : "none";
        }
    });
}

// Pagination untuk table utama
let currentPage = 1;
const rowsPerPage = 10;

function paginateTable(tableId, rowsPerPage = rowsPerPage) {
  const table = document.getElementById(tableId);
  if (!table) return;

  const tbody = table.querySelector("tbody");
  const rows = Array.from(tbody.querySelectorAll("tr"));
  let currentPage = 1;
  const totalPages = Math.ceil(rows.length / rowsPerPage);

  // Buat container pagination
  let pagination = table.nextElementSibling;
  if (!pagination || !pagination.classList.contains("pagination")) {
    pagination = document.createElement("div");
    pagination.className = "pagination flex justify-center mt-3 space-x-1";
    table.parentElement.appendChild(pagination);
  }

  function renderTable() {
    const start = (currentPage - 1) * rowsPerPage;
    const end = start + rowsPerPage;

    rows.forEach((row, i) => {
      row.style.display = i >= start && i < end ? "" : "none";
    });

    // Render tombol pagination
    pagination.innerHTML = "";

    // Prev button
    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 = () => {
      if (currentPage > 1) {
        currentPage--;
        renderTable();
      }
    };
    pagination.appendChild(prevBtn);

    // Range page (max 5 angka)
    let startPage = Math.max(1, currentPage - 2);
    let endPage = Math.min(totalPages, startPage + 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;
        renderTable();
      };
      pagination.appendChild(btn);
    }

    // Next button
    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 = () => {
      if (currentPage < totalPages) {
        currentPage++;
        renderTable();
      }
    };
    pagination.appendChild(nextBtn);
  }

  renderTable();
}

document.addEventListener("DOMContentLoaded", () => {
  paginateTable("datatablesSimple", 10);   // tabel utama
  paginateTable("visit_odp", 8);    // tabel ODP
  paginateTable("visit_sales", 5);  // tabel Sales
  paginateTable("visit_leader", 5); // tabel TL
});

</script>

{% endblock %}