# 🎯 Tela de Validação de NF Importadas

## Descrição

Após importar XML(s), o usuário verá uma **tela de validação** que mostra:
1. **NFs Importadas** - Aguardando vinculação à viagem
2. **Clientes Temporários** - Aguardando aprovação
3. **Opções de ação** - Aprovar, rejeitar, vincular

---

## 📄 Componentes HTML/CSS

### 1. Modal de Validação
```html
<!-- Modal para validar NFs e clientes importados -->
<div class="modal fade" id="modalValidacaoNF" tabindex="-1" aria-labelledby="labelValidacao" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header bg-info text-white">
        <h5 class="modal-title" id="labelValidacao">
          <i class="material-icons align-middle">assignment_turned_in</i>
          Validação de Nota Fiscal Importada
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      
      <div class="modal-body">
        <!-- Nav tabs para organizar conteúdo -->
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#tabNFImportada">
              <i class="material-icons align-middle">receipt</i>
              Nota Fiscal Importada
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#tabClienteTemp" id="tabClienteTempLink" style="display:none;">
              <i class="material-icons align-middle">person_add</i>
              <span id="badgeClientesTemp" class="badge bg-warning ms-2">0</span>
            </a>
          </li>
        </ul>
        
        <div class="tab-content mt-3">
          
          <!-- TAB 1: NF IMPORTADA -->
          <div class="tab-pane fade show active" id="tabNFImportada">
            <div class="row">
              <div class="col-md-6">
                <div class="card mb-3">
                  <div class="card-header bg-light">
                    <strong>Informações da NF</strong>
                  </div>
                  <div class="card-body">
                    <table class="table table-sm">
                      <tr>
                        <td><strong>Número:</strong></td>
                        <td><span id="valNFNumero">-</span> / <span id="valNFSerie">-</span></td>
                      </tr>
                      <tr>
                        <td><strong>Chave NFe:</strong></td>
                        <td><code id="valNFChave" style="font-size:11px;">-</code></td>
                      </tr>
                      <tr>
                        <td><strong>Data Emissão:</strong></td>
                        <td id="valNFData">-</td>
                      </tr>
                      <tr>
                        <td><strong>Valor Total:</strong></td>
                        <td id="valNFValor" class="text-success fw-bold">-</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
              
              <div class="col-md-6">
                <div class="card mb-3">
                  <div class="card-header bg-light">
                    <strong>Remetente / Emitente</strong>
                  </div>
                  <div class="card-body">
                    <table class="table table-sm">
                      <tr>
                        <td><strong>Razão Social:</strong></td>
                        <td id="valEmitRazao">-</td>
                      </tr>
                      <tr>
                        <td><strong>CNPJ:</strong></td>
                        <td id="valEmitCNPJ">-</td>
                      </tr>
                      <tr>
                        <td><strong>Endereço:</strong></td>
                        <td id="valEmitEndereco">-</td>
                      </tr>
                      <tr>
                        <td><strong>Cidade:</strong></td>
                        <td id="valEmitCidade">-</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="row">
              <div class="col-md-6">
                <div class="card mb-3">
                  <div class="card-header bg-light">
                    <strong>Destinatário</strong>
                  </div>
                  <div class="card-body">
                    <table class="table table-sm">
                      <tr>
                        <td><strong>Razão Social:</strong></td>
                        <td id="valDestRazao">-</td>
                      </tr>
                      <tr>
                        <td><strong>CNPJ/CPF:</strong></td>
                        <td id="valDestCNPJ">-</td>
                      </tr>
                      <tr>
                        <td><strong>Endereço:</strong></td>
                        <td id="valDestEndereco">-</td>
                      </tr>
                      <tr>
                        <td><strong>Cidade:</strong></td>
                        <td id="valDestCidade">-</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
              
              <div class="col-md-6">
                <div class="card mb-3">
                  <div class="card-header bg-light">
                    <strong>Valores Fiscais</strong>
                  </div>
                  <div class="card-body">
                    <table class="table table-sm">
                      <tr>
                        <td><strong>Base ICMS:</strong></td>
                        <td id="valBaseICMS">-</td>
                      </tr>
                      <tr>
                        <td><strong>ICMS:</strong></td>
                        <td id="valICMS">-</td>
                      </tr>
                      <tr>
                        <td><strong>IPI:</strong></td>
                        <td id="valIPI">-</td>
                      </tr>
                      <tr>
                        <td><strong>Frete:</strong></td>
                        <td id="valFrete">-</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- Itens da NF -->
            <div class="card mb-3">
              <div class="card-header bg-light">
                <strong>Itens da Nota Fiscal</strong>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-sm table-bordered" id="tabelaItensNF">
                    <thead class="table-light">
                      <tr>
                        <th style="width:5%">Item</th>
                        <th style="width:30%">Descrição</th>
                        <th style="width:10%">Quantidade</th>
                        <th style="width:10%">Valor Unit.</th>
                        <th style="width:15%">Valor Total</th>
                        <th style="width:15%">CFOP</th>
                        <th style="width:15%">NCM</th>
                      </tr>
                    </thead>
                    <tbody id="tabelaItensNFBody">
                      <!-- Preenchido por JavaScript -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            
            <!-- Resumo de peso -->
            <div class="card mb-3">
              <div class="card-header bg-light">
                <strong>Dados de Transporte</strong>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-md-3">
                    <div class="text-center">
                      <small class="text-muted">Peso Total</small>
                      <div class="h5" id="valPesoTotal">-</div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="text-center">
                      <small class="text-muted">Peso Líquido</small>
                      <div class="h5" id="valPesoLiquido">-</div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="text-center">
                      <small class="text-muted">Qtd. Itens</small>
                      <div class="h5" id="valQtdItens">-</div>
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="text-center">
                      <small class="text-muted">Modo Frete</small>
                      <div class="h5" id="valModoFrete">-</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- TAB 2: CLIENTES TEMPORÁRIOS -->
          <div class="tab-pane fade" id="tabClienteTemp">
            <div id="containerClientesTemp">
              <!-- Preenchido por JavaScript -->
            </div>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          <i class="material-icons align-middle">close</i> Cancelar
        </button>
        <button type="button" class="btn btn-primary" id="btnVincularNF" onclick="vincularNFAViagem()">
          <i class="material-icons align-middle">link</i> Vincular à Viagem
        </button>
      </div>
    </div>
  </div>
</div>
```

