# Module Tooltip avec Sections Pliables

## Description
Ce module ajoute des fonctionnalités de repliement/dépliement et de filtrage en temps réel aux tooltips de filtres avancés dans l'interface des tickets.

**Fonctionnalités principales** :
- **Sections pliables** : Chaque catégorie peut être repliée/dépliée
- **Filtrage en temps réel** : Champ de recherche pour chaque section
- **Tickets ouverts uniquement** : Seuls les tickets ouverts sont comptés et affichés

## Fichiers
- `include_collapsible_tooltip.js` - Module principal
- `include_ticket_status.js` - Intégration avec le système existant
- `test_collapsible_tooltip.html` - Page de test/démonstration

## Fonctionnalités

### 1. Sections Pliables
Chaque catégorie de filtres peut être repliée/dépliée (repliées par défaut) :
- **Priorité** : A définir, Basse, Normale, Haute, Bloquant
- **Catégorie** : A définir, Bug, Demande client, Evolution, etc.
- **Criticité** : Faible, Moyenne, Forte
- **Demandeur** : Liste des demandeurs
- **Assigné à** : Liste des agents assignés
- **Client** : Liste des clients
- **Délais** : Inférieur à 24h, 48h, Supérieur à 72h

### 2. Interactions
- **Clic sur l'en-tête** : Replie/déplie la section
- **Clic sur un élément** : Applique le filtre et ferme le tooltip
- **Icônes visuelles** : ▼ (déplié) / ▶ (replié)
- **Filtrage "Assigné à"** : Gestion spéciale pour les tickets non assignés (Anonyme)

### 3. Contrôles Globaux
- **Tout déplier** : Ouvre toutes les sections
- **Tout replier** : Ferme toutes les sections

## Filtrage Spécial des Sections

### "Assigné à"
La section "Assigné à" nécessite une gestion particulière car elle peut contenir :
- **Agents assignés** : Filtrage par UID exact de l'agent
- **Tickets non assignés** : Filtrage sur les tickets avec `assigned_to` vide ou NULL

### "Demandeur"
La section "Demandeur" nécessite une gestion similaire :
- **Demandeurs identifiés** : Filtrage par email exact du demandeur
- **Tickets anonymes** : Filtrage sur les tickets avec `requester` vide ou NULL

### "Priorité"
La section "Priorité" nécessite une gestion similaire :
- **Priorités définies** : Filtrage par code exact de la priorité
- **Tickets sans priorité** : Filtrage sur les tickets avec `priority` vide ou NULL

### "Catégorie"
La section "Catégorie" nécessite une gestion similaire :
- **Catégories définies** : Filtrage par code exact de la catégorie
- **Tickets sans catégorie** : Filtrage sur les tickets avec `category` vide ou NULL

### "Criticité"
La section "Criticité" nécessite une gestion similaire :
- **Criticités définies** : Filtrage par code exact de la criticité
- **Tickets sans criticité** : Filtrage sur les tickets avec `criticite` vide ou NULL

### "Client"
La section "Client" nécessite une gestion similaire :
- **Clients définis** : Filtrage par code exact du client
- **Tickets sans client** : Filtrage sur les tickets avec `ref_knowledge_client` vide ou NULL

### "Délais"
La section "Délais" nécessite une gestion particulière :
- **Délais définis** : Filtrage par plage de dates basée sur `created_at`
- **Tickets sans délais** : Filtrage sur les tickets avec `created_at` vide ou NULL

### Logique de filtrage
```javascript
// Pour un agent spécifique
filterBySection('assigned_to', 'agent_uid_123', 'John Doe');
// → Applique: assigned_to = 'agent_uid_123'

// Pour les tickets non assignés
filterBySection('assigned_to', '', 'Anonyme');
// → Applique: (assigned_to IS NULL OR assigned_to = '')

// Pour un demandeur spécifique
filterBySection('requester', 'miguel.delgado@example.com', 'Miguel Delgado');
// → Applique: requester = 'miguel.delgado@example.com'

// Pour les tickets anonymes
filterBySection('requester', '', 'Anonyme');
// → Applique: (requester IS NULL OR requester = '')

// Pour une priorité spécifique
filterBySection('priority', 'haute', 'Haute');
// → Applique: priority = 'haute'

// Pour les tickets sans priorité
filterBySection('priority', '', 'Non définie');
// → Applique: (priority IS NULL OR priority = '')

// Pour une catégorie spécifique
filterBySection('category', 'bug', 'Bug');
// → Applique: category = 'bug'

// Pour les tickets sans catégorie
filterBySection('category', '', 'Non définie');
// → Applique: (category IS NULL OR category = '')

// Pour une criticité spécifique
filterBySection('criticite', 'critique', 'Critique');
// → Applique: criticite = 'critique'

// Pour les tickets sans criticité
filterBySection('criticite', '', 'Non définie');
// → Applique: (criticite IS NULL OR criticite = '')

// Pour un client spécifique
filterBySection('client', 'client_123', 'Client ABC');
// → Applique: ref_knowledge_client = 'client_123'

// Pour les tickets sans client
filterBySection('client', '', 'Non défini');
// → Applique: (ref_knowledge_client IS NULL OR ref_knowledge_client = '')

// Pour un délai spécifique
filterBySection('delais', '24h', 'Inférieur à 24h');
// → Applique: DATE(created_at) >= 'date_d_hier'

// Pour les tickets sans délais
filterBySection('delais', '', 'Non définie');
// → Applique: (created_at IS NULL OR created_at = '')
```

