{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Daily SF - CWN{% endblock %}
{% block content %}
{% load static %}

<!-- Judul -->
<div class="container mx-auto mt-6 px-4">
    <h1 class="text-center text-white p-3 rounded mb-6 mt-4 bg-red-700 font-bold text-xl">DATA PER BULAN</h1>

    <!-- Card untuk Form Filter -->
    <div class="flex justify-center mt-6">
        <div class="bg-white shadow-md rounded-lg w-full max-w-3xl p-6">
            <form method="GET" action="" id="filterForm" class="flex flex-wrap gap-4 items-end">
                
                <!-- Pilihan WOK -->
                <div class="flex flex-col flex-1 min-w-[150px]">
                {% if request.session.role == 'Team Leader' %}
                    <input type="text" class="border border-gray-300 rounded-md p-2 bg-gray-100" 
                        value="{{ request.session.wok_id_tl }}" readonly>
                    <input type="hidden" name="wok_id" value="{{ request.session.wok_id_tl }}">
                {% elif request.session.role == 'Mitra' %}
                    <input type="text" class="border border-gray-300 rounded-md p-2 bg-gray-100" 
                        value="{{ request.session.wok_mitra }}" readonly>
                    <input type="hidden" name="wok_id" value="{{ request.session.wok_mitra }}">
                {% else %}
                    <label for="wok_id" class="font-semibold mb-1">Wilayah Operasional</label>
                    <select name="wok_id" id="wok_id" class="border border-gray-300 rounded-md p-2"
                            onchange="this.form.submit()">
                    <option value="x" {% if selected_wok == 'x' %}selected{% endif %}>-- Pilih WOK --</option>
                    {% for wok in woks %}
                        <option value="{{ wok.wok_id }}" {% if selected_wok == wok.wok_id|stringformat:"s" %}selected{% endif %}>
                        {{ wok.wok_name }}
                        </option>
                    {% endfor %}
                    </select>
                {% endif %}
                </div>

                <!-- Tahun -->
                <div class="flex flex-col flex-1 min-w-[120px]">
                <label for="year" class="font-semibold mb-1">Tahun</label>
                <select name="year" id="year" class="border border-gray-300 rounded-md p-2">
                    <option value="">-- Pilih Tahun --</option>
                    {% for y in years %}
                    <option value="{{ y }}" {% if selected_year == y|stringformat:"s" %}selected{% endif %}>{{ y }}</option>
                    {% endfor %}
                </select>
                </div>

                <!-- Bulan -->
                <div class="flex flex-col flex-1 min-w-[150px]">
                <label for="month" class="font-semibold mb-1">Bulan</label>
                <select name="month" id="month" class="border border-gray-300 rounded-md p-2">
                    <option value="">-- Pilih Bulan --</option>
                    {% for m in months %}
                    <option value="{{ m.value }}" {% if selected_month == m.value %}selected{% endif %}>
                        {{ m.label }}
                    </option>
                    {% endfor %}
                </select>
                </div>

                <!-- Tombol -->
                <div class="flex-shrink-0">
                    <button class="bg-red-700 text-white px-4 py-2 rounded-md hover:bg-red-800 flex items-center gap-2" type="submit">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabel Data -->
    <div class="overflow-x-auto mt-6 space-y-6" id="mom-data-container">

        <!-- ================= DEMAK ================= -->
        {% if request.GET.wok_id == "1" or request.GET.wok_id == "x" or not request.GET.wok_id %}
        <div class="bg-white shadow-md rounded-lg">
            <div class="border-b-2 border-red-700 px-4 py-2">
                <h2 class="font-bold text-lg text-gray-800">WOK DEMAK</h2>
            </div>
            <div class="p-4">
            <input type="text" id="search-demak"
                    onkeyup="searchTable('search-demak','table-demak')"
                    placeholder="Cari Nama..."
                    class="border border-gray-300 rounded-md p-2 mb-4 w-full">

            <div class="overflow-x-auto">
                <div class="max-w-[1000px]">
                    <table class="min-w-full border border-gray-300 text-center text-xs" id="table-demak">
                    <thead class="bg-gray-100 text-gray-700">
                        <tr>
                        <th class="border px-2 py-1">SF ID</th>
                        <th class="border px-2 py-1">Nama</th>
                        <!-- Tanggal 1–31 -->
                        <th class="border px-2 py-1">1</th>
                        <th class="border px-2 py-1">2</th>
                        <th class="border px-2 py-1">3</th>
                        <th class="border px-2 py-1">4</th>
                        <th class="border px-2 py-1">5</th>
                        <th class="border px-2 py-1">6</th>
                        <th class="border px-2 py-1">7</th>
                        <th class="border px-2 py-1">8</th>
                        <th class="border px-2 py-1">9</th>
                        <th class="border px-2 py-1">10</th>
                        <th class="border px-2 py-1">11</th>
                        <th class="border px-2 py-1">12</th>
                        <th class="border px-2 py-1">13</th>
                        <th class="border px-2 py-1">14</th>
                        <th class="border px-2 py-1">15</th>
                        <th class="border px-2 py-1">16</th>
                        <th class="border px-2 py-1">17</th>
                        <th class="border px-2 py-1">18</th>
                        <th class="border px-2 py-1">19</th>
                        <th class="border px-2 py-1">20</th>
                        <th class="border px-2 py-1">21</th>
                        <th class="border px-2 py-1">22</th>
                        <th class="border px-2 py-1">23</th>
                        <th class="border px-2 py-1">24</th>
                        <th class="border px-2 py-1">25</th>
                        <th class="border px-2 py-1">26</th>
                        <th class="border px-2 py-1">27</th>
                        <th class="border px-2 py-1">28</th>
                        <th class="border px-2 py-1">29</th>
                        <th class="border px-2 py-1">30</th>
                        <th class="border px-2 py-1">31</th>
                        <th class="border px-2 py-1">Total PSB</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for k in momkaryawan %}
                        {% if k.sf.wok.wok_name == "DEMAK" %}
                        <tr class="hover:bg-gray-50">
                            <td class="border px-2 py-1">{{ k.sf.sf_id }}</td>
                            <td class="border px-2 py-1">{{ k.sf.user_name }}</td>
                            <td class="border px-2 py-1">{{ k.day_1 }}</td>
                            <td class="border px-2 py-1">{{ k.day_2 }}</td>
                            <td class="border px-2 py-1">{{ k.day_3 }}</td>
                            <td class="border px-2 py-1">{{ k.day_4 }}</td>
                            <td class="border px-2 py-1">{{ k.day_5 }}</td>
                            <td class="border px-2 py-1">{{ k.day_6 }}</td>
                            <td class="border px-2 py-1">{{ k.day_7 }}</td>
                            <td class="border px-2 py-1">{{ k.day_8 }}</td>
                            <td class="border px-2 py-1">{{ k.day_9 }}</td>
                            <td class="border px-2 py-1">{{ k.day_10 }}</td>
                            <td class="border px-2 py-1">{{ k.day_11 }}</td>
                            <td class="border px-2 py-1">{{ k.day_12 }}</td>
                            <td class="border px-2 py-1">{{ k.day_13 }}</td>
                            <td class="border px-2 py-1">{{ k.day_14 }}</td>
                            <td class="border px-2 py-1">{{ k.day_15 }}</td>
                            <td class="border px-2 py-1">{{ k.day_16 }}</td>
                            <td class="border px-2 py-1">{{ k.day_17 }}</td>
                            <td class="border px-2 py-1">{{ k.day_18 }}</td>
                            <td class="border px-2 py-1">{{ k.day_19 }}</td>
                            <td class="border px-2 py-1">{{ k.day_20 }}</td>
                            <td class="border px-2 py-1">{{ k.day_21 }}</td>
                            <td class="border px-2 py-1">{{ k.day_22 }}</td>
                            <td class="border px-2 py-1">{{ k.day_23 }}</td>
                            <td class="border px-2 py-1">{{ k.day_24 }}</td>
                            <td class="border px-2 py-1">{{ k.day_25 }}</td>
                            <td class="border px-2 py-1">{{ k.day_26 }}</td>
                            <td class="border px-2 py-1">{{ k.day_27 }}</td>
                            <td class="border px-2 py-1">{{ k.day_28 }}</td>
                            <td class="border px-2 py-1">{{ k.day_29 }}</td>
                            <td class="border px-2 py-1">{{ k.day_30 }}</td>
                            <td class="border px-2 py-1">{{ k.day_31 }}</td>
                            <td class="border px-2 py-1">{{ k.total_psb }}</td>
                        </tr>
                        {% endif %}
                        {% empty %}
                        <tr>
                            <td colspan="34" class="text-center py-3">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                        </tr>
                        {% endfor %}
                        <tr class="bg-red-50 font-semibold">
                        <td colspan="2" class="border px-2 py-1">Total Harian</td>
                        {% for t in total_demak %}
                        <td class="border px-2 py-1">{{ t }}</td>
                        {% endfor %}
                        <td class="border px-2 py-1">{{ jumlah_total_demak }}</td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <div class="pagination mt-4 flex justify-center" id="pagination-demak"></div>
            </div>
            </div>
        </div>
        {% endif %}

        <!-- Ulangi blok sama untuk SEMARANG 2 dan SURAKARTA -->
        {% if request.GET.wok_id == "2" or request.GET.wok_id == "x" or not request.GET.wok_id %}
        <div class="bg-white shadow-md rounded-lg">
            <div class="border-b-2 border-red-700 px-4 py-2">
            <h2 class="font-bold text-lg text-gray-800">WOK SEMARANG 2</h2>
            </div>
            <div class="p-4">
            <input type="text" id="search-semarang"
                    onkeyup="searchTable('search-semarang','table-semarang')"
                    placeholder="Cari Nama..."
                    class="border border-gray-300 rounded-md p-2 mb-4 w-full">

            <div class="overflow-x-auto">
                <div class="max-w-[1000px]">
                    <table class="min-w-full border border-gray-300 text-center text-xs" id="table-semarang">
                    <thead class="bg-gray-100 text-gray-700">
                        <tr>
                        <th class="border px-2 py-1">SF ID</th>
                        <th class="border px-2 py-1">Nama</th>
                        <!-- Tanggal 1–31 -->
                        <th class="border px-2 py-1">1</th>
                        <th class="border px-2 py-1">2</th>
                        <th class="border px-2 py-1">3</th>
                        <th class="border px-2 py-1">4</th>
                        <th class="border px-2 py-1">5</th>
                        <th class="border px-2 py-1">6</th>
                        <th class="border px-2 py-1">7</th>
                        <th class="border px-2 py-1">8</th>
                        <th class="border px-2 py-1">9</th>
                        <th class="border px-2 py-1">10</th>
                        <th class="border px-2 py-1">11</th>
                        <th class="border px-2 py-1">12</th>
                        <th class="border px-2 py-1">13</th>
                        <th class="border px-2 py-1">14</th>
                        <th class="border px-2 py-1">15</th>
                        <th class="border px-2 py-1">16</th>
                        <th class="border px-2 py-1">17</th>
                        <th class="border px-2 py-1">18</th>
                        <th class="border px-2 py-1">19</th>
                        <th class="border px-2 py-1">20</th>
                        <th class="border px-2 py-1">21</th>
                        <th class="border px-2 py-1">22</th>
                        <th class="border px-2 py-1">23</th>
                        <th class="border px-2 py-1">24</th>
                        <th class="border px-2 py-1">25</th>
                        <th class="border px-2 py-1">26</th>
                        <th class="border px-2 py-1">27</th>
                        <th class="border px-2 py-1">28</th>
                        <th class="border px-2 py-1">29</th>
                        <th class="border px-2 py-1">30</th>
                        <th class="border px-2 py-1">31</th>
                        <th class="border px-2 py-1">Total PSB</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for k in momkaryawan %}
                        {% if k.sf.wok.wok_name == "SEMARANG 2" %}
                        <tr class="hover:bg-gray-50">
                            <td class="border px-2 py-1">{{ k.sf.sf_id }}</td>
                            <td class="border px-2 py-1">{{ k.sf.user_name }}</td>
                            <td class="border px-2 py-1">{{ k.day_1 }}</td>
                            <td class="border px-2 py-1">{{ k.day_2 }}</td>
                            <td class="border px-2 py-1">{{ k.day_3 }}</td>
                            <td class="border px-2 py-1">{{ k.day_4 }}</td>
                            <td class="border px-2 py-1">{{ k.day_5 }}</td>
                            <td class="border px-2 py-1">{{ k.day_6 }}</td>
                            <td class="border px-2 py-1">{{ k.day_7 }}</td>
                            <td class="border px-2 py-1">{{ k.day_8 }}</td>
                            <td class="border px-2 py-1">{{ k.day_9 }}</td>
                            <td class="border px-2 py-1">{{ k.day_10 }}</td>
                            <td class="border px-2 py-1">{{ k.day_11 }}</td>
                            <td class="border px-2 py-1">{{ k.day_12 }}</td>
                            <td class="border px-2 py-1">{{ k.day_13 }}</td>
                            <td class="border px-2 py-1">{{ k.day_14 }}</td>
                            <td class="border px-2 py-1">{{ k.day_15 }}</td>
                            <td class="border px-2 py-1">{{ k.day_16 }}</td>
                            <td class="border px-2 py-1">{{ k.day_17 }}</td>
                            <td class="border px-2 py-1">{{ k.day_18 }}</td>
                            <td class="border px-2 py-1">{{ k.day_19 }}</td>
                            <td class="border px-2 py-1">{{ k.day_20 }}</td>
                            <td class="border px-2 py-1">{{ k.day_21 }}</td>
                            <td class="border px-2 py-1">{{ k.day_22 }}</td>
                            <td class="border px-2 py-1">{{ k.day_23 }}</td>
                            <td class="border px-2 py-1">{{ k.day_24 }}</td>
                            <td class="border px-2 py-1">{{ k.day_25 }}</td>
                            <td class="border px-2 py-1">{{ k.day_26 }}</td>
                            <td class="border px-2 py-1">{{ k.day_27 }}</td>
                            <td class="border px-2 py-1">{{ k.day_28 }}</td>
                            <td class="border px-2 py-1">{{ k.day_29 }}</td>
                            <td class="border px-2 py-1">{{ k.day_30 }}</td>
                            <td class="border px-2 py-1">{{ k.day_31 }}</td>
                            <td class="border px-2 py-1">{{ k.total_psb }}</td>
                        </tr>
                        {% endif %}
                        {% empty %}
                        <tr>
                            <td colspan="34" class="text-center py-3">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                        </tr>
                        {% endfor %}
                        <tr class="bg-red-50 font-semibold">
                        <td colspan="2" class="border px-2 py-1">Total Harian</td>
                        {% for t in total_semarang %}
                        <td class="border px-2 py-1">{{ t }}</td>
                        {% endfor %}
                        <td class="border px-2 py-1">{{ jumlah_total_semarang }}</td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <div class="pagination mt-4 flex justify-center" id="pagination-semarang"></div>
            </div>
            </div>
        </div>
        {% endif %}

        {% if request.GET.wok_id == "3" or request.GET.wok_id == "x" or not request.GET.wok_id %}
        <div class="bg-white shadow-md rounded-lg">
            <div class="border-b-2 border-red-700 px-4 py-2">
            <h2 class="font-bold text-lg text-gray-800">WOK SURAKARTA</h2>
            </div>
            <div class="p-4">
            <input type="text" id="search-surakarta"
                    onkeyup="searchTable('search-surakarta','table-surakarta')"
                    placeholder="Cari Nama..."
                    class="border border-gray-300 rounded-md p-2 mb-4 w-full">

            <div class="overflow-x-auto">
                <div class="max-w-[1000px]">
                    <table class="min-w-full border border-gray-300 text-center text-xs" id="table-surakarta">
                    <thead class="bg-gray-100 text-gray-700">
                        <tr>
                        <th class="border px-2 py-1">SF ID</th>
                        <th class="border px-2 py-1">Nama</th>
                        <!-- Tanggal 1–31 -->
                        <th class="border px-2 py-1">1</th>
                        <th class="border px-2 py-1">2</th>
                        <th class="border px-2 py-1">3</th>
                        <th class="border px-2 py-1">4</th>
                        <th class="border px-2 py-1">5</th>
                        <th class="border px-2 py-1">6</th>
                        <th class="border px-2 py-1">7</th>
                        <th class="border px-2 py-1">8</th>
                        <th class="border px-2 py-1">9</th>
                        <th class="border px-2 py-1">10</th>
                        <th class="border px-2 py-1">11</th>
                        <th class="border px-2 py-1">12</th>
                        <th class="border px-2 py-1">13</th>
                        <th class="border px-2 py-1">14</th>
                        <th class="border px-2 py-1">15</th>
                        <th class="border px-2 py-1">16</th>
                        <th class="border px-2 py-1">17</th>
                        <th class="border px-2 py-1">18</th>
                        <th class="border px-2 py-1">19</th>
                        <th class="border px-2 py-1">20</th>
                        <th class="border px-2 py-1">21</th>
                        <th class="border px-2 py-1">22</th>
                        <th class="border px-2 py-1">23</th>
                        <th class="border px-2 py-1">24</th>
                        <th class="border px-2 py-1">25</th>
                        <th class="border px-2 py-1">26</th>
                        <th class="border px-2 py-1">27</th>
                        <th class="border px-2 py-1">28</th>
                        <th class="border px-2 py-1">29</th>
                        <th class="border px-2 py-1">30</th>
                        <th class="border px-2 py-1">31</th>
                        <th class="border px-2 py-1">Total PSB</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for k in momkaryawan %}
                        {% if k.sf.wok.wok_name == "DEMAK" %}
                        <tr class="hover:bg-gray-50">
                            <td class="border px-2 py-1">{{ k.sf.sf_id }}</td>
                            <td class="border px-2 py-1">{{ k.sf.user_name }}</td>
                            <td class="border px-2 py-1">{{ k.day_1 }}</td>
                            <td class="border px-2 py-1">{{ k.day_2 }}</td>
                            <td class="border px-2 py-1">{{ k.day_3 }}</td>
                            <td class="border px-2 py-1">{{ k.day_4 }}</td>
                            <td class="border px-2 py-1">{{ k.day_5 }}</td>
                            <td class="border px-2 py-1">{{ k.day_6 }}</td>
                            <td class="border px-2 py-1">{{ k.day_7 }}</td>
                            <td class="border px-2 py-1">{{ k.day_8 }}</td>
                            <td class="border px-2 py-1">{{ k.day_9 }}</td>
                            <td class="border px-2 py-1">{{ k.day_10 }}</td>
                            <td class="border px-2 py-1">{{ k.day_11 }}</td>
                            <td class="border px-2 py-1">{{ k.day_12 }}</td>
                            <td class="border px-2 py-1">{{ k.day_13 }}</td>
                            <td class="border px-2 py-1">{{ k.day_14 }}</td>
                            <td class="border px-2 py-1">{{ k.day_15 }}</td>
                            <td class="border px-2 py-1">{{ k.day_16 }}</td>
                            <td class="border px-2 py-1">{{ k.day_17 }}</td>
                            <td class="border px-2 py-1">{{ k.day_18 }}</td>
                            <td class="border px-2 py-1">{{ k.day_19 }}</td>
                            <td class="border px-2 py-1">{{ k.day_20 }}</td>
                            <td class="border px-2 py-1">{{ k.day_21 }}</td>
                            <td class="border px-2 py-1">{{ k.day_22 }}</td>
                            <td class="border px-2 py-1">{{ k.day_23 }}</td>
                            <td class="border px-2 py-1">{{ k.day_24 }}</td>
                            <td class="border px-2 py-1">{{ k.day_25 }}</td>
                            <td class="border px-2 py-1">{{ k.day_26 }}</td>
                            <td class="border px-2 py-1">{{ k.day_27 }}</td>
                            <td class="border px-2 py-1">{{ k.day_28 }}</td>
                            <td class="border px-2 py-1">{{ k.day_29 }}</td>
                            <td class="border px-2 py-1">{{ k.day_30 }}</td>
                            <td class="border px-2 py-1">{{ k.day_31 }}</td>
                            <td class="border px-2 py-1">{{ k.total_psb }}</td>
                        </tr>
                        {% endif %}
                        {% empty %}
                        <tr>
                            <td colspan="34" class="text-center py-3">Tidak ada data untuk bulan dan tahun yang dipilih.</td>
                        </tr>
                        {% endfor %}
                        <tr class="bg-red-50 font-semibold">
                        <td colspan="2" class="border px-2 py-1">Total Harian</td>
                        {% for t in total_surakarta %}
                        <td class="border px-2 py-1">{{ t }}</td>
                        {% endfor %}
                        <td class="border px-2 py-1">{{ jumlah_total_surakarta }}</td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <div class="pagination mt-4 flex justify-center" id="pagination-surakarta"></div>
            </div>
            </div>
        </div>
        {% endif %}
    </div>

