{% extends "base.html" %}

{% block title %}Fechamento de Caixa - PDV{% endblock %}

{% block content %}
<style>
    .fechamento-container {
        max-width: 900px;
        margin: 20px auto;
    }
    .fechamento-header {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
        padding: 20px;
        text-align: center;
        border-radius: 8px 8px 0 0;
    }
    .fechamento-header h2 {
        margin: 0;
        font-size: 1.8rem;
    }
    .info-bar {
        background: #f8f9fa;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #dee2e6;
    }
    .info-bar span {
        font-size: 0.95rem;
    }
    .info-bar strong {
        color: #343a40;
    }
    .valor-caixa-section {
        background: white;
        border: 1px solid #dee2e6;
    }
    .valor-caixa-header {
        background: #e9ecef;
        padding: 15px 20px;
        text-align: center;
        border-bottom: 1px solid #dee2e6;
    }
    .valor-caixa-header h4 {
        margin: 0;
        color: #495057;
    }
    .formas-table {
        width: 100%;
        border-collapse: collapse;
    }
    .formas-table th {
        background: #343a40;
        color: white;
        padding: 10px 15px;
        text-align: left;
        font-weight: 500;
        font-size: 0.9rem;
    }
    .formas-table th:nth-child(2),
    .formas-table th:nth-child(3),
    .formas-table th:nth-child(4) {
        text-align: right;
    }
    .formas-table td {
        padding: 10px 15px;
        border-bottom: 1px solid #e9ecef;
    }
    .formas-table td:nth-child(2),
    .formas-table td:nth-child(3),
    .formas-table td:nth-child(4) {
        text-align: right;
    }
    .formas-table tr:nth-child(even) {
        background: #f8f9fa;
    }
    .formas-table tr:hover {
        background: #e3f2fd;
    }
    .formas-table tr.selected {
        background: #bbdefb;
    }
    .resumo-section {
        background: #f8f9fa;
        padding: 15px 20px;
        border-top: 2px solid #17a2b8;
    }
    .resumo-row {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #e9ecef;
    }
    .resumo-row:last-child {
        border-bottom: none;
    }
    .resumo-row.total {
        background: #17a2b8;
        color: white;
        margin: 10px -20px -15px -20px;
        padding: 15px 20px;
        font-size: 1.2rem;
    }
    .btn-finalizar {
        background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
        border: none;
        color: white;
        padding: 15px 40px;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-finalizar:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
    }
    .footer-section {
        background: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #dee2e6;
        border-top: none;
        border-radius: 0 0 8px 8px;
    }
</style>

<div class="fechamento-container">
    <!-- Header -->
    <div class="fechamento-header">
        <h2><i class="bi bi-cash-stack"></i> Fechamento de Caixa do dia: {{ formatar_datetime_operacional(caixa.data_abertura, '%d/%m/%Y', caixa.empresa) }}</h2>
    </div>
    
    <!-- Info Bar -->
    <div class="info-bar">
        <span>Usuário: <strong>{{ caixa.usuario.username }}</strong></span>
        <span>Caixa: <strong>#{{ caixa.numero_caixa }}</strong></span>
        <span>Data: <strong>{{ formatar_datetime_operacional(caixa.data_abertura, '%d/%m/%Y', caixa.empresa) }}</strong></span>
        <span>Hora: <strong id="hora-atual">--:--:--</strong></span>
    </div>
    
    <!-- Seção Valor no Caixa -->
    <div class="valor-caixa-section">
        <div class="valor-caixa-header">
            <h4><i class="bi bi-wallet2"></i> Valor no Caixa</h4>
        </div>
        
        <form method="POST" action="{{ url_for('pdv_fechar_caixa', caixa_id=caixa.id) }}" id="formFechamento">
            <table class="formas-table">
                <thead>
                    <tr>
                        <th style="width: 35%">Forma de Pg.</th>
                        <th style="width: 20%">Valor Esperado</th>
                        <th style="width: 25%">Valor Contado</th>
                        <th style="width: 20%">Diferença</th>
                    </tr>
                </thead>
                <tbody>
                    {% if totais.formas_pagamento %}
                        {% for forma in totais.formas_pagamento %}
                        <tr data-forma="{{ forma.forma }}" data-esperado="{{ forma.valor }}">
                            <td>{{ forma.forma }}</td>
                            <td>R$ {{ "%.2f"|format(forma.valor) }}</td>
                            <td>
                                <input type="number" class="form-control form-control-sm input-contado" 
                                       name="contado_{{ loop.index0 }}" 
                                       step="0.01" min="0" 
                                       placeholder="0,00"
                                       data-esperado="{{ forma.valor }}"
                                       onchange="calcularDiferencaLinha(this)"
                                       onkeyup="calcularDiferencaLinha(this)"
                                       style="width: 120px; text-align: right;">
                            </td>
                            <td class="diferenca-col">
                                <span class="diferenca-valor">-</span>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="4" class="text-center text-muted py-4">
                                <i class="bi bi-info-circle"></i> Nenhuma venda realizada neste caixa
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
                <tfoot>
                    <tr style="background: #17a2b8; color: white; font-weight: bold;">
                        <td>TOTAL</td>
                        <td id="total-esperado">R$ {{ "%.2f"|format(totais.valor_esperado) }}</td>
                        <td id="total-contado">R$ 0,00</td>
                        <td id="total-diferenca">-</td>
                    </tr>
                </tfoot>
            </table>
            
            <!-- Input oculto com o valor total informado -->
            <input type="hidden" id="valor_informado" name="valor_informado" value="0">
            
            <!-- Observações -->
            <div class="p-4 bg-white">
                <label for="observacoes" class="form-label">
                    <i class="bi bi-chat-left-text"></i> Observações:
                </label>
                <textarea class="form-control" id="observacoes" name="observacoes" 
                          rows="2" placeholder="Observações sobre o fechamento..."></textarea>
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="imprimir_resumo" name="imprimir_resumo" value="1" checked>
                    <label class="form-check-label" for="imprimir_resumo">
                        <i class="bi bi-printer"></i> Imprimir resumo do fechamento
                    </label>
                </div>
            </div>
            
            <!-- Footer com botão -->
            <div class="footer-section">
                <div class="alert alert-warning mb-3">
                    <i class="bi bi-exclamation-triangle"></i> 
                    <strong>Atenção:</strong> Após fechar o caixa, não será possível reabri-lo.
                </div>
                
                <div class="d-flex justify-content-between">
                    <a href="{{ url_for('pdv') }}" class="btn btn-outline-secondary btn-lg">
                        <i class="bi bi-arrow-left"></i> Voltar ao PDV
                    </a>
                    <button type="submit" class="btn-finalizar" onclick="return confirmarFechamento()">
                        <i class="bi bi-check-circle"></i> Finalizar Caixa [F10]
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
const valorEsperado = {{ totais.valor_esperado }};

