{% extends "base.html" %}

{% block content %}
<div class="page-header">
    <h2>Импорт данных из Excel</h2>
    <a href="{{ url_for('index') }}" class="btn-back">На главную</a>
</div>

<div class="import-container">
    <div class="import-info">
        <h3>Инструкция по импорту</h3>
        <ol>
            <li>Подготовьте файлы Excel в соответствии с шаблонами</li>
            <li>Убедитесь, что файлы находятся в папке <strong>data/</strong></li>
            <li>Введите имена файлов в форму ниже</li>
            <li>Нажмите "Импортировать данные"</li>
        </ol>

        <h4>Требования к файлам:</h4>
        <table class="info-table">
            <tr>
                <th>Файл</th>
                <th>Обязательные колонки</th>
            </tr>
            <tr>
                <td>Поставщики</td>
                <td>Наименование поставщика, Электронная почта, ИНН</td>
            </tr>
            <tr>
                <td>Типы товаров</td>
                <td>Тип товара</td>
            </tr>
            <tr>
                <td>Товары</td>
                <td>Тип товара, Наименование, Артикул, Минимальная цена</td>
            </tr>
            <tr>
                <td>Заказы</td>
                <td>Поставщик, Дата заказа</td>
            </tr>
        </table>
    </div>

    <form method="POST" class="import-form">
        <div class="form-section">
            <h3>Файлы для импорта</h3>

            <div class="form-group">
                <label for="suppliers_file">Файл с поставщиками:</label>
                <input type="text" id="suppliers_file" name="suppliers_file"
                       value="data/Suppliers_import.xlsx" placeholder="Например: Suppliers_import.xlsx">
                <small class="form-text">Формат: .xlsx, .xls</small>
            </div>

            <div class="form-group">
                <label for="product_types_file">Файл с типами товаров:</label>
                <input type="text" id="product_types_file" name="product_types_file"
                       value="data/Product_types_import.xlsx" placeholder="Например: Product_types_import.xlsx">
                <small class="form-text">Формат: .xlsx, .xls</small>
            </div>

            <div class="form-group">
                <label for="products_file">Файл с товарами:</label>
                <input type="text" id="products_file" name="products_file"
                       value="data/Products_import.xlsx" placeholder="Например: Products_import.xlsx">
                <small class="form-text">Формат: .xlsx, .xls</small>
            </div>

            <div class="form-group">
                <label for="orders_file">Файл с заказами:</label>
                <input type="text" id="orders_file" name="orders_file"
                       value="data/Orders_import.xlsx" placeholder="Например: Orders_import.xlsx">
                <small class="form-text">Формат: .xlsx, .xls</small>
            </div>
        </div>

        <div class="import-warning">
            <h4>⚠️ Внимание!</h4>
            <p>Импорт данных очистит существующую базу данных и загрузит новые данные из указанных файлов.</p>
            <p>Убедитесь, что у вас есть резервная копия важных данных.</p>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-submit" onclick="return confirmImport()">Импортировать данные</button>
            <button type="reset" class="btn-reset">Очистить</button>
        </div>
    </form>

    <div class="template-download">
        <h4>Шаблоны файлов</h4>
        <p>Скачайте примеры файлов для импорта:</p>
        <ul>
            <li><a href="#" onclick="downloadTemplate('suppliers')">Suppliers_template.xlsx</a></li>
            <li><a href="#" onclick="downloadTemplate('product_types')">Product_types_template.xlsx</a></li>
            <li><a href="#" onclick="downloadTemplate('products')">Products_template.xlsx</a></li>
            <li><a href="#" onclick="downloadTemplate('orders')">Orders_template.xlsx</a></li>
        </ul>
    </div>
</div>

<script>
function confirmImport() {
    return confirm('Внимание! Все существующие данные будут удалены. Продолжить импорт?');
}

function downloadTemplate(type) {
    // Создаем пример данных для скачивания
    let data;
    let filename;

    switch(type) {
        case 'suppliers':
            data = [
                ['Наименование поставщика', 'Директор', 'Электронная почта', 'Телефон', 'Юридический адрес', 'ИНН', 'Рейтинг'],
                ['ООО "КанцПром"', 'Иванов И.И.', 'info@kancprom.ru', '+7(495)123-45-67', 'г. Москва, ул. Промышленная, д.10', '7701234567', '4.8'],
                ['ИП Петров А.С.', 'Петров А.С.', 'petrov@mail.ru', '+7(495)765-43-21', 'г. Москва, ул. Торговая, д.5', '7707654321', '4.2']
            ];
            filename = 'Suppliers_template.xlsx';
            break;
        case 'product_types':
            data = [
                ['Тип товара', 'Описание'],
                ['Ручки', 'Пишущие принадлежности'],
                ['Тетради', 'Школьные тетради'],
                ['Бумага', 'Офисная бумага']
            ];
            filename = 'Product_types_template.xlsx';
            break;
        case 'products':
            data = [
                ['Тип товара', 'Наименование', 'Артикул', 'Минимальная цена', 'Остаток'],
                ['Ручки', 'Ручка синяя гелевая', 'R001', '15.50', '500'],
                ['Тетради', 'Тетрадь 48 листов', 'T001', '45.00', '1000'],
                ['Бумага', 'Бумага А4 500 листов', 'B001', '280.00', '200']
            ];
            filename = 'Products_template.xlsx';
            break;
        case 'orders':
            data = [
                ['Поставщик', 'Дата заказа', 'Статус', 'Примечания', 'Количество'],
                ['ООО "КанцПром"', '2026-08-15', 'новый', 'Заказ к началу учебного года', '200'],
                ['ИП Петров А.С.', '2026-08-20', 'в_обработке', '', '150']
            ];
            filename = 'Orders_template.xlsx';
            break;
    }

    // Создаем CSV и скачиваем (для простоты)
    let csvContent = data.map(row => row.join(',')).join('\n');
    const blob = new Blob(["\uFEFF" + csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);

    link.setAttribute('href', url);
    link.setAttribute('download', filename.replace('.xlsx', '.csv'));
    link.style.visibility = 'hidden';

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>

<style>
.import-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.import-info {
    background-color: #F5F5F5;
    padding: 20px;
    border-radius: 8px;
}

.import-info h3, .import-info h4 {
    color: #696969;
    margin-bottom: 15px;
}

.import-info ol {
    margin-left: 20px;
    margin-bottom: 20px;
}

.import-info li {
    margin-bottom: 8px;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.info-table th {
    background-color: #E0E0E0;
    padding: 8px;
    text-align: left;
}

.info-table td {
    padding: 8px;
    border-bottom: 1px solid #E0E0E0;
}

.import-form {
    padding: 20px;
}

.import-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 15px;
    border-radius: 4px;
    margin: 20px 0;
}

.import-warning h4 {
    margin-bottom: 10px;
    color: #856404;
}

.template-download {
    grid-column: span 2;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #E0E0E0;
}

.template-download ul {
    list-style: none;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.template-download li a {
    color: #696969;
    text-decoration: none;
    padding: 5px 10px;
    background-color: #F5F5F5;
    border-radius: 4px;
}

.template-download li a:hover {
    background-color: #E0E0E0;
}

@media (max-width: 768px) {
    .import-container {
        grid-template-columns: 1fr;
    }

    .template-download {
        grid-column: 1;
    }
}
</style>
{% endblock %}