{% extends "base.html" %}

{% block title %}Caixa - Detalhes{% 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 - {{ caixa.data_abertura.strftime('%d/%m/%Y') }}</h2>
        <div>
            {% if caixa.status == 'aberto' %}
            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalEntrada">
                <i class="bi bi-plus-circle"></i> Entrada
            </button>
            <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#modalSaida">
                <i class="bi bi-dash-circle"></i> Saída
            </button>
            {% endif %}
            <a href="{{ url_for('caixa') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Voltar
            </a>
        </div>
    </div>

    {# Resumo do Caixa #}
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-muted">Valor Inicial</h6>
                    <h3>R$ {{ "%.2f"|format(caixa.valor_inicial) }}</h3>
                    <small class="text-muted">{{ caixa.data_abertura.strftime('%d/%m %H:%M') }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <h6 class="text-muted">Total Entradas</h6>
                    <h3 class="text-success">R$ {{ "%.2f"|format(total_entradas) }}</h3>
                    <small class="text-muted">{{ caixa.movimentos|selectattr('tipo', 'equalto', 'entrada')|list|length }} movimentos</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body">
                    <h6 class="text-muted">Total Saídas</h6>
                    <h3 class="text-danger">R$ {{ "%.2f"|format(total_saidas) }}</h3>
                    <small class="text-muted">{{ caixa.movimentos|selectattr('tipo', 'equalto', 'saida')|list|length }} movimentos</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <h6 class="text-muted">Saldo Atual</h6>
                    <h3 class="text-primary">R$ {{ "%.2f"|format(saldo_atual) }}</h3>
                    <span class="badge {% if caixa.status == 'aberto' %}bg-success{% else %}bg-secondary{% endif %}">
                        {{ 'Aberto' if caixa.status == 'aberto' else 'Fechado' }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    {# Resumo por Forma de Pagamento #}
    {% if movimentos_por_forma %}
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="bi bi-bar-chart"></i> Resumo por Forma de Pagamento</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Forma de Pagamento</th>
                            <th class="text-end">Entradas</th>
                            <th class="text-end">Saídas</th>
                            <th class="text-end">Saldo</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for forma, valores in movimentos_por_forma.items() %}
                        <tr>
                            <td><strong>{{ forma }}</strong></td>
                            <td class="text-end text-success">R$ {{ "%.2f"|format(valores.entradas) }}</td>
                            <td class="text-end text-danger">R$ {{ "%.2f"|format(valores.saidas) }}</td>
                            <td class="text-end">
                                <strong>R$ {{ "%.2f"|format(valores.entradas - valores.saidas) }}</strong>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    {# Lista de Movimentações #}
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0"><i class="bi bi-list"></i> Movimentações</h5>
        </div>
        <div class="card-body">
            {% if caixa.movimentos %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Data/Hora</th>
                            <th>Tipo</th>
                            <th>Categoria</th>
                            <th>Descrição</th>
                            <th>Forma Pagamento</th>
                            <th class="text-end">Valor</th>
                            <th>Usuário</th>
                            <th width="80">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for mov in caixa.movimentos|sort(attribute='data_hora', reverse=True) %}
                        <tr>
                            <td>{{ mov.data_hora.strftime('%d/%m %H:%M') }}</td>
                            <td>
                                {% if mov.tipo == 'entrada' %}
                                    <span class="badge bg-success">Entrada</span>
                                {% elif mov.tipo == 'saida' %}
                                    <span class="badge bg-danger">Saída</span>
                                {% else %}
                                    <span class="badge bg-info">{{ mov.tipo }}</span>
                                {% endif %}
                            </td>
                            <td>{{ mov.categoria or '-' }}</td>
                            <td>{{ mov.descricao }}</td>
                            <td>{{ mov.forma_pagamento or '-' }}</td>
                            <td class="text-end">
                                <strong {% if mov.tipo == 'entrada' %}class="text-success"{% elif mov.tipo == 'saida' %}class="text-danger"{% endif %}>
                                    R$ {{ "%.2f"|format(mov.valor) }}
                                </strong>
                            </td>
                            <td>{{ mov.usuario.username if mov.usuario and mov.usuario.username else (mov.usuario.email if mov.usuario else '-') }}</td>
                            <td>
                                {% if caixa.status == 'aberto' %}
                                <form method="POST" action="{{ url_for('excluir_movimento_caixa', id=mov.id) }}" class="d-inline">
                                    <button type="submit" class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm('Confirma a exclusão?')">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-muted">Nenhuma movimentação registrada.</p>
            {% endif %}
        </div>
    </div>
</div>

{# Modal Entrada #}
<div class="modal fade cape-modal-standard" id="modalEntrada" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('adicionar_movimento_caixa', id=caixa.id) }}">
                <input type="hidden" name="tipo" value="entrada">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title"><i class="bi bi-plus-circle"></i> Registrar Entrada</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Categoria *</label>
                        <select class="form-select" name="categoria" required>
                            <option value="">Selecione...</option>
                            <option value="venda">Venda</option>
                            <option value="recebimento">Recebimento de Cliente</option>
                            <option value="mensalidade">Mensalidade/Contrato</option>
                            <option value="deposito">Depósito</option>
                            <option value="outros">Outros</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Descrição *</label>
                        <input type="text" class="form-control" name="descricao" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Valor *</label>
                        <input type="number" class="form-control" name="valor" 
                               step="0.01" min="0.01" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Forma de Pagamento *</label>
                        <select class="form-select" name="forma_pagamento" required>
                            <option value="dinheiro">Dinheiro</option>
                            <option value="pix">PIX</option>
                            <option value="cartao_debito">Cartão Débito</option>
                            <option value="cartao_credito">Cartão Crédito</option>
                            <option value="transferencia">Transferência</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Observações</label>
                        <textarea class="form-control" name="observacoes" rows="2"></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-check"></i> Registrar Entrada
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{# Modal Saída #}
<div class="modal fade cape-modal-standard" id="modalSaida" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('adicionar_movimento_caixa', id=caixa.id) }}">
                <input type="hidden" name="tipo" value="saida">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title"><i class="bi bi-dash-circle"></i> Registrar Saída</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Categoria *</label>
                        <select class="form-select" name="categoria" required>
                            <option value="">Selecione...</option>
                            <option value="despesa">Despesa Operacional</option>
                            <option value="pagamento">Pagamento a Fornecedor</option>
                            <option value="retirada">Retirada de Sócio</option>
                            <option value="compra">Compra Rápida</option>
                            <option value="sangria">Sangria</option>
                            <option value="outros">Outros</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Descrição *</label>
                        <input type="text" class="form-control" name="descricao" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Valor *</label>
                        <input type="number" class="form-control" name="valor" 
                               step="0.01" min="0.01" required>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Forma de Pagamento *</label>
                        <select class="form-select" name="forma_pagamento" required>
                            <option value="dinheiro">Dinheiro</option>
                            <option value="pix">PIX</option>
                            <option value="cartao_debito">Cartão Débito</option>
                            <option value="cartao_credito">Cartão Crédito</option>
                            <option value="transferencia">Transferência</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Observações</label>
                        <textarea class="form-control" name="observacoes" rows="2"></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-danger">
                        <i class="bi bi-check"></i> Registrar Saída
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}