{% extends spa_base or "base.html"%}
{% block title %}Gerenciar Planos - Admin{% endblock %}
{% block extra_head %}
<style>
    .admin-header { margin-bottom: 32px; }
    .admin-header h1 { font-size: 1.8em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .admin-header p { color: var(--text-muted); font-size: 0.95em; }
    .admin-section {
        background: var(--bg-card); border-radius: var(--radius-lg);
        border: 1px solid var(--border); margin-bottom: 24px; overflow: hidden;
    }
    .section-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px 24px; border-bottom: 1px solid var(--border);
    }
    .section-header h2 { font-size: 1em; font-weight: 600; color: var(--text-primary); }
    .admin-table { width: 100%; border-collapse: collapse; }
    .admin-table th {
        background: var(--bg-surface); color: var(--text-muted); padding: 12px 20px;
        text-align: left; font-size: 0.75em; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
    }
    .admin-table td {
        padding: 14px 20px; border-bottom: 1px solid var(--border);
        font-size: 0.85em; color: var(--text-secondary);
    }
    .admin-table tr:last-child td { border-bottom: none; }
    .admin-table tr:hover td { background: rgba(255,255,255,0.02); }
    .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 0.75em; font-weight: 600; }
    .badge-success { background: rgba(70,211,105,0.1); color: var(--green); }
    .badge-danger { background: rgba(229,9,20,0.1); color: var(--primary); }
    .action-btns { display: flex; gap: 6px; flex-wrap: wrap; }
    .action-btn {
        display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
        border-radius: var(--radius-sm); font-size: 0.75em; font-weight: 500;
        text-decoration: none; transition: var(--transition); border: 1px solid transparent;
    }
    .action-btn.green { background: rgba(70,211,105,0.1); color: var(--green); border-color: rgba(70,211,105,0.2); }
    .action-btn.red { background: rgba(229,9,20,0.1); color: var(--primary); border-color: rgba(229,9,20,0.2); }
    .action-btn.blue { background: rgba(66,133,244,0.1); color: #4285f4; border-color: rgba(66,133,244,0.2); }
    .action-btn:hover { filter: brightness(1.2); }
    .empty-state { padding: 40px; text-align: center; color: var(--text-muted); font-size: 0.9em; }
    @media (max-width: 768px) {
        .admin-header h1 {
            font-size: 1.4em;
        }
        .admin-table {
            font-size: 0.75em;
            min-width: 600px;
        }
        .admin-table th, .admin-table td {
            padding: 10px 12px;
        }
        .admin-section {
            margin-bottom: 20px;
        }
        .section-header {
            padding: 16px 20px;
        }
        .action-btns {
            gap: 4px;
        }
        .action-btn {
            padding: 5px 10px;
            font-size: 0.7em;
        }
    }
    @media (max-width: 480px) {
        .admin-header h1 {
            font-size: 1.2em;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="admin-header">
    <h1>Gerenciar Planos</h1>
    <p>Adicione, edite ou remova planos de assinatura</p>
</div>

<div style="margin-bottom: 20px;">
    <a href="{{ url_for('admin_plan_add') }}" class="btn">+ Adicionar Plano</a>
</div>

<div class="admin-section">
    <div class="section-header">
        <h2>💎 Planos</h2>
    </div>
    <div style="overflow-x:auto;">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Ordem</th>
                    <th>Chave</th>
                    <th>Nome</th>
                    <th>Preço</th>
                    <th>Promoção</th>
                    <th>Dias</th>
                    <th>Status</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                {% for p in plans %}
                <tr>
                    <td>{{ p.sort_order }}</td>
                    <td style="color:var(--text-primary); font-weight:500;">{{ p.key }}</td>
                    <td style="color:var(--text-primary); font-weight:500;">{{ p.name }}</td>
                    <td style="font-weight:600;">{% if p.promotion_enabled and p.promotion_price is not none %}<span style="text-decoration:line-through;color:var(--text-muted);font-size:.8em;">R$ {{ "%.2f"|format(p.price) }}</span><br>R$ {{ "%.2f"|format(p.promotion_price) }}{% else %}R$ {{ "%.2f"|format(p.price) }}{% endif %}</td>
                    <td>{% if p.promotion_enabled and p.promotion_price is not none %}<span class="badge badge-success">{{ p.promotion_label or 'Ativa' }}</span>{% if p.promotion_until %}<div style="font-size:.7em;color:var(--text-muted);">até {{ p.promotion_until|brdatetime('%d/%m/%Y %H:%M') }}</div>{% endif %}{% else %}<span style="color:var(--text-muted);">-</span>{% endif %}</td>
                    <td>{{ p.days }} dias</td>
                    <td>
                        {% if p.is_active %}
                        <span class="badge badge-success">Ativo</span>
                        {% else %}
                        <span class="badge badge-danger">Inativo</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ url_for('admin_plan_edit', plan_id=p.id) }}" class="action-btn blue">Editar</a>
                            <a href="{{ url_for('admin_plan_toggle', plan_id=p.id) }}" class="action-btn {% if p.is_active %}red{% else %}green{% endif %}">
                                {{ 'Desativar' if p.is_active else 'Ativar' }}
                            </a>
                            <form method="POST" action="{{ url_for('admin_plan_delete', plan_id=p.id) }}" style="display:inline;" onsubmit="return confirm('Excluir este plano?')">
                                <button type="submit" class="action-btn red">Excluir</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="8" class="empty-state">Nenhum plano cadastrado.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}