{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Manage KPI TL - CWN{% endblock %}
{% block content %}
<div class="container mx-auto px-4 mt-6">
    <h2 class="text-center text-white py-3 rounded-lg mb-6 bg-red-600 text-xl font-semibold">Manajemen Data KPI Team Leader</h2>

    <!-- Form Tambah KPI -->
    <form id="inputForm" class="bg-white border p-4 mb-6 rounded-lg shadow">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block mb-1 font-medium">Team Leader</label>
                <select name="tl_id" id="tl_id" class="w-full border rounded px-2 py-1" required>
                    <option value="" selected>Pilih TL</option>
                    {% for tl in team_leader_options %}
                        <option value="{{ tl.tl_id }}">{{ tl.user_name }} ({{ tl.tl_id }})</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label for="bulan" class="block mb-1 font-medium">Bulan KPI</label>
                <select name="bulan" id="bulan" class="w-full border rounded px-2 py-1" 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 mb-1 font-medium">Tahun KPI</label>
                <select name="tahun" id="tahun" class="w-full border rounded px-2 py-1" 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 mb-1 font-medium">Kategori Penjualan</label>
                <select name="kategori_penjualan" class="w-full border rounded px-2 py-1" required>
                    <option value="">-- Pilih Kategori --</option>
                    <option value="Orbit Prepaid">Orbit Prepaid</option>
                    <option value="Cross Sell">Cross Sell</option>
                    <option value="Telkomsel One">Telkomsel One</option>
                    <option value="Penambahan New SF">Penambahan New SF</option>
                    <option value="Sales Proses">Sales Proses</option>
                </select>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
            <div>
                <label for="target" class="block mb-1 font-medium">Target</label>
                <input type="number" name="target" class="w-full border rounded px-2 py-1" placeholder="Target" step="any">
            </div>
            <div>
                <label for="real" class="block mb-1 font-medium">Realisasi</label>
                <input type="number" name="real" class="w-full border rounded px-2 py-1" placeholder="Real" step="any">
            </div>
            <div>
                <label for="bobot" class="block mb-1 font-medium">Bobot</label>
                <input type="number" name="bobot" class="w-full border rounded px-2 py-1" placeholder="Bobot" step="any">
            </div>
            <button type="submit" class="mt-4 px-4 bg-red-600 text-white rounded hover:bg-red-700 justify-end">Tambah KPI</button>
        </div>
    </form>

    <!-- Filter -->
    <div class="bg-white shadow rounded-lg p-4 mb-6">
        <form method="GET" action="{% url 'kpi_manage_tl' %}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label for="filter_bulan" class="block mb-1 font-medium">Bulan</label>
                <select name="filter_bulan" id="filter_bulan" class="w-full border rounded px-2 py-1" 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 mb-1 font-medium">Tahun</label>
                <select name="filter_tahun" id="filter_tahun" class="w-full border rounded px-2 py-1" 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>
                <label for="filter_wok_id" class="block mb-1 font-medium">Wilayah Operasional</label>
                <select name="filter_wok_id" id="filter_wok_id" class="w-full border rounded px-2 py-1">
                    <option value="">-- Pilih WOK --</option>
                    {% for wok in wok_list %}
                        <option value="{{ wok.0 }}" {% if selected_wok == wok.0|stringformat:"s" %}selected{% endif %}>
                            {{ wok.1 }}
                        </option>
                    {% endfor %}
                </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>

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

    <!-- Data KPI -->
    {% if kpi_data %}
        {% for key, data in kpi_data %}
            {% 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 text-center">
                            <tr>
                                <th class="px-3 py-2">Kategori Penjualan</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>
                                <th class="px-3 py-2">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for indikator in data.items %}
                                <tr data-id={{ indikator.kpi_id }} class="border-b">
                                    <td class="px-3 py-2">{{ indikator.kategori }}</td>
                                    <td class="px-3 py-2 text-right editable" data-field="target">{{ indikator.target|floatformat:0 }}</td>
                                    <td class="px-3 py-2 text-right editable" data-field="real">{{ indikator.real|floatformat:0 }}</td>
                                    <td class="px-3 py-2 text-right">{{ indikator.ach|floatformat:0 }}%</td>
                                    <td class="px-3 py-2 text-right editable" data-field="bobot">{{ indikator.bobot|floatformat:0 }}%</td>
                                    <td class="px-3 py-2 text-right">{{ indikator.nilai|floatformat:0 }}%</td>
                                    <td class="px-3 py-2 space-x-2">
                                        <button class="edit-btn px-2 py-1 bg-yellow-500 text-white rounded text-xs">Edit</button>
                                        <button class="save-btn hidden px-2 py-1 bg-green-600 text-white rounded text-xs">Save</button>
                                        <button class="cancel-btn hidden px-2 py-1 bg-gray-500 text-white rounded text-xs">Cancel</button>
                                        <button class="delete-btn px-2 py-1 bg-red-600 text-white rounded text-xs">Delete</button>
                                    </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 text-right">{{ data.total_bobot|floatformat:0 }}%</td>
                                <td class="px-3 py-2 text-right">{{ data.total_nilai|floatformat:0 }}%</td>
                                <td></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>

<!-- 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_tl' %}", {
                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
        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) return;

            // Edit
            editBtn.addEventListener('click', () => {
                row.querySelectorAll('.editable').forEach(cell => {
                    const field = cell.dataset.field;
                    const input = document.createElement('input');
                    input.value = cell.textContent.trim().replace('%', '');
                    input.className = 'w-full border rounded px-1 py-0.5 text-sm';
                    const originalValue = cell.textContent.trim().replace('%', '');
                    cell.dataset.originalValue = originalValue;
                    cell.innerHTML = '';
                    cell.appendChild(input);
                });
                editBtn.classList.add('hidden');
                deleteBtn.classList.add('hidden');
                saveBtn.classList.remove('hidden');
                cancelBtn.classList.remove('hidden');
            });

            // Cancel
            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');
            });

            // Save
            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) {
                        const newValue = input.value.trim();
                        updates.push({ field, value: newValue });
                    }
                });

                const updatePromises = updates.map(update =>
                    fetch("{% url 'update_kpi_tl' %}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': '{{ csrf_token }}',
                        },
                        body: JSON.stringify({ kpi_id, ...update }),
                    }).then(res => res.json())
                );

                Promise.all(updatePromises).then(results => {
                    const allSuccess = results.every(res => res.success);
                    if (allSuccess) {
                        Swal.fire('Berhasil', 'Data diperbarui!', 'success').then(()=> location.reload());
                    } else {
                        Swal.fire('Gagal', 'Terjadi kesalahan saat menyimpan data.', 'error');
                    }
                });
            });

            // Delete
            deleteBtn.addEventListener('click', () => {
                const kpi_id = row.dataset.id;
                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                }).then(result => {
                    if (result.isConfirmed) {
                        fetch("{% url 'delete_kpi_tl' %}", {
                            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) {
                                row.remove();
                                Swal.fire('Terhapus!', '', 'success');
                            } else {
                                Swal.fire('Gagal menghapus', '', 'error');
                            }
                        });
                    }
                });
            });
        });
    });
</script>
{% endblock %}