{% extends "base.html" %}

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

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/mailing.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="form-group">
                    <label for="input-mode">Режим ввода</label>
                    <div class="mode-toggle">
                        <button type="button" data-mode="standard" class="active">Стандартный</button>
                        <button type="button" data-mode="advanced">Продвинутый</button>
                    </div>
                </div>
                
                <!-- Обновляем блок получателей -->
                <div id="standard-users-block">
                    <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 id="advanced-users-block" style="display: none;">
                    <div class="modal-buttons">
                        <button type="button" class="modal-button" id="open-advanced-users-modal">
                            <i class="fas fa-user-cog"></i>
                            Настройка получателей по аккаунтам
                        </button>
                    </div>
                    <div class="status-indicator" id="advanced-users-status">
                        <div class="status-text">Получатели по аккаунтам не настроены</div>
                    </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>
                    <button type="button" class="modal-button" id="open-media-modal">
                        <i class="fas fa-images"></i>
                        Медиавложения
                    </button>
                    <button type="button" class="modal-button" id="open-voice-modal">
                        <i class="fas fa-microphone"></i> <!-- Иконка микрофона -->
                        Голосовое сообщение
                    </button>
                </div>
            </div>
            <div class="section">
                <div class="section-title">
                    <i class="fas fa-reply"></i>
                    Автоответчик
                </div>
                <div class="modal-buttons">
                    <button type="button" class="modal-button" id="open-autoresponder-modal">
                        <i class="fas fa-cog"></i>
                        Настройки автоответчика
                    </button>
                </div>
                <div class="status-indicator" id="autoresponder-status">
                    <div class="status-text">Автоответчик не настроен</div>
                </div>
            </div>
            
            <div class="section">
                
                <div class="form-group">
                    <label for="scheduled-time">Отложенная отправка</label>
                    <input type="datetime-local" id="scheduled-time" class="form-control">
                    <div class="status-text" style="margin-top: 10px; font-size: 0.9rem;">
                        Оставьте поле пустым для отправки сейчас
                    </div>
                </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="voice-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>Выберите аудиофайл для голосового сообщения (OGG, MP3, WAV):</p>
            <!-- Поле ввода файла, разрешаем только аудио -->
            <input type="file" id="voice-file" accept="audio/*" class="form-control">
            
            <!-- Контейнер для предварительного просмотра/информации -->
            <div class="attachments-preview mt-3" id="attachments-preview-voice">
                <!-- Если файл выбран, здесь будет отображаться его имя и кнопка воспроизведения/удаления -->
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary close-modal">Отмена</button>
            <button class="btn btn-primary modal-save" data-target="voice">Сохранить</button>
        </div>
    </div>
</div>

<!-- Добавляем новое модальное окно для продвинутого режима -->
<div class="modal" id="advanced-users-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="accounts-container" id="advanced-accounts-container">
                <!-- Контейнер для выбранных аккаунтов -->
            </div>
            
            <div class="form-group" style="margin-top: 20px;">
                <button class="btn btn-secondary" id="add-account-recipients">
                    <i class="fas fa-plus"></i> Добавить аккаунт
                </button>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary close-modal">Отмена</button>
            <button class="btn btn-primary" id="save-advanced-users">Сохранить</button>
        </div>
    </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="autoresponder-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 for="autoresponder-delay">Задержка между ответами (сек)</label>
                <input type="text" id="autoresponder-delay" placeholder="мин-макс, например: 5-15" class="form-control">
                <div class="status-text">Укажите диапазон задержки между автоматическими ответами</div>
            </div>

            <!-- Контейнер для сообщений -->
            <div class="form-group" style="margin-top: 20px;">
                <label>Сообщения автоответчика</label>
                <div id="autoresponder-messages-container">
                    <!-- Сообщения будут добавляться сюда динамически -->
                </div>
                <button type="button" class="btn btn-secondary" id="add-autoresponder-message" style="margin-top: 15px;">
                    <i class="fas fa-plus"></i> Добавить сообщение
                </button>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary close-modal">Отмена</button>
            <button class="btn btn-primary" id="save-autoresponder">Сохранить</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.js') }}"></script>
{% endblock %}