# Implementação do Novo Layout com Abas - gt_doctotransporte

## 📋 Resumo das Mudanças

O formulário de cadastro de documentos fiscais foi completamente reestruturado para seguir o padrão arquitetônico observado em `gt_operacao`, implementando um sistema de abas com organização em cards para melhor usabilidade e clareza visual.

---

## 🎯 Estrutura Nova Implementada

### 1️⃣ **ABA 1: DOCUMENTO FISCAL** 
   - **Ícone:** `description`
   - **Cor:** Azul (#007bff)
   - **Conteúdo:** Todos os campos editáveis organizados em 8 seções (cards)
   
   Seções internas:
   - 📌 **Status e Situação** - campos disabled (apenas leitura)
   - 📅 **Informações Básicas** - data, tipo de documento, filial
   - 👥 **Participantes** - remetente, destinatário, tomador, etc
   - 🚚 **Transporte** - veículo, motorista, peso, valores
   - 📄 **Informações Fiscais** - modelo, número, série, chave (com campos preenchidos na emissão)
   - 💰 **Impostos** - CFOP, base, alíquota, CST
   - 🛡️ **Seguros** - CNPJ, apólice, valor
   - 📝 **Observações** - obs internas e para o fisco

### 2️⃣ **ABA 2: AUTORIZAÇÃO SEFAZ**
   - **Ícone:** `verified`
   - **Cor:** Verde (#28a745)
   - **Conteúdo:** Informações de autorização + botões de ação
   
   Seções:
   - ✅ **Detalhes de Autorização** - protocolo, datas de autorização/cancelamento (disabled)
   - 🔘 **Botões de Ação** - Emitir, Consultar, Cancelar, Reimprimir (mostrados condicionalmente)

---

## 🔧 Implementações Técnicas

### Campos com Comportamento Especial

#### **Campos Disabled (Somente Leitura) - Preenchidos pelo Sistema**
- `situacao` - Estado do documento (0=Pendente, 1=Rejeitado, 2=Autorizado, 3=Cancelado, 4=Anulado)
- `status` - Ativo/Inativo
- `numerofiscal` - Preenchido automaticamente na emissão para Sefaz
- `seriefiscal` - Preenchido automaticamente na emissão
- `chavefiscal` - Preenchido automaticamente na emissão (44 dígitos)
- `protocoloaut` - Retornado pelo web service da Sefaz
- `dtautorizacao` - Data/hora retornada pelo Sefaz
- `dtcancelamento` - Data/hora de cancelamento no Sefaz

**Solução:** Hidden inputs sincronizados via JavaScript (`atualizarHiddenInputs()`)
- Os valores dos campos disabled são automaticamente copiados para inputs hidden antes da submissão
- Garante persistência dos dados no banco de dados mesmo com disabled attribute

### Botões de Ação Condicionais

```php
// Emitir Documento - visível quando:
// - situacao = 0 (Pendente)
// - action = 1 (modo edição)

// Consultar/Cancelar/Reimprimir - visível quando:
// - situacao = 2 (Autorizado)
// - action = 1 (modo edição)

// Mensagem de aviso - visível quando:
// - action = 0 (modo novo documento)
```

### Validação de Segurança

- Todos os valores dinâmicos escapados com `htmlspecialchars()`
- Campos de entrada validados com tipos (number, text, date, datetime-local)
- Required attributes em campos obrigatórios
- Validação no backend do `insert.php` (já existente)

---

## 📁 Arquivos Alterados/Criados

### 1. **gt_doctotransporte/cad.php** (RECRIADO)
   - **Status:** ✅ Criado com nova estrutura
   - **Linhas:** 689 (era 439 antes)
   - **Mudanças:**
     - Sistema de abas com Bootstrap tabs
     - 8 cards organizados na Aba 1
     - Seção de autorização e botões na Aba 2
     - Hidden inputs para campos disabled
     - JavaScript para sincronização de valores
     - Condições PHP para mostrar/ocultar botões

### 2. **css/gt_doctotransporte.css** (NOVO)
   - **Status:** ✅ Criado
   - **Propósito:** Estilização personalizada
   - **Componentes:**
     - `.gt_doctotransporte-card` - Card container com sombra
     - `.gt_doctotransporte-card-header` - Header com flexbox, icon e title
     - `.gt_doctotransporte-card-body` - Body com padding
     - Estilos de tabs com cores por tema
     - Responsividade (mobile, tablet, desktop)
     - Estados de hover/focus/disabled

### 3. **gt_doctotransporte/insert.php**
   - **Status:** ℹ️ Sem alterações necessárias
   - **Razão:** Já captura todos os 48 campos incluindo os disabled
   - **Funcionamento:** Recebe valores dos hidden inputs

---

## 🎨 Design e Estilo

### Paleta de Cores
- **Azul (#007bff):** Aba Documento, cards, links
- **Verde (#28a745):** Aba Autorização, botão Emitir
- **Cinza Claro (#f5f7fa):** Fundo de cards e headers
- **Cinza Escuro (#2c3e50):** Textos primários

### Tipografia
- **Headers:** Roboto, 16px, 600 weight
- **Labels:** 14px, 500 weight
- **Inputs:** 14px, regular weight
- **Material Icons:** 20-24px conforme contexto

### Layout Responsivo
- **Desktop:** 4-6 colunas por row (col-lg-*)
- **Tablet:** 2-3 colunas
- **Mobile:** Full width, stacked

---

## 🔌 Integração com Sistemas

### Funções JavaScript Placeholder
```javascript
emitirDocumento()      // Chamar API de emissão Sefaz
consultarSituacao()    // Consultar status junto à Sefaz
cancelarDocumento()    // Solicitar cancelamento
reimprimir()           // Gerar novo DANFE/NFe
```

### Próximos Passos Necessários

1. **Implementar Web Service de Emissão**
   - Criar `emitir.php` que recebe form data
   - Gerar XML (CTE/NFS-e)
   - Chamar API Sefaz
   - Parsear resposta e atualizar campos

2. **Implementar Consulta de Situação**
   - Endpoint que consulta status do documento
   - Atualizar campo `situacao` se resposta mudar de estado

3. **Implementar Cancelamento**
   - Gerar XML de cancelamento
   - Chamar API Sefaz para cancelamento
   - Atualizar `situacao` e `dtcancelamento`

4. **Testar Fluxo Completo**
   - Novo documento → Salvar → Emitir → Autorizado → Cancelar
   - Validar persistência de todos os 48 campos
   - Testar responsividade em diferentes telas

---

## 📊 Campos do Formulário (48 Total)

### Status/Situação (2)
- situacao
- status

### Informações Básicas (5)
- dtdocto
- dtemissão
- tipodocto
- tiposervico
- idfilial

### Participantes (7)
- idremetente
- idexpedidor
- iddestinatario
- idrecebedor
- idtomador
- idmercadoria
- idvolume

### Transporte (6)
- idveiculo
- idmotorista
- pesobruto
- vlrcarga
- vlrtotal
- vlrreceber

### Informações Fiscais (5)
- modelofiscal
- numerofiscal (disabled)
- seriefiscal (disabled)
- chavefiscal (disabled)
- tipodoctofiscal

### Impostos (5)
- idcfop
- impbasecalculo
- impaliquota
- impvalor
- impcst

### Seguros (5)
- cnpjseguro
- nomeseguro
- apoliceseguro
- averbacaoseguro
- vlrseguro

### Observações (2)
- obs
- obsfisco

### Autorização (3)
- protocoloaut (disabled)
- dtautorizacao (disabled)
- dtcancelamento (disabled)

---

## ✅ Checklist de Validação

- [x] Nova estrutura de abas implementada
- [x] Cards com headers e ícones em todas as seções
- [x] Campos disabled com visual claro (fundo cinzento)
- [x] Hidden inputs para sincronização de valores
- [x] Botões condicionais baseados em situacao e action
- [x] CSS personalizado com responsividade
- [x] Validações de campo obrigatório
- [x] Segurança (htmlspecialchars)
- [ ] Testar form completo no navegador
- [ ] Testar submissão com todos os 48 campos
- [ ] Implementar funções de emissão
- [ ] Testar fluxo de autorização Sefaz

---

## 🚀 Uso

1. **Novo Documento:** Clique em "Novo" → Abre aba "Documento Fiscal" → Preencha campos → Salve
2. **Editar Documento:** Clique em "Editar" → Abre aba "Documento Fiscal" → Modifique campos → Salve
3. **Emitir para Sefaz:** Clique na aba "Autorização Sefaz" → Clique "Emitir Documento" → Sistema faz requisição
4. **Após Autorização:** Botões "Consultar", "Cancelar", "Reimprimir" ficam disponíveis

---

## 📝 Notas Importantes

- O campo `action` controla o modo (0=novo, 1=edição) e visibilidade de botões
- Campos disabled não são submetidos naturalmente; a sincronização JavaScript resolve isso
- Material Icons deve estar carregado no arquivo de layout base
- Bootstrap 5 é obrigatório para funcionamento das abas
- Arquivo CSS referenciado deve estar em `../css/gt_doctotransporte.css`

---

**Data de Implementação:** <?php echo date('d/m/Y H:i:s'); ?>
**Status:** ✅ Pronto para teste
