{% extends "base.html" %}
{% block title %}Загрузка файлов{% endblock %}
{% block page_title %}Загрузка файлов{% endblock %}

{% block content %}
<h2 style="margin-bottom:20px;font-size:15px;font-weight:600;color:#fff;">Загрузка файлов</h2>

<div style="display: flex; gap: 16px;">
    <div style="flex: 1;">
        <div class="d-card" style="height: 100%;">
            <div class="d-card-header">
                <h5 style="margin: 0;"><i class="bi bi-file-earmark-excel" style="color: #16a34a; margin-right: 8px;"></i>Загрузить Excel (KPI)</h5>
            </div>
            <div class="d-card-body">
                <div class="alert-apple info">
                    <strong>Формат файла:</strong> первый столбец — ФИО сотрудника, остальные столбцы — месяцы (Январь, Февраль, ...).
                </div>
                <form method="POST" enctype="multipart/form-data">
                    {{ excel_form.hidden_tag() }}
                    <div style="margin-bottom: 16px;">
                        <label style="display: block; margin-bottom: 4px; font-weight: 500;">Название KPI</label>
                        {{ excel_form.kpi_name(class="form-control form-control-sm", placeholder="Например: Объем продаж", style="background:rgba(6,11,40,0.4);border-color:rgba(255,255,255,0.1);color:#fff;") }}
                    </div>
                    <div style="margin-bottom: 16px;">
                        <label style="display: block; margin-bottom: 4px; font-weight: 500;">Excel файл</label>
                        {{ excel_form.file(class="form-control form-control-sm", style="background:rgba(6,11,40,0.4);border-color:rgba(255,255,255,0.1);color:#fff;") }}
                    </div>
                    <div style="margin-bottom: 16px;">
                        <label style="display: block; margin-bottom: 4px; font-weight: 500;">Описание (необязательно)</label>
                        {{ excel_form.description(class="form-control form-control-sm", rows=2, style="background:rgba(6,11,40,0.4);border-color:rgba(255,255,255,0.1);color:#fff;") }}
                    </div>
                    <button type="submit" class="btn-apple" style="width: 100%; border-radius: 999px; background: #16a34a;">
                        <i class="bi bi-cloud-upload"></i> Загрузить
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div style="flex: 1;">
            <div class="d-card" style="height: 100%;">
                <div class="d-card-header">
                    <h5 style="margin: 0;"><i class="bi bi-file-pdf" style="color: #dc2626; margin-right: 8px;"></i>Загрузить PDF (обучение)</h5>
                </div>
                <div class="d-card-body">
                    <form method="POST" enctype="multipart/form-data">
                        {{ pdf_form.hidden_tag() }}
                        <div style="margin-bottom: 16px;">
                            <label style="display: block; margin-bottom: 4px; font-weight: 500;">Название обучения</label>
                            <input type="text" name="pdf_title" class="form-control form-control-sm" placeholder="Например: Охрана труда" style="background:rgba(6,11,40,0.4);border-color:rgba(255,255,255,0.1);color:#fff;">
                        </div>
                        <div style="margin-bottom: 16px;">
                            <label style="display: block; margin-bottom: 4px; font-weight: 500;">Сотрудник</label>
                            <select name="user_id" class="form-control form-control-sm" required style="background:rgba(6,11,40,0.4);border-color:rgba(255,255,255,0.1);color:#fff;">
                                <option value="">— выберите сотрудника —</option>
                                {% for u in users %}
                                <option value="{{ u.id }}">{{ u.full_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div style="margin-bottom: 16px;">
                            <label style="display: block; margin-bottom: 4px; font-weight: 500;">PDF файл</label>
                            <input type="file" name="pdf_file" class="form-control form-control-sm" accept=".pdf" required style="background:rgba(6,11,40,0.4);border-color:rgba(255,255,255,0.1);color:#fff;">
                        </div>
                        <div style="margin-bottom: 16px;">
                            <label style="display: block; margin-bottom: 4px; font-weight: 500;">Описание</label>
                            <textarea name="pdf_description" class="form-control form-control-sm" rows="2" placeholder="Описание документа" style="background:rgba(6,11,40,0.4);border-color:rgba(255,255,255,0.1);color:#fff;"></textarea>
                        </div>
                        <button type="submit" class="btn-apple" style="width: 100%; border-radius: 999px; background: #dc2626;">
                            <i class="bi bi-cloud-upload"></i> Загрузить
                        </button>
                    </form>
                </div>
            </div>
    </div>
</div>

<div class="d-card" style="margin-top: 20px;">
    <div class="d-card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <h5 style="margin: 0;"><i class="bi bi-files me-2"></i>Загруженные файлы</h5>
        <a href="{{ url_for('admin.kpi_list') }}" class="btn-apple-outline btn-apple-sm">Управление KPI</a>
    </div>
    <div class="d-card-body" style="padding: 0;">
        {% if uploaded_files %}
        <div class="table-responsive">
            <table class="d-table-card">
                <thead>
                    <tr>
                        <th style="padding-left: 16px;">Имя файла</th>
                        <th>KPI / Описание</th>
                        <th>Тип</th>
                        <th>Размер</th>
                        <th>Дата</th>
                        <th style="text-align: right; padding-right: 16px;">Действия</th>
                    </tr>
                </thead>
                <tbody>
                    {% for f in uploaded_files %}
                    <tr>
                        <td style="padding-left: 16px;">
                            {% if f.file_type == 'pdf' %}
                            <i class="bi bi-file-pdf-fill" style="color: #dc2626; margin-right: 4px;"></i>
                            {% else %}
                            <i class="bi bi-file-earmark-excel-fill" style="color: #01B574; margin-right: 4px;"></i>
                            {% endif %}
                            {{ f.original_name }}
                        </td>
                        <td>{{ f.kpi_name or f.description or '—' }}</td>
                        <td><span style="font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px;{% if f.file_type == 'pdf' %}background:rgba(220,38,38,0.1);color:#dc2626;{% else %}background:rgba(22,163,74,0.1);color:#01B574;{% endif %}">{{ f.file_type }}</span></td>
                        <td>{% if f.file_size %}{{ (f.file_size / 1024)|round(1) }} KB{% else %}—{% endif %}</td>
                        <td>{{ f.upload_date.strftime('%d.%m.%Y %H:%M') }}</td>
                        <td style="text-align: right; padding-right: 16px;">
                            <a href="{{ url_for('api.download_file', filename=f.filename) }}" target="_blank" style="color:#fff;text-decoration:none;padding:4px;display:inline-flex;align-items:center;border-radius:6px;border:1px solid rgba(255,255,255,0.05);" title="Скачать">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1v10M4 7l4 4 4-4M1 13v2h14v-2"/></svg>
                            </a>
                            <a href="#" onclick="openPdfViewer('{{ url_for('api.download_file', filename=f.filename) }}','{{ f.original_name }}');return false;" style="color:#fff;text-decoration:none;padding:4px;display:inline-flex;align-items:center;border-radius:6px;border:1px solid rgba(255,255,255,0.05);" title="Просмотреть">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 8s3-5.5 7-5.5S15 8 15 8s-3 5.5-7 5.5S1 8 1 8z"/><circle cx="8" cy="8" r="2.5"/></svg>
                            </a>
                            <a href="{{ url_for('admin.delete_file', file_id=f.id) }}" onclick="return confirm('Удалить файл {{ f.original_name }}?')" style="color:#dc2626;text-decoration:none;padding:4px;display:inline-flex;align-items:center;border-radius:6px;border:1px solid rgba(255,255,255,0.05);" title="Удалить">
                                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h12M5 4V2.5A1.5 1.5 0 016.5 1h3A1.5 1.5 0 0111 2.5V4M3 4v9.5A1.5 1.5 0 004.5 15h7a1.5 1.5 0 001.5-1.5V4"/></svg>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div style="text-align: center; padding: 24px 0;">
            <i class="bi bi-inbox" style="font-size: 2.5rem; color: #6c757d;"></i>
            <p style="color: #6c757d; margin-top: 8px;">Файлы не загружены</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}