// Atualizar hora em tempo real
function atualizarHora() {
    const agora = new Date();
    const hora = agora.toLocaleTimeString('pt-BR');
    document.getElementById('hora-atual').textContent = hora;
}
setInterval(atualizarHora, 1000);
atualizarHora();

function calcularDiferencaLinha(input) {
    const esperado = parseFloat(input.dataset.esperado) || 0;
    const contado = parseFloat(input.value) || 0;
    const diferenca = contado - esperado;
    
    // Encontrar a célula de diferença na mesma linha
    const row = input.closest('tr');
    const diffCell = row.querySelector('.diferenca-valor');
    
    if (diffCell) {
        if (contado === 0 && input.value === '') {
            diffCell.textContent = '-';
            diffCell.className = 'diferenca-valor';
        } else if (Math.abs(diferenca) < 0.01) {
            diffCell.innerHTML = '<span class="text-success">✓ OK</span>';
            diffCell.className = 'diferenca-valor';
        } else if (diferenca > 0) {
            diffCell.innerHTML = '<span class="text-primary">+R$ ' + diferenca.toFixed(2) + '</span>';
            diffCell.className = 'diferenca-valor';
        } else {
            diffCell.innerHTML = '<span class="text-danger">-R$ ' + Math.abs(diferenca).toFixed(2) + '</span>';
            diffCell.className = 'diferenca-valor';
        }
    }
    
    // Recalcular totais
    calcularTotais();
}

function calcularTotais() {
    const inputs = document.querySelectorAll('.input-contado');
    let totalContado = 0;
    
    inputs.forEach(input => {
        totalContado += parseFloat(input.value) || 0;
    });
    
    // Subtrair sangrias do esperado (não do contado)
    const totalSangrias = {{ totais.total_sangrias }};
    
    const diferencaTotal = totalContado - valorEsperado;
    
    // Atualizar rodapé
    document.getElementById('total-contado').textContent = 'R$ ' + totalContado.toFixed(2);
    
    const diffDisplay = document.getElementById('total-diferenca');
    if (totalContado === 0) {
        diffDisplay.textContent = '-';
        diffDisplay.style.color = 'white';
    } else if (Math.abs(diferencaTotal) < 0.01) {
        diffDisplay.innerHTML = '✓ Conferido';
        diffDisplay.style.color = '#90EE90';
    } else if (diferencaTotal > 0) {
        diffDisplay.innerHTML = '+R$ ' + diferencaTotal.toFixed(2);
        diffDisplay.style.color = '#90EE90';
    } else {
        diffDisplay.innerHTML = '-R$ ' + Math.abs(diferencaTotal).toFixed(2);
        diffDisplay.style.color = '#FF6B6B';
    }
    
    // Atualizar input hidden
    document.getElementById('valor_informado').value = totalContado.toFixed(2);
}

function confirmarFechamento() {
    const totalContado = parseFloat(document.getElementById('valor_informado').value) || 0;
    
    if (totalContado === 0) {
        alert('Por favor, informe os valores contados para cada forma de pagamento.');
        return false;
    }
    
    const diferenca = totalContado - valorEsperado;
    let mensagem = 'Confirma o fechamento do caixa?\n\n';
    mensagem += 'Valor Esperado: R$ ' + valorEsperado.toFixed(2) + '\n';
    mensagem += 'Valor Contado: R$ ' + totalContado.toFixed(2) + '\n';
    
    if (Math.abs(diferenca) >= 0.01) {
        mensagem += 'Diferença: R$ ' + diferenca.toFixed(2) + (diferenca > 0 ? ' (Sobra)' : ' (Falta)');
    } else {
        mensagem += 'Diferença: R$ 0,00 ✓';
    }
    
    return confirm(mensagem);
}

// Atalho F10 para finalizar
document.addEventListener('keydown', function(e) {
    if (e.key === 'F10') {
        e.preventDefault();
        if (confirmarFechamento()) {
            document.getElementById('formFechamento').submit();
        }
    }
});

// Focar no primeiro input ao carregar
document.addEventListener('DOMContentLoaded', function() {
    const primeiroInput = document.querySelector('.input-contado');
    if (primeiroInput) {
        primeiroInput.focus();
    }
});
</script>

{% endblock %}