{% extends "base.html" %}

{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}Estoque em Risco - CapeSystem{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-exclamation-triangle text-warning"></i> Estoque em Risco</h1>
    <div class="d-flex gap-2">
        <form class="d-flex gap-2" method="GET">
            <select name="empresa_id" class="form-select" style="width: 260px;">
                {% for emp in empresas_disponiveis %}
                <option value="{{ emp.id }}" {% if empresa_id_selecionada == emp.id %}selected{% endif %} title="{{ empresa_ui.titulo(emp) }}">
                    {{ empresa_ui.nome(emp) }}
                </option>
                {% endfor %}
            </select>
            <select name="classificar" class="form-select" style="width: 140px;">
                <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Código</option>
                <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Nome</option>
                <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Descrição</option>
            </select>
            <select name="ordem" class="form-select" style="width: 140px;">
                <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Crescente</option>
                <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Decrescente</option>
            </select>
            <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
        </form>
        <button class="btn btn-outline-success" onclick="exportarExcel()">
            <i class="bi bi-file-earmark-excel"></i> Excel
        </button>
        <button class="btn btn-outline-primary" onclick="window.print()">
            <i class="bi bi-printer"></i> Imprimir
        </button>
    </div>
</div>

<!-- Resumo de Alertas -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm {% if alertas.estoque_zerado > 0 %}border-danger border-2{% endif %}">
            <div class="card-body text-center">
                <div class="d-flex justify-content-center mb-2">
                    <div class="bg-danger-subtle p-3 rounded-circle">
                        <i class="bi bi-x-circle text-danger fs-3"></i>
                    </div>
                </div>
                <h3 class="text-danger mb-0">{{ alertas.estoque_zerado }}</h3>
                <small class="text-muted">Estoque Zerado</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm {% if alertas.estoque_baixo > 0 %}border-warning border-2{% endif %}">
            <div class="card-body text-center">
                <div class="d-flex justify-content-center mb-2">
                    <div class="bg-warning-subtle p-3 rounded-circle">
                        <i class="bi bi-arrow-down-circle text-warning fs-3"></i>
                    </div>
                </div>
                <h3 class="text-warning mb-0">{{ alertas.estoque_baixo }}</h3>
                <small class="text-muted">Estoque Baixo</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm {% if alertas.sem_movimento > 0 %}border-info border-2{% endif %}">
            <div class="card-body text-center">
                <div class="d-flex justify-content-center mb-2">
                    <div class="bg-info-subtle p-3 rounded-circle">
                        <i class="bi bi-clock-history text-info fs-3"></i>
                    </div>
                </div>
                <h3 class="text-info mb-0">{{ alertas.sem_movimento }}</h3>
                <small class="text-muted">Sem Movimento (90 dias)</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card border-0 shadow-sm {% if alertas.excesso > 0 %}border-secondary border-2{% endif %}">
            <div class="card-body text-center">
                <div class="d-flex justify-content-center mb-2">
                    <div class="bg-secondary-subtle p-3 rounded-circle">
                        <i class="bi bi-arrow-up-circle text-secondary fs-3"></i>
                    </div>
                </div>
                <h3 class="text-secondary mb-0">{{ alertas.excesso }}</h3>
                <small class="text-muted">Excesso de Estoque</small>
            </div>
        </div>
    </div>
</div>

<!-- Valor em Risco -->
<div class="alert alert-warning mb-4">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h5 class="mb-1"><i class="bi bi-exclamation-diamond me-2"></i> Valor Total em Risco</h5>
            <p class="mb-0">Capital parado em produtos sem movimento ou com excesso de estoque.</p>
        </div>
        <div class="col-md-4 text-end">
            <h2 class="text-danger mb-0">R$ {{ "%.2f"|format(valor_em_risco) }}</h2>
        </div>
    </div>
</div>

<!-- Tabs para cada tipo de risco -->
<ul class="nav nav-tabs mb-3" role="tablist">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabZerado">
            <i class="bi bi-x-circle text-danger"></i> Estoque Zerado
            <span class="badge bg-danger">{{ alertas.estoque_zerado }}</span>
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabBaixo">
            <i class="bi bi-arrow-down-circle text-warning"></i> Estoque Baixo
            <span class="badge bg-warning text-dark">{{ alertas.estoque_baixo }}</span>
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabParado">
            <i class="bi bi-clock-history text-info"></i> Sem Movimento
            <span class="badge bg-info">{{ alertas.sem_movimento }}</span>
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabExcesso">
            <i class="bi bi-arrow-up-circle text-secondary"></i> Excesso
            <span class="badge bg-secondary">{{ alertas.excesso }}</span>
        </button>
    </li>
</ul>

<div class="tab-content">
    <!-- Estoque Zerado -->
    <div class="tab-pane fade show active" id="tabZerado">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-danger">
                            <tr>
                                <th>Código</th>
                                <th>Produto</th>
                                <th>Grupo</th>
                                <th class="text-end">Estoque Mín.</th>
                                <th class="text-center">Última Venda</th>
                                <th class="text-center">Ação</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in produtos_zerado %}
                            <tr>
                                <td><code>{{ p.codigo or '-' }}</code></td>
                                <td><strong>{{ p.nome[:40] }}</strong></td>
                                <td>{{ p.grupo or '-' }}</td>
                                <td class="text-end">{{ p.estoque_minimo }}</td>
                                <td class="text-center">
                                    {% if p.ultima_venda %}
                                        {{ p.ultima_venda.strftime('%d/%m/%Y') }}
                                    {% else %}
                                        <span class="text-muted">-</span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <a href="{{ url_for('editar_produto', id=p.id) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="6" class="text-center text-success py-4">
                                    <i class="bi bi-check-circle fs-3"></i><br>
                                    Nenhum produto com estoque zerado
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Estoque Baixo -->
    <div class="tab-pane fade" id="tabBaixo">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-warning">
                            <tr>
                                <th>Código</th>
                                <th>Produto</th>
                                <th>Grupo</th>
                                <th class="text-end">Estoque</th>
                                <th class="text-end">Mínimo</th>
                                <th class="text-end">Repor</th>
                                <th class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in produtos_baixo %}
                            <tr>
                                <td><code>{{ p.codigo or '-' }}</code></td>
                                <td><strong>{{ p.nome[:40] }}</strong></td>
                                <td>{{ p.grupo or '-' }}</td>
                                <td class="text-end text-danger fw-bold">{{ "%.2f"|format(p.estoque_atual) }}</td>
                                <td class="text-end">{{ "%.2f"|format(p.estoque_minimo) }}</td>
                                <td class="text-end text-primary fw-bold">{{ "%.2f"|format(p.quantidade_repor) }}</td>
                                <td class="text-center">
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar bg-warning" style="width: {{ p.percentual }}%">
                                            {{ "%.0f"|format(p.percentual) }}%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="7" class="text-center text-success py-4">
                                    <i class="bi bi-check-circle fs-3"></i><br>
                                    Nenhum produto com estoque baixo
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Sem Movimento -->
    <div class="tab-pane fade" id="tabParado">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" id="tabelaParado">
                        <thead class="table-info">
                            <tr>
                                <th>Código</th>
                                <th>Produto</th>
                                <th>Grupo</th>
                                <th class="text-end">Estoque</th>
                                <th class="text-end">Valor Parado</th>
                                <th class="text-center">Última Venda</th>
                                <th class="text-center">Dias Parado</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in produtos_parado %}
                            <tr>
                                <td><code>{{ p.codigo or '-' }}</code></td>
                                <td><strong>{{ p.nome[:40] }}</strong></td>
                                <td>{{ p.grupo or '-' }}</td>
                                <td class="text-end">{{ "%.2f"|format(p.estoque_atual) }}</td>
                                <td class="text-end text-danger fw-bold">R$ {{ "%.2f"|format(p.valor_parado) }}</td>
                                <td class="text-center">
                                    {% if p.ultima_venda %}
                                        {{ p.ultima_venda.strftime('%d/%m/%Y') }}
                                    {% else %}
                                        <span class="text-muted">Nunca</span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    <span class="badge {% if p.dias_parado > 180 %}bg-danger{% elif p.dias_parado > 90 %}bg-warning text-dark{% else %}bg-info{% endif %}">
                                        {{ p.dias_parado }} dias
                                    </span>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="7" class="text-center text-success py-4">
                                    <i class="bi bi-check-circle fs-3"></i><br>
                                    Todos os produtos tiveram movimentação recente
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Excesso -->
    <div class="tab-pane fade" id="tabExcesso">
        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-secondary">
                            <tr>
                                <th>Código</th>
                                <th>Produto</th>
                                <th>Grupo</th>
                                <th class="text-end">Estoque</th>
                                <th class="text-end">Máximo</th>
                                <th class="text-end">Excesso</th>
                                <th class="text-end">Valor Excesso</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for p in produtos_excesso %}
                            <tr>
                                <td><code>{{ p.codigo or '-' }}</code></td>
                                <td><strong>{{ p.nome[:40] }}</strong></td>
                                <td>{{ p.grupo or '-' }}</td>
                                <td class="text-end text-primary fw-bold">{{ "%.2f"|format(p.estoque_atual) }}</td>
                                <td class="text-end">{{ "%.2f"|format(p.estoque_maximo) }}</td>
                                <td class="text-end text-warning fw-bold">{{ "%.2f"|format(p.excesso) }}</td>
                                <td class="text-end text-danger">R$ {{ "%.2f"|format(p.valor_excesso) }}</td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="7" class="text-center text-success py-4">
                                    <i class="bi bi-check-circle fs-3"></i><br>
                                    Nenhum produto com excesso de estoque
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
<script>
function exportarExcel() {
    // Combinar todas as tabelas em um workbook
    const wb = XLSX.utils.book_new();
    
    // Aba de produtos parados (principal)
    const tableParado = document.getElementById('tabelaParado');
    if (tableParado) {
        const wsParado = XLSX.utils.table_to_sheet(tableParado);
        XLSX.utils.book_append_sheet(wb, wsParado, 'Sem Movimento');
    }
    
    XLSX.writeFile(wb, 'estoque_em_risco_{{ hoje.strftime("%Y%m%d") }}.xlsx');
}
</script>

<style>
@media print {
    .navbar, .sidebar, .btn, .nav-tabs { display: none !important; }
    .tab-pane { display: block !important; opacity: 1 !important; }
    .card { break-inside: avoid; margin-bottom: 20px; }
}
</style>
{% endblock %}