{% extends 'base.html' %}

{% block title %}Vendas - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.vendas-lista .paginacao-modern { gap: 0; }
.vendas-lista .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;
}
.vendas-lista .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);
}
.vendas-lista .paginacao-modern .page-link:hover { background: #e4effc; }
.vendas-lista .paginacao-modern .page-item.active .page-link:hover { background: linear-gradient(135deg, #1e4976, #2f639d); }
.vendas-lista .paginacao-modern .page-item.disabled .page-link { color: #b9c4d0; background: transparent; }

.vendas-lista .page-heading { display: flex; align-items: center; gap: .7rem; }
.vendas-lista .page-heading > i { display: inline-grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .7rem; background: #e4effc; color: #245e98; font-size: 1.35rem; }
.vendas-lista .page-heading small { color: #59697a; }

.vendas-lista .list-card { border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.vendas-lista .card-header { display: flex; justify-content: space-between; align-items: center; }
.vendas-lista .badge-count { background: #eaf3fc; color: #164a7b; border-radius: 999px; font-size: .78rem; padding: .25rem .7rem; font-weight: 600; }

.vendas-lista .filtros label { color: #44586c; font-size: .83rem; font-weight: 600; margin-bottom: .3rem; }
.vendas-lista .filtros-panel { padding: 1rem; border: 1px solid #e2e9f1; border-radius: .8rem; background: #f6f9fc; }

.vendas-lista .numero-venda { font-size: .8rem; font-weight: 700; color: #164a7b; white-space: nowrap; }
.vendas-lista .numero-venda .prefixo { opacity: .55; font-weight: 600; }
.vendas-lista .data-txt { white-space: nowrap; color: #526174; }
.vendas-lista .vendedor-mini { display: inline-flex; align-items: center; gap: .35rem; }
.vendas-lista .vendedor-mini i { color: #7c8ea1; }

.vendas-lista table td, .vendas-lista table th { padding: .55rem .6rem; }
.vendas-lista .thead th { background: #f4f7fa; color: #526174; font-size: .84rem; white-space: nowrap; }
.vendas-lista { min-width: 0; }

/* Totais */
.vendas-lista .totais { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.vendas-lista .total-item {
    flex: 1 1 200px;
    display: flex; align-items: center; gap: .9rem;
    background: #fff; border-radius: 12px; padding: .8rem 1rem;
    border: 1px solid #e8edf3; border-left: 5px solid var(--acent2, #1861c5);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.vendas-lista .totais .icon-mao {
    display: inline-grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: 10px;
    background: var(--accent-bg); color: var(--accent); font-size: 1.2rem; flex-shrink: 0;
}
.vendas-lista .titulo { font-size: .83rem; font-weight: 600; color: #526174; }
.vendas-lista .valor { font-size: 1.25rem; font-weight: 700; color: #212529; line-height: 1.1; }
</style>
{% endblock %}

{% block content %}
<div class="vendas-lista">
    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-end mb-3">
        <div class="page-heading">
            <i class="bi bi-cart-check"></i>
            <div>
                <h2 class="mb-0">Histórico de Vendas</h2>
                <small>Todas as finalizadas/canceladas da loja.</small>
            </div>
        </div>
        <a href="{% url 'pdv' %}" class="btn btn-primary"><i class="bi bi-cart-plus"></i> Nova Venda</a>
    </div>

    <div class="card list-card">
        <div class="card-header">
            <span><i class="bi bi-list-ul"></i> Lista de Vendas</span>
            <span class="badge-count"><i class="bi bi-receipt"></i> total de vendas filtradas: {{ total_vendas }}</span>
        </div>
        <div class="card-body">
            <form method="get" class="filtros row g-2 mb-3">
                <div class="col-12 col-lg-4">
                    <label for="busca-venda">Buscar</label>
                    <input type="text" class="form-control" name="busca" placeholder="Número, cliente, vendedor..." value="{{ busca }}" autocomplete="off">
                </div>
                <div class="col-6 col-md-6 col-lg-2">
                    <label for="de-venda">De</label>
                    <input type="date" class="form-control" name="data_inicio" value="{{ data_inicio }}">
                </div>
                <div class="col-6 col-md-6 col-lg-2">
                    <label for="ate-venda">Até</label>
                    <input type="date" class="form-control" name="data_fim" value="{{ data_fim }}">
                </div>
                <div class="col-12 col-md-6 col-lg-2">
                    <label for="status-venda">Status</label>
                    <select class="form-select" name="status">
                        <option value="" {% if not status_filtro %}selected{% endif %}>Todos os status</option>
                        <option value="finalizada" {% if status_filtro == 'finalizada' %}selected{% endif %}>Finalizadas</option>
                        <option value="cancelada" {% if status_filtro == 'cancelada' %}selected{% endif %}>Canceladas</option>
                    </select>
                </div>
                <div class="col-12 col-md-6 col-lg-2 d-flex align-items-end gap-2">
                    <button type="submit" class="btn btn-primary flex-grow-1"><i class="bi bi-search"></i> Filtrar</button>
                    <a href="{% url 'lista_vendas' %}" class="btn btn-outline-secondary">Limpar</a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-hover table-sm align-middle mb-0">
                    <thead class="thead">
                        <tr>
                            <th>Nº Venda</th>
                            <th>Data/Hora</th>
                            <th>Cliente</th>
                            <th>Vendedor</th>
                            <th>Pagamento</th>
                            <th class="text-end">Total</th>
                            <th>Status</th>
                            <th class="text-end">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for venda in vendas %}
                        <tr>
                            <td><span class="numero-venda"><span class="prefixo">V{{ venda.data_venda|date:"y" }}…</span>{{ venda.numero_venda|slice:"-9" }}</span></td>
                            <td class="data-txt">{{ venda.data_venda|date:"d/m/y H:i" }}</td>
                            <td class="fw-semibold">{{ venda.cliente.nome|default:"Cliente Anônimo" }}</td>
                            <td><span class="vendedor-mini"><i class="bi bi-person"></i> {{ venda.vendedor.username|default:"-" }}</span></td>
                            <td>
                                {% for pag in venda.pagamentos.all %}
                                    {% with tipo=pag.forma_pagamento.tipo %}
                                    <span class="badge
                                        {% if tipo == 'dinheiro' %}bg-success
                                        {% elif tipo == 'pix' %}bg-info text-dark
                                        {% elif tipo == 'credito' %}bg-primary
                                        {% elif tipo == 'debito' %}bg-warning text-dark
                                        {% elif tipo == 'crediario' %}bg-danger
                                        {% elif tipo == 'boleto' %}bg-secondary
                                        {% else %}bg-secondary
                                        {% endif %}">{{ pag.forma_pagamento.nome }}</span>
                                    {% endwith %}
                                {% empty %}
                                    <span class="text-muted">-</span>
                                {% endfor %}
                            </td>
                            <td class="text-end"><strong>R$ {{ venda.total|floatformat:2 }}</strong></td>
                            <td>
                                {% if venda.status == 'finalizada' %}
                                    <span class="badge bg-success">Finalizada</span>
                                {% elif venda.status == 'cancelada' %}
                                    <span class="badge bg-danger">Cancelada</span>
                                {% else %}
                                    <span class="badge bg-warning">Aberta</span>
                                {% endif %}
                            </td>
                            <td class="text-end">
                                <div class="d-inline-flex gap-1 justify-content-end">
                                    <a href="{% url 'detalhe_venda' venda.id %}" class="btn btn-sm btn-outline-primary" title="Ver detalhes">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    {% if venda.status == 'finalizada' %}
                                    <a href="{% url 'imprimir_cupom' venda.id %}" class="btn btn-sm btn-outline-secondary" title="Cupom" target="_blank">
                                        <i class="bi bi-printer"></i>
                                    </a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" class="text-center py-4 text-muted">
                                <i class="bi bi-inbox d-block fs-2 mb-2"></i>Nenhuma venda registrada para os filtros selecionados.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if vendas.has_other_pages %}
            <nav aria-label="Paginação de vendas" class="mt-4">
                <ul class="pagination paginacao-modern justify-content-center flex-wrap">
                    {% if vendas.has_previous %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ vendas.previous_page_number }}{% if busca %}&busca={{ busca }}{% endif %}{% if data_inicio %}&data_inicio={{ data_inicio }}{% endif %}{% if data_fim %}&data_fim={{ data_fim }}{% endif %}{% if status_filtro %}&status={{ status_filtro }}{% 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 vendas.paginator.page_range %}
                        {% if num == 1 or num == vendas.paginator.num_pages or num >= vendas.number|add:'-2' and num <= vendas.number|add:'+2' %}
                            {% if vendas.number == num %}
                            <li class="page-item active mx-1"><span class="page-link">{{ num }}</span></li>
                            {% elif num == vendas.paginator.num_pages and vendas.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 vendas.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 busca %}&busca={{ busca }}{% endif %}{% if data_inicio %}&data_inicio={{ data_inicio }}{% endif %}{% if data_fim %}&data_fim={{ data_fim }}{% endif %}{% if status_filtro %}&status={{ status_filtro }}{% endif %}">{{ num }}</a>
                            </li>
                            {% endif %}
                        {% elif num == vendas.number|add:'-3' or num == vendas.number|add:'+3' %}
                            <li class="page-item disabled mx-1"><span class="page-link">&hellip;</span></li>
                        {% endif %}
                    {% endfor %}

                    {% if vendas.has_next %}
                    <li class="page-item mx-1">
                        <a class="page-link" href="?page={{ vendas.next_page_number }}{% if busca %}&busca={{ busca }}{% endif %}{% if data_inicio %}&data_inicio={{ data_inicio }}{% endif %}{% if data_fim %}&data_fim={{ data_fim }}{% endif %}{% if status_filtro %}&status={{ status_filtro }}{% 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>{{ vendas.number }}</strong> de <strong>{{ vendas.paginator.num_pages }}</strong> · {{ vendas.paginator.count }} venda(s)</div>
            </nav>
            {% endif %}

            {% if vendas %}
            <div class="totais">
                <div class="total-item" style="--acent2: #1861c5; --acent2-bg: #dcebfa;">
                    <span class="icon-mao"><i class="bi bi-receipt"></i></span>
                    <div>
                        <div class="titulo">Total de vendas (filtradas)</div>
                        <div class="valor">{{ total_vendas }}</div>
                    </div>
                </div>
                <div class="total-item" style="--acent2: #1e7e34; --acent2-bg: #d4f0d8;">
                    <span class="icon-mao"><i class="bi bi-cash-stack"></i></span>
                    <div>
                        <div class="titulo">Valor total (filtradas)</div>
                        <div class="valor">R$ {{ valor_total|floatformat:2 }}</div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}