{% extends 'base.html' %}

{% block title %}Taxas da Maquininha - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.taxas-page .page-heading { display: flex; align-items: center; gap: .7rem; }
.taxas-page .page-heading > i { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .7rem; background: #e4effc; color: #245e98; font-size: 1.35rem; }
.taxas-page .page-heading small { color: #59697a; }

.taxas-page .rapido-card { border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.taxas-page .rapido-head { display: flex; align-items: center; gap: .6rem; color: #164a7b; font-weight: 700; }
.taxas-page .rapido-head i { color: #1861c5; }
.taxas-page .grid-taxas { min-width: 780px; }

/* Acordeão de bandeiras */
.taxas-page .accordion-item { border: none; border-radius: 14px !important; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; margin-bottom: .8rem; }
.taxas-page .accordion-button { background: #fff; font-weight: 700; color: #212529; padding: .9rem 1.1rem; box-shadow: none !important; }
.taxas-page .accordion-button:not(.collapsed) { background: #f2f7ff; color: #0f4a9e; }
.taxas-page .accordion-button:focus { box-shadow: none; }
    .bandeira-selo {
        display: inline-grid; place-items: center;
        width: 2.4rem; height: 2.4rem; border-radius: .65rem;
        font-size: 1.1rem; margin-right: .6rem; flex-shrink: 0;
    }
    /* Cor por bandeira */
    .b-visa       { background: #e3f2fd; color: #1565c0; }
    .b-mastercard { background: #fff3e0; color: #e65100; }
    .b-elo        { background: #eceff1; color: #37474f; }
    .b-hipercard  { background: #fce4ec; color: #c2185b; }
    .b-amex       { background: #e0f7fa; color: #00838f; }
    .b-diners     { background: #e8eaf6; color: #283593; }
    .b-discover   { background: #fff8e1; color: #ef6c00; }
    .b-jcb        { background: #e0f2f1; color: #00695c; }
    .b-unionpay   { background: #ffebee; color: #c62828; }
    .b-aura       { background: #f3e5f5; color: #7b1fa2; }
    .b-cabal      { background: #eff3ff; color: #1a55a5; }
    .b-sorocred   { background: #efebe9; color: #4e342e; }
    .b-credz      { background: #fafafa; color: #1565c0; }
    .b-banricompras { background: #e1f5fe; color: #0277bd; }
    .b-vale       { background: #e8f5e9; color: #2e7d32; }
    .b-maxxi      { background: #ede7f6; color: #4527a0; }
    .b-outros     { background: #ede7f6; color: #5e35b1; }

    .accordion-button .bandeira-nome { color: inherit; }
    .accordion-button:not(.collapsed) .bandeira-selo { box-shadow: 0 0 0 3px rgba(24, 100, 232, .18); }
    .taxas-page .bandeira-cartao-header .bandeira-nome { font-weight: 700; }

    /* Selo/borda colorida de cada card de bandeira */
    .lb-visa       { border-left: 6px solid #1565c0 !important; }
    .lb-mastercard { border-left: 6px solid #e65100 !important; }
    .lb-elo        { border-left: 6px solid #37474f !important; }
    .lb-hipercard  { border-left: 6px solid #c2185b !important; }
    .lb-amex       { border-left: 6px solid #00838f !important; }
    .lb-diners     { border-left: 6px solid #283593 !important; }
    .lb-discover   { border-left: 6px solid #ef6c00 !important; }
    .lb-jcb        { border-left: 6px solid #00695c !important; }
    .lb-unionpay   { border-left: 6px solid #c62828 !important; }
    .lb-aura       { border-left: 6px solid #7b1fa2 !important; }
    .lb-cabal      { border-left: 6px solid #1a55a5 !important; }
    .lb-sorocred   { border-left: 6px solid #4e342e !important; }
    .lb-credz      { border-left: 6px solid #1565c0 !important; }
    .lb-banricompras { border-left: 6px solid #0277bd !important; }
    .lb-vale       { border-left: 6px solid #2e7d32 !important; }
    .lb-maxxi      { border-left: 6px solid #4527a0 !important; }
    .lb-outros     { border-left: 6px solid #5e35b1 !important; }

    .head-visa,       .accordion-button:not(.collapsed).head-visa       { background: #e3f2fd; color: #0f4a9e; }
    .head-mastercard, .accordion-button:not(.collapsed).head-mastercard { background: #fff3e0; color: #a63d00; }
    .head-elo,        .accordion-button:not(.collapsed).head-elo        { background: #eceff1; color: #263238; }
    .head-hipercard,  .accordion-button:not(.collapsed).head-hipercard  { background: #fce4ec; color: #a6124d; }
    .head-amex,       .accordion-button:not(.collapsed).head-amex       { background: #e0f7fa; color: #00595f; }
    .head-diners,     .accordion-button:not(.collapsed).head-diners     { background: #e8eaf6; color: #1a237e; }
    .head-discover,   .accordion-button:not(.collapsed).head-discover   { background: #fff8e1; color: #a04900; }
    .head-jcb,        .accordion-button:not(.collapsed).head-jcb        { background: #e0f2f1; color: #004d40; }
    .head-unionpay,   .accordion-button:not(.collapsed).head-unionpay   { background: #ffebee; color: #8e0000; }
    .head-aura,       .accordion-button:not(.collapsed).head-aura       { background: #f3e5f5; color: #4a0072; }
    .head-cabal,      .accordion-button:not(.collapsed).head-cabal      { background: #eff3ff; color: #123c7a; }
    .head-sorocred,   .accordion-button:not(.collapsed).head-sorocred   { background: #efebe9; color: #3e2723; }
    .head-credz,      .accordion-button:not(.collapsed).head-credz      { background: #fafafa; color: #0d47a1; }
    .head-banricompras, .accordion-button:not(.collapsed).head-banricompras { background: #e1f5fe; color: #01579b; }
    .head-vale,       .accordion-button:not(.collapsed).head-vale       { background: #e8f5e9; color: #1b5e20; }
    .head-maxxi,      .accordion-button:not(.collapsed).head-maxxi      { background: #ede7f6; color: #311b92; }
    .head-outros,     .accordion-button:not(.collapsed).head-outros     { background: #ede7f6; color: #482c94; }
    .taxas-page .accordion-button.head-visa,
    .taxas-page .accordion-button.head-mastercard,
    .taxas-page .accordion-button.head-elo,
    .taxas-page .accordion-button.head-hipercard,
    .taxas-page .accordion-button.head-amex,
    .taxas-page .accordion-button.head-outros,
    .taxas-page .accordion-button[class*="head-"] {
        border-radius: 14px 14px 0 0;
    }
    .taxas-page .accordion-button.head-visa .bandeira-nome,
    .taxas-page .accordion-button.head-mastercard .bandeira-nome,
    .taxas-page .accordion-button.head-elo .bandeira-nome,
    .taxas-page .accordion-button.head-hipercard .bandeira-nome,
    .taxas-page .accordion-button.head-amex .bandeira-nome,
    .taxas-page .accordion-button[class*="head-"] .bandeira-nome { color: inherit; }

    /* Inputs do cadastro rápido: vermelho = obrigatório / verde = preenchido */
    .taxas-page .entrada-taxa.obrigatoria { border-color: #b02a37 !important; background: #fdecee !important; box-shadow: 0 0 0 .22rem rgba(176, 42, 55, .16); }
    .taxas-page .entrada-taxa.preenchida  { border-color: #1e7e34 !important; background: #eaf8ef !important; color: #145c29; font-weight: 700; box-shadow: none; }
    .taxas-page .entrada-taxa { transition: border-color .18s, background .18s, box-shadow .18s; }
.taxas-page .bandeira-resumo { color: #8a97a8; font-size: .82rem; font-weight: 500; margin-left: .8rem; }
.taxas-page .accordion-body { padding: .4rem 1.1rem 1.1rem; }

.taxas-page .secao-tipo { margin-top: .9rem; }
.taxas-page .secao-tipo:first-child { margin-top: .4rem; }
.taxas-page .tipo-rotulo { font-weight: 700; color: #34475a; font-size: .9rem; display: flex; align-items: center; gap: .45rem; }
.taxas-page .tipo-credito { color: #1565c0; }
.taxas-page .tipo-debito { color: #1e7e34; }

/* Destaque visual quando a bandeira tem crédito E débito */
.taxas-page .secao-tipo.destaque-tipo {
    border-radius: 12px;
    padding: .7rem .9rem .9rem;
    margin-top: .7rem;
}
.taxas-page .secao-tipo.destaque-tipo:first-child { margin-top: .4rem; }
.taxas-page .secao-tipo.destaque-credito { background: #eef5ff; border: 1px solid #c7dcf7; box-shadow: inset 4px 0 0 #1565c0; }
.taxas-page .secao-tipo.destaque-debito  { background: #eef9f0; border: 1px solid #c6e6cd; box-shadow: inset 4px 0 0 #1e7e34; }
.taxas-page .secao-tipo.destaque-tipo .tipo-rotulo { font-size: .95rem; }

/* Grade de taxas como chips */
.taxas-page .grade-taxas { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .6rem; }
.taxas-page .chip-taxa {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid #e2e8f0; border-radius: 10px;
    background: #f8fafc; padding: .45rem .6rem .45rem .75rem;
}
.taxas-page .chip-parcela { font-weight: 600; color: #526174; font-size: .85rem; }
.taxas-page .chip-valor { font-weight: 700; font-size: .95rem; color: #0f4a9e; }
.taxas-page .chip-acao {
    border: none; background: none; color: #8a97a8;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; border-radius: 7px; padding: 0;
}
.taxas-page .chip-acao:hover { background: #e9f1fa; color: #1861c5; }
.taxas-page .chip-acao.danger:hover { background: #fbe9ec; color: #b02a37; }
.taxas-page .badge-inativa { background: #eef1f5; color: #8a97a8; }
.taxas-page .chip-taxa.inativa { opacity: .6; }
.taxas-page .vazio-msg { color: #8a97a8; font-size: .86rem; }
</style>
{% endblock %}

{% block content %}
<div class="taxas-page">
    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-end mb-3">
        <div class="page-heading">
            <i class="bi bi-credit-card-2-front"></i>
            <div>
                <h2 class="mb-0">Taxas da Maquininha</h2>
                <small>Cadastre a taxa por bandeira. Nas vendas, o desconto é calculado automaticamente.</small>
            </div>
        </div>
        <a href="{% url 'relatorios' %}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> Relatórios</a>
    </div>

    <!-- ══ Lembrete sobre atualização de taxas ══ -->
    <div class="alert alert-info d-flex align-items-start gap-2 py-2 px-3" role="alert" style="border-radius: 12px;">
        <i class="bi bi-info-circle fs-5 mt-1"></i>
        <div>
            <strong>Lembrete:</strong> ao salvar ou alterar uma taxa, o novo percentual vale <strong>somente a partir de agora</strong>.
            As vendas e recebimentos antigos continuam com a taxa que estava registrada no momento da venda — nada muda nos relatórios anteriores.
        </div>
    </div>

    <!-- ══ Cadastro rápido ══ -->
    <div class="card rapido-card mb-4">
        <div class="card-body">
            <div class="rapido-head mb-3"><i class="bi bi-lightning-charge"></i> Cadastro Rápido
                <small class="text-muted fw-normal ms-auto d-none d-lg-block">Preencha só as parcelas que a maquininha informa. Já existentes são atualizadas.</small>
            </div>
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="modo" value="rapido">
                <div class="row g-3 align-items-end">
                    <div class="col-6 col-lg-2">
                        <label class="form-label">Bandeira</label>
                        <select name="bandeira_rapida" id="bandeira-rapida" class="form-select" required>
                            <option value="">Selecione...</option>
                            {% for valor, nome in bandeiras_cartao %}
                            <option value="{{ valor }}">{{ nome }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-6 col-lg-2">
                        <label class="form-label">Tipo</label>
                        <select name="tipo_rapido" id="tipo-rapido" class="form-select" required>
                            {% for valor, nome in tipos_cartao %}
                            <option value="{{ valor }}">{{ nome }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-6 col-lg-2">
                        <label class="form-label">Preencher até</label>
                        <select name="parcelas_ate" id="parcelas-ate" class="form-select">
                            {% for parcela in parcelas_rapidas %}
                            <option value="{{ parcela }}" {% if parcela == 12 %}selected{% endif %}>{{ parcela }}x</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-6 col-lg-6 text-lg-end">
                        <button type="submit" class="btn btn-success px-4"><i class="bi bi-check-circle"></i> Salvar Grade</button>
                    </div>
                </div>

                <div id="alerta-taxas-existentes" class="alert alert-warning mt-3 mb-0 d-none" role="alert">
                    <div class="fw-bold"><i class="bi bi-exclamation-triangle"></i> Este cartão já possui taxas informadas!</div>
                    <div id="alerta-taxas-detalhe" class="small mt-1"></div>
                </div>

                <div class="table-responsive mt-3">
                    <table class="table table-sm align-middle mb-0 grid-taxas">
                        <thead>
                            <tr>
                                {% for parcela in parcelas_rapidas %}
                                <th class="text-center">{{ parcela }}x</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                {% for parcela in parcelas_rapidas %}
                                <td>
                                    <input type="number" name="taxa_{{ parcela }}" class="form-control form-control-sm taxa-rapida entrada-taxa" data-parcela="{{ parcela }}" step="0.01" min="0" placeholder="%">
                                </td>
                                {% endfor %}
                            </tr>
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>

    <!-- ══ Taxas por bandeira ══ -->
    <div class="accordion" id="acordeao-bandeiras">
        {% for carte in cartoes_bandeira %}
        {% with bandeira_valor=carte.valor %}
        <div class="accordion-item {% if bandeira_valor %}lb-{{ bandeira_valor|default:'outros' }}{% endif %}">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed head-{{ bandeira_valor }}" type="button" data-bs-toggle="collapse" data-bs-target="#bandeira-{{ bandeira_valor }}">
                    <span class="bandeira-selo b-{{ bandeira_valor }}"><i class="bi bi-credit-card"></i></span>
                    <span class="bandeira-nome">{{ carte.nome }}</span>
                    <span class="bandeira-resumo">
                        {% for tipo in carte.tipos %}
                        {% if tipo == 'credito' %}
                        <span class="badge bg-primary-subtle text-primary-emphasis">Crédito</span>
                        {% else %}
                        <span class="badge bg-success-subtle text-success-emphasis">Débito</span>
                        {% endif %}
                        {% endfor %}
                        {{ carte.taxas|length }} taxa{{ carte.taxas|length|pluralize }} · clique para ver
                    </span>
                </button>
            </h2>
            <div id="bandeira-{{ bandeira_valor }}" class="accordion-collapse collapse" data-bs-parent="#acordeao-bandeiras">
                <div class="accordion-body">
                    {% regroup carte.taxas by tipo as por_tipo %}
                    {% for tipo_grupo in por_tipo %}
                    <div class="secao-tipo {% if por_tipo|length > 1 %}destaque-tipo {% if tipo_grupo.grouper == 'credito' %}destaque-credito{% else %}destaque-debito{% endif %}{% endif %}">
                        <div class="tipo-rotulo {% if tipo_grupo.grouper == 'credito' %}tipo-credito{% else %}tipo-debito{% endif %}">
                            {% if tipo_grupo.grouper == 'credito' %}<i class="bi bi-credit-card-2-front"></i> Crédito <span class="badge bg-primary-subtle text-primary-emphasis">Crédito</span>{% else %}<i class="bi bi-credit-card"></i> Débito <span class="badge bg-success-subtle text-success-emphasis">Débito</span>{% endif %}
                        </div>

                        <div class="grade-taxas">
                            {% for taxa in tipo_grupo.list %}
                            <span class="chip-taxa {% if not taxa.ativa %}inativa{% endif %}">
                                <span class="chip-parcela">{{ taxa.parcelas }}x</span>
                                <span class="chip-valor">{{ taxa.taxa_percentual|floatformat:2 }}%</span>
                                {% if not taxa.ativa %}<span class="badge badge-inativa">Inativa</span>{% endif %}
                                {% if taxa_edicao.id == taxa.id %}
                                <a href="{% url 'taxas_maquininha' %}" class="chip-acao" title="Fechar edição"><i class="bi bi-x-lg"></i></a>
                                {% else %}
                                <a href="{% url 'taxas_maquininha' %}?editar={{ taxa.id }}#bandeira-{{ taxa.bandeira }}" class="chip-acao" title="Editar"><i class="bi bi-pencil"></i></a>
                                {% endif %}
                                <a href="{% url 'alternar_taxa_maquininha' taxa.id %}" class="chip-acao" title="{% if taxa.ativa %}Desativar{% else %}Ativar{% endif %}">
                                    <i class="bi {% if taxa.ativa %}bi-toggle-on{% else %}bi-toggle-off{% endif %}"></i>
                                </a>
                                <form method="post" action="{% url 'apagar_taxa_maquininha' taxa.id %}" onsubmit="return confirm('Apagar esta taxa ({{ taxa.parcelas }}x) de {{ taxa.get_bandeira_display }}?');">
                                    {% csrf_token %}
                                    <button type="submit" class="chip-acao danger" title="Apagar"><i class="bi bi-trash"></i></button>
                                </form>
                            </span>

                            <!-- Formulário de edição inline -->
                            {% if taxa_edicao.id == taxa.id %}
                            <div class="w-100 mb-2"><form method="post" class="card card-body bg-white border shadow-sm" style="max-width: 560px;">
                                {% csrf_token %}
                                <input type="hidden" name="taxa_id" value="{{ taxa_edicao.id }}">
                                <div class="row g-2 align-items-end">
                                    <div class="col-3">
                                        <label class="form-label mb-1">Tipo</label>
                                        {{ form.tipo }}
                                    </div>
                                    <div class="col-3">
                                        <label class="form-label mb-1">Parcelas</label>
                                        {{ form.parcelas }}
                                    </div>
                                    <div class="col-3">
                                        <label class="form-label mb-1">Taxa (%)</label>
                                        {{ form.taxa_percentual }}
                                    </div>
                                    <div class="col-3 text-end">
                                        <div class="form-check mb-1">
                                            {{ form.ativa }}
                                            <label class="form-check-label small" for="{{ form.ativa.id_for_label }}">Ativa</label>
                                        </div>
                                        <button type="submit" class="btn btn-sm btn-success w-100"><i class="bi bi-check-lg"></i> Salvar</button>
                                    </div>
                                </div>
                                {% if form.errors %}<div class="text-danger small mt-2">{{ form.errors }}</div>{% endif %}
                            </form></div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endwith %}
        {% empty %}
        <div class="card rapido-card"><div class="card-body text-center text-muted py-4">
            <i class="bi bi-credit-card d-block fs-2 mb-2"></i> Nenhuma taxa cadastrada ainda. Use o Cadastro Rápido acima.
        </div></div>
        {% endfor %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // abre automaticamente a bandeira em edição
    if (location.search.indexOf('editar=') !== -1) {
        document.querySelector('.accordion-body form')?.closest('.accordion-collapse').classList.add('show');
    }

    // Alerta de taxas já informadas ao escolher bandeira no Cadastro Rápido
    const taxasExistentes = {};
    {% for carte in cartoes_bandeira %}
    taxasExistentes["{{ carte.valor }}"] = {
        nome: "{{ carte.nome|escapejs }}",
        itens: [
            {% for taxa in carte.taxas %}
            { tipo: "{{ taxa.tipo }}", parcelas: {{ taxa.parcelas }}, taxa: "{{ taxa.taxa_percentual|stringformat:'s' }}" }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ]
    };
    {% endfor %}
    const fmt = v => parseFloat(String(v).replace(',', '.')).toFixed(2).replace('.', ',');
    const alertaSel = document.getElementById('alerta-taxas-existentes');
    const alertaDet = document.getElementById('alerta-taxas-detalhe');
    function verificarTaxasExistentes() {
        if (!alertaSel) return;
        const valor = document.getElementById('bandeira-rapida')?.value;
        if (!valor || !taxasExistentes[valor]?.itens?.length) {
            alertaSel.classList.add('d-none');
            return;
        }
        const info = taxasExistentes[valor];
        const porTipo = {};
        info.itens.forEach(t => {
            (porTipo[t.tipo] = porTipo[t.tipo] || []).push(t.parcelas + 'x ' + fmt(t.taxa) + '%');
        });
        let texto = 'Taxas já cadastradas para <strong>' + info.nome + '</strong>: ';
        texto += Object.keys(porTipo).map(tipo =>
            '<span class="fw-bold text-uppercase">' + (tipo === 'credito' ? 'Crédito' : 'Débito') + '</span> — ' + porTipo[tipo].join(', ')
        ).join(' · ');
        texto += '. <span class="fw-bold" style="color:#fff;">Salvar novamente apenas atualiza esses valores.</span>';
        alertaDet.innerHTML = texto;
        alertaSel.classList.remove('d-none');
    }
    document.getElementById('bandeira-rapida')?.addEventListener('change', verificarTaxasExistentes);
    verificarTaxasExistentes();

    // Cadastro rápido: bloqueia parcelas no débito
    const tipoRapido = document.getElementById('tipo-rapido');
    const parcelasAte = document.getElementById('parcelas-ate');
    const taxasRapidas = document.querySelectorAll('.taxa-rapida');

    function ajustarGradeRapida() {
        if (!tipoRapido || !parcelasAte) return;
        if (tipoRapido.value === 'debito') {
            parcelasAte.value = '1';
            parcelasAte.disabled = true;
        } else {
            parcelasAte.disabled = false;
        }
        const limite = tipoRapido.value === 'debito' ? 1 : parseInt(parcelasAte.value || '1', 10);
        const bandeiraOk = document.getElementById('bandeira-rapida')?.value;
        taxasRapidas.forEach(input => {
            const parcela = parseInt(input.dataset.parcela || '1', 10);
            const dentroDoLimite = parcela <= limite;
            input.disabled = !dentroDoLimite;
            input.closest('td')?.classList.remove('bg-light');
            input.classList.remove('obrigatoria', 'preenchida');
            if (dentroDoLimite) {
                if (!bandeiraOk) {
                    return; // sem bandeira escolhida, ficam neutras
                }
                if (input.value.trim()) {
                    input.classList.add('preenchida');
                } else {
                    input.classList.add('obrigatoria');
                }
            } else {
                input.value = '';
            }
        });
    }

    tipoRapido?.addEventListener('change', ajustarGradeRapida);
    parcelasAte?.addEventListener('change', ajustarGradeRapida);
    document.getElementById('bandeira-rapida')?.addEventListener('change', ajustarGradeRapida);
    taxasRapidas.forEach(input => input.addEventListener('input', function () {
        this.classList.toggle('preenchida', !!this.value.trim());
        this.classList.toggle('obrigatoria', !this.value.trim());
    }));
    ajustarGradeRapida();
});
</script>
{% endblock %}