# 🚀 Guia de Aplicação - Header Filter System

## 📋 Checklist de Aplicação

### Pré-requisitos ✅
- [x] Arquivos CSS criados: `js/header-filter.css`
- [x] Arquivos JS criados: `js/header-filter.js`
- [x] Template disponível: `js/TEMPLATE-HEADER-FILTER.php`
- [x] Documentação: `js/HEADER-FILTER-README.md`
- [x] Teste realizado: `dm_motorista/index.php`

---

## 🎯 Passo a Passo para Aplicar em Novas Tabelas

### **ETAPA 1: PREPARAÇÃO**

1. **Identifique a tabela PHP**
   - Localize o arquivo `index.php` da tabela
   - Exemplo: `dm_veiculo/index.php`, `tms001_viagem/index.php`

2. **Analise a estrutura atual**
   - Verifique se existe filtro antigo (inputs, Select2, etc.)
   - Identifique as colunas da tabela
   - Anote os nomes das colunas

---

### **ETAPA 2: MODIFICAÇÃO DO HTML**

#### 2.1 - Adicionar Includes

**Procure por:**
```php
<?php include ('../include/lista.php'); ?>
```

**Adicione APÓS:**
```html
<!-- CSS do Sistema de Filtro -->
<link rel="stylesheet" href="../js/header-filter.css">
```

**E ANTES do:**
```php
<?php include ('../include/fim.php');  ?>
```

**Adicione:**
```html
<!-- JS do Sistema de Filtro -->
<script src="../js/header-filter.js"></script>
```

#### 2.2 - Remover CSS Antigo

Se existir CSS inline:
```html
<style>
    .table input[type="text"] { ... }
    /* etc */
</style>
```

**Remova ou deixe apenas o mínimo necessário**

#### 2.3 - Estruturar o Header da Tabela

**ANTES (Antigo com inputs):**
```html
<thead>
    <tr>
        <th>
            <input type="text" placeholder="Nome" />
            <span>Nome</span>
        </th>
    </tr>
</thead>
```

**DEPOIS (Novo com filtro):**
```html
<thead>
    <tr>
        <th>
            <div class='header-filter' data-col-name='nome'>
                <div style='display:flex;align-items:center;gap:8px;'>
                    <button class='btn btn-sm btn-outline-secondary btn-filter-toggle' type='button' aria-expanded='false' title='Filtrar por Nome do campo'>
                        <i class='material-symbols-outlined' style='font-size:16px'>filter_list</i>
                    </button>
                    <span class='header-title'>Nome</span>
                </div>
                <div class='filter-menu' data-col-name='nome'></div>
            </div>
        </th>
    </tr>
</thead>
```

---

### **ETAPA 3: CONFIGURAÇÃO**

Para cada coluna que deseja filtrar:

1. **Defina um nome único em `data-col-name`**
   ```html
   <div class='header-filter' data-col-name='nome_unico'>
   ```

2. **Adicione uma descrição no `title` do botão**
   ```html
   title='Filtrar por Descrição do campo'
   ```

3. **Defina o título visível na coluna**
   ```html
   <span class='header-title'>Nome Exibido</span>
   ```

---

### **ETAPA 4: TESTES**

1. **Abra a página no navegador**
   ```
   http://localhost/sag-adm/modulo/
   ```

2. **Verifique se os ícones aparecem** 🔽

3. **Clique no ícone de filtro**
   - Deve abrir um menu dropdown
   - Deve listar todos os valores

4. **Teste as funcionalidades**
   - [ ] Marcar checkbox
   - [ ] Clicar "Todos"
   - [ ] Clicar "Limpar"
   - [ ] Pesquisar no campo
   - [ ] Filtros múltiplos simultâneos
   - [ ] Fechar ao clicar fora

---

## 📝 Exemplos Rápidos

### Exemplo 1: Tabela Simples

