{% extends "base.html" %}

{% block title %}Настройка подписки{% endblock %}
{% block title_header %}Настройка подписки{% endblock %}

{% block content %}
<style>
  .sub-set-card {
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: rgba(15, 23, 42, 0.75);
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .sub-set-title {
    font-size: 1rem;
    font-weight: 650;
    color: #e2e8f0;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sub-field { margin-bottom: 12px; }
  .sub-field:last-child { margin-bottom: 0; }
  .sub-field label { font-size: 13px; color: #cbd5e1; margin-bottom: 4px; display: block; }
  .sub-field .tech-key {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: #f87171;
    margin-top: 4px;
  }
  .sub-field input[type="text"],
  .sub-field input[type="number"] {
    width: 100%;
    max-width: 100%;
  }
  .sub-field textarea {
    width: 100%;
    min-height: 2.5rem;
    field-sizing: content;
    resize: vertical;
  }
  .announce-counter { font-size: 11px; color: #64748b; text-align: right; margin-top: 4px; }
</style>

<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
    <p class="text-slate-400 text-sm mb-0">
        Ссылки на приложения и параметры для клиентов (как в 3XUIStore). Хранятся в
        <code class="text-sky-300">payment_settings</code>.
    </p>
    <a href="{{ url_for('settings.settings_list', section='basic') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> К основным настройкам
    </a>
</div>

{% for grp in subscription_groups %}
<div class="sub-set-card">
    <h2 class="sub-set-title">
        <i class="bi {{ grp.icon }} text-sky-400"></i>
        {{ grp.title }}
    </h2>
    {% for f in grp.fields %}
    {% set val = payment_settings.get(f.key, '') %}
    <div class="sub-field">
        <label for="f-{{ f.key }}">{{ f.label }}</label>
        {% if f.multiline %}
        {% set lines = (val or '').count('\n') + 1 %}
        <textarea class="form-control bg-slate-950 border-slate-600 text-white text-sm"
                  id="f-{{ f.key }}"
                  data-sub-key="{{ f.key }}"
                  maxlength="{{ f.max_len or 200 }}"
                  rows="{{ [lines, 2]|max }}">{{ val }}</textarea>
        {% if f.key == 'announce_text' %}
        <div class="announce-counter"><span id="announceCount">0</span> / {{ f.max_len or 200 }}</div>
        {% endif %}
        {% elif f.number %}
        <input type="number" min="0" step="1" class="form-control bg-slate-950 border-slate-600 text-white"
               id="f-{{ f.key }}" data-sub-key="{{ f.key }}" value="{{ val }}" placeholder="например 24">
        {% else %}
        <input type="text" class="form-control bg-slate-950 border-slate-600 text-white"
               id="f-{{ f.key }}" data-sub-key="{{ f.key }}" value="{{ val }}" autocomplete="off">
        {% endif %}
        <div class="tech-key">{{ f.key }}</div>
    </div>
    {% endfor %}
</div>
{% endfor %}

<div class="d-flex justify-content-end gap-2 pb-4">
    <button type="button" class="btn btn-primary" id="subscriptionSaveBtn">
        <i class="bi bi-check2-circle me-1"></i> Сохранить настройки
    </button>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    const announce = document.querySelector('[data-sub-key="announce_text"]');
    const counter = document.getElementById('announceCount');
    function syncAnnounce() {
        if (!announce || !counter) return;
        counter.textContent = (announce.value || '').length;
    }
    if (announce) {
        announce.addEventListener('input', syncAnnounce);
        syncAnnounce();
    }

    function fitTextareaHeights() {
        document.querySelectorAll('textarea[data-sub-key]').forEach(function(ta) {
            const lines = (ta.value || '').split('\n').length;
            ta.rows = Math.min(Math.max(lines, 2), 16);
        });
    }
    fitTextareaHeights();
    document.querySelectorAll('textarea[data-sub-key]').forEach(function(ta) {
        ta.addEventListener('input', fitTextareaHeights);
    });

    document.getElementById('subscriptionSaveBtn').addEventListener('click', async function() {
        const body = {};
        document.querySelectorAll('[data-sub-key]').forEach(function(el) {
            body[el.getAttribute('data-sub-key')] = el.value;
        });
        try {
            const res = await fetch('{{ url_for("settings.edit_subscription_client_settings") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(body)
            });
            const data = await res.json();
            if (!res.ok || data.error) throw new Error(data.error || res.statusText);
            alert('Сохранено');
            window.location.reload();
        } catch (e) {
            alert('Ошибка: ' + e.message);
        }
    });
})();
</script>
{% endblock %}