{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Data MoM - CWN{% endblock %}
{% block content %}

<div class="container mx-auto px-4">
  <!-- Judul -->
  <h2 class="text-center text-gray-600 rounded-lg mb-6 custom-bg text-2xl font-bold">
    Data Month of Month
  </h2>

  <!-- Filter Form -->
  <div class="bg-white rounded-lg shadow mb-6">
    <div class="bg-red-700 px-4 py-3 rounded-t-lg">
      <h6 class="text-white font-semibold">Filter Data</h6>
    </div>
    <div class="p-6">
      <form method="get" class="grid grid-cols-1 md:grid-cols-6 gap-4">
        <!-- Tanggal -->
        <div>
          <label for="tanggal" class="block text-sm font-medium text-gray-700">Tanggal</label>
          <input type="number" name="tanggal" id="tanggal"
                 value="{{ selected_tanggal }}"
                 min="1" max="31"
                 class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600">
        </div>
        <!-- Tahun -->
        <div>
          <label for="tahun" class="block text-sm font-medium text-gray-700">Tahun</label>
          <select name="tahun" id="tahun"
                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600">
            <option value="">-</option>
            <option value="2025" {% if selected_year == "2025" %}selected{% endif %}>2025</option>
            <option value="2024" {% if selected_year == "2024" %}selected{% endif %}>2024</option>
          </select>
        </div>
        <!-- Bulan Utama -->
        <div>
          <label for="bulan2" class="block text-sm font-medium text-gray-700">Bulan Utama</label>
          <select name="bulan2" id="bulan2"
                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600">
            <option value="">-</option>
            <option value="1" {% if selected_bulan2 == "1" %}selected{% endif %}>Januari</option>
            <option value="2" {% if selected_bulan2 == "2" %}selected{% endif %}>Februari</option>
            <option value="3" {% if selected_bulan2 == "3" %}selected{% endif %}>Maret</option>
            <option value="4" {% if selected_bulan2 == "4" %}selected{% endif %}>April</option>
            <option value="5" {% if selected_bulan2 == "5" %}selected{% endif %}>Mei</option>
            <option value="6" {% if selected_bulan2 == "6" %}selected{% endif %}>Juni</option>
            <option value="7" {% if selected_bulan2 == "7" %}selected{% endif %}>Juli</option>
            <option value="8" {% if selected_bulan2 == "8" %}selected{% endif %}>Agustus</option>
            <option value="9" {% if selected_bulan2 == "9" %}selected{% endif %}>September</option>
            <option value="10" {% if selected_bulan2 == "10" %}selected{% endif %}>Oktober</option>
            <option value="11" {% if selected_bulan2 == "11" %}selected{% endif %}>November</option>
            <option value="12" {% if selected_bulan2 == "12" %}selected{% endif %}>Desember</option>
          </select>
        </div>

        <!-- Bulan Banding -->
        <div>
          <label for="bulan1" class="block text-sm font-medium text-gray-700">Bulan Banding</label>
          <select name="bulan1" id="bulan1"
                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600">
            <option value="">-</option>
            <option value="1" {% if selected_bulan1 == "1" %}selected{% endif %}>Januari</option>
            <option value="2" {% if selected_bulan1 == "2" %}selected{% endif %}>Februari</option>
            <option value="3" {% if selected_bulan1 == "3" %}selected{% endif %}>Maret</option>
            <option value="4" {% if selected_bulan1 == "4" %}selected{% endif %}>April</option>
            <option value="5" {% if selected_bulan1 == "5" %}selected{% endif %}>Mei</option>
            <option value="6" {% if selected_bulan1 == "6" %}selected{% endif %}>Juni</option>
            <option value="7" {% if selected_bulan1 == "7" %}selected{% endif %}>Juli</option>
            <option value="8" {% if selected_bulan1 == "8" %}selected{% endif %}>Agustus</option>
            <option value="9" {% if selected_bulan1 == "9" %}selected{% endif %}>September</option>
            <option value="10" {% if selected_bulan1 == "10" %}selected{% endif %}>Oktober</option>
            <option value="11" {% if selected_bulan1 == "11" %}selected{% endif %}>November</option>
            <option value="12" {% if selected_bulan1 == "12" %}selected{% endif %}>Desember</option>
          </select>
        </div>
        <!-- WOK -->
        <div class="md:col-span-2">
          <label for="wok" class="block text-sm font-medium text-gray-700">WOK</label>
          <select name="wok" id="wok"
                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600">
            <option value="">Pilih WOK</option>
            {% for wok in woks %}
              <option value="{{ wok }}" {% if wok == selected_wok %}selected{% endif %}>{{ wok }}</option>
            {% endfor %}
          </select>
        </div>
        <!-- Tombol -->
        <div class="md:col-span-6">
          <button type="submit"
                  class="w-full bg-red-700 text-white px-4 py-2 rounded-md hover:bg-red-800 font-semibold">
            Filter
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Heading -->
  <div class="text-center mb-6">
    <h3 class="text-lg font-bold text-gray-800">
      Month Over Month Bulan {{ bulan1_name }} dan Bulan {{ bulan2_name }} Tahun {{ selected_year }}
    </h3>
  </div>

  <!-- MOM Agency -->
  <div class="bg-white rounded-lg shadow mb-6">
    <div class="bg-red-700 px-4 py-3 flex flex-col md:flex-row justify-between items-center gap-2">
      <h6 class="text-white font-semibold">MOM Agency</h6>
      <input type="text" id="search-wok" placeholder="Cari WOK..."
             class="rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600 w-full md:w-1/2 px-2">
    </div>
    <div class="p-4 overflow-x-auto">
      {% if hasil_mom_agency %}
      <table class="min-w-full border border-gray-200 text-sm text-center" id="table-agency">
        <thead class="bg-gray-100 text-gray-700">
          <tr>
            <th class="px-2 py-1 border">No</th>
            <th class="px-2 py-1 border">WOK</th>
            <th class="px-2 py-1 border cursor-pointer" onclick="sortTableAgency(2,this)">PS {{ bulan1_name }} <span class="sort-icon">⇵</span></th>
            <th class="px-2 py-1 border cursor-pointer" onclick="sortTableAgency(3,this)">PS {{ bulan2_name }} <span class="sort-icon">⇵</span></th>
            <th class="px-2 py-1 border cursor-pointer" onclick="sortTableAgency(4,this)">Selisih <span class="sort-icon">⇵</span></th>
            <th class="px-2 py-1 border cursor-pointer" onclick="sortTableAgency(5,this)">MOM (%) <span class="sort-icon">⇵</span></th>
          </tr>
        </thead>
        <tbody>
          {% for row in hasil_mom_agency %}
          <tr>
            <td class="border px-2 py-1">{{ forloop.counter }}</td>
            <td class="border px-2 py-1">{{ row.nama }}</td>
            <td class="border px-2 py-1">{{ row.total_bulan1 }}</td>
            <td class="border px-2 py-1">{{ row.total_bulan2 }}</td>
            <td class="border px-2 py-1">{{ row.selisih }}</td>
            <td class="border px-2 py-1 {% if row.persentase >= 0 %}text-green-600 font-bold{% else %}text-red-600 font-bold{% endif %}">
              {% if row.persentase >= 0 %}+{% endif %}{{ row.persentase }}%
            </td>
          </tr>
          {% endfor %}
          <tr class="bg-gray-50 font-semibold total-row">
            <td colspan="2" class="border px-2 py-1">Total</td>
            <td class="border px-2 py-1">{{ total_agency_bulan1 }}</td>
            <td class="border px-2 py-1">{{ total_agency_bulan2 }}</td>
            <td class="border px-2 py-1">{{ total_selisih_agency }}</td>
            <td class="border px-2 py-1">{{ total_persen_agency }}%</td>
          </tr>
        </tbody>
      </table>
      {% else %}
      <div class="p-4 text-gray-700">Data MOM untuk Agency tidak tersedia.</div>
      {% endif %}
    </div>
  </div>

  <!-- MOM Team Leader -->
  <div class="bg-white rounded-lg shadow mb-6">
    <div class="bg-red-700 px-4 py-3 flex flex-col md:flex-row justify-between items-center gap-2">
      <h6 class="text-white font-semibold">MOM Team Leader</h6>
      <input type="text" id="search-tl" placeholder="Cari Team Leader..."
             class="rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600 w-full md:w-1/2 px-2">
    </div>
    <div class="p-4 overflow-x-auto">
      {% if hasil_mom_team_leader %}
      <table class="min-w-full border border-gray-200 text-sm text-center" id="table-tl">
        <thead class="bg-gray-100 text-gray-700">
          <tr>
            <th class="px-2 py-1 border">No</th>
            <th class="px-2 py-1 border">Nama Team Leader</th>
            <th class="px-2 py-1 border cursor-pointer" onclick="sortTableTL(2,this)">PS {{ bulan1_name }} <span class="sort-icon">⇵</span></th>
            <th class="px-2 py-1 border cursor-pointer" onclick="sortTableTL(3,this)">PS {{ bulan2_name }} <span class="sort-icon">⇵</span></th>
            <th class="px-2 py-1 border cursor-pointer" onclick="sortTableTL(4,this)">Selisih <span class="sort-icon">⇵</span></th>
            <th class="px-2 py-1 border cursor-pointer" onclick="sortTableTL(5,this)">MOM (%) <span class="sort-icon">⇵</span></th>
          </tr>
        </thead>
        <tbody>
          {% for row in hasil_mom_team_leader %}
          <tr>
            <td class="border px-2 py-1">{{ forloop.counter }}</td>
            <td class="border px-2 py-1">{{ row.nama }}</td>
            <td class="border px-2 py-1">{{ row.total_bulan1 }}</td>
            <td class="border px-2 py-1">{{ row.total_bulan2 }}</td>
            <td class="border px-2 py-1">{{ row.selisih }}</td>
            <td class="border px-2 py-1 {% if row.persentase >= 0 %}text-green-600 font-bold{% else %}text-red-600 font-bold{% endif %}">
              {% if row.persentase >= 0 %}+{% endif %}{{ row.persentase }}%
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="p-4 text-gray-700">Data MOM untuk Team Leader tidak tersedia.</div>
      {% endif %}
    </div>
  </div>

  <!-- MOM Sales Force -->
  <div class="bg-white rounded-lg shadow mb-6">
    <div class="bg-red-700 px-4 py-3 grid grid-cols-1 md:grid-cols-3 gap-2 items-center">
      <h6 class="text-white font-semibold">MOM Sales Force</h6>
      <input type="text" id="search-sf" placeholder="Cari SF..."
             class="rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600 px-2">
      <select id="filter-tl"
              class="rounded-md border-gray-300 shadow-sm focus:ring-red-600 focus:border-red-600 px-2">
        <option value="">Semua TL</option>
        {% for tl in tl_options %}
          <option value="{{ tl.user_name }}">{{ tl.user_name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="p-4 overflow-x-auto">
      {% if hasil_mom %}
      <table class="min-w-full border border-gray-200 text-sm text-center" id="sfTable">
        <thead class="bg-gray-100 text-gray-700">
          <tr>
            <th class="border px-2 py-1">No</th>
            <th class="border px-2 py-1">Nama SF</th>
            <th class="border px-2 py-1">Team Leader</th>
            <th class="border px-2 py-1">WOK</th>
            <th class="border px-2 py-1 cursor-pointer" onclick="sortTableSF(4,this)">PS {{ bulan1_name }} <span class="sort-icon">⇵</span></th>
            <th class="border px-2 py-1 cursor-pointer" onclick="sortTableSF(5,this)">PS {{ bulan2_name }} <span class="sort-icon">⇵</span></th>
            <th class="border px-2 py-1 cursor-pointer" onclick="sortTableSF(6,this)">Selisih <span class="sort-icon">⇵</span></th>
            <th class="border px-2 py-1">MOM (%)</th>
          </tr>
        </thead>
        <tbody>
          {% for row in hasil_mom %}
          <tr data-filtered="true">
            <td class="border px-2 py-1">{{ forloop.counter }}</td>
            <td class="border px-2 py-1">{{ row.nama }}</td>
            <td class="border px-2 py-1">{{ row.sf_tl_nama }}</td>
            <td class="border px-2 py-1">{{ row.wok }}</td>
            <td class="border px-2 py-1">{{ row.bulan1 }}</td>
            <td class="border px-2 py-1">{{ row.bulan2 }}</td>
            <td class="border px-2 py-1">{{ row.selisih }}</td>
            <td class="border px-2 py-1 {% if row.persentase >= 0 %}text-green-600 font-bold{% else %}text-red-600 font-bold{% endif %}">
              {% if row.persentase >= 0 %}+{% endif %}{{ row.persentase }}%
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      <!-- Pagination -->
      <div class="pagination flex justify-center space-x-2 mt-4"></div>
      {% else %}
      <div class="p-4 text-gray-700">Silakan pilih Tahun, Bulan 1, dan Bulan 2 untuk menampilkan data MOM.</div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Scripts -->
<script>
window.addEventListener("load", () => {
    const urlParams = new URLSearchParams(window.location.search);
    if (!urlParams.has("tahun") && !urlParams.has("bulan1") && !urlParams.has("bulan2")) {
        document.querySelector("form").submit();
    } else {
        // kalau parameter sudah ada, langsung jalanin filter + pagination
        filterTable();
        paginateTable();
    }
});

function paginateTable() {
    const table = document.getElementById("sfTable");
    if (!table) return;

    const rows = Array.from(table.querySelectorAll("tbody tr"));
    const filteredRows = rows.filter(row => row.getAttribute("data-filtered") === "true");

    const totalPages = Math.ceil(filteredRows.length / rowsPerPage) || 1;
    if (currentPage > totalPages) currentPage = totalPages;

    // sembunyikan semua dulu
    rows.forEach(row => row.style.display = "none");

    // tampilkan sesuai page
    const start = (currentPage - 1) * rowsPerPage;
    const end = start + rowsPerPage;
    filteredRows.slice(start, end).forEach(row => row.style.display = "");

    // generate pagination
    const pagination = document.querySelector(".pagination");
    pagination.innerHTML = "";

    const ul = document.createElement("ul");
    ul.className = "flex space-x-1";

    // tombol prev
    const prevLi = document.createElement("li");
    prevLi.innerHTML = `<button class="px-3 py-1 rounded ${currentPage === 1 ? 'bg-gray-300 cursor-not-allowed' : 'bg-red-700 text-white'}">&laquo;</button>`;
    if (currentPage > 1) {
        prevLi.querySelector("button").onclick = () => { currentPage--; paginateTable(); };
    }
    ul.appendChild(prevLi);

    // range nomor (maks 5)
    let startPage = Math.max(1, currentPage - 2);
    let endPage = Math.min(totalPages, startPage + 4);
    if (endPage - startPage < 4) {
        startPage = Math.max(1, endPage - 4);
    }

    for (let i = startPage; i <= endPage; i++) {
        const li = document.createElement("li");
        li.innerHTML = `<button class="px-3 py-1 rounded ${i === currentPage ? 'bg-red-700 text-white font-bold' : 'bg-gray-200 hover:bg-gray-300'}">${i}</button>`;
        li.querySelector("button").onclick = () => { currentPage = i; paginateTable(); };
        ul.appendChild(li);
    }

    // tombol next
    const nextLi = document.createElement("li");
    nextLi.innerHTML = `<button class="px-3 py-1 rounded ${currentPage === totalPages ? 'bg-gray-300 cursor-not-allowed' : 'bg-red-700 text-white'}">&raquo;</button>`;
    if (currentPage < totalPages) {
        nextLi.querySelector("button").onclick = () => { currentPage++; paginateTable(); };
    }
    ul.appendChild(nextLi);

    pagination.appendChild(ul);
}

// Filter tabel
function filterTableWOK() {
const val = document.getElementById('search-wok').value.toLowerCase();
document.querySelectorAll('#table-agency tbody tr').forEach(row => {
    if (!row.classList.contains("total-row")) {
    row.style.display = row.cells[1].textContent.toLowerCase().includes(val) ? '' : 'none';
    }
});
}
function filterTableTL() {
const val = document.getElementById('search-tl').value.toLowerCase();
document.querySelectorAll('#table-tl tbody tr').forEach(row => {
    row.style.display = row.cells[1].textContent.toLowerCase().includes(val) ? '' : 'none';
});
}
function filterTable() {
const searchValue = document.getElementById('search-sf').value.toLowerCase();
const selectedTL = document.getElementById('filter-tl').value.toLowerCase();
const rows = document.querySelectorAll('#sfTable tbody tr');
rows.forEach(row => {
    const name = row.cells[1].textContent.toLowerCase();
    const tl = row.cells[2].textContent.toLowerCase();
    const matchName = name.includes(searchValue);
    const matchTL = selectedTL === '' || tl === selectedTL;
    if (matchName && matchTL) {
    row.setAttribute('data-filtered','true');
    } else {
    row.setAttribute('data-filtered','false');
    row.style.display = 'none';
    }
});
currentPage = 1;
paginateTable();
}
document.getElementById('search-wok').addEventListener('input', filterTableWOK);
document.getElementById('search-tl').addEventListener('input', filterTableTL);
document.getElementById('search-sf').addEventListener('input', filterTable);
document.getElementById('filter-tl').addEventListener('change', filterTable);

// Sort & Pagination
let currentSortedWOK={}, currentSortedTL={}, currentSort={}, currentPage=1;
const rowsPerPage=10;

function sortTableAgency(colIndex, th) {
    const table = document.getElementById("table-agency");
    const tbody = table.tBodies[0];
    const rows = Array.from(tbody.querySelectorAll("tr:not(.total-row)"));
    const totalRow = tbody.querySelector(".total-row");

    // Reset ikon
    table.querySelectorAll("th .sort-icon").forEach(i => i.textContent = "⇵");

    // Toggle ASC/DESC
    if (currentSortedWOK.col === colIndex) {
        currentSortedWOK.asc = !currentSortedWOK.asc;
    } else {
        currentSortedWOK.asc = true;
    }
    currentSortedWOK.col = colIndex;

    const asc = currentSortedWOK.asc;

    // Sorting
    rows.sort((a, b) => {
        const va = parseFloat((a.cells[colIndex].innerText || "").replace(/[^\d.-]/g, "")) || 0;
        const vb = parseFloat((b.cells[colIndex].innerText || "").replace(/[^\d.-]/g, "")) || 0;
        return asc ? va - vb : vb - va;
    });

    // Hapus tbody, masukkan ulang
    tbody.innerHTML = "";
    rows.forEach(row => tbody.appendChild(row));
    if (totalRow) tbody.appendChild(totalRow);

    // Update ikon panah di kolom aktif
    const icon = th.querySelector(".sort-icon");
    icon.textContent = asc ? "⇧" : "⇩";
}

function sortTableTL(colIndex, th) {
    const table = document.getElementById("table-tl");
    const tbody = table.tBodies[0];
    const rows = Array.from(tbody.querySelectorAll("tr:not(.total-row)"));
    const totalRow = tbody.querySelector(".total-row");

    // Reset ikon
    table.querySelectorAll("th .sort-icon").forEach(i => i.textContent = "⇵");

    // Toggle ASC/DESC
    if (currentSortedWOK.col === colIndex) {
        currentSortedWOK.asc = !currentSortedWOK.asc;
    } else {
        currentSortedWOK.asc = true;
    }
    currentSortedWOK.col = colIndex;

    const asc = currentSortedWOK.asc;

    // Sorting
    rows.sort((a, b) => {
        const va = parseFloat((a.cells[colIndex].innerText || "").replace(/[^\d.-]/g, "")) || 0;
        const vb = parseFloat((b.cells[colIndex].innerText || "").replace(/[^\d.-]/g, "")) || 0;
        return asc ? va - vb : vb - va;
    });

    // Hapus tbody, masukkan ulang
    tbody.innerHTML = "";
    rows.forEach(row => tbody.appendChild(row));
    if (totalRow) tbody.appendChild(totalRow);

    // Update ikon panah di kolom aktif
    const icon = th.querySelector(".sort-icon");
    icon.textContent = asc ? "⇧" : "⇩";
}

let currentSorted = { col: null, asc: true };

function sortTableSF(colIndex, th) {
    const table = document.getElementById("sfTable");
    const tbody = table.tBodies[0];
    const rows = Array.from(tbody.querySelectorAll("tr:not(.total-row)"));

    // Reset ikon
    table.querySelectorAll("th .sort-icon").forEach(i => i.textContent = "⇵");

    // Toggle ASC/DESC
    if (currentSorted.col === colIndex) {
        currentSorted.asc = !currentSorted.asc;
    } else {
        currentSorted.asc = true;
    }
    currentSorted.col = colIndex;

    const asc = currentSorted.asc;

    // --- Urutkan semua row (bukan cuma halaman aktif) ---
    rows.sort((a, b) => {
        const va = a.cells[colIndex].innerText.trim();
        const vb = b.cells[colIndex].innerText.trim();

        const na = parseFloat(va.replace(/[^\d.-]/g, ""));
        const nb = parseFloat(vb.replace(/[^\d.-]/g, ""));

        if (!isNaN(na) && !isNaN(nb)) {
            return asc ? na - nb : nb - na;
        } else {
            return asc ? va.localeCompare(vb) : vb.localeCompare(va);
        }
    });

    // Masukkan hasil sort balik ke tbody
    rows.forEach(row => tbody.appendChild(row));

    // Balik ke halaman 1 setelah sort
    currentPage = 1;
    paginateTable();

    // Update ikon panah
    th.querySelector(".sort-icon").textContent = asc ? "⇧" : "⇩";
}

</script>
{% endblock %}