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

{% block content %}
<style>
    input.edit-input {
        width: 80px;
        text-align: center;
    }
</style>

<div class="container mx-auto px-4">
    <h2 class="text-center text-white bg-red-600 p-3 rounded-lg mb-6 font-bold text-xl">
        MoM Target SF - s.d Tanggal {{ tanggal_akhir }} {{ bulan_sekarang_nama }} {{ tahun }}
    </h2>

    <!-- Wrapper untuk center -->
    <div class="flex items-center justify-center mb-2">
        <!-- Card -->
        <div class="bg-white shadow-lg rounded-xl p-6 w-full max-w-3xl">
            <!-- Filter Form -->
            <form method="get" class="space-y-4">
                <div class="flex flex-wrap gap-4 items-end justify-center">
                    <!-- Tanggal -->
                    <div class="flex flex-col">
                        <label for="tanggal" class="mb-1 font-medium">Tanggal s.d</label>
                        <input type="number" name="tanggal" id="tanggal"
                            class="border rounded-lg p-2 w-24 outline-none focus:ring-2 focus:ring-blue-500"
                            value="{{ tanggal_akhir }}" min="1" max="31">
                    </div>
                    <!-- Bulan -->
                    <div class="flex flex-col">
                        <label for="bulan" class="mb-1 font-medium">Bulan</label>
                        <input type="number" name="bulan" id="bulan"
                            class="border rounded-lg p-2 w-24 outline-none focus:ring-2 focus:ring-blue-500"
                            value="{{ bulan_sekarang }}" min="1" max="12">
                    </div>
                    <!-- Tahun -->
                    <div class="flex flex-col">
                        <label for="tahun" class="mb-1 font-medium">Tahun</label>
                        <input type="number" name="tahun" id="tahun"
                            class="border rounded-lg p-2 w-28 outline-none focus:ring-2 focus:ring-blue-500"
                            value="{{ tahun }}">
                    </div>
                    <!-- WOK -->
                    <div class="flex flex-col">
                        <label for="wok" class="mb-1 font-medium">Filter WOK</label>
                        <select name="wok" id="wok"
                                class="border rounded-lg p-2 outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">-- Semua WOK --</option>
                            {% for wok in all_wok %}
                                <option value="{{ wok }}" {% if wok == wok_selected %}selected{% endif %}>{{ wok }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <!-- Tombol -->
                    <div class="flex flex-col">
                        <button type="submit"
                                class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg shadow">
                            Filter
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!-- Data Table -->
    <div class="bg-white shadow-md rounded mb-6">
        <div class="flex flex-wrap md:flex-nowrap items-center p-4 bg-red-800 rounded-t mb-0">
            <div class="flex-1 mb-2 md:mb-0">
                <h6 class="text-white font-semibold">MOM Sales Force</h6>
            </div>
            <div class="flex-1 mb-2 md:mb-0 mr-1">
                <input type="text" id="search-sf" class="border rounded p-2 w-full" placeholder="Cari SF...">
            </div>
            <div class="flex-1">
                <select id="filter-tl" class="border rounded p-2 w-full">
                    <option value="">Semua TL</option>
                    {% for tl in tl_options %}
                        <option value="{{ tl }}">{{ tl }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="p-4">
            {% if data %}
            <div class="overflow-x-auto">
                <table id="table-sf" class="min-w-full border border-gray-300 divide-y divide-gray-200">
                    <thead class="bg-gray-800 text-center text-white">
                        <tr>
                            <th class="px-3 py-2 border">No</th>
                            <th class="px-3 py-2 border">Nama SF</th>
                            <th class="px-3 py-2 border">Team Leader</th>
                            <th class="px-3 py-2 border">WOK</th>
                            <th class="px-3 py-2 border">Target PS {{ bulan_sekarang_nama }}</th>
                            <th class="px-3 py-2 border">Class</th>
                            <th class="px-3 py-2 border">PS {{ bulan_lalu_nama }} (1–{{ tanggal_akhir }})</th>
                            <th class="px-3 py-2 border">PS {{ bulan_sekarang_nama }} (1–{{ tanggal_akhir }})</th>
                            <th class="px-3 py-2 border">ACH %</th>
                            <th class="px-3 py-2 border">GAP</th>
                            <th class="px-3 py-2 border">MoM (%)</th>
                            <th class="px-3 py-2 border">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="text-center divide-y divide-gray-200">
                        {% for item in data %}
                        <tr data-target-id="{{ item.target_id }}" class="hover:bg-gray-100">
                            <td class="px-3 py-2 border">{{ forloop.counter }}</td>
                            <td class="px-3 py-2 border">{{ item.user_name }}</td>
                            <td class="px-3 py-2 border">{{ item.team_leader_name }}</td>
                            <td class="px-3 py-2 border">{{ item.wok_name }}</td>
                            <td class="px-3 py-2 border target-ps-cell">{{ item.target_ps }}</td>
                            <td class="px-3 py-2 border">
                                {% if item.class == "Black" %}
                                    <span class="font-bold text-black">Black</span>
                                {% elif item.class == "Bronze" %}
                                    <span class="font-bold" style="color:#cd7f32;">Bronze</span>
                                {% elif item.class == "Silver" %}
                                    <span class="font-bold" style="color:#c0c0c0;">Silver</span>
                                {% elif item.class == "Gold" %}
                                    <span class="font-bold" style="color:#ffd700;">Gold</span>
                                {% elif item.class == "Platinum" %}
                                    <span class="font-bold text-blue-600">Platinum</span>
                                {% else %}
                                    Tidak Diketahui
                                {% endif %}
                            </td>
                            <td class="px-3 py-2 border">{{ item.total_ps_bulan_lalu }}</td>
                            <td class="px-3 py-2 border">{{ item.total_ps_bulan_ini }}</td>
                            <td class="px-3 py-2 border">{{ item.ach }}%</td>
                            <td class="px-3 py-2 border">{{ item.gap }}</td>
                            <td class="px-3 py-2 border">
                                {% if item.mom > 0 %}
                                    <span class="text-green-600 font-bold">+{{ item.mom }}%</span>
                                {% elif item.mom < 0 %}
                                    <span class="text-red-600 font-bold">{{ item.mom }}%</span>
                                {% else %}
                                    <span class="text-yellow-500 font-bold">{{ item.mom }}%</span>
                                {% endif %}
                            </td>
                            <td class="px-3 py-2 border space-x-1">
                                <button class="bg-yellow-400 text-white px-2 py-1 rounded btn-edit hover:bg-yellow-500">Edit</button>
                                <button class="bg-green-500 text-white px-2 py-1 rounded btn-save hover:bg-green-600 hidden">Simpan</button>
                                <button class="bg-red-400 text-white px-2 py-1 rounded btn-cancel hover:bg-red-500 hidden">Cancel</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="flex justify-center flex-wrap mt-3 space-x-1 space-y-1">
                <div class="pagination flex flex-wrap justify-center gap-2"></div>
            </div>

            {% else %}
            <div class="bg-blue-100 text-blue-800 p-4 rounded text-center">
                Tidak ada data target SF untuk filter ini.
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const csrfToken = '{{ csrf_token }}';

    // === HANDLE EDIT MODE ===
    document.querySelectorAll('tr[data-target-id]').forEach(row => {
        const editBtn = row.querySelector('.btn-edit');
        const saveBtn = row.querySelector('.btn-save');
        const cancelBtn = row.querySelector('.btn-cancel');
        const targetCell = row.querySelector('.target-ps-cell');

        let oldValue = '';

        function enterEditMode() {
            oldValue = targetCell.textContent.trim();
            const input = document.createElement('input');
            input.type = 'number';
            input.min = 0;
            input.value = oldValue;
            input.classList.add('edit-input');

            row._editInput = input;

            targetCell.textContent = '';
            targetCell.appendChild(input);
            input.focus();

            editBtn.classList.add('hidden');
            saveBtn.classList.remove('hidden');
            cancelBtn.classList.remove('hidden');
        }

        function exitEditMode() {
            const input = row._editInput;
            if (input) {
                targetCell.textContent = oldValue;
                delete row._editInput;
            }
            editBtn.classList.remove('hidden');
            saveBtn.classList.add('hidden');
            cancelBtn.classList.add('hidden');
        }

        function saveEdit() {
            const input = row._editInput;
            const newValue = input ? input.value.trim() : '';
            const targetId = row.dataset.targetId;

            if (newValue === '' || isNaN(newValue) || parseInt(newValue) < 0) {
                Swal.fire('Error', 'Masukkan angka valid >= 0', 'error');
                input.focus();
                return;
            }

            fetch("{% url 'update_target_ps' %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken,
                },
                body: JSON.stringify({
                    target_id: targetId,
                    target_ps: parseInt(newValue),
                }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    targetCell.textContent = newValue;

                    setTimeout(function(){
                        location.reload();
                    }, 300);
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Target PS berhasil disimpan',
                        timer: 1500,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire('Gagal', data.message || 'Gagal menyimpan data', 'error');
                    targetCell.textContent = oldValue;
                }
            })
            .catch(() => {
                Swal.fire('Gagal', 'Terjadi kesalahan saat menyimpan', 'error');
                targetCell.textContent = oldValue;
            })
            .finally(() => {
                delete row._editInput;
                editBtn.classList.remove('hidden');
                saveBtn.classList.add('hidden');
                cancelBtn.classList.add('hidden');
            });
        }

        editBtn.addEventListener('click', enterEditMode);
        cancelBtn.addEventListener('click', exitEditMode);
        saveBtn.addEventListener('click', saveEdit);
    });

    // === FILTER SF & TEAM LEADER ===
    const searchInput = document.getElementById('search-sf');
    const filterTL = document.getElementById('filter-tl');

    function filterTable() {
        const searchValue = searchInput.value.toLowerCase();
        const selectedTL = filterTL.value.toLowerCase();

        const rows = document.querySelectorAll('#table-sf tbody tr');
        rows.forEach(row => {
            const name = row.cells[1].textContent.toLowerCase();
            const tlName = row.cells[2].textContent.toLowerCase();

            const matchName = name.includes(searchValue);
            const matchTL = (selectedTL === '' || tlName === selectedTL);

            row.style.display = (matchName && matchTL) ? '' : 'none';
        });
    }

    searchInput.addEventListener('input', filterTable);
    filterTL.addEventListener('change', filterTable);
});
</script>
<script>
let currentPage = 1;
const rowsPerPage = 10;

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

    const tbody = table.querySelector("tbody");
    const rows = Array.from(tbody.querySelectorAll("tr"))
        .filter(row => row.style.display !== "none"); // hanya row yg kelihatan

    const pagination = document.querySelector(".pagination");
    const totalPages = Math.ceil(rows.length / rowsPerPage);

    if (currentPage > totalPages) currentPage = totalPages || 1;

    pagination.innerHTML = "";

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

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

    // Tombol Prev
    const prevBtn = document.createElement("button");
    prevBtn.innerHTML = "&laquo;";
    prevBtn.className = "px-3 py-1 text-white rounded border bg-red-700 disabled:opacity-50";
    prevBtn.disabled = currentPage === 1;
    prevBtn.addEventListener("click", () => {
        if (currentPage > 1) {
            currentPage--;
            paginateTable();
        }
    });
    pagination.appendChild(prevBtn);

    // Nomor halaman (maks 5 tombol)
    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 btn = document.createElement("button");
        btn.innerText = i;
        btn.className = `px-3 py-1 rounded border ${i === currentPage ? 'bg-red-700 text-white' : 'text-red-700 hover:bg-red-200'}`;
        btn.addEventListener("click", () => {
            currentPage = i;
            paginateTable();
        });
        pagination.appendChild(btn);
    }

    // Tombol Next
    const nextBtn = document.createElement("button");
    nextBtn.innerHTML = "&raquo;";
    nextBtn.className = "px-3 py-1 text-white rounded border bg-red-700 disabled:opacity-50";
    nextBtn.disabled = currentPage === totalPages;
    nextBtn.addEventListener("click", () => {
        if (currentPage < totalPages) {
            currentPage++;
            paginateTable();
        }
    });
    pagination.appendChild(nextBtn);
}

document.addEventListener("DOMContentLoaded", () => {
    paginateTable();

    // Biar pagination ikut update saat filter/search jalan
    document.getElementById("search-sf").addEventListener("input", () => {
        currentPage = 1;
        paginateTable();
    });
    document.getElementById("filter-tl").addEventListener("change", () => {
        currentPage = 1;
        paginateTable();
    });
});
</script>

{% endblock %}