{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_modify %}

{% block title %}Aplicar Voucher(s) a Modelo{% endblock %}

{% block extrahead %}
{{ block.super }}
<style>
    .form-row {
        margin-bottom: 15px;
    }
    .form-row label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    .form-row select, .form-row textarea {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .vouchers-list {
        background: #f9f9f9;
        padding: 10px;
        border-radius: 4px;
        margin-bottom: 15px;
    }
    .voucher-item {
        padding: 5px 0;
        border-bottom: 1px solid #eee;
    }
    .voucher-item:last-child {
        border-bottom: none;
    }
    .voucher-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .voucher-details {
        font-size: 0.9em;
        color: #666;
    }
</style>
{% endblock %}

{% block content %}
<h1>{{ title }}</h1>

<div class="vouchers-list">
    <h3>Voucher(s) Selecionado(s) ({{ queryset|length }}):</h3>
    {% for voucher in queryset %}
    <div class="voucher-item">
        <div class="voucher-info">
            <div>
                <strong>{{ voucher.codigo }}</strong> - {{ voucher.nome }}
                <br><span class="voucher-details">
                    Plano: {{ voucher.plano.nome }} - 
                    {{ voucher.get_tipo_desconto_display }} - 
                    {% if voucher.tipo_desconto == 'percentual' %}
                        {{ voucher.percentual_desconto }}%
                    {% else %}
                        R$ {{ voucher.valor_desconto }}
                    {% endif %}
                </span>
            </div>
            <div>
                <span class="badge {% if voucher.esta_disponivel %}bg-success{% else %}bg-danger{% endif %}">
                    {% if voucher.esta_disponivel %}Disponível{% else %}Indisponível{% endif %}
                </span>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<form method="post">
    {% csrf_token %}
    <input type="hidden" name="post" value="yes">
    
    <div class="form-row">
        <label for="modelo_id">Selecione a Modelo:</label>
        <select name="modelo_id" id="modelo_id" required>
            <option value="">-- Selecione uma modelo --</option>
            {% for modelo in modelos %}
            <option value="{{ modelo.id }}">
                {{ modelo.nome_exibicao }} - {{ modelo.cidade }}, {{ modelo.estado }}
                {% if modelo.plano_ativo %}
                    (Plano Atual: {{ modelo.plano_ativo.nome }})
                {% endif %}
            </option>
            {% endfor %}
        </select>
    </div>
    
    <div class="form-row">
        <label for="observacoes">Observações (opcional):</label>
        <textarea name="observacoes" id="observacoes" rows="3" 
                  placeholder="Ex: Voucher aplicado como cortesia, promoção especial, etc."></textarea>
    </div>
    
    <div class="submit-row">
        <input type="submit" value="Aplicar Voucher(s)" class="default" style="background: #417690;">
        <a href="{% url 'admin:payments_voucher_changelist' %}" class="button">Cancelar</a>
    </div>
</form>

<div style="margin-top: 20px; padding: 15px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px;">
    <h4>⚠️ Atenção:</h4>
    <p>Ao aplicar voucher(s) a uma modelo:</p>
    <ul>
        <li>O status da modelo será alterado para "Ativo"</li>
        <li>O pagamento será marcado como aprovado</li>
        <li>O plano será ativado automaticamente</li>
        <li>Um log de plano ativo será criado</li>
        <li>O uso do voucher será registrado</li>
        <li>Se a modelo já tiver um plano ativo, ele será substituído</li>
    </ul>
</div>

<div style="margin-top: 15px; padding: 15px; background: #d1ecf1; border: 1px solid #bee5eb; border-radius: 4px;">
    <h4>ℹ️ Informações:</h4>
    <p>Esta ação simula o uso completo do voucher, incluindo:</p>
    <ul>
        <li>Ativação automática do plano</li>
        <li>Registro do uso do voucher</li>
        <li>Atualização do status da modelo</li>
        <li>Criação de logs de auditoria</li>
    </ul>
</div>
{% endblock %}