<?php
session_start();
// Vérifier si l'utilisateur est connecté
if (!isset($_SESSION['user_id'])) {
    //header('Location: login.php');
    //exit;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <?php include 'includes/head.php'; ?>
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>FAQ - Questions Fréquentes</title>
    <style>
        .faq-section {
            margin-bottom: 2rem;
        }
        .faq-item {
            border: 1px solid #e3e6f0;
            border-radius: 0.35rem;
            margin-bottom: 0.5rem;
            background-color: #fff;
        }
        .faq-question {
            background-color: #f8f9fc;
            padding: 1rem;
            cursor: pointer;
            margin: 0;
            transition: background-color 0.3s ease;
            border-radius: 0.35rem 0.35rem 0 0;
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .faq-question:hover {
            background-color: #eaecf4;
        }
        .faq-question-text {
            flex: 1;
            font-weight: 600;
            margin: 0;
        }
        .faq-icon {
            margin-left: 1rem;
            transition: transform 0.3s ease;
            color: #5a5c69;
        }
        .faq-icon.active {
            transform: rotate(180deg);
        }
        .faq-answer {
            padding: 0 1rem;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            background-color: white;
        }
        .faq-answer.active {
            max-height: 500px;
            padding: 1rem;
        }
        .search-box {
            margin-bottom: 2rem;
        }
        .category-nav {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 2rem;
        }
        .category-nav .nav-link {
            color: white;
            border-radius: 0.25rem;
            margin: 0 0.25rem;
            padding: 0.5rem 1rem;
        }
        .category-nav .nav-link.active {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .category-nav .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
        .highlight {
            background-color: #fff3cd;
            padding: 0.1rem 0.2rem;
            border-radius: 0.2rem;
            font-weight: bold;
        }
        .section-icon {
            margin-right: 0.5rem;
        }
        .no-results {
            text-align: center;
            padding: 3rem 1rem;
            color: #6c757d;
        }
        .no-results i {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: #dee2e6;
        }
    </style>
</head>
<body id="page-top">
    <div id="wrapper">
        <!-- Sidebar -->
        <?php include 'includes/sidebar.php'; ?>
        
        <div id="content-wrapper" class="d-flex flex-column">
            <div id="content">
                <!-- TopBar -->
                <?php include 'includes/topbar.php'; ?>
                
                <!-- Container Fluid-->
                <div class="container-fluid" id="container-wrapper">
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">FAQ - Questions Fréquentes</h1>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.php">Accueil</a></li>
                            <li class="breadcrumb-item active" aria-current="page">FAQ</li>
                        </ol>
                    </div>

                    <!-- Search Box -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card mb-4">
                                <div class="card-body">
                                    <div class="search-box">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="searchFAQ" placeholder="Rechercher dans la FAQ...">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Category Navigation -->
                    <div class="row">
                        <div class="col-12">
                            <div class="category-nav">
                                <ul class="nav nav-pills justify-content-center">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#" data-category="all">Toutes</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" data-category="polices">Polices</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" data-category="paiements">Paiements</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" data-category="clients">Clients</a>
                                    </li>                                    <li class="nav-item">
                                        <a class="nav-link" href="#" data-category="factures">Factures</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" data-category="backup">Backup</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" data-category="technique">Technique</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- FAQ Content -->
                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">

                                    <!-- Section Polices -->
                                    <div class="faq-section" data-category="polices">
                                        <h4 class="text-primary mb-3">
                                            <i class="fas fa-shield-alt section-icon"></i>Polices d'Assurance
                                        </h4>
                                        
                                        <div class="faq-item" data-question="Comment ajouter une nouvelle police ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment ajouter une nouvelle police ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour ajouter une nouvelle police :</p>
                                                <ol>
                                                    <li>Allez dans le menu <strong>"Polices"</strong> puis <strong>"Ajouter une police"</strong></li>
                                                    <li>Saisissez le CIN du client (utilisez la recherche automatique)</li>
                                                    <li>Remplissez l'immatriculation du véhicule</li>
                                                    <li>Choisissez le type de police et la marque du véhicule</li>
                                                    <li>Définissez les dates de début et fin</li>
                                                    <li>Saisissez les montants et le mode de paiement</li>
                                                    <li>Cliquez sur <strong>"Ajouter"</strong></li>
                                                </ol>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Que faire si le numéro de police existe déjà ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Que faire si le numéro de police existe déjà ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Si vous obtenez l'erreur "Le numéro de police existe déjà" :</p>
                                                <ul>
                                                    <li>Vérifiez que vous n'avez pas fait d'erreur de saisie</li>
                                                    <li>Consultez la liste des polices existantes</li>
                                                    <li>Utilisez un nouveau numéro unique</li>
                                                    <li>Contactez l'administrateur si le problème persiste</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Comment modifier une police existante ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment modifier une police existante ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour modifier une police :</p>
                                                <ol>
                                                    <li>Allez dans <strong>"Polices"</strong> puis <strong>"Liste des polices"</strong></li>
                                                    <li>Trouvez la police à modifier</li>
                                                    <li>Cliquez sur le bouton <strong>"Modifier"</strong> (icône crayon)</li>
                                                    <li>Effectuez vos modifications</li>
                                                    <li>Sauvegardez les changements</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Section Paiements -->
                                    <div class="faq-section" data-category="paiements">
                                        <h4 class="text-success mb-3">
                                            <i class="fas fa-credit-card section-icon"></i>Paiements
                                        </h4>
                                        
                                        <div class="faq-item" data-question="Quels sont les modes de paiement disponibles ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Quels sont les modes de paiement disponibles ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Les modes de paiement disponibles sont :</p>
                                                <ul>
                                                    <li><strong>ESPECE</strong> : Paiement immédiat en liquide</li>
                                                    <li><strong>CHEQUE</strong> : Nécessite un numéro de référence et une date d'échéance</li>
                                                    <li><strong>EFFET</strong> : Nécessite un numéro de référence et une date d'échéance</li>
                                                    <li><strong>VIREMENT BANCAIRE</strong> : Paiement immédiat par virement</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Pourquoi le champ Numéro de référence n'apparaît pas ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Pourquoi le champ "Numéro de référence" n'apparaît pas ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Le champ "Numéro de référence" n'apparaît que pour certains modes de paiement :</p>
                                                <ul>
                                                    <li><strong>CHEQUE</strong> : Numéro du chèque obligatoire</li>
                                                    <li><strong>EFFET</strong> : Numéro de l'effet obligatoire</li>
                                                </ul>
                                                <p>Pour <strong>ESPECE</strong> et <strong>VIREMENT BANCAIRE</strong>, aucune référence n'est requise.</p>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Comment gérer les dates d'échéance ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment gérer les dates d'échéance ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Les dates d'échéance sont gérées automatiquement :</p>
                                                <ul>
                                                    <li><strong>ESPECE</strong> : Date d'échéance = date du jour (automatique)</li>
                                                    <li><strong>VIREMENT BANCAIRE</strong> : Date d'échéance = date du jour (automatique)</li>
                                                    <li><strong>CHEQUE/EFFET</strong> : Date d'échéance à saisir manuellement</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Comment valider ou refuser un paiement ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment valider ou refuser un paiement ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour gérer le statut des paiements :</p>
                                                <ol>
                                                    <li>Allez dans <strong>"Paiements"</strong> puis <strong>"Liste des reçus"</strong></li>
                                                    <li>Trouvez le paiement concerné</li>
                                                    <li>Cliquez sur <strong>"Valider"</strong> pour confirmer le paiement</li>
                                                    <li>Ou cliquez sur <strong>"Refuser"</strong> si le paiement est rejeté</li>
                                                </ol>
                                                <p><strong>Note :</strong> Les paiements en espèce sont automatiquement validés.</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Section Clients -->
                                    <div class="faq-section" data-category="clients">
                                        <h4 class="text-info mb-3">
                                            <i class="fas fa-users section-icon"></i>Gestion des Clients
                                        </h4>
                                        
                                        <div class="faq-item" data-question="Comment ajouter un nouveau client ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment ajouter un nouveau client ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour ajouter un client :</p>
                                                <ol>
                                                    <li>Allez dans <strong>"Clients"</strong> puis <strong>"Ajouter un client"</strong></li>
                                                    <li>Saisissez le CIN (obligatoire et unique)</li>
                                                    <li>Remplissez le nom complet</li>
                                                    <li>Ajoutez les informations de contact (téléphone, email, adresse)</li>
                                                    <li>Cliquez sur <strong>"Ajouter"</strong></li>
                                                </ol>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Que faire si un CIN existe déjà ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Que faire si un CIN existe déjà ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Si le CIN existe déjà :</p>
                                                <ul>
                                                    <li>Vérifiez que vous n'avez pas fait d'erreur de saisie</li>
                                                    <li>Recherchez le client existant dans la liste</li>
                                                    <li>Modifiez les informations du client existant si nécessaire</li>
                                                    <li>Chaque CIN doit être unique dans le système</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Comment rechercher un client rapidement ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment rechercher un client rapidement ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Plusieurs méthodes de recherche sont disponibles :</p>
                                                <ul>
                                                    <li>Utilisez la barre de recherche dans la liste des clients</li>
                                                    <li>Recherchez par CIN dans les formulaires (autocomplétion)</li>
                                                    <li>Filtrez par nom ou numéro de téléphone</li>
                                                    <li>Utilisez la fonction de tri par colonnes</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Section Factures -->
                                    <div class="faq-section" data-category="factures">
                                        <h4 class="text-warning mb-3">
                                            <i class="fas fa-file-invoice section-icon"></i>Factures
                                        </h4>
                                        
                                        <div class="faq-item" data-question="Comment créer une facture ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment créer une facture ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour créer une facture :</p>
                                                <ol>
                                                    <li>Allez dans <strong>"Factures"</strong> puis <strong>"Créer une facture"</strong></li>
                                                    <li>Sélectionnez le client et la police</li>
                                                    <li>Le système génère automatiquement le numéro de facture</li>
                                                    <li>Vérifiez les informations et les montants</li>
                                                    <li>Cliquez sur <strong>"Créer"</strong></li>
                                                </ol>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Comment personnaliser le logo de la compagnie ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment personnaliser le logo de la compagnie ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour gérer le logo :</p>
                                                <ol>
                                                    <li>Allez dans <strong>"Configuration"</strong> puis <strong>"Configuration de la compagnie"</strong></li>
                                                    <li>Dans la section "Logo", cliquez sur <strong>"Choisir un fichier"</strong></li>
                                                    <li>Sélectionnez votre image (PNG, JPG, JPEG)</li>
                                                    <li>Ajustez le recadrage si nécessaire</li>
                                                    <li>Choisissez le format d'affichage</li>
                                                    <li>Sauvegardez les modifications</li>
                                                </ol>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Comment exporter une liste de factures en PDF ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment exporter une liste de factures en PDF ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour exporter en PDF :</p>
                                                <ol>
                                                    <li>Allez dans <strong>"Factures"</strong> puis <strong>"Exportation"</strong></li>
                                                    <li>Sélectionnez la période (date de début et fin)</li>
                                                    <li>Cliquez sur <strong>"Exporter en PDF"</strong></li>
                                                    <li>Le PDF sera généré en format paysage A4</li>                                                    <li>Il contient tous les détails des paiements avec statuts colorés</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Section Backup -->
                                    <div class="faq-section" data-category="backup">
                                        <h4 class="text-primary mb-3">
                                            <i class="fas fa-shield-alt section-icon"></i>Système de Backup
                                        </h4>

                                        

                                        <!-- Vue d'ensemble du système -->
                                        <div class="faq-item">
                                            <div class="faq-question" onclick="toggleFAQ(this)">
                                                <h6 class="faq-question-text">Qu'est-ce que le système de backup et pourquoi est-il important ?</h6>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <div class="answer-content">
                                                    <p><strong>Le système de backup</strong> est un mécanisme de sauvegarde automatique et manuel qui protège vos données contre la perte, la corruption ou les erreurs humaines.</p>
                                                    
                                                    <h6><i class="fas fa-star text-warning"></i> Pourquoi c'est crucial :</h6>
                                                    <ul>
                                                        <li><strong>Protection des données</strong> : Toutes vos polices, clients, paiements sont sauvegardés</li>
                                                        <li><strong>Récupération rapide</strong> : En cas de problème, restauration en quelques clics</li>
                                                        <li><strong>Continuité d'activité</strong> : Votre travail ne s'arrête jamais</li>
                                                        <li><strong>Conformité</strong> : Respect des obligations légales de conservation</li>
                                                    </ul>
                                                    
                                                    <div class="alert alert-info mt-3">
                                                        <i class="fas fa-info-circle"></i> 
                                                        <strong>Le système sauvegarde :</strong> Base de données + Fichiers joints (photos, documents) dans un seul fichier ZIP.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Types de backup -->
                                        <div class="faq-item">
                                            <div class="faq-question" onclick="toggleFAQ(this)">
                                                <h6 class="faq-question-text">Quels sont les différents types de backup disponibles ?</h6>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <div class="answer-content">
                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <div class="card border-success">
                                                                <div class="card-header bg-success text-white">
                                                                    <i class="fas fa-hand-paper"></i> Manuel
                                                                </div>
                                                                <div class="card-body">
                                                                    <p><strong>Quand :</strong> À la demande</p>
                                                                    <p><strong>Qui :</strong> Vous décidez</p>
                                                                    <p><strong>Usage :</strong> Avant modifications importantes</p>
                                                                    <p><strong>Limite :</strong> 1 seul à la fois (remplace l'ancien)</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="card border-primary">
                                                                <div class="card-header bg-primary text-white">
                                                                    <i class="fas fa-robot"></i> Automatique
                                                                </div>
                                                                <div class="card-body">
                                                                    <p><strong>Quand :</strong> Chaque nuit à 2h</p>
                                                                    <p><strong>Qui :</strong> Système automatique</p>
                                                                    <p><strong>Usage :</strong> Sauvegarde quotidienne</p>
                                                                    <p><strong>Limite :</strong> 5 maximum (rotation automatique)</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <div class="card border-warning">
                                                                <div class="card-header bg-warning text-dark">
                                                                    <i class="fas fa-clock"></i> Temporaire
                                                                </div>
                                                                <div class="card-body">
                                                                    <p><strong>Quand :</strong> Avant restauration</p>
                                                                    <p><strong>Qui :</strong> Système automatique</p>
                                                                    <p><strong>Usage :</strong> Sécurité avant changement</p>
                                                                    <p><strong>Limite :</strong> Nettoyés automatiquement</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Comment créer un backup manuel -->
                                        <div class="faq-item">
                                            <div class="faq-question" onclick="toggleFAQ(this)">
                                                <h6 class="faq-question-text">Comment créer un backup manuel ?</h6>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <div class="answer-content">
                                                    <h6><i class="fas fa-play-circle text-success"></i> Étapes à suivre :</h6>
                                                    <ol>
                                                        <li><strong>Accéder à la page :</strong> Menu → Backup</li>
                                                        <li><strong>Lancer le backup :</strong> Cliquez sur "Lancer le Backup"</li>
                                                        <li><strong>Confirmer :</strong> Cliquez "Créer le backup" dans la popup</li>
                                                        <li><strong>Attendre :</strong> Barre de progression jusqu'à 100%</li>
                                                        <li><strong>Succès :</strong> Message vert avec nom du fichier créé</li>
                                                    </ol>

                                                    <div class="alert alert-warning mt-3">
                                                        <i class="fas fa-exclamation-triangle"></i> 
                                                        <strong>Important :</strong> Le backup manuel remplace l'ancien backup manuel s'il existe.
                                                    </div>

                                                    <h6><i class="fas fa-clock text-info"></i> Durée estimée :</h6>
                                                    <ul>
                                                        <li>Petite base (< 1000 polices) : 30 secondes</li>
                                                        <li>Base moyenne (1000-5000 polices) : 1-2 minutes</li>
                                                        <li>Grande base (> 5000 polices) : 3-5 minutes</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Comment restaurer un backup -->
                                        <div class="faq-item">
                                            <div class="faq-question" onclick="toggleFAQ(this)">
                                                <h6 class="faq-question-text">Comment restaurer un backup ?</h6>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <div class="answer-content">
                                                    <div class="alert alert-danger">
                                                        <i class="fas fa-exclamation-triangle"></i> 
                                                        <strong>ATTENTION :</strong> La restauration remplace TOUTES vos données actuelles par celles du backup !
                                                    </div>

                                                    <h6><i class="fas fa-undo text-primary"></i> Processus de restauration :</h6>
                                                    <ol>
                                                        <li><strong>Sélection :</strong> Choisissez le backup dans la liste (Manuel/Auto/Temporaire)</li>
                                                        <li><strong>Sécurité :</strong> Le système crée automatiquement un backup temporaire de l'état actuel</li>
                                                        <li><strong>Confirmation :</strong> Cliquez "Restaurer" dans la popup de confirmation</li>
                                                        <li><strong>Progression :</strong> Barre de progression avec étapes détaillées</li>
                                                        <li><strong>Succès :</strong> Message de confirmation et liste des éléments restaurés</li>
                                                    </ol>

                                                    <h6><i class="fas fa-shield-alt text-success"></i> Sécurités en place :</h6>
                                                    <ul>
                                                        <li><strong>Backup automatique :</strong> Avant toute restauration</li>
                                                        <li><strong>Validation :</strong> Vérification de l'intégrité du fichier</li>
                                                        <li><strong>Rollback :</strong> Possibilité de revenir en arrière via backup temporaire</li>
                                                    </ul>                                                </div>                                            </div>
                                        </div>

                                        <!-- Journal des opérations -->
                                        <div class="faq-item">
                                            <div class="faq-question" onclick="toggleFAQ(this)">
                                                <h6 class="faq-question-text">Comment consulter l'historique des backups ?</h6>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <div class="answer-content">
                                                    <h6><i class="fas fa-list-alt text-info"></i> Journal simplifié :</h6>
                                                    <p>Le système maintient un journal des 20 dernières opérations, visible dans l'interface Backup.</p>

                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <h6><i class="fas fa-check-circle text-success"></i> Entrées SUCCESS :</h6>
                                                            <ul>
                                                                <li>Backup manuel réussi</li>
                                                                <li>Backup automatique réussi</li>
                                                                <li>Restauration terminée avec succès</li>
                                                            </ul>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <h6><i class="fas fa-times-circle text-danger"></i> Entrées ERROR :</h6>
                                                            <ul>
                                                                <li>Backup manuel échoué</li>
                                                                <li>Backup automatique échoué</li>
                                                                <li>Erreur lors de la restauration</li>
                                                            </ul>
                                                        </div>
                                                    </div>

                                                    <h6><i class="fas fa-eye text-primary"></i> Informations affichées :</h6>
                                                    <ul>
                                                        <li><strong>Date/Heure :</strong> Moment précis de l'opération</li>
                                                        <li><strong>Type :</strong> SUCCESS (vert) ou ERROR (rouge)</li>
                                                        <li><strong>Description :</strong> Détail de l'opération effectuée</li>
                                                        <li><strong>Nom du fichier :</strong> Pour les backups réussis</li>
                                                    </ul>

                                                    <div class="alert alert-info mt-3">
                                                        <i class="fas fa-broom"></i> 
                                                        <strong>Nettoyage automatique :</strong> Seules les opérations importantes sont conservées (plus de logs techniques encombrants).
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Bonnes pratiques -->
                                        <div class="faq-item">
                                            <div class="faq-question" onclick="toggleFAQ(this)">
                                                <h6 class="faq-question-text">Quelles sont les bonnes pratiques de backup ?</h6>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <div class="answer-content">
                                                    <h6><i class="fas fa-star text-warning"></i> Recommandations essentielles :</h6>
                                                    
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="card border-success">
                                                                <div class="card-header bg-success text-white">
                                                                    <i class="fas fa-thumbs-up"></i> À FAIRE
                                                                </div>
                                                                <div class="card-body">
                                                                    <ul class="mb-0">
                                                                        <li>Backup manuel avant modifications importantes</li>
                                                                        <li>Vérifier régulièrement les logs automatiques</li>
                                                                        <li>Tester la restauration périodiquement</li>
                                                                        <li>Conserver des copies sur support externe</li>
                                                                        <li>Documenter vos restaurations importantes</li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="card border-danger">
                                                                <div class="card-header bg-danger text-white">
                                                                    <i class="fas fa-ban"></i> À ÉVITER
                                                                </div>
                                                                <div class="card-body">
                                                                    <ul class="mb-0">
                                                                        <li>Restaurer sans comprendre les conséquences</li>
                                                                        <li>Ignorer les messages d'erreur dans les logs</li>
                                                                        <li>Modifier des fichiers de backup manuellement</li>
                                                                        <li>Supprimer des backups automatiques</li>
                                                                        <li>Négliger la surveillance du système</li>
                                                                    </ul>
                                                                </div>
                                                            </div>                                                        </div>
                                                    </div>

                                                    <div class="alert alert-warning mt-3">
                                                        <i class="fas fa-lightbulb"></i> 
                                                        <strong>Règle d'or :</strong> "Un backup non testé est un backup qui n'existe pas !"
                                                    </div>
                                                </div>
                                            </div>                                        </div>
                                    </div>

                                    <!-- Section Technique -->
                                    <div class="faq-section" data-category="technique">
                                        <h4 class="text-danger mb-3">
                                            <i class="fas fa-cogs section-icon"></i>Questions Techniques
                                        </h4>
                                        
                                        <div class="faq-item" data-question="Comment sauvegarder les données ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment sauvegarder les données ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour sauvegarder vos données :</p>
                                                <ul>
                                                    <li>Utilisez phpMyAdmin pour exporter la base de données</li>
                                                    <li>Sauvegardez régulièrement le dossier <strong>data/</strong> (contient les logos)</li>
                                                    <li>Programmez des sauvegardes automatiques</li>
                                                    <li>Testez la restauration périodiquement</li>
                                                </ul>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Comment gérer les permissions des utilisateurs ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Comment gérer les permissions des utilisateurs ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>La gestion des permissions :</p>
                                                <ol>
                                                    <li>Allez dans <strong>"Utilisateurs"</strong> puis <strong>"Gérer les permissions"</strong></li>
                                                    <li>Sélectionnez l'utilisateur à modifier</li>
                                                    <li>Définissez les droits d'accès par module</li>
                                                    <li>Sauvegardez les modifications</li>
                                                </ol>
                                                <p><strong>Note :</strong> Seuls les administrateurs peuvent modifier les permissions.</p>
                                            </div>
                                        </div>

                                        <div class="faq-item" data-question="Que faire si l'impression ne fonctionne pas ?">
                                            <div class="faq-question">
                                                <span class="faq-question-text">Que faire si l'impression ne fonctionne pas ?</span>
                                                <i class="fas fa-chevron-down faq-icon"></i>
                                            </div>
                                            <div class="faq-answer">
                                                <p>Pour résoudre les problèmes d'impression :</p>
                                                <ul>
                                                    <li>Vérifiez que votre navigateur autorise les pop-ups</li>
                                                    <li>Assurez-vous qu'une imprimante est installée</li>
                                                    <li>Testez avec un autre navigateur</li>
                                                    <li>Vérifiez les paramètres d'impression (format A4)</li>
                                                    <li>Utilisez l'export PDF comme alternative</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Message si aucun résultat -->
                                    <div id="no-results" class="no-results" style="display: none;">
                                        <i class="fas fa-search"></i>
                                        <h5>Aucun résultat trouvé</h5>
                                        <p>Essayez avec d'autres mots-clés ou consultez toutes les catégories.</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!---Container Fluid-->
            </div>
            <!-- Footer -->
            <?php include 'includes/footer.php'; ?>
        </div>
    </div>

    <!-- Scripts -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
    <script src="js/ruang-admin.min.js"></script>

    <script>        $(document).ready(function() {
            // Store original text content on page load to prevent highlighting corruption
            $('.faq-answer p, .faq-answer li').each(function() {
                const $this = $(this);
                $this.data('original-text', $this.text());
            });

            // Toggle FAQ answers
            $('.faq-question').click(function() {
                const answer = $(this).next('.faq-answer');
                const icon = $(this).find('.faq-icon');
                
                // Close all other answers
                $('.faq-answer').not(answer).removeClass('active');
                $('.faq-icon').not(icon).removeClass('active');
                
                // Toggle current answer
                answer.toggleClass('active');
                icon.toggleClass('active');
            });            // Search functionality - Version améliorée qui évite de corrompre les icônes
            $('#searchFAQ').on('input', function() {
                const searchTerm = $(this).val().toLowerCase().trim();
                let hasResults = false;

                // Always remove highlights first to prevent corruption
                removeHighlights();

                if (searchTerm === '') {
                    // Show all items if search is empty
                    $('.faq-item').show();
                    $('.faq-section').show();
                    $('#no-results').hide();
                    return;
                }

                $('.faq-item').each(function() {
                    const $item = $(this);
                    const question = $item.data('question').toLowerCase();
                    const answerText = $item.find('.faq-answer').text().toLowerCase();
                    
                    if (question.includes(searchTerm) || answerText.includes(searchTerm)) {
                        $item.show();
                        $item.closest('.faq-section').show();
                        hasResults = true;
                        
                        // Highlight only in answer text, not in question with icons
                        highlightInAnswer($item, searchTerm);
                    } else {
                        $item.hide();
                    }
                });

                // Hide empty sections
                $('.faq-section').each(function() {
                    const visibleItems = $(this).find('.faq-item:visible').length;
                    if (visibleItems === 0) {
                        $(this).hide();
                    }
                });

                // Show/hide no results message
                $('#no-results').toggle(!hasResults);
            });

            // Category filtering
            $('.category-nav .nav-link').click(function(e) {
                e.preventDefault();
                
                // Update active state
                $('.category-nav .nav-link').removeClass('active');
                $(this).addClass('active');
                
                const category = $(this).data('category');
                
                if (category === 'all') {
                    $('.faq-section').show();
                    $('.faq-item').show();
                } else {
                    $('.faq-section').hide();
                    $('.faq-section[data-category="' + category + '"]').show();
                }
                
                $('#no-results').hide();
                
                // Clear search if category filter is applied
                $('#searchFAQ').val('');
                removeHighlights();
            });            // Highlight only in answer content to preserve icons
            function highlightInAnswer(element, searchTerm) {
                if (!searchTerm) return;
                
                // Remove existing highlights first to avoid corruption
                removeHighlights();
                
                const regex = new RegExp('(' + escapeRegex(searchTerm) + ')', 'gi');
                
                // Only highlight in the answer section, not the question
                element.find('.faq-answer p, .faq-answer li').each(function() {
                    const $this = $(this);
                    
                    // Store original text without any HTML tags to avoid corruption
                    if (!$this.data('original-text')) {
                        $this.data('original-text', $this.text());
                    }
                    
                    const originalText = $this.data('original-text');
                    const highlightedText = originalText.replace(regex, '<span class="highlight">$1</span>');
                    $this.html(highlightedText);
                });
            }

            // Remove highlights and restore original text
            function removeHighlights() {
                $('.faq-answer p, .faq-answer li').each(function() {
                    const $this = $(this);
                    const originalText = $this.data('original-text');
                    if (originalText) {
                        $this.html(originalText);
                    }
                });
            }

            // Escape regex special characters
            function escapeRegex(string) {
                return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            }
        });
    </script>
</body>
</html>
