{% extends "base.html" %}

{% block title %}Настройки рассылки{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/mailing_questions.css') }}">
{% endblock %}


{% block content %}
<div class="container">
    
    <div class="form-content">
        <form id="mailing-form" onsubmit="return false;">
            <div class="section">
                
                <div class="form-group">
                    <label for="delay">Задержка между сообщениями (сек)</label>
                    <input type="text" id="delay" placeholder="мин-макс, например: 3-5" value="10-30" required class="form-control">
                </div>
                
                <div class="form-group">
                    <label for="per-account">Отправок на один аккаунт</label>
                    <input type="number" id="per-account" min="1" value="3" required class="form-control">
                </div>
            </div>
            
            <div class="section">
                
                <div class="modal-buttons">
                    <button type="button" class="modal-button" id="open-users-modal">
                        <i class="fas fa-user-friends"></i>
                        Список получателей
                    </button>
                </div>
                <div class="status-indicator" id="users-status">
                    <div class="status-text">Список получателей не указан</div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-title">
                    <i class="fas fa-envelope"></i>
                    Сообщение
                </div>
                
                <div class="modal-buttons">
                    <button type="button" class="modal-button" id="open-message-modal">
                        <i class="fa-solid fa-envelope nav-icon"></i>
                        Текст сообщения
                    </button>
                </div>
            </div>
            
            
            <div class="action-button-container">
                <button type="button" class="start-button">
                    <i class="fas fa-paper-plane"></i> Начать рассылку вопросов
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Модальные окна -->
<div class="modal" id="users-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">Список получателей</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <p>Введите ссылки на пользователей (одна ссылка на строку):</p>
            <textarea id="user-ids" class="form-control" rows="8" placeholder="https://vk.com/id1&#10;https://vk.com/id2&#10;https://vk.com/id3"></textarea>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary close-modal">Отмена</button>
            <button class="btn btn-primary" id="save-users">Сохранить</button>
        </div>
    </div>
</div>

<div class="modal" id="message-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">Текст вопроса</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <textarea id="message" class="form-control" rows="8" placeholder="Введите текст вопроса..."></textarea>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary close-modal">Отмена</button>
            <button class="btn btn-primary" id="save-message">Сохранить</button>
        </div>
    </div>
</div>


<div class="modal" id="launch-settings-modal">
    <div class="modal-content large">
        <div class="modal-header">
            <h3 class="modal-title">Настройки запуска рассылки вопросов</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <!-- Кнопка для выбора аккаунтов -->
            <div class="form-group">
                <label>Аккаунты для рассылки вопросов</label>
                <button type="button" class="account-select-button" id="select-accounts-btn">
                    <i class="fas fa-user-friends"></i>
                    Выбрать аккаунты
                </button>
                <div class="status-indicator" id="selected-accounts-info">
                    <div class="status-text">Аккаунты не выбраны</div>
                </div>
            </div>
            
            <!-- Настройка количества потоков -->
            <div class="form-group">
                <label for="threads-count">Количество потоков</label>
                <input type="number" id="threads-count" min="1" max="50" value="5" class="form-control">
                <div class="status-text">Рекомендуем столько же потоков, сколько выбрано аккаунтов</div>
            </div>
            
            
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary close-modal">Отмена</button>
            <button class="btn btn-primary" id="start-mailing-btn">Запустить рассылку вопросов</button>
        </div>
    </div>
</div>

<div class="modal" id="media-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">Медиавложения</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <p>Выберите медиафайлы для вложения:</p>
            <div style="border: 1px dashed #334155; border-radius: 12px; padding: 30px; text-align: center; margin-bottom: 25px; background: #1a2535;">
                <label for="media" style="cursor: pointer;">
                    <i class="fas fa-cloud-upload-alt" style="font-size: 2.5rem; color: #0ea5e9; margin-bottom: 15px;"></i>
                    <div style="font-weight: 500; color: #e2e8f0;">Кликните или перетащите файлы</div>
                    <div style="font-size: 0.9rem; color: #94a3b8; margin-top: 8px;">Поддерживаются изображения и видео</div>
                    <input type="file" id="media" accept="image/*, video/*" multiple style="display: none;">
                </label>
            </div>
            
            <div class="attachments-preview" id="attachments-preview">
                <!-- Превью файлов будут здесь -->
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary close-modal">Отмена</button>
            <button class="btn btn-primary" id="save-media">Сохранить</button>
        </div>
    </div>
</div>
<div id="account-selection-modal" class="modal modal-layer-2">
    <div class="modal-content large">
        <span class="close" onclick="closeAccountSelectionModal()">&#10006;</span>
        <h2>Выберите аккаунты</h2>
        
        <div class="header-section">
            <div class="table-controls">
                <div class="account-folder-selector">
                    <div class="folder-indicator" id="folder-indicator-modal"></div>
                    
                    <button class="account-folder-btn active" id="all-folder-modal">
                        <div class="account-count" data-count="0">0</div>
                        <div class="account-label">Все аккаунты</div>
                        <div class="active-indicator"></div>
                    </button>
                    <button class="account-folder-btn" id="working-folder-modal">
                        <div class="account-count" data-count="0">0</div>
                        <div class="account-label">Для работы</div>
                        <div class="active-indicator"></div>
                    </button>
                    <button class="account-folder-btn" id="archive-folder-modal">
                        <div class="account-count" data-count="0">0</div>
                        <div class="account-label">Архив</div>
                        <div class="active-indicator"></div>
                    </button>
                    <button class="account-folder-btn" id="no-spam-folder-modal">
                        <div class="account-count" data-count="0">0</div>
                        <div class="account-label">Живые</div>
                        <div class="active-indicator"></div>
                    </button>
                    <button class="account-folder-btn" id="with-spam-folder-modal">
                        <div class="account-count" data-count="0">0</div>
                        <div class="account-label">Мертвые</div>
                        <div class="active-indicator"></div>
                    </button>
                </div>
            </div>
        </div>

        <table id="accounts-table-modal" class="proxy-table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all-checkbox-modal"></th>
                    <th>№</th>
                    <th>Телефон</th>
                    <th>Гео</th>
                    <th>Роль</th>
                    <th>Имя</th>
                    <th>Фамилия</th>
                    <th>Статус</th> 
                </tr>
            </thead>
            <tbody>
                </tbody>
        </table>
        
        <div class="modal-footer">
            <button class="action-button" onclick="confirmAccountSelection()">Подтвердить выбор</button>
        </div>
    </div>
</div>

<div id="add-account-modal" class="modal-add">
    </div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/mailing_questions.js') }}"></script>
{% endblock %}