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

{% block title %}Performa Billing per Sales Force{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto p-4">
    <div class="bg-white shadow-lg rounded-2xl overflow-hidden">
        <!-- Filter Header -->
        <div class="bg-red-900 text-white px-4 py-3 flex flex-col lg:flex-row justify-between gap-4">
            <h5 class="font-bold text-lg">Performa Billing per Sales Force ({{ bulan }}/{{ tahun }})</h5>
            <form method="get" class="flex flex-wrap gap-3 items-center">
                <!-- Tahun -->
                <div>
                    <label for="tahun" class="text-sm font-semibold block mb-1">Tahun:</label>
                    <select name="tahun" id="tahun"
                        class="border border-gray-700 rounded-lg text-black text-sm px-2 py-1 font-semibold"
                        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="text-sm font-semibold block mb-1">Bulan:</label>
                    <select name="bulan" id="bulan"
                        class="border border-gray-700 rounded-lg text-black text-sm px-2 py-1 font-semibold"
                        onchange="this.form.submit()">
                        {% for val, name in list_bulan %}
                            <option value="{{ val }}" {% if val == bulan %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Team Leader -->
                <div>
                    <label for="team_leader" class="text-sm font-semibold block mb-1">Team Leader:</label>
                    <select name="team_leader" id="team_leader"
                        class="border border-gray-700 rounded-lg text-black text-sm px-2 py-1 font-semibold"
                        onchange="this.form.submit()">
                        <option value="">-- Semua --</option>
                        {% for tl in team_leaders %}
                            <option value="{{ tl.user_name }}" {% if tl.user_name == selected_team_leader %}selected{% endif %}>
                                {{ tl.user_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <!-- Kategori -->
                <div>
                    <label for="kategori" class="text-sm font-semibold block mb-1">Kategori:</label>
                    <select name="kategori" id="kategori"
                        class="border border-gray-700 rounded-lg text-black text-sm px-2 py-1 font-semibold"
                        onchange="this.form.submit()">
                        <option value="">-- Semua --</option>
                        {% for kat in kategori_list %}
                            <option value="{{ kat }}" {% if kat == selected_kategori %}selected{% endif %}>{{ kat }}</option>
                        {% endfor %}
                    </select>
                </div>
            </form>
        </div>

        <!-- Body -->
        <div class="bg-gray-50 p-4">
            {% if selected_team_leader %}
                <h5 class="text-center text-blue-700 font-bold mb-4">
                    Team Leader: <span class="font-extrabold">{{ selected_team_leader }}</span>
                </h5>
            {% else %}
                <h5 class="text-center text-gray-500 mb-4">
                    Semua Team Leader
                </h5>
            {% endif %}

            {% for kat_item in data %}
                <div class="mb-8">
                    <h5 class="text-center font-bold mb-3 text-lg">{{ kat_item.kategori }}</h5>
                    <div class="overflow-x-auto">
                        <table class="table-auto border-collapse border border-black w-full text-sm">
                            <thead>
                                <tr class="bg-red-900 text-white text-center">
                                    <th rowspan="2" class="border border-black px-2 py-1">Nama Sales</th>
                                    <th colspan="5" class="border border-black px-2 py-1">Total</th>
                                    <th colspan="5" class="border border-black px-2 py-1 bg-red-100 text-red-900">IndiHome</th>
                                    <th colspan="5" class="border border-black px-2 py-1 bg-pink-100 text-pink-900">HWA</th>
                                </tr>
                                <tr class="bg-red-800 text-white">
                                    <th class="border border-black px-2 py-1">Paid</th>
                                    <th class="border border-black px-2 py-1">Unpaid</th>
                                    <th class="border border-black px-2 py-1">Total</th>
                                    <th class="border border-black px-2 py-1">% Paid</th>
                                    <th class="border border-black px-2 py-1">% Unpaid</th>
                                    <th class="border border-black px-2 py-1 bg-red-100 text-black">Paid</th>
                                    <th class="border border-black px-2 py-1 bg-red-100 text-black">Unpaid</th>
                                    <th class="border border-black px-2 py-1 bg-red-100 text-black">Total</th>
                                    <th class="border border-black px-2 py-1 bg-red-100 text-black">% Paid</th>
                                    <th class="border border-black px-2 py-1 bg-red-100 text-black">% Unpaid</th>
                                    <th class="border border-black px-2 py-1 bg-pink-100 text-black">Paid</th>
                                    <th class="border border-black px-2 py-1 bg-pink-100 text-black">Unpaid</th>
                                    <th class="border border-black px-2 py-1 bg-pink-100 text-black">Total</th>
                                    <th class="border border-black px-2 py-1 bg-pink-100 text-black">% Paid</th>
                                    <th class="border border-black px-2 py-1 bg-pink-100 text-black">% Unpaid</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for sf in kat_item.sales_force_data %}
                                    <tr class="hover:bg-gray-100">
                                        <td class="border border-black px-2 py-1 text-left font-semibold">{{ sf.sales_force }}</td>
                                        <td class="border border-black px-2 py-1">{{ sf.paid }}</td>
                                        <td class="border border-black px-2 py-1">{{ sf.unpaid }}</td>
                                        <td class="border border-black px-2 py-1">{{ sf.total }}</td>
                                        <td class="border border-black px-2 py-1">{{ sf.persentase_paid }}%</td>
                                        <td class="border border-black px-2 py-1">{{ sf.persentase_unpaid }}%</td>
                                        <!-- IndiHome -->
                                        <td class="border border-black px-2 py-1 bg-red-50">{{ sf.indihome.paid }}</td>
                                        <td class="border border-black px-2 py-1 bg-red-50">{{ sf.indihome.unpaid }}</td>
                                        <td class="border border-black px-2 py-1 bg-red-50">{{ sf.indihome.total }}</td>
                                        <td class="border border-black px-2 py-1 bg-red-50">{{ sf.indihome.persentase_paid }}%</td>
                                        <td class="border border-black px-2 py-1 bg-red-50">{{ sf.indihome.persentase_unpaid }}%</td>
                                        <!-- HWA -->
                                        <td class="border border-black px-2 py-1 bg-pink-50">{{ sf.hwa.paid }}</td>
                                        <td class="border border-black px-2 py-1 bg-pink-50">{{ sf.hwa.unpaid }}</td>
                                        <td class="border border-black px-2 py-1 bg-pink-50">{{ sf.hwa.total }}</td>
                                        <td class="border border-black px-2 py-1 bg-pink-50">{{ sf.hwa.persentase_paid }}%</td>
                                        <td class="border border-black px-2 py-1 bg-pink-50">{{ sf.hwa.persentase_unpaid }}%</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% empty %}
                <p class="text-center text-gray-500">Tidak ada data performa.</p>
            {% endfor %}

            <!-- Pagination -->
            {% if page_obj.has_other_pages %}
                <div class="flex justify-center mt-4">
                    <nav>
                        <ul class="flex items-center gap-1">
                            {% if page_obj.has_previous %}
                                <li>
                                    <a class="px-3 py-1 rounded-lg border border-gray-400 bg-white text-red-800 font-semibold hover:bg-red-100"
                                       href="?tahun={{ tahun }}&bulan={{ bulan }}&team_leader={{ selected_team_leader }}&kategori={{ selected_kategori }}&page={{ page_obj.previous_page_number }}">
                                        Previous
                                    </a>
                                </li>
                            {% endif %}

                            {% for num in page_obj.paginator.page_range %}
                                <li>
                                    <a class="px-3 py-1 rounded-lg border border-gray-400 font-semibold {% if num == page_obj.number %}bg-red-800 text-white{% else %}bg-white text-red-800 hover:bg-red-100{% endif %}"
                                       href="?tahun={{ tahun }}&bulan={{ bulan }}&team_leader={{ selected_team_leader }}&kategori={{ selected_kategori }}&page={{ num }}">
                                        {{ num }}
                                    </a>
                                </li>
                            {% endfor %}

                            {% if page_obj.has_next %}
                                <li>
                                    <a class="px-3 py-1 rounded-lg border border-gray-400 bg-white text-red-800 font-semibold hover:bg-red-100"
                                       href="?tahun={{ tahun }}&bulan={{ bulan }}&team_leader={{ selected_team_leader }}&kategori={{ selected_kategori }}&page={{ page_obj.next_page_number }}">
                                        Next
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}