---

### 2. Cartão de Cliente Temporário
```html
<!-- Usado para cada cliente temporário -->
<div class="card mb-3 border-warning">
  <div class="card-header bg-warning bg-opacity-10">
    <div class="row align-items-center">
      <div class="col">
        <strong id="tempClienteRazao">Razão Social</strong>
        <br>
        <small class="text-muted" id="tempClienteCNPJ">CNPJ: 00.000.000/0000-00</small>
      </div>
      <div class="col-auto">
        <span class="badge bg-warning">Pendente Aprovação</span>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="row mb-2">
      <div class="col-md-6">
        <small class="text-muted">Tipo:</small>
        <div id="tempClienteTipo">-</div>
      </div>
      <div class="col-md-6">
        <small class="text-muted">Origem:</small>
        <div id="tempClienteOrigem">-</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <small class="text-muted">Endereço:</small>
        <div id="tempClienteEndereco">-</div>
      </div>
    </div>
  </div>
  <div class="card-footer bg-light">
    <button class="btn btn-sm btn-success" onclick="aprovarClienteTemporario(this)">
      <i class="material-icons align-middle">check</i> Aprovar e Integrar
    </button>
    <button class="btn btn-sm btn-danger" onclick="rejeitarClienteTemporario(this)">
      <i class="material-icons align-middle">close</i> Rejeitar
    </button>
  </div>
</div>
```

---

## 🔧 JavaScript para Integração

