{% extends 'base.html' %}

{% block title %}Histórico de Caixa - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.caixa-toolbar {
    background: #fff;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.caixa-toolbar .form-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #868e96;
    margin-bottom: 0.25rem;
}
.caixa-toolbar .form-control, .caixa-toolbar .btn { height: 40px; min-height: 40px; }
.caixa-toolbar form { margin: 0; }

.alert-caixa-info {
    background: #eef5ff;
    border: 1px solid #c8d9f5;
    border-left: 4px solid #1861c5;
    color: #0f4a9e;
    border-radius: 10px;
}

.paginacao-modern .page-link {
    border: none; border-radius: 10px !important;
    color: #164a7b; font-weight: 600; font-size: .9rem;
    min-width: 2.4rem; text-align: center; padding: .5rem .65rem;
    margin-inline: .15rem; transition: all .15s;
    background: transparent;
}
.paginacao-modern .page-item.active .page-link {
    background: linear-gradient(135deg, #1e4976, #2f639d); color: #fff;
    box-shadow: 0 3px 10px rgba(30, 73, 118, .3);
}
.paginacao-modern .page-link:hover { background: #e4effc; }
.paginacao-modern .page-item.active .page-link:hover { background: linear-gradient(135deg, #1e4976, #2f639d); }
.paginacao-modern .page-item.disabled .page-link { color: #b9c4d0; background: transparent; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
    <h2 class="mb-0"><i class="bi bi-clock-history"></i> Histórico de Caixa</h2>
</div>

<div class="caixa-toolbar mb-3 d-flex flex-wrap gap-2 align-items-end">
    <form method="get" class="d-flex gap-2 align-items-end">
        <input type="hidden" name="mostrar_excluidos" value="{% if mostrar_excluidos %}1{% else %}0{% endif %}">
        <div>
            <label class="form-label d-block">Dia</label>
            <input type="date" name="data" value="{{ data_filtro }}" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i> Filtrar</button>
    </form>

    <div class="ms-auto d-flex gap-2 align-items-end flex-wrap">
        <a href="{% url 'imprimir_historico_caixa' %}?data={{ data_filtro }}&mostrar_excluidos={% if mostrar_excluidos %}1{% else %}0{% endif %}" class="btn btn-secondary">
            <i class="bi bi-printer"></i> Imprimir Dia
        </a>
        <a href="{% url 'exportar_historico_caixa_pdf' %}?data={{ data_filtro }}&mostrar_excluidos={% if mostrar_excluidos %}1{% else %}0{% endif %}" class="btn btn-danger">
            <i class="bi bi-file-earmark-pdf"></i> PDF do Dia
        </a>
        {% if pode_excluir %}
        <a href="?data={{ data_filtro }}&mostrar_excluidos={% if mostrar_excluidos %}0{% else %}1{% endif %}" class="btn {% if mostrar_excluidos %}btn-warning text-dark{% else %}btn-primary{% endif %}">
            {% if mostrar_excluidos %}Ocultar Excluídos{% else %}Mostrar Excluídos{% endif %}
        </a>
        {% endif %}
        {% if caixa_aberto %}
        <a href="{% url 'fechar_caixa' %}" class="btn btn-danger"><i class="bi bi-lock-fill"></i> Fechar Caixa</a>
        {% else %}
        <a href="{% url 'abrir_caixa' %}" class="btn btn-success"><i class="bi bi-unlock-fill"></i> Abrir Caixa</a>
        {% endif %}
    </div>
</div>

{% if caixa_aberto %}
<div class="alert alert-caixa-info mb-0 mt-1">
    <i class="bi bi-unlock-fill"></i> <strong>Caixa aberto</strong> desde {{ caixa_aberto.data_abertura|date:"d/m/Y H:i" }} por {{ caixa_aberto.operador.username }}.
</div>
{% endif %}
<div class="mb-3"></div>

{% if caixas_pendentes_conferencia %}
<div class="alert alert-danger">
    <i class="bi bi-exclamation-octagon-fill"></i> <strong>Pendência de conferência:</strong> há {{ caixas_pendentes_conferencia|length }} caixa(s) fechados automaticamente aguardando validação.
</div>
{% endif %}

<div class="card mb-4">
    <div class="card-header"><i class="bi bi-calendar-check"></i> Resumo Diário de Vendas</div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-sm align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Data</th>
                        <th class="text-end">Qtd. Vendas</th>
                        <th class="text-end">Total Vendido</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in resumo_diario %}
                    <tr>
                        <td>{{ item.data_venda__date|date:"d/m/Y" }}</td>
                        <td class="text-end">{{ item.quantidade }}</td>
                        <td class="text-end"><strong>R$ {{ item.total|floatformat:2 }}</strong></td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="3" class="text-center text-muted">{% if data_filtro %}Sem vendas no dia selecionado.{% else %}Sem vendas registradas.{% endif %}</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-list-ul"></i> Registros de Caixa (Dia)</span>
        <small class="text-muted">Total: {{ total_registros }}</small>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Abertura</th>
                        <th>Fechamento</th>
                        <th>Operador</th>
                        <th>Saldo Inicial</th>
                        <th>Total Vendas</th>
                        <th>Saldo Final</th>
                        <th>Status</th>
                        <th>Tipo</th>
                        <th>Conferência</th>
                        <th class="text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for caixa in caixas %}
                    <tr {% if caixa.excluido %}class="table-danger"{% endif %}>
                        <td>{{ caixa.data_abertura|date:"d/m/Y H:i" }}</td>
                        <td>{{ caixa.data_fechamento|date:"d/m/Y H:i"|default:"-" }}</td>
                        <td>{{ caixa.operador.username|default:"-" }}</td>
                        <td>R$ {{ caixa.saldo_inicial|floatformat:2 }}</td>
                        <td>R$ {{ caixa.total_vendas|floatformat:2 }}</td>
                        <td>R$ {{ caixa.saldo_final|floatformat:2 }}</td>
                        <td>{% if caixa.status == 'aberto' %}<span class="badge bg-success">Aberto</span>{% else %}<span class="badge bg-secondary">Fechado</span>{% endif %}</td>
                        <td>{% if caixa.tipo_fechamento == 'automatico' %}<span class="badge bg-warning text-dark">Automático</span>{% else %}<span class="badge bg-primary">Manual</span>{% endif %}</td>
                        <td>
                            {% if caixa.tipo_fechamento == 'automatico' %}
                                {% if caixa.pendente_conferencia %}
                                <span class="badge bg-danger">Pendente</span>
                                {% elif caixa.motivo_ajuste_conferencia %}
                                <span class="badge bg-info text-dark">Ajustado</span>
                                {% else %}
                                <span class="badge bg-success">Confirmado</span>
                                {% endif %}
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td class="text-end">
                            {% if caixa.status == 'aberto' %}
                            <a href="{% url 'fechar_caixa' %}" class="btn btn-sm btn-danger">Fechar</a>
                            {% endif %}
                            {% if caixa.tipo_fechamento == 'automatico' and caixa.pendente_conferencia and pode_conferir %}
                            <form method="post" action="{% url 'conferir_caixa_automatico' caixa.id %}" class="d-inline">
                                {% csrf_token %}
                                <input type="hidden" name="acao" value="confirmar">
                                <button type="submit" class="btn btn-sm btn-success">Confirmar</button>
                            </form>
                            <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#ajuste{{ caixa.id }}">Ajustar</button>
                            {% endif %}
                            {% if caixa.status == 'fechado' and not caixa.excluido and pode_excluir %}
                            <a href="{% url 'excluir_caixa' caixa.id %}" class="btn btn-sm btn-danger">Excluir</a>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="10" class="text-center text-muted py-4">{% if data_filtro %}Nenhum registro encontrado para o dia selecionado.{% else %}Nenhum registro encontrado.{% endif %}</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% for caixa in caixas %}
            {% if caixa.tipo_fechamento == 'automatico' and caixa.pendente_conferencia and pode_conferir %}
            <div class="modal fade" id="ajuste{{ caixa.id }}" tabindex="-1" aria-labelledby="ajusteLabel{{ caixa.id }}" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form method="post" action="{% url 'conferir_caixa_automatico' caixa.id %}">
                            {% csrf_token %}
                            <input type="hidden" name="acao" value="ajustar">
                            <div class="modal-header">
                                <h5 class="modal-title" id="ajusteLabel{{ caixa.id }}">Ajustar fechamento automático</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="saldoFinalAjuste{{ caixa.id }}" class="form-label">Saldo final ajustado</label>
                                    <input type="text" inputmode="decimal" name="saldo_final_ajuste" id="saldoFinalAjuste{{ caixa.id }}" class="form-control" value="{{ caixa.saldo_final|floatformat:2 }}" required>
                                </div>
                                <div class="mb-3">
                                    <label for="motivoAjuste{{ caixa.id }}" class="form-label">Motivo do ajuste</label>
                                    <textarea name="motivo_ajuste" id="motivoAjuste{{ caixa.id }}" class="form-control" rows="3" required></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-warning">Salvar ajuste</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {% endif %}
        {% endfor %}

        {% if caixas.paginator.num_pages > 1 %}
        <nav aria-label="Paginação dos registros de caixa" class="mt-3">
            <ul class="pagination paginacao-modern justify-content-center flex-wrap">
                {% if caixas.has_previous %}
                <li class="page-item mx-1">
                    <a class="page-link" href="?page={{ caixas.previous_page_number }}{% if data_filtro %}&data={{ data_filtro }}{% endif %}&mostrar_excluidos={% if mostrar_excluidos %}1{% else %}0{% endif %}" title="Página anterior">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled mx-1"><span class="page-link"><i class="bi bi-chevron-left"></i></span></li>
                {% endif %}

                {% for num in caixas.paginator.page_range %}
                    {% if num == 1 or num == caixas.paginator.num_pages or num >= caixas.number|add:'-2' and num <= caixas.number|add:'+2' %}
                        {% if caixas.number == num %}
                        <li class="page-item active mx-1"><span class="page-link">{{ num }}</span></li>
                        {% elif num == caixas.paginator.num_pages and caixas.number|add:'+2' < num %}
                        <li class="page-item"><span class="page-link"><i class="bi bi-chevron-double-right"></i> {{ num }}</span></li>
                        {% elif num == 1 and caixas.number|add:'-2' > num %}
                        <li class="page-item"><span class="page-link">{{ num }} <i class="bi bi-chevron-double-left"></i></span></li>
                        {% else %}
                        <li class="page-item mx-1">
                            <a class="page-link" href="?page={{ num }}{% if data_filtro %}&data={{ data_filtro }}{% endif %}&mostrar_excluidos={% if mostrar_excluidos %}1{% else %}0{% endif %}">{{ num }}</a>
                        </li>
                        {% endif %}
                    {% elif num == caixas.number|add:'-3' or num == caixas.number|add:'+3' %}
                        <li class="page-item disabled mx-1"><span class="page-link">&hellip;</span></li>
                    {% endif %}
                {% endfor %}

                {% if caixas.has_next %}
                <li class="page-item mx-1">
                    <a class="page-link" href="?page={{ caixas.next_page_number }}{% if data_filtro %}&data={{ data_filtro }}{% endif %}&mostrar_excluidos={% if mostrar_excluidos %}1{% else %}0{% endif %}" title="Próxima página">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
                {% else %}
                <li class="page-item disabled mx-1"><span class="page-link"><i class="bi bi-chevron-right"></i></span></li>
                {% endif %}
            </ul>
            <div class="text-center text-muted small">
                Página <strong>{{ caixas.number }}</strong> de <strong>{{ caixas.paginator.num_pages }}</strong> · {{ caixas.paginator.count }} registro(s)
            </div>
        </nav>
        {% endif %}
    </div>
</div>
{% endblock %}