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

{% block title %}Rekap Data - CWN{% endblock %}

{% block content %}
<div class="w-full px-4 md:px-8">
    <!-- Judul -->
    <h2 class="text-center text-white py-3 rounded mb-6 mt-2 bg-red-700 font-semibold text-xl">
        Rekapitulasi Data Penjualan
    </h2>

    <!-- Filter -->
    <div class="bg-white shadow rounded-lg p-4 mb-6">
        <h5 class="text-gray-800 font-semibold mb-3">Rentang Tanggal</h5>
        <div class="grid grid-cols-1 md:grid-cols-5 gap-3 items-center">
            <input type="date" id="start_date" class="border rounded px-3 py-2 w-full">
            <span class="text-center text-gray-700">s.d.</span>
            <input type="date" id="end_date" class="border rounded px-3 py-2 w-full">
            <button id="filter_btn" class="bg-gray-800 hover:bg-gray-900 text-white py-2 rounded col-span-1 md:col-span-2">
                Cari
            </button>
        </div>
    </div>

    <!-- Tabel WOK -->
    <div class="bg-white shadow rounded-lg mb-6 overflow-hidden">
        <div class="bg-red-700 text-white px-4 py-2 font-semibold">
            Wilayah Operasional Kerja
        </div>
        <div class="overflow-x-auto">
            <table id="wok-table" class="w-full text-left border-collapse">
                <thead class="bg-gray-100 text-gray-700">
                    <tr>
                        <th class="px-4 py-2 border">Nama WOK</th>
                        <th class="px-4 py-2 border cursor-pointer select-none" onclick="sortWokTable(1, this)">
                            Jumlah PS <span class="sort-icon text-xs ml-1">⇧⇩</span>
                        </th>
                    </tr>
                </thead>
                <tbody id="wok-body">
                    {% for wok in woks %}
                    <tr data-wok-id="{{ wok.wok_id }}" class="wok-row cursor-pointer hover:bg-gray-50">
                        <td class="px-4 py-2 border">{{ wok.wok_name }}</td>
                        <td class="px-4 py-2 border">{{ wok.jumlah_ps }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="2" class="text-center px-4 py-3 text-gray-500">
                            Tidak ada data untuk bulan dan tahun yang dipilih.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- TL & SF berdampingan -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div id="team-leader-container"></div>
        <div id="sales-force-container"></div>
    </div>

    <!-- Detail PS -->
    <div id="ps-detail-container" class="mb-6"></div>
</div>

<!-- Script tetap -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function loadWokData() {
        const startDate = $('#start_date').val();
        const endDate = $('#end_date').val();
        $('#team-leader-container').html('');
        $('#sales-force-container').html('');
        $('#ps-detail-container').html('');
        if (startDate && endDate) {
            $.get(`/admincwn/rekap/filter-data/${startDate}/${endDate}/`, function (data) {
                $('#wok-body').html(data);
            });
        }
    }

    $(document).ready(function () {
        const today = new Date();
        const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
        const formatDate = (date) => {
            const d = date.getDate().toString().padStart(2, '0');
            const m = (date.getMonth() + 1).toString().padStart(2, '0');
            const y = date.getFullYear();
            return `${y}-${m}-${d}`;
        };
        $('#start_date').val(formatDate(firstDay));
        $('#end_date').val(formatDate(today));
        loadWokData();
    });

    $('#start_date, #end_date').on('change', function () {
        loadWokData();
    });

    $(document).on('click', '.wok-row', function () {
        const wokId = $(this).data('wok-id');
        const startDate = $('#start_date').val();
        const endDate = $('#end_date').val();
        $('#team-leader-container').html('');
        $('#sales-force-container').html('');
        $('#ps-detail-container').html('');
        $.get(`/admincwn/rekap/team-leaders/${wokId}/?start_date=${startDate}&end_date=${endDate}`, function (data) {
            $('#team-leader-container').html(data);
        });
    });

    $(document).on('click', '.tl-row', function () {
        const tlId = $(this).data('tl-id');
        const startDate = $('#start_date').val();
        const endDate = $('#end_date').val();
        $('#sales-force-container').html('');
        $('#ps-detail-container').html('');
        $.get(`/admincwn/rekap/sales-forces/${tlId}/?start_date=${startDate}&end_date=${endDate}`, function (data) {
            $('#sales-force-container').html(data);
        });
    });

    $(document).on('click', '.sf-row', function () {
        const sfId = $(this).data('sf-id');
        const startDate = $('#start_date').val();
        const endDate = $('#end_date').val();
        $('#ps-detail-container').html('');
        $.get(`/admincwn/rekap/ps-detail/${sfId}/?start_date=${startDate}&end_date=${endDate}`, function (data) {
            $('#ps-detail-container').html(data);
        });
    });

    let currentSortedWok = {};
    function sortWokTable(colIndex, th) {
        const table = document.getElementById("wok-table");
        const tbody = table.tBodies[0];
        const rows = Array.from(tbody.rows);
        table.querySelectorAll("th .sort-icon").forEach(icon => icon.textContent = "");
        if (currentSortedWok.col === colIndex) {
            currentSortedWok.asc = !currentSortedWok.asc;
        } else {
            currentSortedWok = { col: colIndex, asc: true };
        }
        const asc = currentSortedWok.asc;
        rows.sort((a, b) => {
            const getValue = (row) =>
                parseFloat((row.cells[colIndex].innerText || "").replace(/[^\d.-]/g, "")) || 0;
            const valA = getValue(a);
            const valB = getValue(b);
            return asc ? valA - valB : valB - valA;
        });
        rows.forEach(row => tbody.appendChild(row));
        const icon = th.querySelector(".sort-icon");
        icon.textContent = asc ? "⇧" : "⇩";
    }
</script>
{% endblock %}