### 1. Ao Receber Resposta do Upload
```javascript
// Adicionar ao event listener do upload em cad.php

fetch('/tms010_operacao/import_xml.php', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(dados => {
  if (dados.sucesso) {
    // MOSTRAR MODAL DE VALIDAÇÃO
    mostrarModalValidacaoNF(dados);
  } else {
    alert('Erro: ' + dados.mensagem);
  }
})
```

### 2. Função para Popular Modal
```javascript
function mostrarModalValidacaoNF(dados) {
  const id_nf = dados.id_notafiscal;
  
  // Buscar dados completos da NF do banco
  fetch(`/tms010_operacao/ajax_obter_nf.php?id=${id_nf}`)
    .then(r => r.json())
    .then(nf => {
      // Preencher campos da NF
      document.getElementById('valNFNumero').textContent = nf.numero_nf;
      document.getElementById('valNFSerie').textContent = nf.serie_nf;
      document.getElementById('valNFChave').textContent = nf.chave_acesso;
      document.getElementById('valNFData').textContent = formatarData(nf.data_emissao);
      document.getElementById('valNFValor').textContent = formatarMoeda(nf.valor_total);
      
      // Remetente
      document.getElementById('valEmitRazao').textContent = nf.razaosocial_emitente;
      document.getElementById('valEmitCNPJ').textContent = formatarCNPJ(nf.cnpj_emitente);
      document.getElementById('valEmitEndereco').textContent = nf.endereco_emitente;
      document.getElementById('valEmitCidade').textContent = nf.cidade_origem + ', ' + nf.uf_origem;
      
      // Destinatário
      document.getElementById('valDestRazao').textContent = nf.razaosocial_destinatario;
      document.getElementById('valDestCNPJ').textContent = formatarCNPJ(nf.cnpj_destinatario);
      document.getElementById('valDestCidade').textContent = nf.cidade_destino + ', ' + nf.uf_destino;
      
      // Valores fiscais
      document.getElementById('valBaseICMS').textContent = formatarMoeda(nf.valor_baseicms);
      document.getElementById('valICMS').textContent = formatarMoeda(nf.valor_icms);
      document.getElementById('valIPI').textContent = formatarMoeda(nf.valor_ipi);
      document.getElementById('valFrete').textContent = formatarMoeda(nf.valor_frete);
      
      // Peso
      document.getElementById('valPesoTotal').textContent = nf.peso_total + ' kg';
      document.getElementById('valPesoLiquido').textContent = nf.peso_liquido + ' kg';
      document.getElementById('valQtdItens').textContent = nf.qtd_itens + ' itens';
      document.getElementById('valModoFrete').textContent = nf.modo_frete;
      
      // Itens
      preencherTabelaItens(id_nf);
      
      // Clientes temporários
      preencherClientesTemporarios(id_nf);
      
      // Mostrar modal
      new bootstrap.Modal(document.getElementById('modalValidacaoNF')).show();
    });
}
```

