{% extends spa_base or "base.html"%}
{% block title %}Admin - WhatsApp{% endblock %}
{% block extra_head %}
<style>
    .admin-wa { max-width: 600px; margin: 0 auto; }
    .wa-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
    .wa-header h1 { font-size: 1.5em; font-weight: 700; color: var(--text-primary); }
    .wa-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--border); }
    .wa-card h2 { font-size: 1em; color: var(--text-primary); margin-bottom: 6px; }
    .wa-card .desc { color: var(--text-muted); font-size: 0.85em; margin-bottom: 20px; }
    .wa-form-group { margin-bottom: 20px; }
    .wa-form-group label { display: block; font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600; }
    .wa-form-group input { width: 100%; padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.95em; }
    .wa-form-group input:focus { outline: none; border-color: var(--green); }
    .wa-form-group .hint { font-size: 0.75em; color: var(--text-muted); margin-top: 6px; }
    .wa-save { background: var(--green); color: #000; font-weight: 700; width: 100%; justify-content: center; padding: 14px; }
</style>
{% endblock %}
{% block content %}
<div class="admin-wa">
    <div class="wa-header">
        <h1>💬 WhatsApp</h1>
        <a href="{{ url_for('admin_panel') }}" class="btn btn-outline btn-sm">&larr; Admin</a>
    </div>

    <div class="wa-card">
        <h2>Numeros de Contato</h2>
        <div class="desc">Configure os numeros usados no site. Formato: codigo do pais + DDD + numero (apenas digitos).</div>
        <form method="POST" class="wa-form">
            <div class="wa-form-group">
                <label>WhatsApp de Pagamento</label>
                <input type="tel" name="payment_whatsapp" required value="{{ settings.get('payment_whatsapp', '') }}" placeholder="5584981518164">
                <div class="hint">Usado nos botoes "Assinar via WhatsApp" (recebimento de pagamento).</div>
            </div>
            <div class="wa-form-group">
                <label>WhatsApp de Suporte</label>
                <input type="tel" name="support_whatsapp" required value="{{ settings.get('support_whatsapp', '') }}" placeholder="5584981518164">
                <div class="hint">Usado nos botoes de Suporte e no botao flutuante do site.</div>
            </div>
            <button type="submit" class="btn wa-save">Salvar Numeros</button>
        </form>
    </div>
</div>
{% endblock %}