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

{% block title %}Manajemen Data Paket Internet - CWN{% endblock %}

{% block content %}

{% if messages %}
<script>
    {% for message in messages %}
        Swal.fire({
            icon: "{{ message.tags }}",
            title: "{{ message.tags|title }}",
            text: "{{ message }}",
            timer: 2000,
            showConfirmButton: false
        });
    {% endfor %}
</script>
{% endif %}

<div class="mt-4 px-4">
    <h2 class="text-center text-white p-3 rounded mb-6 bg-red-700 font-bold text-xl">
        Manage Paket Internet
    </h2>

    {% if success %}
    <script>
        Swal.fire({
            icon: 'success',
            title: 'Berhasil',
            text: '{{ success }}',
        });
    </script>
    {% elif error %}
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: '{{ error }}',
        });
    </script>
    {% endif %}

    <!-- Form Paket Internet -->
    <!-- Card Tambah Paket Baru -->
    <div class="bg-white rounded-lg shadow-md mb-6">
        <!-- Header Card -->
        <div class="bg-red-700 text-white p-4 rounded-t-lg">
            <h2 class="text-start font-bold text-xl">Tambah Paket Baru</h2>
        </div>

        <!-- Body Card -->
        <div class="p-6">
            <form method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                {% csrf_token %}
                <input type="hidden" id="form_mode" name="form_mode" value="create">
                <input type="hidden" id="paket_id" name="paket_id">

                <div>
                    <label class="block font-semibold mb-1">Nama Paket</label>
                    <input type="text" placeholder="Nama paket..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="nama_paket" id="nama_paket" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">WOK</label>
                    <select class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="wok_id" id="wok_id" required>
                        <option value="">Pilih WOK</option>
                        {% for wok in wok_list %}
                            <option value="{{ wok.wok_id }}">{{ wok.wok_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Harga / ARPU</label>
                    <input type="number" step="any" placeholder="Harga/ARPU..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="arpu" id="arpu" required>
                </div>

                <div>
                    <label class="block font-semibold mb-1">Branch Index</label>
                    <input type="number" step="any" placeholder="Branch Index..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="branch_index" id="branch_index" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Product Index</label>
                    <input type="number" step="any" placeholder="Product Index..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="product_index" id="product_index" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Operasional 3%</label>
                    <input type="number" placeholder="Operasional 3%..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="operasional_3" id="operasional_3" required>
                </div>

                <div>
                    <label class="block font-semibold mb-1">Basic Fee</label>
                    <input type="number" placeholder="Basic Fee..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="basic_fee" id="basic_fee" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Fee Ditahan 10%</label>
                    <input type="number" placeholder="Fee Ditahan 10%..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="fee_ditahan_10" id="fee_ditahan_10" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">PPH 2%</label>
                    <input type="number" placeholder="PPH 2%..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="pph_2" id="pph_2" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Fee Sales</label>
                    <input type="number" placeholder="Fee Sales..." class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" name="fee_sales" id="fee_sales" required>
                </div>

                <div class="md:col-span-3 mt-4">
                    <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-2 rounded-lg shadow">
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Daftar Paket Internet -->
    <div class="bg-white shadow-md rounded-lg">
        <div class="bg-red-700 px-4 py-3 flex flex-col md:flex-row items-center justify-between rounded-t-lg">
            <h6 class="text-white font-semibold mb-2 md:mb-0">Daftar Paket Internet</h6>
            <div class="flex gap-2 w-full md:w-auto">
                <select id="filter-wok" class="border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500">
                    <option value="">Pilih WOK</option>
                    {% for wok in wok_list %}
                        <option value="{{ wok.wok_name }}" {% if wok.wok_name == selected_wok %}selected{% endif %}>{{ wok.wok_name }}</option>
                    {% endfor %}
                </select>
                <input type="text" id="search-paket" placeholder="Cari Paket..." class="border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500 w-full md:w-64">
            </div>
        </div>
        <div class="overflow-x-auto p-4">
            <table class="min-w-full border text-sm text-gray-700" id="paket-table">
                <thead class="bg-gray-800 text-white">
                    <tr>
                        <th class="p-2 border">Nama Paket</th>
                        <th class="p-2 border">WOK</th>
                        <th class="p-2 border">ARPU</th>
                        <th class="p-2 border">Branch Index</th>
                        <th class="p-2 border">Product Index</th>
                        <th class="p-2 border">Operasional 3%</th>
                        <th class="p-2 border">Basic Fee</th>
                        <th class="p-2 border">Fee Ditahan 10%</th>
                        <th class="p-2 border">PPH 2%</th>
                        <th class="p-2 border">Fee Sales</th>
                        <th class="p-2 border">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for paket in paket_list %}
                    <tr class="hover:bg-gray-100">
                        <td class="p-2 border">{{ paket.nama_paket }}</td>
                        <td class="p-2 border">{{ paket.wok_name }}</td>
                        <td class="p-2 border">{{ paket.arpu }}</td>
                        <td class="p-2 border">{{ paket.branch_index }}</td>
                        <td class="p-2 border">{{ paket.product_index }}</td>
                        <td class="p-2 border">{{ paket.operasional_3 }}</td>
                        <td class="p-2 border">{{ paket.basic_fee }}</td>
                        <td class="p-2 border">{{ paket.fee_ditahan_10 }}</td>
                        <td class="p-2 border">{{ paket.pph_2 }}</td>
                        <td class="p-2 border">{{ paket.fee_sales }}</td>
                        <td class="p-2 border text-center">
                            <button class="bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded text-sm"
                            onclick="editFormModal(
                                '{{ paket.paket_id }}',
                                '{{ paket.nama_paket }}',
                                '{{ paket.wok_id }}',
                                '{{ paket.arpu }}',
                                '{{ paket.branch_index }}',
                                '{{ paket.product_index }}',
                                '{{ paket.operasional_3 }}',
                                '{{ paket.basic_fee }}',
                                '{{ paket.fee_ditahan_10 }}',
                                '{{ paket.pph_2 }}',
                                '{{ paket.fee_sales }}'
                            )">Edit</button>
                            <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm"
                            onclick="confirmDelete('{{ paket.paket_id }}')">Delete</button>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="11" class="text-center text-gray-500 py-3">Tidak ada data</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div id="paketPagination" class="flex justify-center mt-4"></div>
        </div>
        <!-- Modal Edit Paket -->
        <div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
            <div class="bg-white w-full max-w-2xl p-6 rounded-lg shadow-lg">
                <h3 class="text-xl font-bold mb-4">Edit Paket Internet</h3>

                <form method="POST" id="editForm" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {% csrf_token %}
                <input type="hidden" name="form_mode" value="update">
                <input type="hidden" id="edit_paket_id" name="paket_id">

                <div>
                    <label class="block font-semibold mb-1">Nama Paket</label>
                    <input type="text" name="nama_paket" id="edit_nama_paket"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">WOK</label>
                    <select name="wok_id" id="edit_wok_id"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" required>
                    <option value="">Pilih WOK</option>
                    {% for wok in wok_list %}
                    <option value="{{ wok.wok_id }}">{{ wok.wok_name }}</option>
                    {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Harga / ARPU</label>
                    <input type="number" name="arpu" id="edit_arpu"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Branch Index</label>
                    <input type="number" name="branch_index" id="edit_branch_index"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" step="0.01" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Product Index</label>
                    <input type="number" name="product_index" id="edit_product_index"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" step="0.01" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Operasional 3%</label>
                    <input type="number" name="operasional_3" id="edit_operasional_3"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Basic Fee</label>
                    <input type="number" name="basic_fee" id="edit_basic_fee"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Fee Ditahan 10%</label>
                    <input type="number" name="fee_ditahan_10" id="edit_fee_ditahan_10"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">PPH 2%</label>
                    <input type="number" name="pph_2" id="edit_pph_2"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" required>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Fee Sales</label>
                    <input type="number" name="fee_sales" id="edit_fee_sales"
                    class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-red-500" required>
                </div>

                <div class="md:col-span-2 flex justify-end gap-2 mt-4">
                    <button type="button" onclick="closeEditModal()"
                    class="bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg">Batal</button>
                    <button type="submit"
                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">Update</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// buka modal edit dan isi data
function editFormModal(id, nama, wok_id, arpu, branch, product, operasional, basic_fee, fee_ditahan, pph, sales) {
    document.getElementById("edit_paket_id").value = id;
    document.getElementById("edit_nama_paket").value = nama;
    document.getElementById("edit_wok_id").value = wok_id;
    document.getElementById("edit_arpu").value = arpu;
    document.getElementById("edit_branch_index").value = branch;
    document.getElementById("edit_product_index").value = product;
    document.getElementById("edit_operasional_3").value = operasional;
    document.getElementById("edit_basic_fee").value = basic_fee;
    document.getElementById("edit_fee_ditahan_10").value = fee_ditahan;
    document.getElementById("edit_pph_2").value = pph;
    document.getElementById("edit_fee_sales").value = sales;

    document.getElementById("editModal").classList.remove("hidden");
    document.getElementById("editModal").classList.add("flex");
}

// tutup modal
function closeEditModal() {
    document.getElementById("editModal").classList.add("hidden");
    document.getElementById("editModal").classList.remove("flex");
}

// delete
function confirmDelete(paketId) {
    Swal.fire({
        title: "Yakin hapus paket ini?",
        text: "Data akan dihapus permanen!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#d33",
        cancelButtonColor: "#3085d6",
        confirmButtonText: "Ya, hapus!"
    }).then((result) => {
        if (result.isConfirmed) {
            // bikin form untuk submit delete
            const form = document.createElement("form");
            form.method = "POST";
            form.action = ""; // tetap di halaman yang sama
            form.innerHTML = `
                {% csrf_token %}
                <input type="hidden" name="form_mode" value="delete">
                <input type="hidden" name="paket_id" value="${paketId}">
            `;
            document.body.appendChild(form);
            form.submit();
        }
    });
}

document.addEventListener("DOMContentLoaded", () => {
    const table = document.getElementById("paket-table");
    if (!table) return;

    const theadCols = table.querySelectorAll("thead th").length || 1;
    const tbody = table.tBodies[0];
    const originalRows = Array.from(tbody.querySelectorAll("tr"));

    // Ambil hanya baris data (exclude rows yang berisi colspan atau baris placeholder)
    const dataRows = originalRows.filter(r => {
        const tds = r.querySelectorAll("td");
        return tds && tds.length >= 2; // minimal 2 kolom: Nama & WOK
    });

    let filteredRows = [...dataRows];
    let currentPage = 1;
    const rowsPerPage = 10;
    const paginationEl = document.getElementById("paketPagination");
    const searchInput = document.getElementById("search-paket");
    const searchWOKSelect = document.getElementById("filter-wok");

    // tampilkan/sematkan row "no results"
    function renderNoResults(show) {
        let noRow = tbody.querySelector("#noResultsRow");
        if (show) {
        if (!noRow) {
            noRow = document.createElement("tr");
            noRow.id = "noResultsRow";
            const td = document.createElement("td");
            td.colSpan = theadCols;
            td.className = "text-center text-gray-500 p-4";
            td.textContent = "Tidak ada data yang cocok.";
            noRow.appendChild(td);
            tbody.appendChild(noRow);
        } else {
            noRow.style.display = "";
        }
        } else {
        if (noRow) noRow.style.display = "none";
        }
    }

    // tampilkan halaman tertentu
    function showPage(page) {
        const total = filteredRows.length;
        const totalPages = Math.max(1, Math.ceil(total / rowsPerPage));

        if (page < 1) page = 1;
        if (page > totalPages) page = totalPages;
        currentPage = page;

        // sembunyikan semua baris data
        dataRows.forEach(r => r.style.display = "none");
        renderNoResults(false);

        if (total === 0) {
        // jika tidak ada hasil, tampilkan pesan
        renderNoResults(true);
        paginationEl.innerHTML = "";
        return;
        }

        const start = (currentPage - 1) * rowsPerPage;
        const end = start + rowsPerPage;
        filteredRows.slice(start, end).forEach(r => r.style.display = "");

        renderPagination(); // update tombol pagination (active state dll)
    }

    // render pagination (Prev, page numbers (max 5), Next)
    function renderPagination() {
        paginationEl.innerHTML = "";
        const total = filteredRows.length;
        const totalPages = Math.ceil(total / rowsPerPage);
        if (totalPages <= 1) return; // tidak perlu pager kalau 0/1 halaman

        // Prev
        const prevBtn = document.createElement("button");
        prevBtn.innerHTML = "&laquo;";
        prevBtn.className =
        "px-3 py-1 rounded border text-sm " +
        (currentPage === 1 ? "bg-gray-200 text-gray-500 cursor-not-allowed" : "bg-white hover:bg-red-100");
        prevBtn.disabled = currentPage === 1;
        prevBtn.onclick = () => { if (currentPage > 1) showPage(currentPage - 1); };
        paginationEl.appendChild(prevBtn);

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

        for (let i = startPage; i <= endPage; i++) {
        const btn = document.createElement("button");
        btn.textContent = i;
        btn.className = "mx-1 px-3 py-1 rounded " + (i === currentPage ? "bg-red-600 text-white" : "bg-gray-200 hover:bg-gray-300");
        btn.onclick = () => showPage(i);
        paginationEl.appendChild(btn);
        }

        // Next
        const nextBtn = document.createElement("button");
        nextBtn.innerHTML = "&raquo;";
        nextBtn.className =
        "px-3 py-1 rounded border text-sm " +
        (currentPage === totalPages ? "bg-gray-200 text-gray-500 cursor-not-allowed" : "bg-white hover:bg-red-100");
        nextBtn.disabled = currentPage === totalPages;
        nextBtn.onclick = () => { if (currentPage < totalPages) showPage(currentPage + 1); };
        paginationEl.appendChild(nextBtn);
    }

    // fungsi filter berdasarkan nama paket + WOK
    function filterTable() {
        const q = (searchInput && searchInput.value || "").trim().toLowerCase();
        const wok = (searchWOKSelect && searchWOKSelect.value || "").trim().toLowerCase();

        filteredRows = dataRows.filter(row => {
        const nama = (row.cells[0] && row.cells[0].textContent || "").trim().toLowerCase();
        const wokName = (row.cells[1] && row.cells[1].textContent || "").trim().toLowerCase();
        const matchNama = nama.indexOf(q) !== -1;
        const matchWok = wok === "" || wokName === wok;
        return matchNama && matchWok;
        });

        currentPage = 1;
        showPage(1);
    }

    // event listeners
    if (searchInput) searchInput.addEventListener("input", filterTable);
    if (searchWOKSelect) searchWOKSelect.addEventListener("change", filterTable);

    // inisialisasi
    filterTable();
});
</script>

{% endblock %}