{% extends "base.html" %}

{% block title %}Тарифы{% endblock %}
{% block title_header %}Тарифы{% endblock %}

{% block content %}
<style>
    .tariff-pay-card { transition: box-shadow .15s ease, transform .15s ease; }
    .tariff-pay-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.35); transform: translateY(-1px); }
    .tariff-method-card { background: var(--bs-body-bg, #fff); }
    .tariffs-landing-split { display: flex; flex-direction: column; gap: 1.25rem; }
    .tariffs-landing-half {
        border-radius: .5rem;
        padding: 1rem 1rem 1.25rem;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(0,0,0,.18);
        min-height: 42vh;
    }
    .tariffs-landing-half--vpn { border-top: 4px solid #2563eb; }
    .tariffs-landing-half--proxy { border-top: 4px solid #22c55e; }
</style>

<div class="mb-6">
    {% if method_view and method_view_meta %}
    <a href="{% if view_kind %}{{ url_for('tariffs.tariffs_list', kind=view_kind) }}{% if view_kind == 'vpn' %}#tariffs-vpn{% else %}#tariffs-proxy{% endif %}{% else %}{{ url_for('tariffs.tariffs_list') }}{% endif %}" class="btn btn-outline-secondary btn-sm mb-3">
        <i class="bi bi-arrow-left me-1"></i>Назад к методам
    </a>
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <div class="d-flex align-items-center gap-2 min-w-0">
            <i class="bi {{ method_view_meta.icon }} fs-4 flex-shrink-0" style="color: {{ method_view_meta.accent }};"></i>
            <h6 class="text-lg font-semibold mb-0 text-truncate">Тарифы — {{ method_view_meta.title }}{% if view_kind == 'vpn' %} <span class="text-secondary fw-normal">· VPN</span>{% elif view_kind == 'proxy' %} <span class="text-secondary fw-normal">· Прокси</span>{% endif %}</h6>
        </div>
        <a href="{{ url_for('tariffs.tariff_editor_new', method=method_view, kind=view_kind) if view_kind else url_for('tariffs.tariff_editor_new', method=method_view) }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-2"></i>Добавить тариф
        </a>
    </div>

    {% macro tariff_card(tariff) %}
        <div class="col">
            <div class="card h-100 tariff-method-card border-2 shadow-sm" style="border-color: {{ method_view_meta.accent }} !important;">
                <div class="card-body d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-start gap-2 mb-3">
                        <h6 class="fw-bold mb-0">{{ tariff.name }}</h6>
                        {% if tariff.is_enable %}
                        <span class="badge bg-success rounded-pill">Активен</span>
                        {% else %}
                        <span class="badge bg-secondary rounded-pill">Отключен</span>
                        {% endif %}
                    </div>
                    <dl class="row small mb-0">
                        <dt class="col-5 text-secondary">Тип</dt>
                        <dd class="col-7 mb-1">
                            {% if tariff.is_admin_only %}
                            <span class="badge bg-danger bg-opacity-75">Админ</span>
                            {% elif (tariff.tariff_kind or '') == 'proxy' %}
                            Прокси
                            {% else %}
                            VPN
                            {% endif %}
                        </dd>
                        <dt class="col-5 text-secondary">Дней</dt>
                        <dd class="col-7 mb-1">{% if tariff.is_unlimited_days %}∞{% else %}{{ tariff.left_day }}{% endif %}</dd>
                        <dt class="col-5 text-secondary">Цена</dt>
                        <dd class="col-7 mb-1">
                            {% if tariff.is_trial %}Бесплатно{% elif tariff.is_admin_only %}Бесплатно{% else %}{{ "%.2f"|format(tariff.price) }} {{ tariff.currency|default('RUB') }}{% endif %}
                        </dd>
                        <dt class="col-5 text-secondary">Способ оплаты</dt>
                        <dd class="col-7 mb-1">
                            {% if tariff.payment_method_badges|length > 1 %}
                                {% for label in tariff.payment_method_badges %}
                                <span class="badge rounded-pill me-1 mb-1" style="background: {{ method_view_meta.accent }};">{{ label }}</span>
                                {% endfor %}
                            {% else %}
                            <span class="badge rounded-pill" style="background: {{ method_view_meta.accent }};">{{ tariff.payment_method_label }}</span>
                            {% endif %}
                        </dd>
                        <dt class="col-5 text-secondary">Лимит устройств</dt>
                        <dd class="col-7 mb-1">{% if tariff.is_admin_only %}∞{% else %}{{ tariff.device_limit if tariff.device_limit else '—' }}{% endif %}</dd>
                        <dt class="col-5 text-secondary">Трафик</dt>
                        <dd class="col-7 mb-1">{{ tariff.traffic_cap_display }}</dd>
                        <dt class="col-5 text-secondary">Порядок</dt>
                        <dd class="col-7 mb-1">{{ tariff.sort_order|default(0) }}</dd>
                        <dt class="col-5 text-secondary">Серверы</dt>
                        <dd class="col-7 mb-1">{{ tariff.server_display or tariff.server_name or '—' }}</dd>
                    </dl>
                    <p class="small text-secondary mt-2 mb-2 flex-grow-1">{{ tariff.description or '—' }}</p>
                    <div class="small text-muted border-top pt-2 mt-auto">ID: {{ tariff.id }}</div>
                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <a href="{% if view_kind %}{{ url_for('tariffs.tariff_editor_page', tariff_id=tariff.id, back_method=method_view, kind=view_kind) }}{% else %}{{ url_for('tariffs.tariff_editor_page', tariff_id=tariff.id, back_method=method_view) }}{% endif %}" class="btn btn-sm btn-primary">
                            <i class="bi bi-pencil-square"></i> Изменить
                        </a>
                        {% if tariff.is_enable %}
                        <button type="button" class="btn btn-sm btn-warning toggle-enable-btn text-dark" data-id="{{ tariff.id }}">
                            <i class="bi bi-toggle-off"></i> Деактивировать
                        </button>
                        {% else %}
                        <button type="button" class="btn btn-sm btn-success toggle-enable-btn" data-id="{{ tariff.id }}">
                            <i class="bi bi-toggle-on"></i> Активировать
                        </button>
                        {% endif %}
                        <button type="button" class="btn btn-sm btn-danger delete-btn" data-id="{{ tariff.id }}" data-name="{{ tariff.name|e }}">
                            <i class="bi bi-trash"></i> Удалить
                        </button>
                    </div>
                </div>
            </div>
        </div>
    {% endmacro %}

    {% if admin_tariffs_view %}
    <h6 class="text-secondary small text-uppercase mb-2 mt-1"><i class="bi bi-shield-lock me-1"></i> Административные</h6>
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
        {% for tariff in admin_tariffs_view %}
        {{ tariff_card(tariff) }}
        {% endfor %}
    </div>
    {% endif %}

    {% if vpn_tariffs_view %}
    <h6 class="text-secondary small text-uppercase mb-2 mt-1"><i class="bi bi-hdd-network me-1"></i> VPN</h6>
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
        {% for tariff in vpn_tariffs_view %}
        {{ tariff_card(tariff) }}
        {% endfor %}
    </div>
    {% endif %}

    {% if proxy_tariffs_view %}
    <h6 class="text-secondary small text-uppercase mb-2 mt-1"><i class="bi bi-link-45deg me-1"></i> Прокси</h6>
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
        {% for tariff in proxy_tariffs_view %}
        {{ tariff_card(tariff) }}
        {% endfor %}
    </div>
    {% endif %}

    {% if not admin_tariffs_view and not vpn_tariffs_view and not proxy_tariffs_view %}
    <div class="col-12 mb-4">
        <p class="text-secondary mb-0">Для этого способа оплаты пока нет тарифов. Нажмите «Добавить тариф».</p>
    </div>
    {% endif %}

    <div class="alert alert-info small mb-0">
        <div class="fw-semibold mb-2">Информация о тарифах</div>
        <ul class="mb-0 ps-3">
            <li>Активные тарифы показываются пользователям в боте.</li>
            <li>Неактивные скрыты от пользователей, но остаются в базе.</li>
            <li>Серверы: <strong>Авто</strong> — все активные; <strong>Мульти</strong> — только выбранные (порядок как в списке в редакторе).</li>
            <li>При включении способа оплаты в <strong>Настройки → Оплата</strong> для него автоматически добавляются четыре стандартных тарифа (5 / 30 / 60 / 90 дней), если их ещё не было.</li>
            <li>На этой странице тарифы сгруппированы: <strong>Административные</strong>, <strong>VPN</strong>, <strong>Прокси</strong> (тип задаётся в редакторе тарифа).</li>
            <li><strong>Пробный период</strong> — отдельная карточка на главном экране тарифов; не смешивается с платными планами. Одновременно может быть активен только один пробный тариф.</li>
            <li>Удаление тарифа безвозвратно убирает его из панели (связанные платежи в БД могут остаться — проверьте вручную).</li>
        </ul>
    </div>

    {% else %}

    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <h6 class="text-lg font-semibold mb-0">Тарифы — выберите метод оплаты</h6>
    </div>

    {% if tariff_payment_cards is defined and not tariff_payment_cards %}
    <div class="alert alert-warning small mb-4">
        Нет включённых способов оплаты. Откройте <strong>Настройки → Оплата</strong> и включите нужные методы — здесь появятся карточки и тарифы для них.
    </div>
    {% endif %}

    {% if tariff_payment_cards_vpn is defined and tariff_payment_cards_proxy is defined %}
    <div class="tariffs-landing-split mb-4">

        <section class="tariffs-landing-half tariffs-landing-half--vpn" aria-label="VPN">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-hdd-network fs-4 text-primary"></i>
                    <span class="fw-semibold text-white">VPN</span>
                </div>
                {% if tariff_payment_cards_vpn and enabled_payment_keys is defined and enabled_payment_keys %}
                <a href="{{ url_for('tariffs.tariff_editor_new', method=tariff_payment_cards_vpn[0].key, kind='vpn') }}" class="btn btn-primary btn-sm">
                    <i class="bi bi-plus-lg me-1"></i>Добавить тариф
                </a>
                {% endif %}
            </div>
            {% if admin_tariff_landing %}
            <div class="card border-danger border-2 bg-dark text-white mb-3">
                <div class="card-body py-2 px-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <span class="badge bg-danger me-2">Админ</span>
                        <span class="fw-semibold">{{ admin_tariff_landing.name }}</span>
                        <span class="small text-secondary ms-2">только админы бота · без оплаты · без лимита срока</span>
                    </div>
                    <a href="{{ url_for('tariffs.tariff_editor_page', tariff_id=admin_tariff_landing.id, kind='vpn') }}" class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-pencil-square"></i> Изменить
                    </a>
                </div>
            </div>
            {% endif %}
            <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3">
                {% for card in tariff_payment_cards_vpn %}
                <div class="col">
                    <div class="card h-100 tariff-pay-card bg-dark text-white border-2" style="border-color: {{ card.accent }} !important;">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                                <div class="d-flex align-items-center gap-2 min-w-0">
                                    <i class="bi {{ card.icon }} fs-5 flex-shrink-0" style="color: {{ card.accent }};"></i>
                                    <span class="fw-semibold text-truncate">{{ card.title }}</span>
                                </div>
                                <span class="badge rounded-pill flex-shrink-0" style="background: {{ card.accent }};">{{ card.count }}</span>
                            </div>
                            <p class="small text-secondary flex-grow-1 mb-3">{{ card.subtitle }}</p>
                            <div class="d-flex flex-wrap gap-2 mt-auto">
                                <a href="{{ url_for('tariffs.tariffs_list', method=card.key, kind='vpn') }}" class="btn btn-sm text-white border-0"
                                   style="background: {{ card.accent }};">Открыть</a>
                                <a href="{{ url_for('tariffs.tariff_editor_new', method=card.key, kind='vpn') }}" class="btn btn-sm btn-outline-light"
                                   style="border-color: {{ card.accent }}; color: {{ card.accent }};">
                                    <i class="bi bi-plus-lg"></i> Добавить
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </section>

        <section id="tariffs-proxy" class="tariffs-landing-half tariffs-landing-half--proxy" aria-label="Прокси">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-link-45deg fs-4 text-success"></i>
                    <span class="fw-semibold text-white">Прокси</span>
                </div>
                {% if tariff_payment_cards_proxy and enabled_payment_keys is defined and enabled_payment_keys %}
                <a href="{{ url_for('tariffs.tariff_editor_new', method=tariff_payment_cards_proxy[0].key, kind='proxy') }}" class="btn btn-success btn-sm">
                    <i class="bi bi-plus-lg me-1"></i>Добавить тариф
                </a>
                {% endif %}
            </div>
            {% if admin_tariff_landing %}
            <div class="card border-danger border-2 bg-dark text-white mb-3">
                <div class="card-body py-2 px-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div>
                        <span class="badge bg-danger me-2">Админ</span>
                        <span class="fw-semibold">{{ admin_tariff_landing.name }}</span>
                        <span class="small text-secondary ms-2">только админы бота · без оплаты · без лимита срока</span>
                    </div>
                    <a href="{{ url_for('tariffs.tariff_editor_page', tariff_id=admin_tariff_landing.id, kind='proxy') }}" class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-pencil-square"></i> Изменить
                    </a>
                </div>
            </div>
            {% endif %}
            <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3">
                {% for card in tariff_payment_cards_proxy %}
                <div class="col">
                    <div class="card h-100 tariff-pay-card bg-dark text-white border-2" style="border-color: {{ card.accent }} !important;">
                        <div class="card-body d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                                <div class="d-flex align-items-center gap-2 min-w-0">
                                    <i class="bi {{ card.icon }} fs-5 flex-shrink-0" style="color: {{ card.accent }};"></i>
                                    <span class="fw-semibold text-truncate">{{ card.title }}</span>
                                </div>
                                <span class="badge rounded-pill flex-shrink-0" style="background: {{ card.accent }};">{{ card.count }}</span>
                            </div>
                            <p class="small text-secondary flex-grow-1 mb-3">{{ card.subtitle }}</p>
                            <div class="d-flex flex-wrap gap-2 mt-auto">
                                <a href="{{ url_for('tariffs.tariffs_list', method=card.key, kind='proxy') }}" class="btn btn-sm text-white border-0"
                                   style="background: {{ card.accent }};">Открыть</a>
                                <a href="{{ url_for('tariffs.tariff_editor_new', method=card.key, kind='proxy') }}" class="btn btn-sm btn-outline-light"
                                   style="border-color: {{ card.accent }}; color: {{ card.accent }};">
                                    <i class="bi bi-plus-lg"></i> Добавить
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </section>

    </div>
    <p class="small text-secondary mb-0">Сверху — тарифы VPN, снизу — прокси. Счётчики на карточках считают только тарифы соответствующего типа. При первом включении способа оплаты создаются стандартные тарифы на 5, 30, 60 и 90 дней.</p>
    {% endif %}
    {% endif %}
</div>

<!-- Модальное окно удаления -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Подтверждение удаления</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Вы действительно хотите удалить этот тариф?</p>
                <p class="mb-0"><strong>Тариф:</strong> <span id="deleteTariffName"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="bi bi-trash"></i> Удалить
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    $(document).on('click', '.toggle-enable-btn', async function() {
        const tariffId = $(this).data('id');
        try {
            const response = await fetch(`/admin/tariffs/toggle/${tariffId}`, { method: 'POST' });
            if (!response.ok) throw new Error('toggle failed');
            window.location.reload();
        } catch (error) {
            console.error('Ошибка:', error);
            alert('Не удалось изменить статус тарифа');
        }
    });

    $(document).on('click', '.delete-btn', function() {
        const tariffId = $(this).data('id');
        const tariffName = $(this).data('name') || $(this).closest('tr').find('td:eq(1)').text();
        $('#deleteTariffName').text(tariffName);
        $('#confirmDeleteBtn').data('id', tariffId);
        new bootstrap.Modal(document.getElementById('deleteModal')).show();
    });

    $('#confirmDeleteBtn').click(async function() {
        const tariffId = $(this).data('id');
        try {
            const response = await fetch(`/admin/tariffs/delete/${tariffId}`, { method: 'POST' });
            if (!response.ok) throw new Error('Ошибка при удалении');
            bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
            window.location.reload();
        } catch (error) {
            console.error('Ошибка:', error);
            alert('Произошла ошибка при удалении тарифа');
        }
    });
});
</script>
{% endblock %}