{% extends "base.html" %}

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

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

{% block content %}
<div class="container">
    <div class="form-content">
      <form id="profile-form" onsubmit="return false;">
  
        <div class="section">
          <div class="section-title">
            <i class="fas fa-user-cog"></i>
            Изменение профиля
          </div>
  
          <!-- Имя -->
          <div class="form-group">
            <div class="modal-buttons">
              <button type="button" class="modal-button" id="open-first-name-modal">
                <i class="fas fa-id-badge"></i>
                Имя
              </button>
            </div>
            <div class="status-indicator" id="first-name-status">
              <div class="status-text">Имя не указано</div>
            </div>
          </div>
  
          <!-- Фамилия -->
          <div class="form-group">
            <div class="modal-buttons">
              <button type="button" class="modal-button" id="open-last-name-modal">
                <i class="fas fa-id-card"></i>
                Фамилия
              </button>
            </div>
            <div class="status-indicator" id="last-name-status">
              <div class="status-text">Фамилия не указана</div>
            </div>
          </div>

          <!-- Описание профиля -->
          <div class="form-group">
            <div class="modal-buttons">
              <button type="button" class="modal-button" id="open-description-modal">
                <i class="fas fa-file-alt"></i>
                Описание профиля
              </button>
            </div>
            <div class="status-indicator" id="description-status">
              <div class="status-text">Описание не указано</div>
            </div>
          </div>
          
          <div class="form-group">
            <div class="modal-buttons">
                <button type="button" class="modal-button" id="open-media-modal">
                    <i class="fas fa-images"></i>
                    Фото профиля
                </button>
            </div>
            <div class="status-indicator" id="media-status">
              <div class="status-text">Фото профиля не добавлено</div>
            </div>
          </div>
          <!-- Фото профиля -->
          <!-- Пост в профиль -->
          <div class="form-group">
            <div class="modal-buttons">
              <button type="button" class="modal-button" id="open-post-modal">
                <i class="fas fa-edit"></i>
                Пост в профиль
              </button>
            </div>
            <div class="status-indicator" id="post-status">
              <div class="status-text">Пост не добавлен</div>
            </div>
          </div>
  
          <!-- Сторис -->
          <div class="form-group">
            <div class="modal-buttons">
              <button type="button" class="modal-button" id="open-story-modal">
                <i class="fas fa-photo-video"></i>
                Сторис
              </button>
            </div>
            <div class="status-indicator" id="story-status">
              <div class="status-text">Сторис не добавлена</div>
            </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 class="modal" id="first-name-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="first-name-list" class="form-control" rows="6" placeholder="Иван&#10;Мария&#10;Пётр"></textarea>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary close-modal">Отмена</button>
        <button class="btn btn-primary modal-save" data-target="first-name">Сохранить</button>
      </div>
    </div>
  </div>
  
  <!-- Модалка для множества фамилий -->
  <div class="modal" id="last-name-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="last-name-list" class="form-control" rows="6" placeholder="Иванов&#10;Петрова&#10;Сидоров"></textarea>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary close-modal">Отмена</button>
        <button class="btn btn-primary modal-save" data-target="last-name">Сохранить</button>
      </div>
    </div>
  </div>

  <!-- Модалка для описания профиля -->
  <div class="modal" id="description-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="description-text" class="form-control" rows="6" placeholder="Введите описание..."></textarea>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary close-modal">Отмена</button>
        <button class="btn btn-primary modal-save" data-target="description">Сохранить</button>
      </div>
    </div>
  </div>
  
  <!-- Модалка для загрузки нескольких фото профиля -->
  <div class="modal" id="profile-photo-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>
        <input type="file" id="profile-photo-input" accept="image/*" multiple class="form-control">
        <ul id="profile-photo-list" class="mt-2"></ul>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary close-modal">Отмена</button>
        <button class="btn btn-primary modal-save" data-target="profile-photo">Сохранить</button>
      </div>
    </div>
  </div>

<!-- Модалка для поста в профиль -->
<div class="modal" id="post-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="post-text" class="form-control" rows="6" placeholder="Текст поста..."></textarea>
          <div class="mt-3">
              <label for="post-image">Изображение:</label>
              <input type="file" id="post-image" accept="image/*" class="form-control mt-2">
          </div>
          <div class="attachments-preview mt-3" id="attachments-preview-post"></div>
      </div>
      <div class="modal-footer">
          <button class="btn btn-secondary close-modal">Отмена</button>
          <button class="btn btn-primary modal-save" data-target="post">Сохранить</button>
      </div>
  </div>
</div>

<!-- Модалка для сторис -->
<div class="modal" id="story-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>
          <input type="file" id="story-media" accept="image/*, video/*" class="form-control">
          <div class="attachments-preview mt-3" id="attachments-preview-story"></div>
      </div>
      <div class="modal-footer">
          <button class="btn btn-secondary close-modal">Отмена</button>
          <button class="btn btn-primary modal-save" data-target="story">Сохранить</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="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/post_profile.js') }}"></script>
{% endblock %}