### 3. Preencher Tabela de Itens
```javascript
function preencherTabelaItens(id_nf) {
  fetch(`/tms010_operacao/ajax_obter_itens_nf.php?id_nf=${id_nf}`)
    .then(r => r.json())
    .then(itens => {
      const tbody = document.getElementById('tabelaItensNFBody');
      tbody.innerHTML = '';
      
      itens.forEach(item => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${item.numero_item}</td>
          <td>${item.descricao_produto}</td>
          <td class="text-end">${formatarDecimal(item.quantidade)}</td>
          <td class="text-end">${formatarMoeda(item.valor_unitario)}</td>
          <td class="text-end">${formatarMoeda(item.valor_total)}</td>
          <td>${item.cfop}</td>
          <td>${item.ncm}</td>
        `;
        tbody.appendChild(tr);
      });
    });
}
```

### 4. Preencher Clientes Temporários
```javascript
function preencherClientesTemporarios(id_nf) {
  fetch(`/tms010_operacao/ajax_obter_clientes_temp.php?id_nf=${id_nf}`)
    .then(r => r.json())
    .then(clientes => {
      const container = document.getElementById('containerClientesTemp');
      
      if (clientes.length === 0) {
        document.getElementById('tabClienteTempLink').style.display = 'none';
        return;
      }
      
      document.getElementById('tabClienteTempLink').style.display = 'block';
      document.getElementById('badgeClientesTemp').textContent = clientes.length;
      container.innerHTML = '';
      
      clientes.forEach((cliente, idx) => {
        const card = document.createElement('div');
        card.className = 'card mb-3 border-warning';
        card.innerHTML = `
          <div class="card-header bg-warning bg-opacity-10">
            <div class="row align-items-center">
              <div class="col">
                <strong>${cliente.razao_social}</strong>
                <br>
                <small class="text-muted">CNPJ: ${cliente.cnpj || cliente.cpf || 'N/A'}</small>
              </div>
              <div class="col-auto">
                <span class="badge bg-warning">Pendente</span>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="row mb-2">
              <div class="col-md-6">
                <small class="text-muted">Tipo:</small>
                <div>${cliente.tipo}</div>
              </div>
              <div class="col-md-6">
                <small class="text-muted">Origem:</small>
                <div>${cliente.origem}</div>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <small class="text-muted">Endereço:</small>
                <div>${cliente.logradouro}, ${cliente.numero} - ${cliente.bairro}, ${cliente.cidade}/${cliente.estado}</div>
              </div>
            </div>
          </div>
          <div class="card-footer bg-light">
            <button class="btn btn-sm btn-success" onclick="aprovarClienteTemporario(${cliente.id})">
              <i class="material-icons align-middle">check</i> Aprovar e Integrar
            </button>
            <button class="btn btn-sm btn-danger" onclick="rejeitarClienteTemporario(${cliente.id})">
              <i class="material-icons align-middle">close</i> Rejeitar
            </button>
          </div>
        `;
        container.appendChild(card);
      });
    });
}
```

### 5. Vincular NF à Viagem
```javascript
function vincularNFAViagem() {
  const id_nf = document.querySelector('[data-id-nf]')?.getAttribute('data-id-nf');
  
  if (!id_nf) {
    alert('Erro: NF não identificada');
    return;
  }
  
  // Buscar ID da viagem (pode vir do formulário ou prompt)
  const id_viagem = document.getElementById('idOperacao')?.value;
  
  if (!id_viagem) {
    alert('Erro: Viagem não selecionada');
    return;
  }
  
  // Fazer requisição para vincular
  fetch('/tms010_operacao/ajax_vincular_nf_viagem.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      id_notafiscal: id_nf,
      id_viagem: id_viagem
    })
  })
  .then(r => r.json())
  .then(resultado => {
    if (resultado.sucesso) {
      alert('NF vinculada com sucesso!');
      bootstrap.Modal.getInstance(document.getElementById('modalValidacaoNF')).hide();
      // Recarregar dados do formulário
      window.location.reload();
    } else {
      alert('Erro: ' + resultado.mensagem);
    }
  });
}
```

### 6. Aprovar Cliente Temporário
```javascript
function aprovarClienteTemporario(id_cliente_temp) {
  const nome = prompt('Digite o nome do cliente para confirmar:');
  
  if (!nome) {
    return;
  }
  
  fetch('/tms010_operacao/ajax_aprovar_cliente_temp.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      id_cliente_temp: id_cliente_temp,
      confirmacao: nome
    })
  })
  .then(r => r.json())
  .then(resultado => {
    if (resultado.sucesso) {
      alert('Cliente integrado com sucesso!');
      // Recarregar lista de clientes temporários
      preencherClientesTemporarios(document.querySelector('[data-id-nf]')?.getAttribute('data-id-nf'));
    } else {
      alert('Erro: ' + resultado.mensagem);
    }
  });
}
```

---

## 📡 Endpoints AJAX Necessários

Arquivos a criar em `/tms010_operacao/`:

### 1. `ajax_obter_nf.php`
```php
GET /tms010_operacao/ajax_obter_nf.php?id=123