</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function searchTable(inputId, tableId) {
        var input = document.getElementById(inputId);
        var filter = input.value.toUpperCase();
        var table = document.getElementById(tableId);
        var tr = table.getElementsByTagName("tr");

        for (var i = 1; i < tr.length; i++) {
            var td = tr[i].getElementsByTagName("td")[1]; // kolom Nama
            if (td) {
                var txtValue = td.textContent || td.innerText;
                tr[i].style.display = txtValue.toUpperCase().indexOf(filter) > -1 ? "" : "none";
            }
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const today = new Date();
        const currentYear = today.getFullYear();
        const currentMonth = String(today.getMonth() + 1).padStart(2, '0');

        const yearSelect = document.getElementById('year');
        const monthSelect = document.getElementById('month');
        const wokSelect = document.getElementById('wok_id');

        if (!yearSelect.value) yearSelect.value = currentYear;
        if (!monthSelect.value) monthSelect.value = currentMonth;
        if (wokSelect && !wokSelect.value) {
            wokSelect.value = 'x';
            wokSelect.form.submit();
        }
    });

    window.addEventListener('DOMContentLoaded', function () {
        const urlParams = new URLSearchParams(window.location.search);
        if (!urlParams.has('wok_id')) {
            document.getElementById('filterForm').submit();
        }
    });

    const rowsPerPage = 10; // jumlah baris per halaman

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

        const rows = Array.from(table.querySelectorAll("tbody tr"));
        const pagination = document.getElementById(paginationId);

        let currentPage = 1;

        function render() {
            const totalPages = Math.ceil(rows.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;
            rows.slice(start, end).forEach(row => row.style.display = "");

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

            // 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--; render(); };
            }
            ul.appendChild(prevLi);

            // nomor halaman (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; render(); };
                ul.appendChild(li);
            }

            // 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++; render(); };
            }
            ul.appendChild(nextLi);

            pagination.appendChild(ul);
        }

        render();
    }

    document.addEventListener("DOMContentLoaded", function () {
        paginateTable("table-demak", "pagination-demak");
        paginateTable("table-semarang", "pagination-semarang");
        paginateTable("table-surakarta", "pagination-surakarta");
    });

</script>

{% endblock %}