```php
<?php include ('../include/lista.php'); ?>
<link rel="stylesheet" href="../js/header-filter.css">

<table class="table" id="datatable-tabletools">
    <thead>
        <tr>
            <th>
                <div class='header-filter' data-col-name='status'>
                    <div style='display:flex;align-items:center;gap:8px;'>
                        <button class='btn btn-sm btn-outline-secondary btn-filter-toggle' type='button' title='Filtrar por Status'>
                            <i class='material-symbols-outlined' style='font-size:16px'>filter_list</i>
                        </button>
                        <span class='header-title'>Status</span>
                    </div>
                    <div class='filter-menu' data-col-name='status'></div>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <?php while($row = pg_fetch_array($result)) { ?>
            <tr>
                <td><?php echo $row['status']; ?></td>
            </tr>
        <?php } ?>
    </tbody>
</table>

<script src="../js/header-filter.js"></script>
<?php include ('../include/fim.php');  ?>
```

### Exemplo 2: Múltiplas Colunas

```html
<table id="datatable-tabletools">
    <thead>
        <tr>
            <th>ID
                <div class='header-filter' data-col-name='id'>
                    <button class='btn btn-sm btn-outline-secondary btn-filter-toggle'>
                        <i class='material-symbols-outlined'>filter_list</i>
                    </button>
                    <div class='filter-menu' data-col-name='id'></div>
                </div>
            </th>
            <th>Nome
                <div class='header-filter' data-col-name='nome'>
                    <button class='btn btn-sm btn-outline-secondary btn-filter-toggle'>
                        <i class='material-symbols-outlined'>filter_list</i>
                    </button>
                    <div class='filter-menu' data-col-name='nome'></div>
                </div>
            </th>
        </tr>
    </thead>
</table>
```

---

## ⚠️ Troubleshooting

### Problema: Filtro não aparece
**Solução:**
- Verificar `id="datatable-tabletools"` na `<table>`
- Verificar se arquivos CSS/JS estão sendo carregados
- Abrir DevTools (F12) e procurar por erros

### Problema: Filtro não filtra
**Solução:**
- Verificar `data-col-name` em ambas as divs
- Verificar se o conteúdo da célula é texto puro
- Verificar console para erros

### Problema: Estilo diferente
**Solução:**
- Verificar se classes `btn btn-sm btn-outline-secondary` existem
- Verificar se Material Symbols está carregado
- Comparar com `dm_motorista/index.php`

---

## 🎨 Personalização

### Alterar Cores
Editar `js/header-filter.css`:
```css
.header-filter .filter-menu {
    background: #SEU_AZUL;  /* Mude aqui */
}
.header-filter .filter-actions > button {
    background-color: #SEU_BOTAO;  /* E aqui */
}
```

### Alterar Textos dos Botões
Em `js/header-filter.js`, procure por:
```javascript
actions.innerHTML = "<button type='button' class='btn-primary btn-select-all'>Todos</button><button type='button' class='btn-light btn-clear'>Limpar</button>";
```

---

## 📊 Tabelas Sugeridas para Implementação

**Prioridade Alta:**
- [ ] dm_veiculo
- [ ] dm_cliente
- [ ] dm_gestor
- [ ] tms001_viagem

**Prioridade Média:**
- [ ] ger001_veiculo
- [ ] ger005_cliente
- [ ] ger007_motorista

**Prioridade Baixa:**
- [ ] Outras tabelas conforme necessário

---

## ✅ Validação Final

Após implementar:

- [ ] Filtros aparecem nos headers
- [ ] Dropdown abre/fecha
- [ ] Múltiplos valores aparecem
- [ ] Botões "Todos" e "Limpar" funcionam
- [ ] Pesquisa funciona
- [ ] Filtros múltiplos funcionam
- [ ] Sem erros no console
- [ ] Responsive em mobile
- [ ] CSS segue padrão tms002

---

## 📞 Suporte

**Documentação completa:** `js/HEADER-FILTER-README.md`
**Template para copiar:** `js/TEMPLATE-HEADER-FILTER.php`
**Exemplo funcionando:** `dm_motorista/index.php`

---

**🎉 Parabéns! Seu sistema está pronto para aplicação em massa!**
