{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Manage KPI Agency - CWN{% endblock %}
{% block content %}
<div class="p-6">

    <h2 class="text-center text-white py-3 rounded mb-6 bg-red-700 text-xl font-bold">Manajemen Data KPI Agency</h2>

    <!-- Form Tambah KPI -->
    <form id="inputForm" class="bg-white border p-6 mb-6 rounded shadow-md space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div>
                <label for="wok_id" class="block text-sm font-semibold">Wilayah Operasional</label>
                <select name="wok_id" id="wok_id" class="w-full border rounded px-3 py-2" required>
                    <option value="">-- Pilih WOK --</option>
                    {% for wok in wok_list %}
                        <option value="{{ wok.0 }}">{{ wok.1 }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="bulan" class="block text-sm font-semibold">Bulan KPI</label>
                <select name="bulan" id="bulan" class="w-full border rounded px-3 py-2" required>
                    <option value="">-- Pilih Bulan --</option>
                    <option value="01" {% if selected_bulan == "01" %}selected{% endif %}>Januari</option>
                    <option value="02" {% if selected_bulan == "02" %}selected{% endif %}>Februari</option>
                    <option value="03" {% if selected_bulan == "03" %}selected{% endif %}>Maret</option>
                    <option value="04" {% if selected_bulan == "04" %}selected{% endif %}>April</option>
                    <option value="05" {% if selected_bulan == "05" %}selected{% endif %}>Mei</option>
                    <option value="06" {% if selected_bulan == "06" %}selected{% endif %}>Juni</option>
                    <option value="07" {% if selected_bulan == "07" %}selected{% endif %}>Juli</option>
                    <option value="08" {% if selected_bulan == "08" %}selected{% endif %}>Agustus</option>
                    <option value="09" {% if selected_bulan == "09" %}selected{% endif %}>September</option>
                    <option value="10" {% if selected_bulan == "10" %}selected{% endif %}>Oktober</option>
                    <option value="11" {% if selected_bulan == "11" %}selected{% endif %}>November</option>
                    <option value="12" {% if selected_bulan == "12" %}selected{% endif %}>Desember</option>
                </select>
            </div>
            <div>
                <label for="tahun" class="block text-sm font-semibold">Tahun KPI</label>
                <select name="tahun" id="tahun" class="w-full border rounded px-3 py-2" required>
                    <option value="">-- Pilih Tahun --</option>
                    <option value="2024" {% if selected_tahun == "2024" %}selected{% endif %}>2024</option>
                    <option value="2025" {% if selected_tahun == "2025" %}selected{% endif %}>2025</option>
                </select>
            </div>
            <div>
                <label for="kategori_penjualan" class="block text-sm font-semibold">Kategori Penjualan</label>
                <select name="kategori_penjualan" class="w-full border rounded px-3 py-2" required>
                    <option value="">-- Pilih Kategori --</option>
                    <option value="Orbit Prepaid">Orbit Prepaid</option>
                    <option value="Cross Sell">Cross Sell</option>
                    <option value="Productivity SF Baru Los">Productivity SF Baru Los</option>
                    <option value="Healthy Sales Bill-3">Healthy Sales Bill-3</option>
                    <option value="Healthy Sales Bill-4">Healthy Sales Bill-4</option>
                    <option value="Healthy Sales Bill-5">Healthy Sales Bill-5</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded font-semibold">Tambah KPI</button>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
            <div>
                <label for="target" class="block text-sm font-semibold">Target</label>
                <input type="number" name="target" class="w-full border rounded px-3 py-2" step="any">
            </div>
            <div>
                <label for="real" class="block text-sm font-semibold">Realisasi</label>
                <input type="number" name="real" class="w-full border rounded px-3 py-2" step="any">
            </div>
            <div>
                <label for="bobot" class="block text-sm font-semibold">Bobot</label>
                <input type="number" name="bobot" class="w-full border rounded px-3 py-2" step="any">
            </div>
            <div>
                <label for="ach" class="block text-sm font-semibold">Ach (%)</label>
                <input type="number" name="ach" id="achField" class="w-full border rounded px-3 py-2 bg-gray-100" step="any" disabled>
            </div>
        </div>
    </form>

    <!-- Filter Bulan/Tahun -->
    <form method="GET" action="{% url 'kpi_manage_agency' %}" class="bg-white border p-6 mb-6 rounded shadow-md space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label for="filter_bulan" class="block text-sm font-semibold">Filter Bulan</label>
                <select name="filter_bulan" id="filter_bulan" class="w-full border rounded px-3 py-2" required>
                    <option value="">-- Pilih Bulan --</option>
                    <option value="01" {% if selected_filter_bulan == "01" %}selected{% endif %}>Januari</option>
                    <option value="02" {% if selected_filter_bulan == "02" %}selected{% endif %}>Februari</option>
                    <option value="03" {% if selected_filter_bulan == "03" %}selected{% endif %}>Maret</option>
                    <option value="04" {% if selected_filter_bulan == "04" %}selected{% endif %}>April</option>
                    <option value="05" {% if selected_filter_bulan == "05" %}selected{% endif %}>Mei</option>
                    <option value="06" {% if selected_filter_bulan == "06" %}selected{% endif %}>Juni</option>
                    <option value="07" {% if selected_filter_bulan == "07" %}selected{% endif %}>Juli</option>
                    <option value="08" {% if selected_filter_bulan == "08" %}selected{% endif %}>Agustus</option>
                    <option value="09" {% if selected_filter_bulan == "09" %}selected{% endif %}>September</option>
                    <option value="10" {% if selected_filter_bulan == "10" %}selected{% endif %}>Oktober</option>
                    <option value="11" {% if selected_filter_bulan == "11" %}selected{% endif %}>November</option>
                    <option value="12" {% if selected_filter_bulan == "12" %}selected{% endif %}>Desember</option>
                </select>
            </div>
            <div>
                <label for="filter_tahun" class="block text-sm font-semibold">Filter Tahun</label>
                <select name="filter_tahun" id="filter_tahun" class="w-full border rounded px-3 py-2" required>
                    <option value="">-- Pilih Tahun --</option>
                    <option value="2024" {% if selected_filter_tahun == "2024" %}selected{% endif %}>2024</option>
                    <option value="2025" {% if selected_filter_tahun == "2025" %}selected{% endif %}>2025</option>
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded font-semibold">Filter</button>
            </div>
        </div>
    </form>

    <!-- Search Lokal -->
    <input type="text" id="searchInput" class="w-full border rounded px-3 py-2 mb-4" placeholder="Cari KPI...">

    <!-- List KPI per WOK -->
    {% if kpi_data %}
        {% for wok_name, data in kpi_data.items %}
        <div class="bg-white rounded shadow-md mb-6">
            <div class="bg-red-600 text-white px-4 py-3 rounded-t">
                <h4 class="text-lg font-semibold">KPI INDIHOME CWN - {{ wok_name }}</h4>
                <small class="block">Periode: {{ filter_bulan }}/{{ filter_tahun }}</small>
            </div>
            <div class="p-4 overflow-x-auto">
                <table class="w-full border text-sm text-left">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="border px-3 py-2">Kategori Penjualan</th>
                            <th class="border px-3 py-2">Target</th>
                            <th class="border px-3 py-2">Minimum Target</th>
                            <th class="border px-3 py-2">Real</th>
                            <th class="border px-3 py-2">Ach</th>
                            <th class="border px-3 py-2">Bobot</th>
                            <th class="border px-3 py-2">Nilai</th>
                            <th class="border px-3 py-2">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sub_item in data.items %}
                            <tr data-id="{{ sub_item.kpi_id }}" class="hover:bg-gray-50">
                                <td class="border px-3 py-2">{{ sub_item.kategori }}</td>
                                <td class="border px-3 py-2 editable" data-field="target">{{ sub_item.target|floatformat:0 }}</td>
                                {% if sub_item.kategori|slice:":13" == "Healthy Sales" %}
                                    <td class="border px-3 py-2 editable" data-field="minimum_target">
                                        {% if sub_item.minimum_target %}
                                            {{ sub_item.minimum_target|floatformat:0 }}
                                        {% else %} - {% endif %}
                                    </td>
                                {% else %}
                                    <td class="border px-3 py-2">
                                        {% if sub_item.minimum_target %}
                                            {{ sub_item.minimum_target|floatformat:0 }}
                                        {% else %} - {% endif %}
                                    </td>
                                {% endif %}
                                <td class="border px-3 py-2 editable" data-field="real">{{ sub_item.real|floatformat:0 }}</td>
                                {% if sub_item.kategori|slice:":13" == "Healthy Sales" %}
                                    <td class="border px-3 py-2 editable" data-field="ach">{{ sub_item.ach|floatformat:0 }}%</td>
                                {% else %}
                                    <td class="border px-3 py-2">{{ sub_item.ach|floatformat:0 }}%</td>
                                {% endif %}
                                <td class="border px-3 py-2 editable" data-field="bobot">{{ sub_item.bobot|floatformat:0 }}%</td>
                                <td class="border px-3 py-2">{{ sub_item.nilai|floatformat:0 }}%</td>
                                <td class="border px-3 py-2 space-x-1">
                                    <button class="edit-btn bg-yellow-500 text-white px-2 py-1 rounded text-xs">Edit</button>
                                    <button class="save-btn bg-green-600 text-white px-2 py-1 rounded text-xs hidden">Simpan</button>
                                    <button class="cancel-btn bg-gray-500 text-white px-2 py-1 rounded text-xs hidden">Cancel</button>
                                    <button class="delete-btn bg-red-600 text-white px-2 py-1 rounded text-xs">Hapus</button>
                                </td>
                            </tr>
                        {% endfor %}
                        <tr class="bg-green-100 font-semibold">
                            <td colspan="5" class="text-center border px-3 py-2">SUMMARY KPI</td>
                            <td class="border px-3 py-2">{{ data.total_bobot|floatformat:0 }}%</td>
                            <td class="border px-3 py-2">{{ data.total_nilai|floatformat:0 }}%</td>
                            <td class="border px-3 py-2"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="bg-yellow-100 text-yellow-800 px-4 py-3 rounded">
            Tidak ada data ditemukan untuk bulan dan tahun yang dipilih.
        </div>
    {% endif %}

</div>

<!-- SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const inputForm = document.getElementById('inputForm');
    inputForm.addEventListener('submit', function(e){
        e.preventDefault();
        const formData = new FormData(this);
        const jsonData = Object.fromEntries(formData.entries());
        fetch("{% url 'input_kpi_agency' %}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}',
            },
            body: JSON.stringify(jsonData),
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                Swal.fire('Berhasil', 'Data KPI berhasil ditambahkan!', 'success').then(() => {
                    location.reload();
                });
                inputForm.reset();
            } else {
                Swal.fire('Gagal', data.error || 'Terjadi kesalahan.', 'error');
            }
        })
        .catch(error => {
            Swal.fire('Gagal', 'Terjadi kesalahan jaringan.', 'error');
            console.error(error);
        });
    });

    // Search lokal
    document.getElementById('searchInput').addEventListener('keyup', function() {
        const filter = this.value.toLowerCase();
        document.querySelectorAll('table tbody tr').forEach(row => {
            row.style.display = row.innerText.toLowerCase().includes(filter) ? '' : 'none';
        });
    });

    // Edit/Save/Delete
    document.querySelectorAll('table tbody tr').forEach(row => {
        const editBtn = row.querySelector('.edit-btn');
        const saveBtn = row.querySelector('.save-btn');
        const cancelBtn = row.querySelector('.cancel-btn');
        const deleteBtn = row.querySelector('.delete-btn');
        if (!editBtn || !saveBtn || !cancelBtn || !deleteBtn) return;

        editBtn.addEventListener('click', () => {
            const isHealthy = row.querySelector('td').innerText.startsWith('Healthy Sales');
            row.querySelectorAll('.editable').forEach(cell => {
                const field = cell.dataset.field;
                if (field === 'minimum_target' && !isHealthy) return;
                const input = document.createElement('input');
                input.className = 'w-full border rounded px-2 py-1';
                input.value = cell.innerText.trim().replace('%', '') === '-' ? '' : cell.innerText.trim().replace('%', '');
                cell.innerHTML = '';
                cell.dataset.originalValue = input.value;
                cell.appendChild(input);
            });
            editBtn.classList.add('hidden');
            deleteBtn.classList.add('hidden');
            saveBtn.classList.remove('hidden');
            cancelBtn.classList.remove('hidden');
        });

        cancelBtn.addEventListener('click', () => {
            row.querySelectorAll('.editable').forEach(cell => {
                const originalValue = cell.dataset.originalValue;
                cell.textContent = originalValue;
            });
            editBtn.classList.remove('hidden');
            deleteBtn.classList.remove('hidden');
            saveBtn.classList.add('hidden');
            cancelBtn.classList.add('hidden');
            location.reload();
        });

        saveBtn.addEventListener('click', () => {
            const kpi_id = row.dataset.id;
            let updates = {};
            row.querySelectorAll('.editable').forEach(cell => {
                const field = cell.dataset.field;
                const input = cell.querySelector('input');
                if (input) updates[field] = input.value.trim();
            });
            fetch("{% url 'update_kpi_agency' %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token }}',
                },
                body: JSON.stringify({ kpi_id, ...updates }),
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Berhasil', 'Data berhasil diperbarui.', 'success').then(() => {
                        location.reload();
                    });
                } else {
                    Swal.fire('Error', data.error || 'Gagal update data.', 'error');
                }
            })
            .catch(error => {
                Swal.fire('Error', 'Terjadi kesalahan jaringan.', 'error');
            });
        });

        deleteBtn.addEventListener('click', () => {
            const kpi_id = row.dataset.id;
            Swal.fire({
                title: 'Yakin hapus data ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, hapus',
            }).then(result => {
                if (result.isConfirmed) {
                    fetch("{% url 'delete_kpi_agency' %}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': '{{ csrf_token }}',
                        },
                        body: JSON.stringify({ kpi_id }),
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        } else {
                            Swal.fire('Error', 'Gagal hapus data.', 'error');
                        }
                    });
                }
            });
        });
    });

    // Toggle field Ach
    const kategoriSelect = document.querySelector('select[name="kategori_penjualan"]');
    const achField = document.getElementById('achField');
    const targetField = document.querySelector('input[name="target"]');
    const realField = document.querySelector('input[name="real"]');
    const bobotField = document.querySelector('input[name="bobot"]');
    const nilaiField = document.getElementById('nilaiField'); // kalau ada field nilai

    function toggleAchField() {
        const selected = kategoriSelect.value;
        if (selected.startsWith('Healthy Sales Bill')) {
            achField.disabled = false;
            achField.classList.remove('bg-gray-100');
        } else {
            achField.disabled = true;
            achField.value = '';
            achField.classList.add('bg-gray-100');
            calculateAch(); // jalankan hitung otomatis
        }
    }

    function calculateAch() {
        const target = parseFloat(targetField.value) || 0;
        const real = parseFloat(realField.value) || 0;
        const bobot = parseFloat(bobotField.value) || 0;

        let ach = 0;
        if (!kategoriSelect.value.startsWith("Healthy Sales Bill")) {
            ach = target !== 0 ? (real / target) * 100 : 0;
        } else {
            ach = parseFloat(achField.value) || 0;
        }

        ach = Math.min(ach, 200); // maksimal 200
        achField.value = ach.toFixed(2);

        // hitung nilai juga
        const nilai = (ach / 100) * bobot;
        if (nilaiField) {
            nilaiField.value = nilai.toFixed(2);
        }
    }

    // Event listeners
    kategoriSelect.addEventListener('change', toggleAchField);
    [targetField, realField, bobotField, achField].forEach(field => {
        field.addEventListener('input', calculateAch);
    });

    // init
    toggleAchField();
});
</script>
{% endblock %}