{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}KPI Agency - CWN{% endblock %}

{% block content %}
<div class="px-4 py-6">
    <h2 class="text-center text-white text-xl font-bold p-3 rounded mb-6 bg-red-600">KPI Agency</h2>

    <!-- Filter Form -->
    <div class="bg-white shadow rounded-lg mb-6 p-6">
        <form method="GET" action="{% url 'tampilan_kpi_agency' %}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Bulan -->
            <div>
                <label for="bulan" class="block text-sm font-medium text-gray-700">Bulan</label>
                <select id="bulan" name="bulan" class="w-full border rounded px-2 py-1">
                    <option value="" {% if not bulan %}selected{% endif %}>-- Pilih Bulan --</option>
                    <option value="01" {% if bulan == '01' %}selected{% endif %}>Januari</option>
                    <option value="02" {% if bulan == '02' %}selected{% endif %}>Februari</option>
                    <option value="03" {% if bulan == '03' %}selected{% endif %}>Maret</option>
                    <option value="04" {% if bulan == '04' %}selected{% endif %}>April</option>
                    <option value="05" {% if bulan == '05' %}selected{% endif %}>Mei</option>
                    <option value="06" {% if bulan == '06' %}selected{% endif %}>Juni</option>
                    <option value="07" {% if bulan == '07' %}selected{% endif %}>Juli</option>
                    <option value="08" {% if bulan == '08' %}selected{% endif %}>Agustus</option>
                    <option value="09" {% if bulan == '09' %}selected{% endif %}>September</option>
                    <option value="10" {% if bulan == '10' %}selected{% endif %}>Oktober</option>
                    <option value="11" {% if bulan == '11' %}selected{% endif %}>November</option>
                    <option value="12" {% if bulan == '12' %}selected{% endif %}>Desember</option>
                </select>
            </div>

            <!-- Tahun -->
            <div>
                <label for="tahun" class="block text-sm font-medium text-gray-700">Tahun</label>
                <select id="tahun" name="tahun" class="w-full border rounded px-2 py-1">
                    <option value="" {% if not tahun %}selected{% endif %}>-- Pilih Tahun --</option>
                    <option value="2024" {% if tahun == '2024' %}selected{% endif %}>2024</option>
                    <option value="2025" {% if tahun == '2025' %}selected{% endif %}>2025</option>
                </select>
            </div>

            <!-- Tombol -->
            <div class="flex items-end">
                <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg shadow">
                    Filter
                </button>
            </div>
        </form>
    </div>

    <!-- KPI Data -->
    {% for wok_name, data in kpi_data.items %}
    <div class="bg-white shadow rounded-lg mb-8">
        <div class="bg-red-600 text-white px-6 py-3 rounded-t-lg">
            <h4 class="font-bold">KPI INDIHOME CWN - {{ wok_name }}</h4>
            <small class="text-sm">Periode: {{ bulan }}/{{ tahun }}</small>
        </div>
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="w-full border border-gray-300 rounded-lg text-sm text-gray-800">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="border px-3 py-2 text-left">Indikator</th>
                            <th class="border px-3 py-2 text-center">Target</th>
                            <th class="border px-3 py-2 text-center">Real</th>
                            <th class="border px-3 py-2 text-center">Ach %</th>
                            <th class="border px-3 py-2 text-center">Minimum Target</th>
                            <th class="border px-3 py-2 text-center">Bobot</th>
                            <th class="border px-3 py-2 text-center">Nilai</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sub_item in data.items %}
                        <tr class="hover:bg-gray-50">
                            <td class="border px-3 py-2">{{ sub_item.kategori }}</td>
                            <td class="border px-3 py-2 text-center">
                                {% if sub_item.kategori|slice:":13" == "Healthy Sales" %}
                                    {{ sub_item.target|floatformat:0 }}%
                                {% else %}
                                    {{ sub_item.target|floatformat:0 }}
                                {% endif %}
                            </td>
                            <td class="border px-3 py-2 text-center">
                                {% if sub_item.kategori|slice:":13" == "Healthy Sales" %}
                                    {{ sub_item.real|floatformat:0 }}%
                                {% else %}
                                    {{ sub_item.real|floatformat:0 }}
                                {% endif %}
                            </td>
                            <td class="border px-3 py-2 text-center">{{ sub_item.ach|floatformat:0 }}%</td>
                            <td class="border px-3 py-2 text-center">
                                {% if sub_item.kategori|slice:":13" == "Healthy Sales" %}
                                    {% if sub_item.minimum_target and sub_item.minimum_target > 0 %}
                                        {{ sub_item.minimum_target|floatformat:0 }}%
                                    {% else %}
                                        -
                                    {% endif %}
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td class="border px-3 py-2 text-center">{{ sub_item.bobot|floatformat:0 }}%</td>
                            <td class="border px-3 py-2 text-center">{{ sub_item.nilai|floatformat:0 }}%</td>
                        </tr>
                        {% endfor %}

                        <!-- Summary -->
                        <tr class="bg-green-100 font-bold">
                            <td colspan="5" class="border px-3 py-2 text-center">SUMMARY KPI</td>
                            <td class="border px-3 py-2 text-center">{{ data.total_bobot|floatformat:0 }}%</td>
                            <td class="border px-3 py-2 text-center">{{ data.total_nilai|floatformat:0 }}%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endfor %}

    {% if not kpi_data %}
    <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800 p-4 rounded shadow">
        Tidak ada data yang ditemukan untuk bulan dan tahun yang dipilih.
    </div>
    {% endif %}
</div>
{% endblock %}