{% extends "base.html" %}

{% block title %}Коды оплаты{% endblock %}
{% block title_header %}Коды оплаты{% endblock %}

{% block content %}
<div class="mb-4">
    <h6 class="text-lg font-semibold mb-1">Одноразовые коды для тарифов «Оплата кодом»</h6>
    <p class="small text-secondary mb-0">Код привязывается к тарифу: пользователь в боте выбирает этот тариф и вводит код. Режим «номинал ₽» оставлен для совместимости и <strong>не подходит</strong> для активации в боте по коду.</p>
</div>

{% if notice %}
<div class="alert alert-success py-2 mb-3">{{ notice }}</div>
{% endif %}
{% if error %}
<div class="alert alert-danger py-2 mb-3">{{ error }}</div>
{% endif %}

<div class="card bg-dark border-secondary mb-4">
    <div class="card-body py-3">
        <form method="post" class="row g-3 align-items-end">
            <div class="col-md-2">
                <label class="form-label small text-secondary mb-1">Количество</label>
                <input type="number" name="count" class="form-control form-control-sm" value="10" min="1" max="500" required>
            </div>
            <div class="col-md-4">
                <label class="form-label small text-secondary mb-1">Режим</label>
                <select name="mode" class="form-select form-select-sm" id="payCodeMode">
                    <option value="tariff" selected>Привязка к тарифу (opens_code)</option>
                    <option value="legacy">Номинал ₽ (без тарифа, устар.)</option>
                </select>
            </div>
            <div class="col-md-4" id="tariffSelectWrap">
                <label class="form-label small text-secondary mb-1">Тариф</label>
                <select name="tariff_id" class="form-select form-select-sm">
                    {% for t in tariffs_opens_code %}
                    <option value="{{ t.id }}">{{ t.id }} — {{ t.name }}</option>
                    {% else %}
                    <option value="0" disabled>Нет тарифов с оплатой кодом</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2 d-none" id="legacySumWrap">
                <label class="form-label small text-secondary mb-1">Сумма ₽</label>
                <input type="text" name="sum" class="form-control form-control-sm" placeholder="100">
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-lg me-1"></i>Сгенерировать
                </button>
                {% if not tariffs_opens_code %}
                <span class="small text-warning ms-2">Для привязки к тарифу нужен хотя бы один тариф с методом «Оплата кодом». Режим «номинал ₽» доступен без этого.</span>
                {% endif %}
            </div>
        </form>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-dark table-hover table-sm align-middle">
        <thead>
            <tr>
                <th>ID</th>
                <th>Код</th>
                <th>Тариф</th>
                <th>Сумма ₽</th>
                <th>Статус</th>
                <th>Создан</th>
            </tr>
        </thead>
        <tbody>
            {% for c in codes %}
            <tr>
                <td>{{ c.id }}</td>
                <td><code>{{ c.pay_code }}</code></td>
                <td>{% if c.tariff_name %}{{ c.tariff_name }} <span class="text-secondary">(#{{ c.tariff_id }})</span>{% else %}—{% endif %}</td>
                <td>{{ c.sum }}</td>
                <td>{% if c.is_enable %}<span class="text-success">активен</span>{% else %}<span class="text-secondary">использован</span>{% endif %}</td>
                <td class="small text-secondary">{{ c.create_date }}</td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="text-center text-secondary py-4">Кодов пока нет</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
(function () {
    var mode = document.getElementById('payCodeMode');
    var tw = document.getElementById('tariffSelectWrap');
    var lw = document.getElementById('legacySumWrap');
    if (!mode || !tw || !lw) return;
    function sync() {
        var legacy = mode.value === 'legacy';
        tw.classList.toggle('d-none', legacy);
        lw.classList.toggle('d-none', !legacy);
    }
    mode.addEventListener('change', sync);
    sync();
})();
</script>
{% endblock %}