{% extends "base.html" %}
{% block title %}Управление KPI{% endblock %}
{% block page_title %}Управление KPI{% endblock %}

{% block content %}
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom:16px;">

    <!-- Copy Plans -->
    <div class="d-card">
        <div style="padding:12px 16px;font-size:13px;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.05);color:#fff;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2" style="margin-right:8px;vertical-align:text-bottom;"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
            Копировать планы
        </div>
        <div style="padding:16px;">
            <p style="color: #A0A5B5; font-size: 13px;">Копировать планы (KpiWeeklyData) из одного месяца в другой.</p>
            <form method="POST">
                <input type="hidden" name="action" value="copy_plans">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div style="display: flex; gap: 8px; align-items: end; flex-wrap: wrap;">
                    <div>
                        <label style="font-size: 12px; display: block;color:#A0A5B5;">Откуда</label>
                        <select name="source_month" class="form-control form-control-sm" style="width:130px;">
                            {% for m in plan_months %}
                            <option value="{{ m }}">{{ m }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label style="font-size: 12px; display: block;color:#A0A5B5;">Куда</label>
                        <input type="month" name="target_month" class="form-control form-control-sm" value="{{ cur_month }}" style="width:160px;">
                    </div>
                    <button type="submit" class="btn-apple" style="font-size:12px;padding:5px 12px;">Копировать</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Upload CSV (Review 2026 format) -->
    <div class="d-card">
        <div style="padding:12px 16px;font-size:13px;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.05);color:#fff;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" style="margin-right:8px;vertical-align:text-bottom;"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            Загрузить CSV (старый формат)
        </div>
        <div style="padding:16px;">
            <p style="color: #A0A5B5; font-size: 13px;">Загрузка CSV с разделителем «;» в формате Review 2026.csv.</p>
            <form method="POST" enctype="multipart/form-data">
                <input type="hidden" name="action" value="upload_csv">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div style="margin-bottom: 8px;">
                    <input type="file" name="csv_file" class="form-control form-control-sm" accept=".csv" required>
                </div>
                <button type="submit" class="btn-apple" style="font-size:12px;padding:5px 12px;background:#16a34a;">Загрузить</button>
            </form>
        </div>
    </div>

    <!-- Import Excel (new format) -->
    <div class="d-card">
        <div style="padding:12px 16px;font-size:13px;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.05);color:#fff;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#dc3545" stroke-width="2" style="margin-right:8px;vertical-align:text-bottom;"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="16" x2="16" y2="16"/><polyline points="12 12 8 16 12 20"/></svg>
            Импорт Excel (EmployeeKpiValue)
        </div>
        <div style="padding:16px;">
            <p style="color: #A0A5B5; font-size: 13px;">
                <strong>Формат 1 (старый):</strong> колонка A = ФИО, остальные = месяцы<br>
                <strong>Формат 2 (новый):</strong> колонки: ФИО, Категория, Метрика, Неделя, Значение
            </p>
            <form method="POST" enctype="multipart/form-data">
                <input type="hidden" name="action" value="import_excel">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div style="margin-bottom: 8px;">
                    <input type="file" name="import_file" class="form-control form-control-sm" accept=".xlsx,.xls" required>
                </div>
                <button type="submit" class="btn-apple" style="font-size:12px;padding:5px 12px;background:#dc3545;">Импортировать</button>
            </form>
        </div>
    </div>

    <!-- Export -->
    <div class="d-card">
        <div style="padding:12px 16px;font-size:13px;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.05);color:#fff;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2" style="margin-right:8px;vertical-align:text-bottom;"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Экспорт данных KPI
        </div>
        <div style="padding:16px;">
            <p style="color: #A0A5B5; font-size: 13px;">Выгрузить все текущие данные (факты сотрудников + планы) в Excel.</p>
            <a href="{{ url_for('admin.kpi_export') }}" class="btn-apple" style="font-size:12px;padding:5px 12px;background:#6f42c1;">Скачать Excel</a>
        </div>
    </div>

</div>

<div class="d-card">
    <div style="padding:12px 16px;font-size:13px;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.05);color:#fff;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:8px;vertical-align:text-bottom;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
        Состояние данных
    </div>
    <div style="padding:12px 16px;">
        <div style="display: flex; gap: 24px; flex-wrap: wrap;">
            <div><strong style="color:#fff;">Планы (KpiWeeklyData):</strong>
                {% if plan_months %}
                {% for m in plan_months %}<span style="display:inline-block;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:500;background:rgba(255,255,255,0.04);color:#A0A5B5;margin:2px;">{{ m }}</span>{% endfor %}
                {% else %}<span style="color: #A0A5B5;">нет данных</span>{% endif %}
            </div>
            <div><strong style="color:#fff;">Факты (EmployeeKpiValue):</strong>
                {% if fact_months %}
                {% for m in fact_months %}<span style="display:inline-block;padding:1px 7px;border-radius:6px;font-size:11px;font-weight:500;background:rgba(1,181,116,0.15);color:#01B574;margin:2px;">{{ m }}</span>{% endfor %}
                {% else %}<span style="color: #A0A5B5;">нет данных</span>{% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}