<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Завантаження архіву</title>
    <link rel="icon" type="image/gif" href="{{ url_for('static', filename='favicons/favicon.gif') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <!-- <div class="tabs-wrapper">
        <div class="tabs">
            <div class="tab {% if answers %}active{% endif %}" data-tab="choose-test" id="editor-tab" {% if not answers %}style="display: none;"{% endif %}>
                Редактор тесту
            </div>
            <div class="tab {% if not answers %}active{% endif %}" data-tab="upload-test">
                Завантажити тест
            </div>
            <div class="tab" data-tab="settings">
                Налаштування
            </div>
        </div>
    </div> -->
    {% set current_tab = active_tab if active_tab is not none else ('choose-test' if answers else 'upload-test') %}
    <div class="tabs-wrapper">
        <div class="tabs">
            <div class="tab {% if current_tab == 'choose-test' %}active{% endif %}" data-tab="choose-test" id="editor-tab" {% if not answers %}style="display: none;"{% endif %}>
                Редактор тесту
            </div>
            <div class="tab {% if current_tab == 'upload-test' %}active{% endif %}" data-tab="upload-test">
                Завантажити архів
            </div>
            <div class="tab {% if current_tab == 'settings' %}active{% endif %}" data-tab="settings">
                Налаштування
            </div>
        </div>
    </div>

    <div id="choose-test" class="tab-content {% if current_tab == 'choose-test' %}active{% endif %}">
        {% if answers %}
        <div class="header-with-button">
            <div class="titles">
                <h2>Питання тестування</h2>
            </div>
        </div>
        <div id="notification" style="margin-top: 10px; font-weight: bold;"></div>
        <button id="download-txt">Скачати тест як TXT</button>

        <table>
            <tr>
                <th>Код</th>
                <th>Питання</th>
                <th>Запис</th>
                <th class="indicator-column-header"></th> 
                <th>Аудіо</th>
            </tr>
            {% for test_title, question_map in answers.items() %}
                {% set outer_index = loop.index0 %}
                <tr>
                    <td colspan="5" style="font-weight: bold; background-color: #f0f0f0; text-align: center;"> 
                        {{ test_title }}
                    </td>
                </tr>
                {% for key, text in question_map.items() %}
                    {% set unique_id = outer_index ~ '_' ~ loop.index0 ~ '_' ~ key %}
                    <tr>
                        <td><b>{{ key }}</b></td>
                        <td class="question-column">{{ text }}</td>
                        <td>
                            <div class="audio-controls">
                                <button class="start-recording-button"
                                        data-id="{{ unique_id }}"
                                        data-text="{{ text }}">
                                    🎙️ Почати
                                </button>
                                <button class="stop-recording-button">⏹️ Зупинити</button>
                            </div>
                        </td>
                        <td class="indicator-column-cell"> 
                            <span class="recording-indicator" id="indicator_{{ unique_id }}"></span>
                        </td>
                        <td id="download_{{ unique_id }}">
                            {% set expected_filename = text|slugify %}
                            {% if expected_filename in existing_sounds %}
                                <audio id="audio_{{ unique_id }}"
                                       src="{{ url_for('serve_audio', filename=expected_filename) }}"
                                       controls>
                                </audio>
                            {% else %}
                                <audio id="audio_{{ unique_id }}"></audio>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            {% endfor %}
        </table>
        {% endif %}
    </div>

    <div id="upload-test" class="tab-content {% if current_tab == 'upload-test' %}active{% endif %}">
        <div class="centered-tab">
            <div class="upload-section-bordered"> 
                <h1>Завантаження архіву</h1>
                <p>Завантажте архів тесту <strong>.zip</strong>. Архів буде автоматично оброблено:<br>
                • Якщо архів містить відповіді - буде створено Excel файл<br>
                • Якщо архів без відповідей - буде завантажено для озвучення запитань</p>
                <form action="{{ url_for('ui') }}" method="post" enctype="multipart/form-data">
                    <div class="file-input-group"> 
                        <label for="file-upload" class="custom-file-upload">📁 Вибрати файл</label>
                        <span class="file-name" id="file-name">Файл не вибрано</span>
                        <input id="file-upload" type="file" name="file" accept=".zip" style="display: none;">
                    </div>
                    <input type="submit" value="📤 Завантажити архів" class="custom-file-upload custom-submit-button">
                </form>
                {% with messages = get_flashed_messages() %}
                  {% if messages %}
                    <ul style="margin-top: 15px; text-align: left; padding-left: 20px;">
                    {% for message in messages %}
                      <li>{{ message }}</li>
                    {% endfor %}
                    </ul>
                  {% endif %}
                {% endwith %}
            </div>
        </div>
    </div>





    <div id="settings" class="tab-content {% if current_tab == 'settings' %}active{% endif %}">
    <div class="settings-container">
        <h1>Налаштування</h1>

        <fieldset>
            <legend>Інформація</legend>
            <div class="setting-row">
                <label>Ваш ідентифікатор</label>
                <div class="copy-wrapper">
                    <input type="text" id="hardware-id-display"
                           value="{{ hardware_id[:8] }}...{{ hardware_id[-8:] }}" readonly>
                    <button id="copy-hw-id-btn" title="Натисніть, щоб скопіювати">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
                          <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
                          <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
                        </svg>
                        <span id="copy-confirmation" style="display:none;">Скопійовано!</span>
                    </button>
                    <input type="hidden" id="hardware-id-full" value="{{ hardware_id }}">
                </div>
            </div>
            <div class="setting-row">
                <label>Версія програми</label>
                <span>{{ version }}</span>
            </div>
        </fieldset>

        <form id="settings-form">
            <fieldset>
                <legend>Параметри тесту</legend>
                <div class="setting-row">
                    <label for="reaction-delay">Запис реакції (сек)</label>
                    <select id="reaction-delay" name="reaction_delay">
                        <option value="10" {% if settings.reaction_delay == 10 %}selected{% endif %}>10</option>
                        <option value="15" {% if settings.reaction_delay == 15 %}selected{% endif %}>15</option>
                        <option value="20" {% if settings.reaction_delay == 20 %}selected{% endif %}>20</option>
                        <option value="25" {% if settings.reaction_delay == 25 %}selected{% endif %}>25</option>
                    </select>
                </div>
                <small class="helper-text">Час очікування відповіді користувача після питання.</small>

                <div class="setting-row">
                    <label for="mouse-answers-enabled">Проставлення відповідей мишкою</label>
                    <label class="switch">
                        <input type="checkbox" id="mouse-answers-enabled" name="mouse_answers_enabled" {% if settings.mouse_answers %}checked{% endif %}>
                        <span class="slider round"></span>
                    </label>
                </div>
                <small class="helper-text">Дозволяє обирати варіанти кліком лівої, правої чи середньої кнопки миші.</small>
                <!-- <div class="setting-row">
                    <label for="replay-highlight-key">Виділяти повтори в кінці</label>
                    <select id="replay-highlight-key" name="replay_highlight_key">
                        <option value="" {% if not settings.replay_highlight_key %}selected{% endif %}>Ні</option>
                        <option value="q" {% if settings.replay_highlight_key == 'q' %}selected{% endif %}>Q</option>
                        <option value="w" {% if settings.replay_highlight_key == 'w' %}selected{% endif %}>W</option>
                        <option value="e" {% if settings.replay_highlight_key == 'e' %}selected{% endif %}>E</option>
                        <option value="r" {% if settings.replay_highlight_key == 'r' %}selected{% endif %}>R</option>
                        <option value="t" {% if settings.replay_highlight_key == 't' %}selected{% endif %}>T</option>
                    </select>
                </div>
                 <small class="helper-text">При повторному відтворенні буде натискатись обрана клавіша.</small> -->
            </fieldset>

            <fieldset>
                <legend>Підтримка</legend>
                <div class="setting-row">
                    <label>Контактний номер</label>
                    <span>{{ settings.support_phone }}</span>
                </div>
            </fieldset>

            <div class="actions">
                <button type="submit" id="save-settings-btn" disabled>Зберегти зміни</button>
                <div id="settings-notification"></div>
            </div>
        </form>
    </div>
    </div>

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>