{% extends "base.html" %}

{% block title %}Ajuste 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-sliders text-primary"></i> Ajuste de Estoque</h2>
            <p class="text-muted mb-0">Realize ajustes manuais no estoque de produtos</p>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-dark" onclick="capeVoltarOu('{{ url_for('estoque_inventario') }}')">
                <i class="bi bi-arrow-left"></i> Voltar
            </button>
            <a href="{{ url_for('estoque_auditoria') }}" class="btn btn-outline-secondary">
                <i class="bi bi-clock-history"></i> Ver Auditoria
            </a>
            <a href="{{ url_for('estoque_inventario') }}" class="btn btn-outline-primary">
                <i class="bi bi-clipboard-check"></i> Inventário
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Formulário de Ajuste -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="bi bi-pencil-square"></i> Novo Ajuste</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ url_for('estoque_ajuste_salvar') }}" id="formAjuste">
                        <!-- Campo de busca de produto -->
                        <div class="mb-3">
                            <label class="form-label">Produto <span class="text-danger">*</span></label>
                            <div class="position-relative">
                                <input type="text" class="form-control form-control-lg" id="buscaProduto" 
                                       placeholder="Digite código, descrição ou código de barras..."
                                       autocomplete="off">
                                <input type="hidden" name="produto_id" id="produtoIdSelecionado" required>
                                
                                <!-- Lista de resultados -->
                                <div id="resultadosBusca" class="position-absolute w-100 bg-white border rounded shadow-lg" 
                                     style="display: none; z-index: 1050; max-height: 300px; overflow-y: auto;">
                                </div>
                            </div>
                            <small class="text-muted">Mínimo 2 caracteres para pesquisar</small>
                        </div>

                        <!-- Produto selecionado -->
                        <div class="alert alert-success mb-3" id="produtoSelecionado" style="display: none;">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong id="produtoSelecionadoTexto"></strong>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="limparProduto()">
                                    <i class="bi bi-x"></i> Limpar
                                </button>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Depósito</label>
                            <select name="deposito_id" class="form-select" id="selectDeposito" onchange="carregarEstoqueProduto()">
                                <option value="">Estoque Geral (sem depósito)</option>
                                {% for deposito in depositos %}
                                <option value="{{ deposito.id }}">{{ deposito.codigo }} - {{ deposito.nome }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Info do Estoque Atual -->
                        <div class="alert alert-info mb-3" id="infoEstoque" style="display: none;">
                            <div class="row">
                                <div class="col-6">
                                    <small class="text-muted">Estoque Atual</small>
                                    <h4 class="mb-0" id="estoqueAtual">0,00</h4>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">Unidade</small>
                                    <h4 class="mb-0" id="unidadeProduto">UN</h4>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Tipo de Ajuste <span class="text-danger">*</span></label>
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="tipo_ajuste" id="tipoDefinir" value="definir" checked>
                                <label class="btn btn-outline-primary" for="tipoDefinir">
                                    <i class="bi bi-bullseye"></i> Definir Quantidade
                                </label>

                                <input type="radio" class="btn-check" name="tipo_ajuste" id="tipoAdicionar" value="adicionar">
                                <label class="btn btn-outline-success" for="tipoAdicionar">
                                    <i class="bi bi-plus-circle"></i> Adicionar
                                </label>

                                <input type="radio" class="btn-check" name="tipo_ajuste" id="tipoRemover" value="remover">
                                <label class="btn btn-outline-danger" for="tipoRemover">
                                    <i class="bi bi-dash-circle"></i> Remover
                                </label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" id="labelQuantidade">Nova Quantidade <span class="text-danger">*</span></label>
                            <input type="number" name="quantidade" class="form-control form-control-lg" 
                                   step="0.001" min="0" required id="inputQuantidade" placeholder="0,000">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Motivo do Ajuste <span class="text-danger">*</span></label>
                            <textarea name="motivo" class="form-control" rows="3" required 
                                      placeholder="Descreva o motivo do ajuste (ex: Correção após contagem física, Produto danificado, etc.)"></textarea>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-warning btn-lg">
                                <i class="bi bi-check-lg"></i> Aplicar Ajuste
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Últimos Ajustes -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-clock-history"></i> Últimos Ajustes</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-sm table-hover mb-0" id="tabelaUltimosAjustes">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>Data</th>
                                    <th>Produto</th>
                                    <th>Qtd</th>
                                    <th>Usuário</th>
                                </tr>
                            </thead>
                            <tbody id="listaUltimosAjustes">
                                <tr>
                                    <td colspan="4" class="text-center py-3">
                                        <a href="{{ url_for('estoque_auditoria') }}?tipo=ajuste" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i> Ver todos os ajustes na Auditoria
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let timeoutBusca = null;
let produtoAtual = null;

// Campo de busca com debounce
document.getElementById('buscaProduto').addEventListener('input', function() {
    const termo = this.value.trim();
    const resultadosDiv = document.getElementById('resultadosBusca');
    
    clearTimeout(timeoutBusca);
    
    if (termo.length < 2) {
        resultadosDiv.style.display = 'none';
        return;
    }
    
    timeoutBusca = setTimeout(() => {
        buscarProdutos(termo);
    }, 300);
});

// Fechar resultados ao clicar fora
document.addEventListener('click', function(e) {
    const resultadosDiv = document.getElementById('resultadosBusca');
    const buscaInput = document.getElementById('buscaProduto');
    
    if (!resultadosDiv.contains(e.target) && e.target !== buscaInput) {
        resultadosDiv.style.display = 'none';
    }
});

async function buscarProdutos(termo) {
    const resultadosDiv = document.getElementById('resultadosBusca');
    
    try {
        const response = await fetch(`/estoque/ajuste/buscar-produto?q=${encodeURIComponent(termo)}`);
        const data = await response.json();
        
        if (data.success && data.produtos.length > 0) {
            let html = '';
            data.produtos.forEach(p => {
                html += `
                    <div class="p-2 border-bottom busca-item" style="cursor: pointer;"
                         onclick="selecionarProduto(${p.id}, '${p.texto.replace(/'/g, "\\'")}', ${p.estoque_atual}, '${p.unidade}')">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>${p.codigo}</strong> - ${p.nome}
                                ${p.codigo_barras ? `<br><small class="text-muted"><i class="bi bi-upc"></i> ${p.codigo_barras}</small>` : ''}
                            </div>
                            <div class="text-end">
                                <span class="badge bg-secondary">${p.estoque_atual.toFixed(2)} ${p.unidade}</span>
                            </div>
                        </div>
                    </div>
                `;
            });
            resultadosDiv.innerHTML = html;
            resultadosDiv.style.display = 'block';
        } else {
            resultadosDiv.innerHTML = '<div class="p-3 text-center text-muted">Nenhum produto encontrado</div>';
            resultadosDiv.style.display = 'block';
        }
    } catch (error) {
        console.error('Erro na busca:', error);
        resultadosDiv.innerHTML = '<div class="p-3 text-center text-danger">Erro ao buscar</div>';
        resultadosDiv.style.display = 'block';
    }
}

function selecionarProduto(id, texto, estoque, unidade) {
    produtoAtual = { id, texto, estoque, unidade };
    
    document.getElementById('produtoIdSelecionado').value = id;
    document.getElementById('buscaProduto').style.display = 'none';
    document.getElementById('resultadosBusca').style.display = 'none';
    
    document.getElementById('produtoSelecionadoTexto').textContent = texto;
    document.getElementById('produtoSelecionado').style.display = 'block';
    
    // Mostrar estoque
    document.getElementById('estoqueAtual').textContent = estoque.toLocaleString('pt-BR', {minimumFractionDigits: 2});
    document.getElementById('unidadeProduto').textContent = unidade;
    document.getElementById('infoEstoque').style.display = 'block';
    
    // Foco no campo de quantidade
    document.getElementById('inputQuantidade').focus();
}

function limparProduto() {
    produtoAtual = null;
    document.getElementById('produtoIdSelecionado').value = '';
    document.getElementById('buscaProduto').value = '';
    document.getElementById('buscaProduto').style.display = 'block';
    document.getElementById('produtoSelecionado').style.display = 'none';
    document.getElementById('infoEstoque').style.display = 'none';
    document.getElementById('buscaProduto').focus();
}

function carregarEstoqueProduto() {
    if (!produtoAtual) return;
    
    const depositoId = document.getElementById('selectDeposito').value;
    
    fetch(`/api/estoque/produto/${produtoAtual.id}`)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                let estoque = data.produto.estoque_geral;
                
                if (depositoId) {
                    const estDep = data.estoques.find(e => e.deposito_id == depositoId);
                    estoque = estDep ? estDep.quantidade : 0;
                }
                
                document.getElementById('estoqueAtual').textContent = estoque.toLocaleString('pt-BR', {minimumFractionDigits: 2});
            }
        });
}

// Atualiza label conforme tipo de ajuste
document.querySelectorAll('input[name="tipo_ajuste"]').forEach(radio => {
    radio.addEventListener('change', function() {
        const label = document.getElementById('labelQuantidade');
        if (this.value === 'definir') {
            label.innerHTML = 'Nova Quantidade <span class="text-danger">*</span>';
        } else if (this.value === 'adicionar') {
            label.innerHTML = 'Quantidade a Adicionar <span class="text-danger">*</span>';
        } else {
            label.innerHTML = 'Quantidade a Remover <span class="text-danger">*</span>';
        }
    });
});

// Validação antes de enviar
document.getElementById('formAjuste').addEventListener('submit', function(e) {
    if (!document.getElementById('produtoIdSelecionado').value) {
        e.preventDefault();
        alert('Por favor, selecione um produto antes de continuar.');
        document.getElementById('buscaProduto').focus();
    }
});

// Estilização hover nos resultados
document.addEventListener('DOMContentLoaded', function() {
    const style = document.createElement('style');
    style.textContent = '.busca-item:hover { background-color: #f0f7ff; }';
    document.head.appendChild(style);
});
</script>
{% endblock %}