{% extends 'base.html' %}
{% block title %}Entrada de Mercadoria #{{ entrada.id }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Cabeçalho -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-truck-loading me-2"></i>
                Entrada de Mercadoria
                {% set status_class, status_text = entrada.status_display %}
                <span class="badge bg-{{ status_class }} ms-2">{{ status_text }}</span>
            </h1>
            <p class="text-muted mb-0">
                NF-e {{ entrada.numero_nota or 'S/N' }} - {{ entrada.nome_fornecedor }}
            </p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ url_for('estoque_entradas_lista') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Voltar
            </a>
            {% if entrada.status not in ['FINALIZADO', 'CANCELADO'] %}
            <a href="{{ url_for('estoque_entrada_editar', entrada_id=entrada.id) }}" class="btn btn-outline-warning">
                <i class="fas fa-edit me-1"></i> Editar
            </a>
            {% endif %}
            <button type="button" class="btn btn-outline-info" onclick="imprimirEntrada()">
                <i class="fas fa-print me-1"></i> Imprimir
            </button>
            {% if entrada.status not in ['FINALIZADO', 'CANCELADO'] %}
            <button type="button" class="btn btn-success" onclick="finalizarEntrada()">
                <i class="fas fa-check me-1"></i> Finalizar Entrada
            </button>
            {% endif %}
        </div>
    </div>

    <div class="row">
        <!-- Dados da NF-e -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fas fa-file-invoice me-2"></i>Dados da NF-e</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <td class="text-muted">Número:</td>
                            <td class="text-end"><strong>{{ entrada.numero_nota or '-' }}</strong></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Série:</td>
                            <td class="text-end">{{ entrada.serie or '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Data Emissão:</td>
                            <td class="text-end">{{ entrada.data_emissao.strftime('%d/%m/%Y') if entrada.data_emissao else '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Chave:</td>
                            <td class="text-end"><small>{{ entrada.chave_acesso[:22] if entrada.chave_acesso else '-' }}...</small></td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- Fornecedor -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fas fa-building me-2"></i>Fornecedor</h5>
                </div>
                <div class="card-body">
                    <h6>{{ entrada.nome_fornecedor }}</h6>
                    {% if entrada.cnpj_fornecedor %}
                    <p class="text-muted mb-0">
                        {% if entrada.cnpj_fornecedor|length == 11 %}
                        CPF: {{ entrada.cnpj_fornecedor[:3] }}.{{ entrada.cnpj_fornecedor[3:6] }}.{{ entrada.cnpj_fornecedor[6:9] }}-{{ entrada.cnpj_fornecedor[9:] }}
                        {% else %}
                        CNPJ: {{ entrada.cnpj_fornecedor[:2] }}.{{ entrada.cnpj_fornecedor[2:5] }}.{{ entrada.cnpj_fornecedor[5:8] }}/{{ entrada.cnpj_fornecedor[8:12] }}-{{ entrada.cnpj_fornecedor[12:] }}
                        {% endif %}
                    </p>
                    {% endif %}
                    {% if entrada.fornecedor %}
                    <span class="badge bg-success mt-2">Fornecedor cadastrado</span>
                    {% else %}
                    <span class="badge bg-warning text-dark mt-2">Fornecedor não cadastrado</span>
                    {% endif %}
                </div>
            </div>

            <!-- Totais -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fas fa-calculator me-2"></i>Totais</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless">
                        <tr>
                            <td class="text-muted">Produtos:</td>
                            <td class="text-end">R$ {{ "%.2f"|format(entrada.valor_produtos) }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Frete:</td>
                            <td class="text-end">R$ {{ "%.2f"|format(entrada.valor_frete) }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">IPI:</td>
                            <td class="text-end">R$ {{ "%.2f"|format(entrada.valor_ipi) }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">ICMS ST:</td>
                            <td class="text-end">R$ {{ "%.2f"|format(entrada.valor_icms_st) }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Desconto:</td>
                            <td class="text-end text-danger">- R$ {{ "%.2f"|format(entrada.valor_desconto) }}</td>
                        </tr>
                        <tr class="table-primary">
                            <td><strong>Total NF-e:</strong></td>
                            <td class="text-end"><strong>R$ {{ "%.2f"|format(entrada.valor_total) }}</strong></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- Itens -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="fas fa-list me-2"></i>Itens (<span id="qtdItens">{{ itens|length }}</span>)</h5>
                    <div class="d-flex align-items-center gap-2">
                        {% if entrada.status not in ['FINALIZADO', 'CANCELADO'] %}
                        <button type="button" class="btn btn-sm btn-primary" onclick="abrirModalAdicionarItem()">
                            <i class="fas fa-plus me-1"></i> Adicionar Item
                        </button>
                        {% endif %}
                        <span class="badge bg-success" id="badgeVinculados">{{ itens|selectattr('vinculado')|list|length }} vinculados</span>
                        <span class="badge bg-warning text-dark" id="badgePendentes">{{ itens|rejectattr('vinculado')|list|length }} pendentes</span>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover table-sm mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th>#</th>
                                <th>Descrição</th>
                                <th>EAN</th>
                                <th class="text-center">Qtd</th>
                                <th class="text-end">Custo Unit.</th>
                                <th class="text-end">Total</th>
                                <th>Produto Vinculado</th>
                                <th class="text-center">Ação</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in itens %}
                            <tr class="{% if item.vinculado %}table-success{% endif %}" id="item-row-{{ item.id }}">
                                <td>{{ item.numero_item }}</td>
                                <td>
                                    <strong>{{ item.descricao[:40] }}</strong>
                                    {% if item.descricao|length > 40 %}...{% endif %}
                                    <br>
                                    <small class="text-muted">
                                        NCM: {{ item.ncm or '-' }} | CFOP: {{ item.cfop or '-' }} | {{ item.unidade }}
                                    </small>
                                </td>
                                <td><small>{{ item.ean or '-' }}</small></td>
                                <td class="text-center">{{ "%.3f"|format(item.quantidade) }}</td>
                                <td class="text-end">R$ {{ "%.2f"|format(item.custo_unitario) }}</td>
                                <td class="text-end">R$ {{ "%.2f"|format(item.custo_total) }}</td>
                                <td id="produto-cell-{{ item.id }}">
                                    {% if item.produto %}
                                    <span class="badge bg-success">
                                        <i class="fas fa-link"></i> {{ item.produto.nome[:20] }}
                                    </span>
                                    {% else %}
                                    <span class="badge bg-secondary">Não vinculado</span>
                                    {% endif %}
                                </td>
                                <td class="text-center">
                                    {% if entrada.status not in ['FINALIZADO', 'CANCELADO'] %}
                                    <button type="button" class="btn btn-sm btn-outline-primary" 
                                            onclick="abrirModalVincular({{ item.id }}, '{{ item.descricao|replace("'", "") }}', '{{ item.ean or '' }}')"
                                            title="Vincular produto">
                                        <i class="fas fa-link"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger" 
                                            onclick="excluirItem({{ item.id }}, '{{ item.descricao|replace("'", "")|truncate(30) }}')"
                                            title="Excluir item">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Vincular Produto -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalVincular" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Vincular Produto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p><strong>Item NF-e:</strong> <span id="itemDescricao"></span></p>
                <p><strong>EAN:</strong> <span id="itemEan"></span></p>
                
                <div class="mb-3">
                    <label class="form-label">Buscar Produto</label>
                    <input type="text" id="buscaProduto" class="form-control" 
                           placeholder="Digite o nome, código ou EAN do produto..." onkeyup="filtrarProdutos()">
                </div>
                
                <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                    <table class="table table-hover table-sm" id="tabelaProdutos">
                        <thead class="table-dark sticky-top">
                            <tr>
                                <th>Código</th>
                                <th>Nome</th>
                                <th>EAN</th>
                                <th>Estoque</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for produto in produtos %}
                            <tr class="produto-row" 
                                data-nome="{{ produto.nome|lower }}" 
                                data-codigo="{{ produto.codigo|lower if produto.codigo else '' }}"
                                data-ean="{{ produto.codigo_barras or '' }}">
                                <td>{{ produto.codigo or '-' }}</td>
                                <td>{{ produto.nome[:40] }}</td>
                                <td>{{ produto.codigo_barras or '-' }}</td>
                                <td>{{ "%.2f"|format(produto.estoque or 0) }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-success" 
                                            onclick="vincularProduto({{ produto.id }}, '{{ produto.nome[:30]|replace("'", "") }}')">
                                        <i class="fas fa-check"></i>
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" onclick="desvincularProduto()">
                    <i class="fas fa-unlink"></i> Remover Vínculo
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Adicionar Item -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalAdicionarItem" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i>Adicionar Item</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formAdicionarItem">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label">Descrição do Produto <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="addItemDescricao" required 
                                   placeholder="Digite a descrição do produto">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Código de Barras (EAN)</label>
                            <input type="text" class="form-control" id="addItemEan" 
                                   placeholder="EAN/GTIN">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Quantidade <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="addItemQtd" step="0.001" min="0.001" 
                                   value="1" required>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Unidade</label>
                            <select class="form-select" id="addItemUnidade">
                                <option value="UN">UN - Unidade</option>
                                <option value="KG">KG - Quilograma</option>
                                <option value="CX">CX - Caixa</option>
                                <option value="PC">PC - Peça</option>
                                <option value="LT">LT - Litro</option>
                                <option value="MT">MT - Metro</option>
                                <option value="M2">M2 - Metro Quadrado</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Custo Unitário <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="number" class="form-control" id="addItemCusto" step="0.01" min="0" 
                                       value="0.00" required>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Total</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="text" class="form-control" id="addItemTotal" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">NCM</label>
                            <input type="text" class="form-control" id="addItemNcm" maxlength="8"
                                   placeholder="00000000">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">CFOP</label>
                            <input type="text" class="form-control" id="addItemCfop" maxlength="4"
                                   placeholder="Ex: 1102">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Vincular Produto (Opcional)</label>
                            <select class="form-select" id="addItemProduto">
                                <option value="">-- Selecione --</option>
                                {% for produto in produtos %}
                                <option value="{{ produto.id }}" data-ean="{{ produto.codigo_barras or '' }}">
                                    {{ produto.codigo or '' }} - {{ produto.nome[:40] }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="salvarNovoItem()">
                    <i class="fas fa-save me-1"></i> Adicionar Item
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let itemIdAtual = null;
const modalVincular = new bootstrap.Modal(document.getElementById('modalVincular'));
const modalAdicionarItem = new bootstrap.Modal(document.getElementById('modalAdicionarItem'));

function imprimirEntrada() {
    window.open(`/estoque/entradas/{{ entrada.id }}/imprimir`, '_blank');
}

// ========== Adicionar Item ==========
function abrirModalAdicionarItem() {
    // Limpar formulário
    document.getElementById('formAdicionarItem').reset();
    document.getElementById('addItemQtd').value = '1';
    document.getElementById('addItemCusto').value = '0.00';
    document.getElementById('addItemTotal').value = '0.00';
    modalAdicionarItem.show();
}

// Calcular total automaticamente
document.getElementById('addItemQtd').addEventListener('input', calcularTotalItem);
document.getElementById('addItemCusto').addEventListener('input', calcularTotalItem);

function calcularTotalItem() {
    const qtd = parseFloat(document.getElementById('addItemQtd').value) || 0;
    const custo = parseFloat(document.getElementById('addItemCusto').value) || 0;
    const total = qtd * custo;
    document.getElementById('addItemTotal').value = total.toFixed(2);
}

function salvarNovoItem() {
    const descricao = document.getElementById('addItemDescricao').value.trim();
    const qtd = parseFloat(document.getElementById('addItemQtd').value) || 0;
    const custo = parseFloat(document.getElementById('addItemCusto').value) || 0;
    
    if (!descricao) {
        alert('Por favor, informe a descrição do produto.');
        document.getElementById('addItemDescricao').focus();
        return;
    }
    if (qtd <= 0) {
        alert('A quantidade deve ser maior que zero.');
        document.getElementById('addItemQtd').focus();
        return;
    }
    
    const dados = {
        descricao: descricao,
        ean: document.getElementById('addItemEan').value.trim() || null,
        quantidade: qtd,
        unidade: document.getElementById('addItemUnidade').value,
        custo_unitario: custo,
        ncm: document.getElementById('addItemNcm').value.trim() || null,
        cfop: document.getElementById('addItemCfop').value.trim() || null,
        produto_id: document.getElementById('addItemProduto').value || null
    };
    
    // Desabilitar botão enquanto salva
    const btnSalvar = document.querySelector('#modalAdicionarItem .btn-primary');
    btnSalvar.disabled = true;
    btnSalvar.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Salvando...';
    
    fetch(`/estoque/entradas/{{ entrada.id }}/adicionar-item`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(dados)
    })
    .then(r => r.json())
    .then(data => {
        if (data.sucesso) {
            modalAdicionarItem.hide();
            // Recarregar página para mostrar item adicionado
            location.reload();
        } else {
            alert('Erro: ' + data.mensagem);
        }
    })
    .catch(err => {
        alert('Erro: ' + err.message);
    })
    .finally(() => {
        btnSalvar.disabled = false;
        btnSalvar.innerHTML = '<i class="fas fa-save me-1"></i> Adicionar Item';
    });
}

function abrirModalVincular(itemId, descricao, ean) {
    itemIdAtual = itemId;
    document.getElementById('itemDescricao').textContent = descricao;
    document.getElementById('itemEan').textContent = ean || 'Não informado';
    document.getElementById('buscaProduto').value = '';
    filtrarProdutos();
    modalVincular.show();
    
    // Se tem EAN, já filtrar
    if (ean) {
        document.getElementById('buscaProduto').value = ean;
        filtrarProdutos();
    }
}

function filtrarProdutos() {
    const busca = document.getElementById('buscaProduto').value.toLowerCase();
    const rows = document.querySelectorAll('.produto-row');
    
    rows.forEach(row => {
        const nome = row.dataset.nome;
        const codigo = row.dataset.codigo;
        const ean = row.dataset.ean;
        
        const match = nome.includes(busca) || codigo.includes(busca) || ean.includes(busca);
        row.style.display = match ? '' : 'none';
    });
}

function vincularProduto(produtoId, produtoNome) {
    fetch(`/estoque/entradas/{{ entrada.id }}/vincular-item`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({item_id: itemIdAtual, produto_id: produtoId})
    })
    .then(r => r.json())
    .then(data => {
        if (data.sucesso) {
            // Atualizar UI
            const row = document.getElementById(`item-row-${itemIdAtual}`);
            row.classList.add('table-success');
            
            const cell = document.getElementById(`produto-cell-${itemIdAtual}`);
            cell.innerHTML = `<span class="badge bg-success"><i class="fas fa-link"></i> ${produtoNome}</span>`;
            
            modalVincular.hide();
        } else {
            alert('Erro: ' + data.mensagem);
        }
    })
    .catch(err => alert('Erro: ' + err.message));
}

function desvincularProduto() {
    if (!confirm('Remover vínculo deste item?')) return;
    
    fetch(`/estoque/entradas/{{ entrada.id }}/vincular-item`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({item_id: itemIdAtual, produto_id: null})
    })
    .then(r => r.json())
    .then(data => {
        if (data.sucesso) {
            const row = document.getElementById(`item-row-${itemIdAtual}`);
            row.classList.remove('table-success');
            
            const cell = document.getElementById(`produto-cell-${itemIdAtual}`);
            cell.innerHTML = '<span class="badge bg-secondary">Não vinculado</span>';
            
            modalVincular.hide();
        } else {
            alert('Erro: ' + data.mensagem);
        }
    })
    .catch(err => alert('Erro: ' + err.message));
}

function excluirItem(itemId, descricao) {
    if (!confirm(`Deseja excluir o item "${descricao}"?`)) return;
    
    fetch(`/estoque/entradas/{{ entrada.id }}/excluir-item`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({item_id: itemId})
    })
    .then(r => r.json())
    .then(data => {
        if (data.sucesso) {
            // Remover linha da tabela
            const row = document.getElementById(`item-row-${itemId}`);
            if (row) row.remove();
            alert(data.mensagem);
        } else {
            alert('Erro: ' + data.mensagem);
        }
    })
    .catch(err => alert('Erro: ' + err.message));
}

function finalizarEntrada() {
    if (!confirm('Deseja finalizar esta entrada?\n\nIsso irá:\n- Atualizar o estoque de todos os produtos vinculados\n- Atualizar o custo médio dos produtos\n- Registrar movimentos de entrada')) return;
    
    fetch(`/estoque/entradas/{{ entrada.id }}/finalizar`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'}
    })
    .then(r => r.json())
    .then(data => {
        if (data.sucesso) {
            alert(data.mensagem);
            location.reload();
        } else {
            alert('Erro: ' + data.mensagem);
        }
    })
    .catch(err => alert('Erro: ' + err.message));
}
</script>
{% endblock %}