{% extends "base.html" %}

{% block title %}Relatório de Produtos{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-box-seam"></i> Relatório de Produtos</h2>
</div>

<!-- Filtros -->
<div class="card mb-4">
    <div class="card-body">
        <form method="GET" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Data Início</label>
                <input type="date" name="data_inicio" class="form-control" 
                       value="{{ data_inicio.strftime('%Y-%m-%d') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">Data Fim</label>
                <input type="date" name="data_fim" class="form-control" 
                       value="{{ data_fim.strftime('%Y-%m-%d') }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">Produto (Histórico)</label>
                <select name="produto_id" class="form-select">
                    <option value="">Selecione um produto...</option>
                    {% for produto in todos_produtos %}
                    <option value="{{ produto.id }}" {% if produto_id_filtro == produto.id %}selected{% endif %}>
                        {{ produto.nome }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-search"></i> Filtrar
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Ranking: Mais Vendidos -->
<div class="card mb-4">
    <div class="card-header bg-success text-white">
        <h5 class="mb-0"><i class="bi bi-trophy-fill"></i> TOP 10 - Mais Vendidos (Quantidade)</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th>Produto</th>
                        <th class="text-end">Qtd Vendida</th>
                        <th class="text-end">Receita Total</th>
                        <th class="text-end">Lucro Total</th>
                        <th class="text-end">Margem %</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in top_mais_vendidos %}
                    <tr>
                        <td><strong>{{ loop.index }}º</strong></td>
                        <td>
                            <a href="?data_inicio={{ data_inicio.strftime('%Y-%m-%d') }}&data_fim={{ data_fim.strftime('%Y-%m-%d') }}&produto_id={{ item.produto.id }}" 
                               class="text-decoration-none">
                                {{ item.produto.nome }}
                            </a>
                        </td>
                        <td class="text-end"><span class="badge bg-primary">{{ item.quantidade_vendida }}</span></td>
                        <td class="text-end text-success">R$ {{ "%.2f"|format(item.receita_total) }}</td>
                        <td class="text-end text-info">R$ {{ "%.2f"|format(item.lucro_total) }}</td>
                        <td class="text-end">
                            <span class="badge {% if item.margem_percentual >= 30 %}bg-success{% elif item.margem_percentual >= 15 %}bg-warning{% else %}bg-danger{% endif %}">
                                {{ "%.1f"|format(item.margem_percentual) }}%
                            </span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center text-muted">Nenhum produto vendido no período</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Ranking: Mais Lucrativos -->
<div class="card mb-4">
    <div class="card-header bg-warning text-dark">
        <h5 class="mb-0"><i class="bi bi-cash-stack"></i> TOP 10 - Mais Lucrativos</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th>Produto</th>
                        <th class="text-end">Lucro Total</th>
                        <th class="text-end">Receita Total</th>
                        <th class="text-end">Qtd Vendida</th>
                        <th class="text-end">Margem %</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in top_mais_lucrativos %}
                    <tr>
                        <td><strong>{{ loop.index }}º</strong></td>
                        <td>
                            <a href="?data_inicio={{ data_inicio.strftime('%Y-%m-%d') }}&data_fim={{ data_fim.strftime('%Y-%m-%d') }}&produto_id={{ item.produto.id }}" 
                               class="text-decoration-none">
                                {{ item.produto.nome }}
                            </a>
                        </td>
                        <td class="text-end text-success"><strong>R$ {{ "%.2f"|format(item.lucro_total) }}</strong></td>
                        <td class="text-end">R$ {{ "%.2f"|format(item.receita_total) }}</td>
                        <td class="text-end"><span class="badge bg-primary">{{ item.quantidade_vendida }}</span></td>
                        <td class="text-end">
                            <span class="badge {% if item.margem_percentual >= 30 %}bg-success{% elif item.margem_percentual >= 15 %}bg-warning{% else %}bg-danger{% endif %}">
                                {{ "%.1f"|format(item.margem_percentual) }}%
                            </span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="text-center text-muted">Nenhum produto vendido no período</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Histórico Detalhado do Produto -->
{% if produto_selecionado %}
<div class="card mb-4 border-primary">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-book"></i> Histórico de Vendas - {{ produto_selecionado.nome }}</h5>
    </div>
    <div class="card-body">
        {% if historico_produto %}
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th width="10%">Data</th>
                        <th width="10%">Venda #</th>
                        <th>Cliente</th>
                        <th class="text-center" width="10%">Quantidade</th>
                        <th class="text-end" width="12%">Preço Unit.</th>
                        <th class="text-end" width="12%">Valor Total</th>
                        <th class="text-end" width="12%">Lucro</th>
                    </tr>
                </thead>
                <tbody>
                    {% for venda in historico_produto %}
                    <tr>
                        <td>{{ venda.data.strftime('%d/%m/%Y') }}</td>
                        <td>
                            <a href="{{ url_for('venda_detalhes', id=venda.venda_id) }}" 
                               class="badge bg-secondary text-decoration-none" target="_blank">
                                #{{ venda.venda_id }}
                            </a>
                        </td>
                        <td>{{ venda.cliente }}</td>
                        <td class="text-center">{{ venda.quantidade }}</td>
                        <td class="text-end">R$ {{ "%.2f"|format(venda.preco_unitario) }}</td>
                        <td class="text-end text-success"><strong>R$ {{ "%.2f"|format(venda.valor_total) }}</strong></td>
                        <td class="text-end text-info">R$ {{ "%.2f"|format(venda.lucro) }}</td>
                    </tr>
                    {% endfor %}
                    <tr class="table-active">
                        <td colspan="3" class="text-end"><strong>TOTAIS:</strong></td>
                        <td class="text-center"><strong>{{ historico_produto|sum(attribute='quantidade') }}</strong></td>
                        <td></td>
                        <td class="text-end text-success"><strong>R$ {{ "%.2f"|format(historico_produto|sum(attribute='valor_total')) }}</strong></td>
                        <td class="text-end text-info"><strong>R$ {{ "%.2f"|format(historico_produto|sum(attribute='lucro')) }}</strong></td>
                    </tr>
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-center text-muted mb-0">Nenhuma venda encontrada para este produto no período.</p>
        {% endif %}
    </div>
</div>
{% endif %}

{% endblock %}