{% extends 'base.html' %}
{% load static %}

{% block title %}Fechar Caixa - {{ block.super }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header text-center bg-danger text-white">
                <h3><i class="bi bi-lock"></i> Fechar Caixa</h3>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> Revise os valores antes de fechar o caixa
                </div>

                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h5><i class="bi bi-calendar-event"></i> Abertura</h5>
                                <p>{{ caixa.data_abertura|date:"d/m/Y H:i" }}</p>
                                <h5><i class="bi bi-person"></i> Operador</h5>
                                <p>{{ caixa.operador.username }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card bg-light">
                            <div class="card-body">
                                <h5><i class="bi bi-cash-stack"></i> Saldo Inicial</h5>
                                <h3>R$ {{ caixa.saldo_inicial|floatformat:2 }}</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-6">
                        <div class="card border-success">
                            <div class="card-body text-center">
                                <h5><i class="bi bi-cart-check"></i> Total em Vendas</h5>
                                <h2 class="text-success">R$ {{ total_vendas|floatformat:2 }}</h2>
                                <p>{{ quantidade_vendas }} venda(s)</p>
                                {% if total_taxas > 0 %}
                                <div class="mt-2 p-2 rounded" style="background:#fff3e0;">
                                    <small class="d-block text-muted">(-) Taxas de cart&atilde;o (juros da maquininha)</small>
                                    <span class="fw-bold text-danger">- R$ {{ total_taxas|floatformat:2 }}</span>
                                    <small class="d-block text-muted mt-1">(=) Recebido l&iacute;quido:</small>
                                    <span class="fw-bold text-success">R$ {{ total_liquido|floatformat:2 }}</span>
                                </div>
                                {% else %}
                                <small class="text-muted">Sem taxas de cart&atilde;o no per&iacute;odo</small>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-primary">
                            <div class="card-body text-center">
                                <h5><i class="bi bi-calculator"></i> Saldo Esperado</h5>
                                <h2 class="text-primary">R$ {{ saldo_esperado|floatformat:2 }}</h2>
                                <small class="text-muted">Inicial + Vendas l&iacute;quidas (j&aacute; descontado juros do cart&atilde;o)</small>
                            </div>
                        </div>
                    </div>
                </div>

                <form method="post">
                    {% csrf_token %}
                    
                    {% if form.errors %}
                    <div class="alert alert-danger">
                        <strong>Erro!</strong> Corrija os erros abaixo.
                    </div>
                    {% endif %}

                    <div class="mb-4">
                        <label class="form-label" style="font-size: 1.2rem;">
                            <i class="bi bi-cash"></i> Valor Real em Caixa (R$) *
                        </label>
                        <div class="input-group">
                            <span class="input-group-text">R$</span>
                            {{ form.saldo_final }}
                        </div>
                        <div class="mt-2">
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-usar-saldo-esperado">
                                <i class="bi bi-magic"></i> Usar saldo esperado
                            </button>
                        </div>
                        {% if form.saldo_final.errors %}
                            <div class="text-danger">{{ form.saldo_final.errors }}</div>
                        {% endif %}
                        <small class="text-muted">Digite o valor que realmente está no caixa</small>
                    </div>

                    <div class="mb-4">
                        <label class="form-label"><i class="bi bi-chat-left-text"></i> Observações</label>
                        {{ form.observacoes }}
                        {% if form.observacoes.errors %}
                            <div class="text-danger">{{ form.observacoes.errors }}</div>
                        {% endif %}
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-danger btn-lg">
                            <i class="bi bi-lock"></i> Fechar Caixa
                        </button>
                        <a href="{% url 'dashboard' %}" class="btn btn-secondary">
                            <i class="bi bi-x-circle"></i> Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const botaoSaldoEsperado = document.getElementById('btn-usar-saldo-esperado');
    const campoSaldoFinal = document.getElementById('id_saldo_final');

    if (!botaoSaldoEsperado || !campoSaldoFinal) {
        return;
    }

    function formatarMoedaBR(valor) {
        const numero = Number(valor);
        if (Number.isNaN(numero)) {
            return '';
        }

        return numero.toLocaleString('pt-BR', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    function normalizarParaNumero(texto) {
        if (!texto) {
            return 0;
        }

        const limpo = texto
            .toString()
            .replace(/\s/g, '')
            .replace(/\./g, '')
            .replace(',', '.')
            .replace(/[^0-9.-]/g, '');

        const numero = Number(limpo);
        return Number.isNaN(numero) ? 0 : numero;
    }

    const valorInicial = normalizarParaNumero(campoSaldoFinal.value);
    campoSaldoFinal.value = formatarMoedaBR(valorInicial);

    campoSaldoFinal.addEventListener('blur', function () {
        campoSaldoFinal.value = formatarMoedaBR(normalizarParaNumero(campoSaldoFinal.value));
    });

    campoSaldoFinal.addEventListener('focus', function () {
        const numero = normalizarParaNumero(campoSaldoFinal.value);
        campoSaldoFinal.value = numero.toFixed(2).replace('.', ',');
        campoSaldoFinal.select();
    });

    botaoSaldoEsperado.addEventListener('click', function () {
        campoSaldoFinal.value = formatarMoedaBR(normalizarParaNumero('{{ saldo_esperado|floatformat:2 }}'));
        campoSaldoFinal.focus();
    });
});
</script>
{% endblock %}