{% extends spa_base or "base.html"%}
{% block title %}{{ 'Editar' if plan else 'Adicionar' }} Plano - Admin{% endblock %}
{% block extra_head %}
<style>
    .form-page { max-width: 600px; }
    .form-page h1 { font-size: 1.8em; font-weight: 700; color: var(--text-primary); margin-bottom: 24px; }
    .form-card {
        background: var(--bg-card); border-radius: var(--radius-lg);
        border: 1px solid var(--border); padding: 32px;
    }
    .form-group { margin-bottom: 20px; }
    .form-group label {
        display: block; color: var(--text-secondary); font-size: 0.85em;
        font-weight: 600; margin-bottom: 8px;
    }
    .form-group input, .form-group textarea {
        width: 100%; background: var(--bg-surface); border: 1px solid var(--border);
        color: var(--text-primary); padding: 12px 16px; border-radius: var(--radius-md);
        font-size: 0.9em; outline: none; transition: var(--transition);
    }
    .form-group input:focus, .form-group textarea:focus { border-color: var(--text-secondary); }
    .form-group textarea { min-height: 100px; resize: vertical; font-family: inherit; }
    .form-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
    .form-section h3 { font-size: 0.95em; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-check { display: flex; align-items: center; gap: 10px; }
    .form-check input[type="checkbox"] { width: auto; }
    .form-actions { display: flex; gap: 12px; margin-top: 24px; }
    @media (max-width: 768px) {
        .form-page {
            max-width: 100%;
        }
        .form-page h1 {
            font-size: 1.3em;
        }
        .form-card {
            padding: 20px;
        }
        .form-group input, .form-group textarea {
            padding: 10px 12px;
            font-size: 0.85em;
        }
        .form-row {
            grid-template-columns: 1fr;
        }
        .form-actions {
            flex-direction: column;
        }
        .form-actions .btn {
            width: 100%;
            justify-content: center;
        }
    }
    @media (max-width: 480px) {
        .form-page h1 {
            font-size: 1.1em;
        }
        .form-card {
            padding: 16px;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="form-page">
    <a href="{{ url_for('admin_planos') }}" style="color:var(--text-muted); font-size:0.9em; text-decoration:none;">← Voltar para Planos</a>
    <h1>{{ 'Editar' if plan else 'Adicionar' }} Plano</h1>
    <div class="form-card">
        <form method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="form-row">
                <div class="form-group">
                    <label>Chave (ID único)</label>
                    <input type="text" name="key" value="{{ plan.key if plan else '' }}" required placeholder="ex: mensal">
                </div>
                <div class="form-group">
                    <label>Nome</label>
                    <input type="text" name="name" value="{{ plan.name if plan else '' }}" required placeholder="Plano Mensal">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Preço (R$)</label>
                    <input type="number" name="price" value="{{ plan.price if plan else '' }}" step="0.01" min="0" required>
                </div>
                <div class="form-group">
                    <label>Dias de acesso</label>
                    <input type="number" name="days" value="{{ plan.days if plan else 30 }}" min="1" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Ordem de exibição</label>
                    <input type="number" name="sort_order" value="{{ plan.sort_order if plan else 0 }}" min="0">
                </div>
                <div class="form-group">
                    <label>&nbsp;</label>
                    <div class="form-check" style="height:46px; align-items:center;">
                        <input type="checkbox" name="is_active" id="is_active" {{ 'checked' if not plan or plan.is_active else '' }}>
                        <label for="is_active" style="margin-bottom:0; cursor:pointer;">Plano ativo</label>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Preço promocional (R$)</label>
                    <input type="number" name="promotion_price" value="{{ plan.promotion_price if plan and plan.promotion_price is not none else '' }}" step="0.01" min="0" placeholder="Opcional">
                </div>
                <div class="form-group">
                    <label>Validade da promoção</label>
                    <input type="datetime-local" name="promotion_until" value="{{ plan.promotion_until.strftime('%Y-%m-%dT%H:%M') if plan and plan.promotion_until else '' }}">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Nome da promoção</label>
                    <input type="text" name="promotion_label" value="{{ plan.promotion_label if plan else '' }}" placeholder="Ex.: Oferta de lançamento">
                </div>
                <div class="form-group">
                    <label>&nbsp;</label>
                    <div class="form-check" style="height:46px; align-items:center;">
                        <input type="checkbox" name="promotion_enabled" id="promotion_enabled" {{ 'checked' if plan and plan.promotion_enabled else '' }}>
                        <label for="promotion_enabled" style="margin-bottom:0; cursor:pointer;">Promoção ativa</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Descrição (aparece no card do plano)</label>
                <textarea name="description" rows="2" placeholder="Troço Play - Plano Mensal 30 dias">{{ plan.description if plan else '' }}</textarea>
            </div>
            <div class="form-group">
                <label>Benefícios (um por linha — aparece como lista no card)</label>
                <textarea name="benefits" rows="6" placeholder="Acesso ilimitado ao catálogo&#10;Filmes e séries por temporadas&#10;Canais ao vivo, favoritos e histórico&#10;1 dispositivo por vez">{{ plan.benefits if plan else '' }}</textarea>
                <div style="font-size:0.78em; color:var(--text-muted); margin-top:4px;">Cada linha vira um item da lista de benefícios no card do plano.</div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn">{{ 'Salvar Alterações' if plan else 'Criar Plano' }}</button>
                <a href="{{ url_for('admin_planos') }}" class="btn btn-outline">Cancelar</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}