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

{% block content %}
<div class="container mx-auto px-4 mt-6">
    <!-- Judul Halaman -->
    <h2 class="text-center text-white py-3 rounded-lg mb-6 bg-red-600 text-xl font-semibold">
        KPI Team Leader
    </h2>

    <!-- Form Filter -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="p-4">
            <form method="GET" action="{% url 'tampilan_kpi_tl' %}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label for="bulan" class="block mb-1 font-medium">Bulan</label>
                    <select name="bulan" id="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>

                <div>
                    <label for="tahun" class="block mb-1 font-medium">Tahun</label>
                    <select name="tahun" id="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>

                <div>
                    <label for="wok_id" class="block mb-1 font-medium">WOK</label>
                    <select name="wok_id" id="wok_id" class="w-full border rounded px-2 py-1">
                        <option value="">-- Pilih WOK --</option>
                        <option value="1" {% if request.GET.wok_id == "1" %}selected{% endif %}>DEMAK</option>
                        <option value="2" {% if request.GET.wok_id == "2" %}selected{% endif %}>SEMARANG 2</option>
                        <option value="3" {% if request.GET.wok_id == "3" %}selected{% endif %}>SURAKARTA</option>
                    </select>
                </div>

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

    <!-- Tampilan Data KPI -->
    {% if kpi_data %}
        {% for key, indikator_list in kpi_data.items %}
            {% with user_name=key.0 bulan=key.1 tahun=key.2 wok_name=key.3 %}
            <div class="bg-white shadow rounded-lg mb-6">
                <div class="bg-red-600 text-white px-4 py-2 rounded-t-lg">
                    <h5 class="font-semibold">KPI INDIHOME CWN - {{ user_name }}</h5>
                    <p class="text-sm">Periode: {{ bulan }}/{{ tahun }} | WOK: {{ wok_name }}</p>
                </div>
                <div class="p-4 overflow-x-auto">
                    <table class="w-full border text-sm text-left text-gray-700">
                        <thead class="bg-gray-100 text-gray-800">
                            <tr>
                                <th class="px-3 py-2">Indikator</th>
                                <th class="px-3 py-2">Target</th>
                                <th class="px-3 py-2">Real</th>
                                <th class="px-3 py-2">Ach %</th>
                                <th class="px-3 py-2">Bobot</th>
                                <th class="px-3 py-2">Nilai</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for indikator in indikator_list.items %}
                                <tr class="border-b">
                                    <td class="px-3 py-2">{{ indikator.kategori }}</td>
                                    <td class="px-3 py-2">{{ indikator.target|floatformat:0 }}</td>
                                    <td class="px-3 py-2">{{ indikator.real|floatformat:0 }}</td>
                                    <td class="px-3 py-2">{{ indikator.ach|floatformat:0 }}%</td>
                                    <td class="px-3 py-2">{{ indikator.bobot|floatformat:0 }}%</td>
                                    <td class="px-3 py-2">{{ indikator.nilai|floatformat:0 }}%</td>
                                </tr>
                            {% endfor %}
                            <tr class="bg-green-100 font-semibold">
                                <td colspan="4" class="px-3 py-2 text-center">SUMMARY KPI</td>
                                <td class="px-3 py-2">{{ indikator_list.total_bobot|floatformat:0 }}%</td>
                                <td class="px-3 py-2">{{ indikator_list.total_nilai|floatformat:0 }}%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            {% endwith %}
        {% endfor %}
    {% else %}
        <div class="bg-yellow-100 text-yellow-800 px-4 py-3 rounded shadow">
            Tidak ada data yang ditemukan untuk bulan, tahun, dan WOK yang dipilih.
        </div>
    {% endif %}
</div>
{% endblock %}