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

{% block content %}
<div class="w-full px-4 mt-4">
    <h2 class="text-center text-white p-3 rounded mb-4 mt-2 bg-red-700">
        Performa Billing
    </h2>

    <!-- Filter -->
    <div class="bg-white shadow rounded mb-3 w-full max-w-6xl mx-auto p-4">
        <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <select name="bulan" class="w-full border rounded p-2">
                    <option value="">Semua Bulan</option>
                    {% for b in list_bulan %}
                        <option value="{{ b }}" {% if b == bulan_selected %}selected{% endif %}>{{ b }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <select name="tahun" class="w-full border rounded p-2">
                    <option value="">Semua Tahun</option>
                    {% for t in list_tahun %}
                        <option value="{{ t }}" {% if t|stringformat:"s" == tahun_selected %}selected{% endif %}>{{ t }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <select name="kategori" class="w-full border rounded p-2">
                    {% for k in list_kategori %}
                        {% if k != "Billing Keenam" %}
                            <option value="{{ k }}" {% if k == kategori_selected %}selected{% endif %}>{{ k }}</option>
                        {% endif %}
                    {% endfor %}
                    <option value="Billing Keenam" {% if "Billing Keenam" == kategori_selected %}selected{% endif %}>Billing Keenam</option>
                </select>
            </div>
            <div>
                <button type="submit" class="w-full bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition">
                    Tampilkan
                </button>
            </div>
        </form>
    </div>

    {% if performance_data %}
        {% for item in performance_data %}
            <div class="bg-white shadow rounded mb-4">
                <div class="bg-red-700 text-white px-4 py-2 rounded-t font-semibold">
                    {% if item.kategori == "Semua Kategori" %}
                        <strong>Bulan {{ item.bulan }}</strong> - {{ item.wok }}
                    {% else %}
                        <strong>{{ item.kategori }}</strong> - {{ item.wok }}
                    {% endif %}
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm border border-gray-300 text-center">
                        <thead class="bg-red-800 text-white text-xs">
                            <tr>
                                <th rowspan="2" class="border px-2 py-1">No</th>
                                <th rowspan="2" class="border px-2 py-1">Nama</th>
                                <th colspan="5" class="border px-2 py-1">Total</th>
                                <th colspan="5" class="border px-2 py-1">IndiHome</th>
                                <th colspan="5" class="border px-2 py-1">HWA</th>
                            </tr>
                            <tr>
                                <th class="border px-2 py-1">Paid</th>
                                <th class="border px-2 py-1">Unpaid</th>
                                <th class="border px-2 py-1">Total</th>
                                <th class="border px-2 py-1">% Paid</th>
                                <th class="border px-2 py-1">% Unpaid</th>

                                <th class="border px-2 py-1">Paid</th>
                                <th class="border px-2 py-1">Unpaid</th>
                                <th class="border px-2 py-1">Total</th>
                                <th class="border px-2 py-1">% Paid</th>
                                <th class="border px-2 py-1">% Unpaid</th>

                                <th class="border px-2 py-1">Paid</th>
                                <th class="border px-2 py-1">Unpaid</th>
                                <th class="border px-2 py-1">Total</th>
                                <th class="border px-2 py-1">% Paid</th>
                                <th class="border px-2 py-1">% Unpaid</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for tl in item.team_leaders %}
                            <tr class="hover:bg-gray-50">
                                <td class="border px-2 py-1">{{ forloop.counter }}</td>
                                <td class="border px-2 py-1 font-medium">{{ tl.nama_tl }}</td>

                                <!-- Total -->
                                <td class="border px-2 py-1 bg-green-100">{{ tl.paid }}</td>
                                <td class="border px-2 py-1 bg-red-100">{{ tl.unpaid }}</td>
                                <td class="border px-2 py-1 bg-yellow-100">{{ tl.total }}</td>
                                <td class="border px-2 py-1 text-green-700 font-semibold">{{ tl.persentase_paid }}%</td>
                                <td class="border px-2 py-1 text-red-700 font-semibold">{{ tl.persentase_unpaid }}%</td>

                                <!-- IndiHome -->
                                <td class="border px-2 py-1 bg-green-100">{{ tl.indihome.paid }}</td>
                                <td class="border px-2 py-1 bg-red-100">{{ tl.indihome.unpaid }}</td>
                                <td class="border px-2 py-1 bg-yellow-100">{{ tl.indihome.total }}</td>
                                <td class="border px-2 py-1 text-green-700 font-semibold">{{ tl.indihome.persentase_paid }}%</td>
                                <td class="border px-2 py-1 text-red-700 font-semibold">{{ tl.indihome.persentase_unpaid }}%</td>

                                <!-- HWA -->
                                <td class="border px-2 py-1 bg-green-100">{{ tl.hwa.paid }}</td>
                                <td class="border px-2 py-1 bg-red-100">{{ tl.hwa.unpaid }}</td>
                                <td class="border px-2 py-1 bg-yellow-100">{{ tl.hwa.total }}</td>
                                <td class="border px-2 py-1 text-green-700 font-semibold">{{ tl.hwa.persentase_paid }}%</td>
                                <td class="border px-2 py-1 text-red-700 font-semibold">{{ tl.hwa.persentase_unpaid }}%</td>
                            </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="100%" class="px-4 py-2 text-center text-gray-600">Tidak ada data.</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded">
            Tidak ada data performa untuk filter yang dipilih.
        </div>
    {% endif %}
</div>
{% endblock %}