Retorna: JSON com todos os dados da tms001_notafiscal
```

### 2. `ajax_obter_itens_nf.php`
```php
GET /tms010_operacao/ajax_obter_itens_nf.php?id_nf=123

Retorna: JSON array com itens de tms001_notafiscal_itens
```

### 3. `ajax_obter_clientes_temp.php`
```php
GET /tms010_operacao/ajax_obter_clientes_temp.php?id_nf=123

Retorna: JSON array com clientes temporários vinculados à NF
```

### 4. `ajax_vincular_nf_viagem.php`
```php
POST /tms010_operacao/ajax_vincular_nf_viagem.php

Body: { id_notafiscal, id_viagem }

Action: INSERT em tms001_nf_viagem, UPDATE status tms001_notafiscal
```

### 5. `ajax_aprovar_cliente_temp.php`
```php
POST /tms010_operacao/ajax_aprovar_cliente_temp.php

Body: { id_cliente_temp, confirmacao }

Action: CREATE em dim_cliente, UPDATE tms001_cliente_temporario, link id_cliente_integrado
```

---

## 🎨 CSS Adicional (adicionar ao tms010.css)
```css
/* Modal de Validação */
#modalValidacaoNF .nav-tabs .nav-link {
  color: #495057;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

#modalValidacaoNF .nav-tabs .nav-link.active {
  color: #0d6efd;
  border-bottom-color: #0d6efd;
  background-color: transparent;
}

#modalValidacaoNF .card-header {
  border-bottom: 1px solid #dee2e6;
}

#modalValidacaoNF .table-bordered {
  font-size: 0.9rem;
}

#modalValidacaoNF .badge {
  font-size: 0.85rem;
  padding: 0.35em 0.65em;
}

/* Cliente Temporário */
.border-warning {
  border-left: 4px solid #ffc107 !important;
}

.bg-warning.bg-opacity-10 {
  background-color: rgba(255, 193, 7, 0.1) !important;
}
```

---

## 🚀 Integração com cad.php

Adicionar ao final do arquivo `cad.php`:

```html
<!-- Incluir Modal aqui -->
<!-- ... código HTML do modal ... -->

<!-- Incluir script -->
<script>
  // Função para mostrar modal após upload bem-sucedido
  function mostrarModalValidacaoNF(dados) {
    // ... código JavaScript ...
  }
  
  // Outras funções...
</script>
```

---

## 📋 Fluxo Completo

```
1. Usuário clica "Importar XML"
   ↓
2. Upload do arquivo XML
   ↓
3. import_xml.php processa e armazena no banco
   ↓
4. Retorna JSON com sucesso e id_notafiscal
   ↓
5. JavaScript abre modalValidacaoNF
   ↓
6. Modal busca dados completos do banco via AJAX
   ↓
7. Preenche 3 seções:
   - Info NF (número, data, valores)
   - Remetente/Destinatário
   - Itens da NF
   - Clientes temporários (se houver)
   ↓
8. Usuário aprova clientes temporários (opcional)
   ↓
9. Usuário clica "Vincular à Viagem"
   ↓
10. NF vinculada e formulário preenchido
```

---

## ✅ Checklist

- [ ] Criar `ajax_obter_nf.php`
- [ ] Criar `ajax_obter_itens_nf.php`
- [ ] Criar `ajax_obter_clientes_temp.php`
- [ ] Criar `ajax_vincular_nf_viagem.php`
- [ ] Criar `ajax_aprovar_cliente_temp.php`
- [ ] Adicionar modal HTML a `cad.php`
- [ ] Adicionar CSS a `tms010.css`
- [ ] Adicionar funções JavaScript a `cad.php`
- [ ] Testar com XML exemplo

---

**Próximo passo:** Criar os endpoints AJAX!
