{% extends "base.html" %}

{% block title %}Помощь{% endblock %}

{% block content %}
<div class="container">
    <!-- Навигация -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="bg-dark p-3 rounded">
                <h4 class="text-light mb-3">Содержание:</h4>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#settings">🔧 Настройки</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#discounts">💎 Скидки</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#loyalty">🎯 Программы лояльности</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Раздел Настройки -->
    <div class="row mb-5" id="settings">
        <div class="col-12">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h3>🔧 Настройки</h3>
                </div>
                <div class="card-body">
                    <h5>🛠 Основные настройки магазина</h5>
                    <ul>
                        <li><strong>Токен Telegram бота</strong> — токен вашего бота</li>
                        <li><strong>Chat ID администратора</strong> — ID чата администратора для уведомлений</li>
                        <li><strong>API ключ ЮKassa</strong> — ключ API для приёма платежей</li>
                        <li><strong>Shop ID ЮKassa</strong> — идентификатор магазина в системе YooKassa</li>
                    </ul>
                    <h5>🤖 Как настроить бота</h5>
                    <ol>
                        <li>Получите токен бота у <strong>@BotFather</strong>.</li>
                        <li>Укажите токен в настройках.</li>
                        <li>Настройте платежную систему.</li>
                        <li>Укажите ID чата администратора.</li>
                    </ol>
                    <h5>📋 Сообщения бота</h5>
                    <p>Вы можете настроить ответы бота для следующих разделов:</p>
                    <ul>
                        <li>✨ <strong>О магазине</strong> — текст, который бот покажет пользователю при нажатии на кнопку "О магазине". <br>
                        Переключатель должен быть включён, чтобы бот мог отправить сообщение. Если переключатель выключен, бот ответит "Сообщение не настроено".</li>
                        <li>📞 <strong>Контакты</strong> — текст, который бот покажет пользователю при нажатии на кнопку "Контакты". <br>
                        Переключатель должен быть включён, чтобы бот мог отправить сообщение. Если переключатель выключен, бот ответит "Сообщение не настроено".</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Раздел Скидки -->
    <div class="row mb-5" id="discounts">
        <div class="col-12">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h3>🎁 Активные персональные скидки</h3>
                </div>
                <div class="card-body">
                    <p>На этой странице отображаются пользователи магазина, которым назначена скидка.</p>
                    <h5>Как это работает?</h5>
                    <p>В разделе <strong>"Источник"</strong> указано, каким образом была назначена скидка:</p>
                    <ul>
                        <li><strong>"Назначено автоматически"</strong> — скидка предоставлена автоматически по условиям программы лояльности.</li>
                        <li><strong>"Назначено вручную"</strong> — скидка назначена администратором системы.</li>
                    </ul>
                    <p>В разделе <strong>"Статус"</strong> указан, текущий статус скидки:</p>
                    <ul>
                        <li><strong>"Активна"</strong> — скидка работает.</li>
                        <li><strong>"Неактивна"</strong> — скидка не работает.</li>
                    </ul>
                    <h5>Как добавить скидку?</h5>
                    <ol>
                        <li>Нажмите на <strong>"+"</strong>.</li>
                        <li>Выберите имя пользователя из выпадающего списка.</li>
                        <li>Укажите процент скидки.</li>
                        <li>Сохраните изменения.</li>
                    </ol>
                    <p>Легко управляйте персональными скидками для своих клиентов! ✨</p>
                </div>
            </div>
        </div>
    </div>
    

    <!-- Раздел Программы лояльности -->
    <div class="row mb-5" id="loyalty">
        <div class="col-12">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h3>💳 Программа лояльности</h3>
                </div>
                <div class="card-body">                                
                    <p>Наша программа лояльности позволяет автоматически назначать скидки вашим покупателям при достижении определённой суммы их покупок. 🎉</p>
                    <h6>Как это работает?</h6>
                    <p>📌 Когда покупатель тратит установленную сумму, программа автоматически предоставляет ему скидку, размер которой задаётся администратором.</p>
                    <h6>Как добавить новую программу?</h6>
                    <ol>
                        <li>Нажмите на <strong>"+"</strong>.</li>
                        <li>Заполните поля:
                            <ul>
                                <li><strong>Наименование</strong> — название программы.</li>
                                <li><strong>Описание</strong> — краткая информация о программе.</li>
                                <li><strong>Сумма</strong> — сколько должен потратить пользователь, чтобы получить скидку.</li>
                                <li><strong>Размер скидки</strong> — процент или фиксированная сумма скидки.</li>
                            </ul>
                        </li>
                        <li>Сохраните изменения.</li>
                    </ol>
                    <h6>Важно знать!</h6>
                    <p>⚠️ <strong>Активна может быть только одна программа лояльности.</strong> Если вы добавите новую программу, не удалив или не отключив предыдущую, пользователи начнут работать по последней добавленной программе.</p>
                    <h6>Как отключить программу?</h6>
                    
                        <ul>
                            <li>Удалите её.</li>
                            <li>Или отключите в меню редактирования.</li>
                        </ul>
                    
                    <p>Сделайте покупки ещё приятнее для своих клиентов с помощью программы лояльности! ✨</p>
                </div>
            </div>
        </div>
    </div>
    
</div>
{% endblock %}