### Backend
Le backend gère quatorze types de filtres spéciaux :
- `adv_assigned` : Filtre par UID exact d'agent
- `adv_assigned_empty` : Filtre sur les tickets non assignés
- `adv_requester` : Filtre par email exact du demandeur
- `adv_requester_empty` : Filtre sur les tickets anonymes
- `adv_priority` : Filtre par code exact de la priorité
- `adv_priority_empty` : Filtre sur les tickets sans priorité
- `adv_category` : Filtre par code exact de la catégorie
- `adv_category_empty` : Filtre sur les tickets sans catégorie
- `adv_criticite` : Filtre par code exact de la criticité
- `adv_criticite_empty` : Filtre sur les tickets sans criticité
- `adv_client` : Filtre par code exact du client
- `adv_client_empty` : Filtre sur les tickets sans client
- `adv_delais_empty` : Filtre sur les tickets sans délais
- `adv_date_from` / `adv_date_to` : Filtres de date pour les délais

### Filtrage des Tickets
Le système applique des filtres différents selon la page :

#### Pages ticketO et ticketF
- **Filtre** : `status != 'ferme'` (tickets ouverts uniquement)
- **Résultat** : Seuls les tickets ouverts apparaissent dans le tooltip
- **Avantage** : Interface focalisée sur les tickets actifs

#### Page ticketA
- **Filtre** : Aucun (tous les tickets)
- **Résultat** : Tous les tickets (ouverts et fermés) apparaissent dans le tooltip
- **Avantage** : Vue complète de tous les tickets

### Filtrage en Temps Réel
Chaque section du tooltip dispose d'un champ de recherche pour filtrer les éléments :
- **Champ de recherche** : Input text avec placeholder personnalisé
- **Filtrage instantané** : Recherche en temps réel lors de la frappe
- **Recherche insensible à la casse** : "Nor" trouve "Normale"
- **Message d'absence** : "Aucun élément trouvé" si aucun résultat
- **Effacement facile** : Vider le champ pour voir tous les éléments

#### Exemple d'utilisation
```javascript
// Filtrer la section "Priorité" avec "Nor"
filterSectionItems('priority', 'Nor');
// → Affiche seulement "Normale: 8"

// Effacer le filtre
clearSectionFilter('priority');
// → Affiche tous les éléments de priorité
```

## Utilisation

### Intégration
```javascript
// Le module est automatiquement chargé avec la page ticketO
js_include('admin/zlib_mod/front/ticket/js/include_collapsible_tooltip.js');
```

### Fonctions Disponibles
```javascript
// Basculer une section
toggleSection('priority');

// Filtrer par section
filterBySection('priority', 'haute', 'Haute');

// Contrôles globaux
expandAllSections();
collapseAllSections();
```

### Structure HTML Générée
```html
<div class="collapsible-section" data-section="priority">
    <div class="section-header" onclick="toggleSection('priority')">
        <span class="section-title">Priorité</span>
        <span class="collapse-icon" id="icon-priority">▼</span>
    </div>
    <div class="section-content expanded" id="content-priority">
        <div onclick="filterBySection('priority', 'haute', 'Haute')">Haute: 2</div>
        <!-- ... autres éléments ... -->
    </div>
</div>
```

## Styles CSS

### Classes Principales
- `.collapsible-section` - Conteneur de section
- `.section-header` - En-tête cliquable
- `.section-content` - Contenu pliable
- `.collapse-icon` - Icône de repliement

### États
- `.expanded` - Section dépliée
- `.collapsed` - Section repliée

### Animations
- Transitions CSS pour le repliement/dépliement
- Effets de survol sur les éléments interactifs
- Animations fluides (0.3s)

## Intégration avec le Système Existant

### Filtres Appliqués
Le module s'intègre avec le système de filtres existant :
- Utilise `tbcomponent['table_admin'].hidden_field`
- Applique les filtres via `adv_priority`, `adv_category`, etc.
- Gère les filtres de dates pour les délais

### APIs Backend
- `count_info` - Récupère les données des sections
- `list` - Recharge le tableau avec les filtres

## Test et Débogage

### Page de Test
Ouvrir `test_collapsible_tooltip.html` dans un navigateur pour :
- Tester les interactions
- Vérifier les animations
- Valider le filtrage

### Console de Débogage
```javascript
// Vérifier l'état des sections
document.querySelectorAll('.collapsible-section').forEach(section => {
    console.log(section.getAttribute('data-section'), 
                section.querySelector('.section-content').classList.contains('expanded'));
});

// Tester le filtrage
filterBySection('priority', 'haute', 'Haute');
```

## Personnalisation

### Modifier les Icônes
```javascript
// Dans toggleSection()
icon.textContent = '▼'; // Déplié
icon.textContent = '▶'; // Replié
```

### Ajouter de Nouvelles Sections
```javascript
// Dans createCollapsibleSection()
if(resp2.data.nouvelle_section){
    htmlTip += createCollapsibleSection("Nouvelle Section", resp2.data.nouvelle_section, "nouvelle_section");
}
```

### Modifier les Animations
```css
.section-content {
    transition: all 0.5s ease; /* Durée personnalisée */
}
```

## Compatibilité
- Navigateurs modernes (ES6+)
- Framework existant (tbcomponent)
- Système de filtres actuel
- APIs backend existantes