{% extends "base.html" %}

{% block title %}Caixa{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-cash-coin"></i> Caixa</h2>
        {% if not caixa_aberto %}
        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalAbrirCaixa">
            <i class="bi bi-unlock"></i> Abrir Caixa
        </button>
        {% endif %}
    </div>

    {% if caixa_aberto %}
    {# Caixa Aberto - Card Principal Compacto #}
    <div class="row">
        <div class="col-md-12">
            <div class="card border-success mb-3">
                <div class="card-header bg-success text-white py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="bi bi-check-circle"></i> Caixa Aberto - <strong>Operador: {{ caixa_aberto.usuario_abertura.username }}</strong>
                        </h6>
                        <small>{{ caixa_aberto.data_abertura.strftime('%d/%m/%Y %H:%M') }}</small>
                    </div>
                </div>
                <div class="card-body py-2">
                    <div class="row text-center">
                        <div class="col-3">
                            <small class="text-muted d-block">Inicial</small>
                            <strong>R$ {{ "%.2f"|format(caixa_aberto.valor_inicial) }}</strong>
                        </div>
                        <div class="col-3">
                            <small class="text-muted d-block">Entradas</small>
                            <strong class="text-success">R$ {{ "%.2f"|format(caixa_aberto.total_entradas()) }}</strong>
                        </div>
                        <div class="col-3">
                            <small class="text-muted d-block">Saídas</small>
                            <strong class="text-danger">R$ {{ "%.2f"|format(caixa_aberto.total_saidas()) }}</strong>
                        </div>
                        <div class="col-3">
                            <small class="text-muted d-block">Saldo</small>
                            <strong class="text-primary">R$ {{ "%.2f"|format(caixa_aberto.calcular_saldo()) }}</strong>
                        </div>
                    </div>
                    <div class="d-flex gap-2 mt-2">
                        <a href="{{ url_for('visualizar_caixa', id=caixa_aberto.id) }}" class="btn btn-sm btn-primary">
                            <i class="bi bi-eye"></i> Abrir Caixa
                        </a>
                        <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#modalSangria">
                            <i class="bi bi-arrow-down-circle"></i> Sangria
                        </button>
                        <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#modalFecharCaixa">
                            <i class="bi bi-lock"></i> Fechar Caixa
                        </button>
                        <a href="{{ url_for('caixa_relatorio') }}" class="btn btn-sm btn-info">
                            <i class="bi bi-file-earmark-text"></i> Abrir Relatório
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Lista de Vendas para Recebimento e Recebidas - Compacto #}
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-2" style="max-height: 450px;">
                <div class="card-header py-2">
                    <h6 class="mb-0"><i class="bi bi-cart-plus"></i> Vendas para Receber</h6>
                </div>
                <div class="card-body p-2" style="overflow-y: auto; max-height: 400px;">
                    {% if vendas_para_receber %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Pedido</th>
                                    <th>Cliente</th>
                                    <th>Origem</th>
                                    <th>Data Fechamento</th>
                                    <th>Valor</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for v in vendas_para_receber %}
                                <tr>
                                    <td>{{ v.numero_pedido }}</td>
                                    <td>{{ v.get_cliente_nome() }}</td>
                                    <td>
                                        {% if v.origem == 'balcao' or v.origem == 'web' %}
                                            <span class="badge bg-primary" title="Venda Balcão">🏪 Balcão</span>
                                        {% elif v.origem == 'pdv' or v.origem == 'pdv_desktop' %}
                                            <span class="badge bg-info" title="capePDV Desktop">💻 PDV</span>
                                        {% elif v.origem == 'pdvweb' or v.origem == 'pdv_web' %}
                                            <span class="badge bg-info" title="PDV Web">🌐 PDVWeb</span>
                                        {% elif v.origem == 'food_mesa' %}
                                            <span class="badge bg-warning" title="Food - Mesa">🪑 Mesa</span>
                                        {% elif v.origem == 'food_delivery' %}
                                            <span class="badge bg-danger" title="Food - Delivery">🛵 Delivery</span>
                                        {% elif v.origem == 'food_balcao' %}
                                            <span class="badge bg-warning" title="Food - Balcão">🍔 Food</span>
                                        {% elif v.origem == 'api' %}
                                            <span class="badge bg-secondary" title="API Externa">🔌 API</span>
                                        {% else %}
                                            <span class="badge bg-secondary" title="{{ v.origem or 'Não Informado' }}">{{ v.origem or '-' }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{% if v.data_fechamento %}{{ v.data_fechamento.strftime('%d/%m/%Y %H:%M') }}{% else %}-{% endif %}</td>
                                    <td>R$ {{ "%.2f"|format(v.valor_total) }}</td>
                                    <td>
                                        <a href="{{ url_for('editar_venda', id=v.id) }}" class="btn btn-sm btn-outline-secondary">Abrir Venda</a>
                                        <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#modalReceberVenda{{ v.id }}" style="margin-left:6px;">Registrar Recebimento</button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <p class="text-muted">Nenhuma Venda para Recebimento no momento.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-check-circle"></i> Vendas Recebidas (Últimas)</h5>
                </div>
                <div class="card-body">
                    {% if vendas_recebidas %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Pedido</th>
                                    <th>Cliente</th>
                                    <th>Origem</th>
                                    <th>Data Recebimento</th>
                                    <th>Valor</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for v in vendas_recebidas %}
                                <tr>
                                    <td>{{ v.numero_pedido }}</td>
                                    <td>{{ v.get_cliente_nome() }}</td>
                                    <td>
                                        {% if v.origem == 'balcao' or v.origem == 'web' %}
                                            <span class="badge bg-primary" title="Venda Balcão">🏪 Balcão</span>
                                        {% elif v.origem == 'pdv' or v.origem == 'pdv_desktop' %}
                                            <span class="badge bg-info" title="capePDV Desktop">💻 PDV</span>
                                        {% elif v.origem == 'pdvweb' or v.origem == 'pdv_web' %}
                                            <span class="badge bg-info" title="PDV Web">🌐 PDVWeb</span>
                                        {% elif v.origem == 'food_mesa' %}
                                            <span class="badge bg-warning" title="Food - Mesa">🪑 Mesa</span>
                                        {% elif v.origem == 'food_delivery' %}
                                            <span class="badge bg-danger" title="Food - Delivery">🛵 Delivery</span>
                                        {% elif v.origem == 'food_balcao' %}
                                            <span class="badge bg-warning" title="Food - Balcão">🍔 Food</span>
                                        {% elif v.origem == 'api' %}
                                            <span class="badge bg-secondary" title="API Externa">🔌 API</span>
                                        {% else %}
                                            <span class="badge bg-secondary" title="{{ v.origem or 'Não Informado' }}">{{ v.origem or '-' }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{% if v.data_recebimento %}{{ v.data_recebimento.strftime('%d/%m/%Y %H:%M') }}{% elif v.data_venda %}{{ v.data_venda.strftime('%d/%m/%Y') if v.data_venda else '-' }}{% else %}-{% endif %}</td>
                                    <td>R$ {{ "%.2f"|format(v.valor_total) }}</td>
                                    <td>
                                        <a href="{{ url_for('editar_venda', id=v.id) }}" class="btn btn-sm btn-outline-secondary">Abrir Venda</a>
                                        <a href="{{ url_for('imprimir_comprovante_venda', venda_id=v.id) }}" target="_blank" class="btn btn-sm btn-outline-primary" title="Imprimir 2ª Via">
                                            <i class="bi bi-printer"></i> 2ª Via
                                        </a>
                                        <form method="POST" action="{{ url_for('caixa_cancelar_recebimento', id=v.id) }}" style="display:inline-block; margin-left:6px;" class="js-operacao-critica" data-confirm="Confirma estornar o recebimento da venda {{ v.numero_pedido }}?">
                                            <button type="submit" class="btn btn-sm btn-danger">Estornar Recebimento</button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <p class="text-muted">Nenhuma Venda recebida recentemente.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {# OS Concluídas para Recebimento #}
    <div class="row mt-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header py-2">
                    <h6 class="mb-0"><i class="fas fa-tools"></i> Ordens de Serviço Concluídas para Recebimento</h6>
                </div>
                <div class="card-body p-2">
                    {% if os_para_receber %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Número OS</th>
                                    <th>Cliente</th>
                                    <th>Data Conclusão</th>
                                    <th>Valor</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for os in os_para_receber %}
                                <tr>
                                    <td><strong>{{ os.numero_os }}</strong></td>
                                    <td>
                                        {% if os.pessoa %}
                                            {{ os.pessoa.nome_fantasia or os.pessoa.razao_social or os.pessoa.nome }}
                                        {% elif os.cliente %}
                                            {{ os.cliente.nome }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td>{% if os.data_conclusao %}{{ os.data_conclusao.strftime('%d/%m/%Y %H:%M') }}{% else %}-{% endif %}</td>
                                    <td>R$ {{ "%.2f"|format(os.valor_total) }}</td>
                                    <td>
                                        <a href="{{ url_for('editar_ordem_servico', id=os.id) }}" class="btn btn-sm btn-outline-secondary">Abrir OS</a>
                                        <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#modalReceberOS{{ os.id }}" style="margin-left:6px;">Registrar Recebimento</button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <p class="text-muted mb-0">Nenhuma OS concluída para Recebimento no momento.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {# OS Recebidas (últimas) #}
    <div class="row mt-3">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header py-2 bg-success text-white">
                    <h6 class="mb-0"><i class="bi bi-check-circle"></i> Ordens de Serviço Recebidas (Últimas)</h6>
                </div>
                <div class="card-body p-2">
                    {% if os_recebidas %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Número OS</th>
                                    <th>Cliente</th>
                                    <th>Data Recebimento</th>
                                    <th>Valor</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for os in os_recebidas %}
                                <tr>
                                    <td><strong>{{ os.numero_os }}</strong></td>
                                    <td>
                                        {% if os.pessoa %}
                                            {{ os.pessoa.nome_fantasia or os.pessoa.razao_social or os.pessoa.nome }}
                                        {% elif os.cliente %}
                                            {{ os.cliente.nome }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td>{% if os.data_recebimento %}{{ os.data_recebimento.strftime('%d/%m/%Y %H:%M') }}{% else %}-{% endif %}</td>
                                    <td>R$ {{ "%.2f"|format(os.valor_total) }}</td>
                                    <td>
                                        <a href="{{ url_for('editar_ordem_servico', id=os.id) }}" class="btn btn-sm btn-outline-secondary">Abrir OS</a>
                                        <a href="{{ url_for('imprimir_comprovante_os_direto', os_id=os.id) }}" target="_blank" class="btn btn-sm btn-outline-primary" title="Imprimir Comprovante">
                                            <i class="bi bi-printer"></i> Comprovante
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <p class="text-muted mb-0">Nenhuma OS recebida recentemente.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% else %}
    {# Sem Caixa Aberto - Lista de Vendas Disponível #}
    <div class="alert alert-info mb-4">
        <i class="bi bi-info-circle"></i> Não há Caixa aberto. Clique em "Abrir Caixa" para iniciar as operações.
    </div>

    {# Lista de Vendas para Recebimento e Recebidas (visível mesmo sem caixa aberto) #}
    <div class="row mt-3">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-cart-plus"></i> Vendas para Receber</h5>
                </div>
                <div class="card-body">
                    {% if vendas_para_receber %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Pedido</th>
                                    <th>Cliente</th>
                                    <th>Data Fechamento</th>
                                    <th>Valor</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for v in vendas_para_receber %}
                                <tr>
                                    <td>{{ v.numero_pedido }}</td>
                                    <td>{{ v.get_cliente_nome() }}</td>
                                    <td>{% if v.data_fechamento %}{{ v.data_fechamento.strftime('%d/%m/%Y %H:%M') }}{% else %}-{% endif %}</td>
                                    <td>R$ {{ "%.2f"|format(v.valor_total) }}</td>
                                    <td>
                                        <a href="{{ url_for('editar_venda', id=v.id) }}" class="btn btn-sm btn-outline-secondary">Abrir Venda</a>
                                        <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#modalAbrirCaixa" title="Abra um Caixa para Registrar o Recebimento">Registrar Recebimento</button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <p class="text-muted">Nenhuma Venda para Recebimento no momento.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-check-circle"></i> Vendas Recebidas (Últimas)</h5>
                </div>
                <div class="card-body">
                    {% if vendas_recebidas %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>Pedido</th>
                                    <th>Cliente</th>
                                    <th>Data Recebimento</th>
                                    <th>Valor</th>
                                    <th>Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for v in vendas_recebidas %}
                                <tr>
                                    <td>{{ v.numero_pedido }}</td>
                                    <td>{{ v.get_cliente_nome() }}</td>
                                    <td>{% if v.data_recebimento %}{{ v.data_recebimento.strftime('%d/%m/%Y %H:%M') }}{% else %}-{% endif %}</td>
                                    <td>R$ {{ "%.2f"|format(v.valor_total) }}</td>
                                    <td>
                                        <a href="{{ url_for('editar_venda', id=v.id) }}" class="btn btn-sm btn-outline-secondary">Abrir Venda</a>
                                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#modalAbrirCaixa" title="Abra um Caixa para Estornar o Recebimento">Estornar Recebimento</button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                        <p class="text-muted">Nenhuma Venda recebida recentemente.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    {# Histórico de Caixas #}
    <div class="card mt-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="bi bi-clock-history"></i> Histórico de Caixas (Últimos 30 dias)</h5>
        </div>
        <div class="card-body">
            {% if historico %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Data Abertura</th>
                            <th>Data Fechamento</th>
                            <th>Responsável</th>
                            <th>Valor Inicial</th>
                            <th>Entradas</th>
                            <th>Saídas</th>
                            <th>Saldo</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for c in historico %}
                        <tr>
                            <td>{{ c.data_abertura.strftime('%d/%m/%Y %H:%M') }}</td>
                            <td>
                                {% if c.data_fechamento %}
                                    {{ c.data_fechamento.strftime('%d/%m/%Y %H:%M') }}
                                {% else %}
                                    <span class="badge bg-success">Aberto</span>
                                {% endif %}
                            </td>
                            <td>{{ c.usuario.username if c.usuario and c.usuario.username else (c.usuario.email if c.usuario else '-') }}</td>
                            <td>R$ {{ "%.2f"|format(c.valor_inicial) }}</td>
                            <td class="text-success">R$ {{ "%.2f"|format(c.total_entradas()) }}</td>
                            <td class="text-danger">R$ {{ "%.2f"|format(c.total_saidas()) }}</td>
                            <td class="text-primary">R$ {{ "%.2f"|format(c.calcular_saldo()) }}</td>
                            <td>
                                <a href="{{ url_for('visualizar_caixa', id=c.id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i> Abrir Caixa
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
                <p class="text-muted">Nenhum histórico de caixa nos últimos 30 dias.</p>
            {% endif %}
        </div>
    </div>
</div>

{# Modal Abrir Caixa #}
<div class="modal fade cape-modal-standard" id="modalAbrirCaixa" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('abrir_caixa') }}">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title"><i class="bi bi-unlock"></i> Abrir Caixa</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong><i class="bi bi-person-badge"></i> Operador:</strong> {{ current_user.nome }}<br>
                        <strong><i class="bi bi-calendar-check"></i> Data/Hora:</strong> {{ data_hora_atual.strftime('%d/%m/%Y %H:%M') }}
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Valor Inicial (Dinheiro em Caixa) *</label>
                        <input type="number" class="form-control" name="valor_inicial" 
                               step="0.01" min="0" value="0" required>
                        <small class="text-muted">Informe o valor em Dinheiro disponível no Caixa no início do dia.</small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Observações de Abertura</label>
                        <textarea class="form-control" name="observacoes_abertura" rows="3" placeholder="Ex: Abertura normal do dia, troco preparado..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-unlock"></i> Abrir Caixa
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{# Modal Fechar Caixa #}
{% if caixa_aberto %}
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalFecharCaixa" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('fechar_caixa', id=caixa_aberto.id) }}" id="formFecharCaixa">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title"><i class="bi bi-lock"></i> Fechar Caixa - Conferência Detalhada</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong><i class="bi bi-person-badge"></i> Operador do Fechamento:</strong> {{ current_user.nome }}<br>
                        <strong><i class="bi bi-calendar-check"></i> Data/Hora:</strong> {{ data_hora_atual.strftime('%d/%m/%Y %H:%M') }}<br>
                        <strong><i class="bi bi-unlock"></i> Caixa Aberto por:</strong> {{ caixa_aberto.usuario_abertura.nome }} em {{ caixa_aberto.data_abertura.strftime('%d/%m/%Y %H:%M') }}
                    </div>

                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i> <strong>Atenção:</strong> Confira todos os valores e informe exatamente o que foi contado e conferido.
                        O sistema verificará as diferenças após o fechamento.
                    </div>

                    <h6 class="mb-3"><i class="bi bi-calculator"></i> Informar Valores por Forma de Pagamento</h6>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">💵 Dinheiro</label>
                            <input type="number" class="form-control valor-forma" name="valor_dinheiro" 
                                   step="0.01" min="0" value="0.00" required>
                            <small class="text-muted">Informe o valor contado</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">📱 PIX</label>
                            <input type="number" class="form-control valor-forma" name="valor_pix" 
                                   step="0.01" min="0" value="0.00" required>
                            <small class="text-muted">Informe o valor conferido</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">💳 Cartão Débito</label>
                            <input type="number" class="form-control valor-forma" name="valor_debito" 
                                   step="0.01" min="0" value="0.00" required>
                            <small class="text-muted">Informe o valor conferido</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">💳 Cartão Crédito</label>
                            <input type="number" class="form-control valor-forma" name="valor_credito" 
                                   step="0.01" min="0" value="0.00" required>
                            <small class="text-muted">Informe o valor conferido</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">📄 Boleto</label>
                            <input type="number" class="form-control valor-forma" name="valor_boleto" 
                                   step="0.01" min="0" value="0.00" required>
                            <small class="text-muted">Informe o valor conferido</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">🏦 Outros</label>
                            <input type="number" class="form-control valor-forma" name="valor_outros" 
                                   step="0.01" min="0" value="0.00">
                            <small class="text-muted">Transferências, Cheques e Outras Formas</small>
                        </div>
                    </div>

                    <div class="alert alert-secondary">
                        <strong>Total Informado:</strong> <span id="totalInformado">R$ 0,00</span>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Observações do Fechamento</label>
                        <textarea class="form-control" name="observacoes_fechamento" rows="2" placeholder="Registre aqui qualquer observação sobre o fechamento"></textarea>
                    </div>

                    <input type="hidden" name="saldo_informado" id="saldoInformadoHidden">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-warning" id="btnConfirmarFechamento">
                        <i class="bi bi-lock"></i> Confirmar Fechamento
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
async function executarOperacaoCritica(form) {
    const confirmar = form.dataset.confirm;
    if (confirmar && !window.confirm(confirmar)) {
        return false;
    }

    const enviar = async (extra = {}) => {
        const formData = new FormData(form);
        Object.entries(extra).forEach(([chave, valor]) => formData.append(chave, valor));
        const response = await fetch(form.action, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: formData
        });
        const data = await response.json().catch(() => ({ success: false, message: 'Falha ao processar a resposta do servidor.' }));
        return { response, data };
    };

    let { response, data } = await enviar();

    if (response.status === 403 && data.requer_autorizacao) {
        const usuario = window.prompt((data.message || 'Operação requer autorização adicional.') + '\n\nUsuário autorizador:');
        if (!usuario) {
            return false;
        }
        const senha = window.prompt('Senha do autorizador:');
        if (!senha) {
            return false;
        }
        const pin = window.prompt('PIN do autorizador (se cadastrado):') || '';
        ({ response, data } = await enviar({ autorizador_usuario: usuario, autorizador_senha: senha, pin_autorizacao: pin }));
    }

    if (response.ok && data.success !== false) {
        if (data.message) {
            window.alert(data.message);
        }
        window.location.href = data.redirect || window.location.href;
        return false;
    }

    window.alert(data.message || 'Não foi possível concluir a operação.');
    return false;
}

document.querySelectorAll('form.js-operacao-critica').forEach((form) => {
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        executarOperacaoCritica(form);
    });
});

    const valoresForma = document.querySelectorAll('.valor-forma');
    const totalInformado = document.getElementById('totalInformado');
    const saldoHidden = document.getElementById('saldoInformadoHidden');
    
    function calcularTotais() {
        let total = 0;
        valoresForma.forEach(input => {
            total += parseFloat(input.value) || 0;
        });
        
        totalInformado.textContent = 'R$ ' + total.toFixed(2).replace('.', ',');
        saldoHidden.value = total.toFixed(2);
    }
    
    valoresForma.forEach(input => {
        input.addEventListener('input', calcularTotais);
    });
    
    // Calcular na abertura do modal
    calcularTotais();
    
    // Confirmação antes de enviar
    document.getElementById('formFecharCaixa').addEventListener('submit', function(e) {
        if (!confirm('⚠️ ATENÇÃO: Após fechar o caixa, NÃO será possível reabri-lo!\n\nConfirma o fechamento com os valores informados?')) {
            e.preventDefault();
        }
    });
});
</script>
{% endif %}

{# Modais de Recebimento de Vendas #}
{% for v in vendas_para_receber %}
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalReceberVenda{{ v.id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('caixa_receber_venda', id=v.id) }}">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title"><i class="bi bi-cash-coin"></i> Registrar Recebimento da Venda {{ v.numero_pedido }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <p><strong>Cliente:</strong> {{ v.get_cliente_nome() }}</p>
                            <p><strong>Data de Fechamento:</strong> {% if v.data_fechamento %}{{ v.data_fechamento.strftime('%d/%m/%Y %H:%M') }}{% else %}-{% endif %}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Valor Total:</strong> <span class="text-success fs-4">R$ {{ "%.2f"|format(v.valor_total) }}</span></p>
                        </div>
                    </div>

                    <hr>

                    <div class="mb-3">
                        <label class="form-label">Forma de Pagamento *</label>
                        <div class="alert alert-info alert-sm">
                            <small><i class="bi bi-info-circle"></i> Para pagamento em uma única forma, selecione abaixo. Para múltiplas formas, deixe em branco e preencha os valores nas linhas seguintes.</small>
                        </div>
                        <select class="form-select pagamento-unico-select" name="forma_pagamento" id="formaPagUnica{{ v.id }}">
                            <option value="">Selecionar ou Deixar em Branco para Múltiplas Formas...</option>
                            <option value="dinheiro">💵 Dinheiro</option>
                            <option value="pix">📱 PIX</option>
                            <option value="debito">💳 Cartão de Débito</option>
                            <option value="credito">💳 Cartão de Crédito</option>
                            <option value="transferencia">🏦 Transferência Bancária</option>
                            <option value="boleto">📄 Boleto</option>
                            <option value="cheque">📝 Cheque</option>
                        </select>
                    </div>

                    <div class="mb-3" id="multiplas-formas-{{ v.id }}">
                        <label class="form-label"><strong>Múltiplas Formas de Pagamento</strong></label>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label-sm">💵 Dinheiro</label>
                                <input type="hidden" name="forma_pagamento_mult[]" value="dinheiro">
                                <input type="number" class="form-control form-control-sm valor-multi" name="valor_pagamento_mult[]" step="0.01" min="0" value="0" data-venda-id="{{ v.id }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-sm">📱 PIX</label>
                                <input type="hidden" name="forma_pagamento_mult[]" value="pix">
                                <input type="number" class="form-control form-control-sm valor-multi" name="valor_pagamento_mult[]" step="0.01" min="0" value="0" data-venda-id="{{ v.id }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-sm">💳 Débito</label>
                                <input type="hidden" name="forma_pagamento_mult[]" value="debito">
                                <input type="number" class="form-control form-control-sm valor-multi" name="valor_pagamento_mult[]" step="0.01" min="0" value="0" data-venda-id="{{ v.id }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-sm">💳 Crédito</label>
                                <input type="hidden" name="forma_pagamento_mult[]" value="credito">
                                <input type="number" class="form-control form-control-sm valor-multi" name="valor_pagamento_mult[]" step="0.01" min="0" value="0" data-venda-id="{{ v.id }}">
                            </div>
                        </div>
                        <div class="alert alert-success mt-2" id="total-multi-{{ v.id }}">
                            <small><strong>Total Informado:</strong> R$ 0,00 | <strong>Falta:</strong> R$ {{ "%.2f"|format(v.valor_total) }}</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Observações do Recebimento</label>
                        <textarea class="form-control" name="observacoes" rows="2" placeholder="Ex: Troco dado, parcelas, etc..."></textarea>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="imprimir_comprovante" id="imprimirComprovante{{ v.id }}" value="1" checked>
                            <label class="form-check-label" for="imprimirComprovante{{ v.id }}">
                                🖨️ Imprimir Comprovante após o Recebimento
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="bi bi-check-circle"></i> Confirmar Registro
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endfor %}

{# Modais para Receber OS #}
{% for os in os_para_receber %}
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalReceberOS{{ os.id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('caixa_receber_os', id=os.id) }}">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title"><i class="fas fa-tools"></i> Registrar Recebimento da OS {{ os.numero_os }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <p><strong>Cliente:</strong> 
                                {% if os.pessoa %}
                                    {{ os.pessoa.nome_fantasia or os.pessoa.razao_social or os.pessoa.nome }}
                                {% elif os.cliente %}
                                    {{ os.cliente.nome }}
                                {% else %}
                                    -
                                {% endif %}
                            </p>
                            <p><strong>Data de Conclusão:</strong> {% if os.data_conclusao %}{{ os.data_conclusao.strftime('%d/%m/%Y %H:%M') }}{% else %}-{% endif %}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Valor Total:</strong> <span class="text-success fs-4">R$ {{ "%.2f"|format(os.valor_total) }}</span></p>
                        </div>
                    </div>

                    <hr>

                    <div class="mb-3">
                        <label class="form-label">Forma de Pagamento *</label>
                        <div class="alert alert-info alert-sm">
                            <small><i class="bi bi-info-circle"></i> Para pagamento em uma única forma, selecione abaixo. Para múltiplas formas, deixe em branco e preencha os valores nas linhas seguintes.</small>
                        </div>
                        <select class="form-select pagamento-unico-select" name="forma_pagamento" id="formaPagUnicaOS{{ os.id }}">
                            <option value="">Selecionar ou Deixar em Branco para Múltiplas Formas...</option>
                            <option value="dinheiro">💵 Dinheiro</option>
                            <option value="pix">📱 PIX</option>
                            <option value="debito">💳 Cartão de Débito</option>
                            <option value="credito">💳 Cartão de Crédito</option>
                            <option value="transferencia">🏦 Transferência Bancária</option>
                            <option value="boleto">📄 Boleto</option>
                            <option value="cheque">📝 Cheque</option>
                        </select>
                    </div>

                    <div class="mb-3" id="multiplas-formas-os-{{ os.id }}">
                        <label class="form-label"><strong>Múltiplas Formas de Pagamento</strong></label>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label-sm">💵 Dinheiro</label>
                                <input type="hidden" name="forma_pagamento_mult[]" value="dinheiro">
                                <input type="number" class="form-control form-control-sm valor-multi-os" name="valor_pagamento_mult[]" step="0.01" min="0" value="0" data-os-id="{{ os.id }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-sm">📱 PIX</label>
                                <input type="hidden" name="forma_pagamento_mult[]" value="pix">
                                <input type="number" class="form-control form-control-sm valor-multi-os" name="valor_pagamento_mult[]" step="0.01" min="0" value="0" data-os-id="{{ os.id }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-sm">💳 Débito</label>
                                <input type="hidden" name="forma_pagamento_mult[]" value="debito">
                                <input type="number" class="form-control form-control-sm valor-multi-os" name="valor_pagamento_mult[]" step="0.01" min="0" value="0" data-os-id="{{ os.id }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label-sm">💳 Crédito</label>
                                <input type="hidden" name="forma_pagamento_mult[]" value="credito">
                                <input type="number" class="form-control form-control-sm valor-multi-os" name="valor_pagamento_mult[]" step="0.01" min="0" value="0" data-os-id="{{ os.id }}">
                            </div>
                        </div>
                        <div class="alert alert-success mt-2" id="total-multi-os-{{ os.id }}">
                            <small><strong>Total Informado:</strong> R$ 0,00 | <strong>Falta:</strong> R$ {{ "%.2f"|format(os.valor_total) }}</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Observações do Recebimento</label>
                        <textarea class="form-control" name="observacoes" rows="2" placeholder="Ex: Troco dado, parcelas, etc..."></textarea>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="imprimir_comprovante" id="imprimirComprovanteOS{{ os.id }}" value="1" checked>
                            <label class="form-check-label" for="imprimirComprovanteOS{{ os.id }}">
                                🖨️ Imprimir Comprovante após o Recebimento
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="bi bi-check-circle"></i> Confirmar Registro
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endfor %}

{# Modal de Sangria #}
<div class="modal fade cape-modal-standard" id="modalSangria" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('caixa_sangria') }}">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title"><i class="bi bi-arrow-down-circle"></i> Registrar Sangria</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i> <strong>Atenção:</strong> A sangria é uma retirada de dinheiro do caixa. O valor será descontado do saldo atual.
                    </div>

                    {% if caixa_aberto %}
                    <div class="mb-3">
                        <label class="form-label">Saldo Atual do Caixa</label>
                        <input type="text" class="form-control" value="R$ {{ '%.2f'|format(caixa_aberto.calcular_saldo()) }}" readonly>
                    </div>
                    {% endif %}

                    <div class="mb-3">
                        <label class="form-label">Valor da Sangria *</label>
                        <input type="number" class="form-control" name="valor_sangria" step="0.01" min="0.01" required placeholder="0.00">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Motivo *</label>
                        <select class="form-select" name="motivo_sangria" required>
                            <option value="">Selecionar Motivo...</option>
                            <option value="Troco para operação">Troco para operação</option>
                            <option value="Depósito bancário">Depósito bancário</option>
                            <option value="Pagamento de despesa">Pagamento de despesa</option>
                            <option value="Transferência para cofre">Transferência para cofre</option>
                            <option value="Retirada para segurança">Retirada para segurança</option>
                            <option value="Outros">Outros</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Observações da Sangria</label>
                        <textarea class="form-control" name="observacoes_sangria" rows="2" placeholder="Detalhes adicionais sobre a sangria..."></textarea>
                    </div>

                    <hr>

                    <div class="alert alert-danger">
                        <i class="bi bi-shield-lock"></i> <strong>AUTORIZAÇÃO OBRIGATÓRIA</strong><br>
                        <small>Somente Administrador ou Gestor podem autorizar sangrias.</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">👤 Usuário do Admin/Gerente *</label>
                        <input type="text" class="form-control" name="usuario_autorizador" required placeholder="Usuário do autorizador">
                        <small class="text-muted">A sangria exige identificação explícita do autorizador.</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">🔐 Senha do Admin/Gerente *</label>
                        <input type="password" class="form-control form-control-lg" name="senha_autorizacao" required placeholder="Digite a senha para autorizar">
                        <small class="text-muted">A sangria será registrada com o nome do autorizador.</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">#️⃣ PIN do Admin/Gerente</label>
                        <input type="password" class="form-control" name="pin_autorizacao" inputmode="numeric" maxlength="6" placeholder="Obrigatório quando o autorizador tiver PIN cadastrado">
                        <small class="text-muted">Use o PIN do usuário autorizador para ativar a segunda camada antifraude.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger btn-lg">
                        <i class="bi bi-shield-check"></i> Autorizar e Realizar Sangria
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Script para calcular totais múltiplas formas de pagamento
document.addEventListener('DOMContentLoaded', function() {
    // Para vendas
    document.querySelectorAll('.valor-multi').forEach(input => {
        input.addEventListener('input', function() {
            const vendaId = this.dataset.vendaId;
            const inputs = document.querySelectorAll(`.valor-multi[data-venda-id="${vendaId}"]`);
            let total = 0;
            inputs.forEach(inp => total += parseFloat(inp.value) || 0);
            
            const totalDiv = document.getElementById(`total-multi-${vendaId}`);
            const valorTotal = parseFloat(totalDiv.textContent.match(/Falta: R\$ ([\d.,]+)/)[1].replace(',', '.'));
            const falta = valorTotal - total;
            
            totalDiv.innerHTML = `<small><strong>Total Informado:</strong> R$ ${total.toFixed(2).replace('.', ',')} | <strong>Falta:</strong> R$ ${Math.max(0, falta).toFixed(2).replace('.', ',')}</small>`;
            if (Math.abs(falta) < 0.01) {
                totalDiv.classList.remove('alert-success');
                totalDiv.classList.add('alert-info');
            } else {
                totalDiv.classList.remove('alert-info');
                totalDiv.classList.add('alert-success');
            }
        });
    });
    
    // Para OS
    document.querySelectorAll('.valor-multi-os').forEach(input => {
        input.addEventListener('input', function() {
            const osId = this.dataset.osId;
            const inputs = document.querySelectorAll(`.valor-multi-os[data-os-id="${osId}"]`);
            let total = 0;
            inputs.forEach(inp => total += parseFloat(inp.value) || 0);
            
            const totalDiv = document.getElementById(`total-multi-os-${osId}`);
            const valorTotal = parseFloat(totalDiv.textContent.match(/Falta: R\$ ([\d.,]+)/)[1].replace(',', '.'));
            const falta = valorTotal - total;
            
            totalDiv.innerHTML = `<small><strong>Total Informado:</strong> R$ ${total.toFixed(2).replace('.', ',')} | <strong>Falta:</strong> R$ ${Math.max(0, falta).toFixed(2).replace('.', ',')}</small>`;
            if (Math.abs(falta) < 0.01) {
                totalDiv.classList.remove('alert-success');
                totalDiv.classList.add('alert-info');
            } else {
                totalDiv.classList.remove('alert-info');
                totalDiv.classList.add('alert-success');
            }
        });
    });
});
</script>

{% endblock %}