<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Дирекция СПбПУ - загрузка данных</title>
    <link rel="stylesheet" href="/webjars/bootstrap/5.2.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --spbstu-gradient-start: #1a3f2c;
            --spbstu-gradient-end: #2d5a3a;
            --spbstu-green: #2d5a3a;
            --spbstu-orange: #e68a2e;
        }
        body {
            font-family: 'Onest', sans-serif;
            background: linear-gradient(135deg, #f0f4f8 0%, #e6edf4 100%);
            min-height: 100vh;
        }
        .spbstu-header {
            background: linear-gradient(135deg, #1a3f2c, #2d5a3a, #522878, #e68a2e, #1a3f2c);
            background-size: 300% 300%;
            animation: gradientShift 8s ease infinite;
            color: white;
            padding: 20px 30px;
            border-radius: 20px;
            margin-bottom: 30px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .spbstu-logo {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .spbstu-logo img {
            height: 55px;
            width: auto;
        }
        .spbstu-logo-text h1 {
            font-size: 1.8rem;
            font-weight: 700;
            margin: 0;
        }
        .spbstu-logo-text p {
            margin: 0;
            opacity: 0.85;
            font-size: 0.9rem;
        }
        .upload-card {
            border: none;
            border-radius: 24px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            overflow: hidden;
        }
        .upload-card-header {
            background: linear-gradient(135deg, var(--spbstu-gradient-start) 0%, var(--spbstu-gradient-end) 100%);
            color: white;
            padding: 20px 24px;
            border-bottom: none;
        }
        .btn-upload {
            background: linear-gradient(135deg, var(--spbstu-gradient-start) 0%, var(--spbstu-gradient-end) 100%);
            border: none;
            padding: 12px;
            font-weight: 600;
            border-radius: 12px;
            transition: all 0.3s;
        }
        .btn-upload:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(45, 90, 58, 0.3);
        }
        .requirements-list li {
            margin-bottom: 8px;
        }
        .requirements-list i {
            color: var(--spbstu-green);
            margin-right: 8px;
        }
        .error-list {
            max-height: 300px;
            overflow-y: auto;
            font-size: 0.9rem;
        }
        .error-item {
            padding: 8px 12px;
            border-bottom: 1px solid #f5c6cb;
            font-family: monospace;
            font-size: 0.85rem;
        }
        .error-item:last-child {
            border-bottom: none;
        }
        @media (max-width: 768px) {
            .spbstu-logo img {
                height: 40px;
            }
            .spbstu-logo-text h1 {
                font-size: 1.3rem;
            }
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <!-- Заголовок с градиентом и логотипом-ссылкой -->
            <div class="spbstu-header">
                <a href="/debtors" class="spbstu-logo" style="text-decoration: none; color: white;">
                    <img src="/images/logo_01.png" alt="СПбПУ">
                    <div class="spbstu-logo-text">
                        <h1>Дирекция СПбПУ</h1>
                        <p>Система учёта должников</p>
                    </div>
                </a>
            </div>

            <div class="card upload-card">
                <div class="card-header upload-card-header">
                    <h5 class="mb-0"><i class="bi bi-cloud-upload me-2"></i>Загрузка данных</h5>
                </div>
                <div class="card-body p-4">
                    <p class="text-muted">Загрузите Excel-файл с данными о должниках</p>
                    <p class="text-muted small">Поддерживаются форматы .xlsx и .xls</p>

                    

                    

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="bi bi-x-circle-fill me-2"></i> <span>Произошла ошибка: No static resource sitemap.xml.</span>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>

                    <!-- Блок с детальными ошибками парсинга -->
                    

                    <form method="post" action="/upload" enctype="multipart/form-data" class="mt-4">
                        <div class="mb-3">
                            <label for="fileInput" class="form-label fw-bold">Выберите Excel файл</label>
                            <input type="file" name="file" id="fileInput" class="form-control" accept=".xlsx, .xls" required>
                            <div class="form-text">Максимальный размер файла: 10 МБ</div>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-upload btn-lg text-white">
                                <i class="bi bi-upload me-2"></i>Загрузить и обработать
                            </button>
                            <a href="/debtors" class="btn btn-outline-secondary">
                                <i class="bi bi-table me-2"></i>Перейти к списку должников
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="bi bi-question-circle me-2" style="color: var(--spbstu-green);"></i>Требования к файлу</h6>
                </div>
                <div class="card-body">
                    <ul class="requirements-list mb-0">
                        <li><i class="bi bi-check-circle-fill"></i>Файл должен быть в формате <strong>.xlsx</strong> или <strong>.xls</strong></li>
                        <li><i class="bi bi-check-circle-fill"></i>Первая строка должна содержать <strong>заголовки колонок</strong></li>
                        <li><i class="bi bi-check-circle-fill"></i><strong>Обязательные колонки:</strong> № п/п, Институт, Учебная сессия, Ведомость, Дисциплина, Вид контроля, Студент, Попытка, Оценка, Курс, Группа</li>
                        <li><i class="bi bi-check-circle-fill"></i>Колонка <strong>"Курс"</strong> должна содержать числа (1, 2, 3, 4)</li>
                        <li><i class="bi bi-check-circle-fill"></i>Колонка <strong>"Попытка"</strong> должна содержать числа (1, 2, 3)</li>
                        <li><i class="bi bi-check-circle-fill"></i>Колонка <strong>"Дата попытки"</strong> должна быть в формате <strong>ДД.ММ.ГГГГ</strong></li>
                        <li><i class="bi bi-check-circle-fill"></i>Колонка <strong>"Студент"</strong> должна содержать данные в формате: <code>Фамилия И.О. | номер_зачетки | уровень</code></li>
                        <li><i class="bi bi-info-circle-fill text-warning"></i><strong>Важно:</strong> В систему загружаются только записи с задолженностями (оценки: "не явился", "неудовлетворительно", "НЕТ ОЦЕНКИ").</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/webjars/bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>