{% extends "base.html" %}
{% block title %}Посты{% endblock %}

{% block styles %}
<link href="/static/css/posts.css" rel="stylesheet">
{% endblock %}

{% block content %}
<!-- Заголовок -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1"><i class="bi bi-megaphone-fill text-primary me-2"></i>Управление постами</h2>
        <p class="text-muted mb-0">Создание и планирование публикаций в VK</p>
    </div>
    <div class="badge bg-primary fs-6 px-3 py-2">
        <i class="bi bi-calendar-week me-1"></i>Публикации
    </div>
</div>

<!-- Основной контент -->
<div class="row g-4">
    <!-- Левая колонка: Сотрудники -->
    <div class="col-lg-7">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-people-fill me-2"></i>Сотрудники Medods</h5>
                <div>
                    <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="selectAllUsers()">
                        <i class="bi bi-check-all me-1"></i>Все
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="deselectAllUsers()">
                        <i class="bi bi-x-circle me-1"></i>Никто
                    </button>
                </div>
            </div>
            <div class="card-body p-0">
                <!-- Таблица сотрудников -->
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th width="50">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="selectAll"
                                            onchange="toggleAllUsers()">
                                    </div>
                                </th>
                                <th>ID</th>
                                <th>Имя</th>
                                <th>Короткое имя</th>
                                <th>Пол</th>
                                <th>Прием, мин.</th>
                                <th>Специальности</th>
                            </tr>
                        </thead>
                        <tbody id="usersTable">
                            {% for user in data.medodsUsers %}
                            <tr class="user-row" data-user-id="{{ user.id }}">
                                <td>
                                    <div class="form-check">
                                        <input class="form-check-input user-checkbox" type="checkbox"
                                            id="user_{{ user.id }}" {% if data.vkPost and user.id in
                                            data.vkPost.selected_users %}checked{% endif %}>
                                    </div>
                                </td>
                                <td><span class="badge bg-secondary">{{ user.id }}</span></td>
                                <td>
                                    <span class="fw-semibold">{{ user.name }}</span>
                                </td>
                                <td>{{ user.shortName }}</td>
                                <td>
                                    {% if user.sex == 'male' %}
                                    <span class="badge bg-info">Муж</span>
                                    {% elif user.sex == 'female' %}
                                    <span class="badge bg-pink">Жен</span>
                                    {% else %}
                                    <span class="badge bg-secondary">-</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark">{{ user.step }}</span>
                                </td>
                                <td>
                                    {% if user.specialties %}
                                    <div class="specialty-badges">
                                        {% for specialty in user.specialties %}
                                        <span class="badge bg-light text-dark me-1 mb-1">{{ specialty }}</span>
                                        {% endfor %}
                                    </div>
                                    {% else %}
                                    <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Если нет сотрудников -->
                {% if not data.medodsUsers %}
                <div class="text-center py-5">
                    <i class="bi bi-people display-1 text-muted mb-3"></i>
                    <h5 class="text-muted">Нет сотрудников</h5>
                    <p class="text-muted">Загрузите список сотрудников из Medods</p>
                </div>
                {% endif %}
            </div>
            <div class="card-footer">
                <button type="button" class="btn btn-outline-primary w-100" onclick="updateUsersList()">
                    <i class="bi bi-arrow-clockwise me-2"></i>Обновить список сотрудников
                </button>
            </div>
        </div>
    </div>

    <!-- Правая колонка: Настройки публикации -->
    <div class="col-lg-5">
        <!-- Настройки текста -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-text-paragraph me-2"></i>Настройки текста поста</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Основной текст поста</label>
                    <textarea class="form-control" id="static_text" rows="4"
                        placeholder="Введите основной текст поста...">{{ data.vkPost.static_text if data.vkPost else '' }}</textarea>
                    <div class="form-text">
                        Будет добавлен после свободных слотов сотрудников
                    </div>
                </div>

                <div class="mb-4">
                    <label class="form-label fw-semibold">Отображение имен</label>
                    <div class="form-check form-switch d-flex justify-content-left gap-2 p-0">
                        <input class="form-check-input m-0" type="checkbox" role="switch" id="full_name" {% if
                            data.vkPost and data.vkPost.full_name %}checked{% endif %}>
                        <label class="form-check-label mb-0" for="full_name">
                            Использовать полные имена сотрудников
                        </label>
                    </div>
                    <div class="form-text">
                        Если выключено, будут использоваться короткие имена
                    </div>
                </div>

                <button type="button" class="btn btn-warning w-100" onclick="publishNow()">
                    <i class="bi bi-send-fill me-2"></i>Опубликовать сейчас
                </button>
            </div>
        </div>

        <!-- Настройки расписания -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-clock me-2"></i>Настройки расписания</h5>
                <span id="schedulerStatus" class="badge">
                    {% if data.schedulerStatus.scheduler %}
                    <span class="badge bg-success"><i class="bi bi-play-circle me-1"></i>Активен</span>
                    {% else %}
                    <span class="badge bg-secondary"><i class="bi bi-stop-circle me-1"></i>Неактивен</span>
                    {% endif %}
                </span>
            </div>
            <div class="card-body">

                <div class="alert alert-danger">
                    <div class="d-flex">
                        <div class="me-3">
                            <i class="bi bi-exclamation-triangle fs-5"></i>
                        </div>
                        <div>
                            <h6 class="alert-heading mb-1">Временная настройка</h6>
                            <p class="mb-0">Посты будут опубликованы в 12:00 ежедневно.<br>Настройки из расписания будут
                                проигнорированы!</p>
                        </div>
                    </div>
                </div>

                <!-- Время работы -->
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Начало публикации</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-sun"></i></span>
                            <input type="number" class="form-control" id="start_hour" min="0" max="23"
                                value="{{ data.schedulerSettings.start_hour if data.schedulerSettings else 9 }}">
                            <span class="input-group-text">:00</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Конец публикации</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-moon"></i></span>
                            <input type="number" class="form-control" id="end_hour" min="0" max="23"
                                value="{{ data.schedulerSettings.end_hour if data.schedulerSettings else 21 }}">
                            <span class="input-group-text">:00</span>
                        </div>
                    </div>
                </div>

                <!-- Интервал -->
                <div class="mb-3">
                    <label class="form-label fw-semibold">Интервал публикации (минут)</label>
                    <input type="number" class="form-control" id="interval_minutes" min="1" max="1440"
                        value="{{ data.schedulerSettings.interval_minutes if data.schedulerSettings else 60 }}">
                    <div class="form-text">
                        Через сколько минут публиковать следующий пост
                    </div>
                </div>

                <!-- Включить/выключить -->
                <div class="mb-4">
                    <label class="form-label fw-semibold">Статус планировщика</label>
                    <div class="form-check form-switch d-flex justify-content-left gap-2 p-0">
                        <input class="form-check-input m-0" type="checkbox" role="switch" id="scheduler_enabled" {% if
                            data.schedulerSettings and data.schedulerSettings.enabled %}checked{% endif %}>
                        <label class="form-check-label mb-0" for="scheduler_enabled">
                            Автоматическая публикация по расписанию
                        </label>
                    </div>
                </div>

                <!-- Информация о следующем запуске -->
                {% if data.schedulerStatus.next_run_time %}
                <div class="alert alert-info">
                    <div class="d-flex">
                        <div class="me-3">
                            <i class="bi bi-info-circle fs-5"></i>
                        </div>
                        <div>
                            <h6 class="alert-heading mb-1">Следующая публикация</h6>
                            <p class="mb-0">{{ data.schedulerStatus.next_run_time }}</p>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Кнопка сохранения -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body text-center py-3">
                <button type="button" class="btn btn-success btn-lg px-5" onclick="saveSettings()">
                    <i class="bi bi-save me-2"></i>Сохранить все настройки
                </button>
                <div class="form-text mt-2">
                    Сохраняются: выбранные сотрудники, текст поста, настройки расписания
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Контейнер для уведомлений -->
<div id="alertContainer" class="alert-fixed"></div>
{% endblock %}

{% block scripts %}
<script src="/static/js/posts.js"></script>
{% endblock %}