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

{% block title %}Performa Billing per WOK{% endblock %}

{% block content %}
<div class="w-full px-4 md:px-6 mt-6">
    <div class="max-w-7xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">

        <!-- Header & Filter -->
        <div class="bg-red-900 px-4 py-3 flex flex-col md:flex-row justify-between items-center gap-3">
            <h5 class="text-white font-bold text-lg">
                Performa Billing per WOK ({{ bulan }}/{{ tahun }})
            </h5>
            <form method="get" class="flex flex-wrap gap-4">
                <!-- Tahun -->
                <div>
                    <label for="tahun" class="block text-white text-sm font-semibold">Tahun:</label>
                    <select name="tahun" id="tahun" 
                        class="mt-1 block w-28 rounded-md border border-gray-300 bg-white py-1 px-2 text-sm font-semibold shadow-sm focus:border-red-600 focus:ring focus:ring-red-400"
                        onchange="this.form.submit()">
                        {% for th in list_tahun %}
                            <option value="{{ th }}" {% if th == tahun %}selected{% endif %}>{{ th }}</option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Bulan -->
                <div>
                    <label for="bulan" class="block text-white text-sm font-semibold">Bulan:</label>
                    <select name="bulan" id="bulan"
                        class="mt-1 block w-36 rounded-md border border-gray-300 bg-white py-1 px-2 text-sm font-semibold shadow-sm focus:border-red-600 focus:ring focus:ring-red-400"
                        onchange="this.form.submit()">
                        {% for val, name in list_bulan %}
                            <option value="{{ val }}" {% if val == bulan %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </form>
        </div>

        <!-- Data per WOK -->
        <div class="p-4 bg-gray-50">
            {% for wok in data.0.wok_data %}
                <div class="mb-8">
                    <h5 class="text-center mb-3 font-bold text-lg text-gray-800">{{ wok.wok }}</h5>
                    <div class="overflow-x-auto">
                        <table class="min-w-full border border-black text-sm">
                            <thead>
                                <tr class="bg-red-900 text-white text-xs">
                                    <th rowspan="2" class="px-2 py-2 border border-black">Kategori Billing</th>
                                    <th colspan="5" class="px-2 py-2 border border-black">Total</th>
                                    <th colspan="5" class="px-2 py-2 border border-black bg-red-100 text-black">IndiHome</th>
                                    <th colspan="5" class="px-2 py-2 border border-black bg-pink-100 text-black">HWA</th>
                                </tr>
                                <tr class="bg-red-900 text-white text-xs">
                                    <th class="px-2 py-1 border border-black">Paid</th>
                                    <th class="px-2 py-1 border border-black">Unpaid</th>
                                    <th class="px-2 py-1 border border-black">Total</th>
                                    <th class="px-2 py-1 border border-black">% Paid</th>
                                    <th class="px-2 py-1 border border-black">% Unpaid</th>

                                    <th class="px-2 py-1 border border-black bg-red-100 text-black">Paid</th>
                                    <th class="px-2 py-1 border border-black bg-red-100 text-black">Unpaid</th>
                                    <th class="px-2 py-1 border border-black bg-red-100 text-black">Total</th>
                                    <th class="px-2 py-1 border border-black bg-red-100 text-black">% Paid</th>
                                    <th class="px-2 py-1 border border-black bg-red-100 text-black">% Unpaid</th>

                                    <th class="px-2 py-1 border border-black bg-pink-100 text-black">Paid</th>
                                    <th class="px-2 py-1 border border-black bg-pink-100 text-black">Unpaid</th>
                                    <th class="px-2 py-1 border border-black bg-pink-100 text-black">Total</th>
                                    <th class="px-2 py-1 border border-black bg-pink-100 text-black">% Paid</th>
                                    <th class="px-2 py-1 border border-black bg-pink-100 text-black">% Unpaid</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white">
                                {% for row in data %}
                                    {% for wok_stat in row.wok_data %}
                                        {% if wok_stat.wok == wok.wok %}
                                            <tr class="hover:bg-gray-100 text-center font-semibold text-gray-800">
                                                <td class="px-2 py-1 border border-black text-left">{{ row.kategori }}</td>
                                                <!-- Total -->
                                                <td class="px-2 py-1 border border-black">{{ wok_stat.paid }}</td>
                                                <td class="px-2 py-1 border border-black">{{ wok_stat.unpaid }}</td>
                                                <td class="px-2 py-1 border border-black">{{ wok_stat.total }}</td>
                                                <td class="px-2 py-1 border border-black">{{ wok_stat.persentase_paid }}%</td>
                                                <td class="px-2 py-1 border border-black">{{ wok_stat.persentase_unpaid }}%</td>
                                                <!-- IndiHome -->
                                                <td class="px-2 py-1 border border-black bg-red-100">{{ wok_stat.indihome.paid }}</td>
                                                <td class="px-2 py-1 border border-black bg-red-100">{{ wok_stat.indihome.unpaid }}</td>
                                                <td class="px-2 py-1 border border-black bg-red-100">{{ wok_stat.indihome.total }}</td>
                                                <td class="px-2 py-1 border border-black bg-red-100">{{ wok_stat.indihome.persentase_paid }}%</td>
                                                <td class="px-2 py-1 border border-black bg-red-100">{{ wok_stat.indihome.persentase_unpaid }}%</td>
                                                <!-- HWA -->
                                                <td class="px-2 py-1 border border-black bg-pink-100">{{ wok_stat.hwa.paid }}</td>
                                                <td class="px-2 py-1 border border-black bg-pink-100">{{ wok_stat.hwa.unpaid }}</td>
                                                <td class="px-2 py-1 border border-black bg-pink-100">{{ wok_stat.hwa.total }}</td>
                                                <td class="px-2 py-1 border border-black bg-pink-100">{{ wok_stat.hwa.persentase_paid }}%</td>
                                                <td class="px-2 py-1 border border-black bg-pink-100">{{ wok_stat.hwa.persentase_unpaid }}%</td>
                                            </tr>
                                        {% endif %}
                                    {% endfor %}
                                {% empty %}
                                    <tr>
                                        <td colspan="100%" class="px-4 py-3 text-center text-gray-500">Tidak ada data performa.</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}