{% extends "base.html" %}

{% block title %}Inventário de Estoque - CapeServer{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2><i class="bi bi-clipboard-check text-primary"></i> Inventário de Estoque</h2>
            <p class="text-muted mb-0">Contagem física e ajuste em lote</p>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-dark" onclick="capeVoltarOu('{{ url_for('estoque_ajuste') }}')">
                <i class="bi bi-arrow-left"></i> Voltar
            </button>
            <a href="{{ url_for('estoque_ajuste') }}" class="btn btn-outline-warning">
                <i class="bi bi-sliders"></i> Ajuste Manual
            </a>
            <a href="{{ url_for('estoque_auditoria') }}" class="btn btn-outline-secondary">
                <i class="bi bi-clock-history"></i> Auditoria
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Painel de Configuração -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-gear"></i> Configurar Inventário</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Depósito</label>
                        <select class="form-select" id="depositoInventario">
                            <option value="">Estoque Geral (sem depósito)</option>
                            {% for deposito in depositos %}
                            <option value="{{ deposito.id }}">{{ deposito.codigo }} - {{ deposito.nome }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Filtrar Produtos</label>
                        <input type="text" class="form-control" id="filtroProduto" placeholder="Buscar por nome ou código...">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Motivo do Inventário</label>
                        <input type="text" class="form-control" id="motivoInventario" value="Contagem física" placeholder="Contagem física mensal...">
                    </div>

                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-primary" onclick="carregarProdutos()">
                            <i class="bi bi-arrow-repeat"></i> Carregar Produtos
                        </button>
                    </div>
                </div>
            </div>

            <!-- Resumo -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-bar-chart"></i> Resumo</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <h3 class="mb-0" id="totalProdutos">0</h3>
                            <small class="text-muted">Produtos</small>
                        </div>
                        <div class="col-4">
                            <h3 class="mb-0 text-success" id="totalAcima">0</h3>
                            <small class="text-muted">Acima</small>
                        </div>
                        <div class="col-4">
                            <h3 class="mb-0 text-danger" id="totalAbaixo">0</h3>
                            <small class="text-muted">Abaixo</small>
                        </div>
                    </div>
                    <hr>
                    <div class="d-grid">
                        <button type="button" class="btn btn-success btn-lg" onclick="aplicarInventario()" id="btnAplicar" disabled>
                            <i class="bi bi-check-all"></i> Aplicar Ajustes
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabela de Contagem -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-list-check"></i> Contagem de Produtos</h5>
                    <div>
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="limparContagem()">
                            <i class="bi bi-eraser"></i> Limpar
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
                        <table class="table table-hover mb-0" id="tabelaInventario">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width: 80px;">Código</th>
                                    <th>Produto</th>
                                    <th class="text-center" style="width: 100px;">Est. Sistema</th>
                                    <th class="text-center" style="width: 130px;">Qtd Contada</th>
                                    <th class="text-center" style="width: 100px;">Diferença</th>
                                </tr>
                            </thead>
                            <tbody id="listaProdutos">
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        <i class="bi bi-box-seam display-4"></i>
                                        <p class="mt-3 mb-0">Clique em "Carregar Produtos" para iniciar o inventário</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Progresso -->
<div class="modal fade cape-modal-standard" id="modalProgresso" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-3" role="status"></div>
                <p class="mb-0" id="textoProgresso">Aplicando ajustes...</p>
            </div>
        </div>
    </div>
</div>

<script>
let produtosInventario = [];

function carregarProdutos() {
    const depositoId = document.getElementById('depositoInventario').value;
    const filtro = document.getElementById('filtroProduto').value.toLowerCase();
    
    const tbody = document.getElementById('listaProdutos');
    tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4"><div class="spinner-border"></div></td></tr>';
    
    // Carrega produtos do servidor
    const produtos = [
        {% for produto in produtos %}
        {
            id: {{ produto.id }},
            codigo: "{{ produto.codigo_produto or '' }}",
            nome: "{{ produto.nome|replace('"', '\\"') }}",
            unidade: "{{ produto.unidade_comercial or 'UN' }}",
            estoque: {{ produto.estoque_atual or 0 }}
        },
        {% endfor %}
    ];
    
    // Filtra se necessário
    produtosInventario = produtos.filter(p => {
        if (!filtro) return true;
        return p.nome.toLowerCase().includes(filtro) || p.codigo.toLowerCase().includes(filtro);
    });
    
    // Renderiza tabela
    if (produtosInventario.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center py-4 text-muted">Nenhum produto encontrado</td></tr>';
        return;
    }
    
    let html = '';
    produtosInventario.forEach((p, idx) => {
        html += `
            <tr data-produto-id="${p.id}" data-estoque-sistema="${p.estoque}">
                <td><code>${p.codigo || '-'}</code></td>
                <td>
                    ${p.nome.substring(0, 40)}${p.nome.length > 40 ? '...' : ''}
                    <br><small class="text-muted">${p.unidade}</small>
                </td>
                <td class="text-center">
                    <span class="badge bg-secondary">${p.estoque.toFixed(3)}</span>
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm text-center input-contagem" 
                           step="0.001" min="0" placeholder="${p.estoque.toFixed(3)}"
                           onchange="calcularDiferenca(this)" onkeyup="calcularDiferenca(this)">
                </td>
                <td class="text-center diferenca-cell">
                    <span class="text-muted">-</span>
                </td>
            </tr>
        `;
    });
    
    tbody.innerHTML = html;
    document.getElementById('totalProdutos').textContent = produtosInventario.length;
    atualizarResumo();
}

function calcularDiferenca(input) {
    const tr = input.closest('tr');
    const estoqueSistema = parseFloat(tr.dataset.estoqueSistema) || 0;
    const contado = parseFloat(input.value) || 0;
    const diferenca = contado - estoqueSistema;
    const cell = tr.querySelector('.diferenca-cell');
    
    if (input.value === '') {
        cell.innerHTML = '<span class="text-muted">-</span>';
    } else if (Math.abs(diferenca) < 0.001) {
        cell.innerHTML = '<span class="text-success"><i class="bi bi-check-lg"></i> OK</span>';
    } else if (diferenca > 0) {
        cell.innerHTML = `<span class="text-success fw-bold">+${diferenca.toFixed(3)}</span>`;
    } else {
        cell.innerHTML = `<span class="text-danger fw-bold">${diferenca.toFixed(3)}</span>`;
    }
    
    atualizarResumo();
}

function atualizarResumo() {
    const inputs = document.querySelectorAll('.input-contagem');
    let acima = 0, abaixo = 0;
    
    inputs.forEach(input => {
        if (input.value === '') return;
        const tr = input.closest('tr');
        const estoqueSistema = parseFloat(tr.dataset.estoqueSistema) || 0;
        const contado = parseFloat(input.value) || 0;
        const diferenca = contado - estoqueSistema;
        
        if (diferenca > 0.001) acima++;
        else if (diferenca < -0.001) abaixo++;
    });
    
    document.getElementById('totalAcima').textContent = acima;
    document.getElementById('totalAbaixo').textContent = abaixo;
    document.getElementById('btnAplicar').disabled = (acima + abaixo) === 0;
}

function limparContagem() {
    document.querySelectorAll('.input-contagem').forEach(input => {
        input.value = '';
        calcularDiferenca(input);
    });
}

function aplicarInventario() {
    const depositoId = document.getElementById('depositoInventario').value;
    const motivo = document.getElementById('motivoInventario').value || 'Contagem física';
    
    // Coleta itens com diferença
    const itens = [];
    document.querySelectorAll('#listaProdutos tr[data-produto-id]').forEach(tr => {
        const input = tr.querySelector('.input-contagem');
        if (input.value === '') return;
        
        const produtoId = parseInt(tr.dataset.produtoId);
        const estoqueSistema = parseFloat(tr.dataset.estoqueSistema) || 0;
        const contado = parseFloat(input.value) || 0;
        const diferenca = contado - estoqueSistema;
        
        if (Math.abs(diferenca) >= 0.001) {
            itens.push({
                produto_id: produtoId,
                quantidade_contada: contado
            });
        }
    });
    
    if (itens.length === 0) {
        alert('Nenhum ajuste a aplicar.');
        return;
    }
    
    if (!confirm(`Deseja aplicar ${itens.length} ajuste(s) de inventário?\n\nMotivo: ${motivo}`)) {
        return;
    }
    
    // Mostra progresso
    const modal = new bootstrap.Modal(document.getElementById('modalProgresso'));
    modal.show();
    
    fetch('/estoque/inventario/aplicar', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            itens: itens,
            motivo: motivo,
            deposito_id: depositoId || null
        })
    })
    .then(r => r.json())
    .then(data => {
        modal.hide();
        
        if (data.success) {
            alert(`Inventário aplicado com sucesso!\n\n${data.ajustados} produto(s) ajustado(s).`);
            carregarProdutos();
        } else {
            alert('Erro ao aplicar inventário: ' + (data.error || 'Erro desconhecido'));
        }
    })
    .catch(err => {
        modal.hide();
        alert('Erro ao aplicar inventário: ' + err.message);
    });
}

// Filtro em tempo real
document.getElementById('filtroProduto').addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
        carregarProdutos();
    }
});
</script>
{% endblock %}