<!DOCTYPE html>
<html class="light" lang="fr">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Statistiques des Contributeurs Daara</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
        rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&amp;display=swap"
        rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    

    <script id="tailwind-config">
    tailwind.config = {
        darkMode: "class",
        theme: {
            extend: {
                colors: {
                    "primary": "#13ec5b",
                    "background-light": "#f6f8f6",
                    "background-dark": "#102216",
                },
                fontFamily: {
                    "display": ["Inter", "sans-serif"]
                },
                borderRadius: {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "0.75rem",
                    "full": "9999px"
                },
            },
        },
    }
    </script>
    <style>
    body {
        font-family: 'Inter', sans-serif;
    }

    .material-symbols-outlined {
        font-variation-settings: 'FILL'0, 'wght'400, 'GRAD'0, 'opsz'24;
    }
    </style>
</head>

<body
    class="bg-background-light dark:bg-background-dark font-display text-[#111813] dark:text-white transition-colors duration-300">
    <div class="flex flex-col min-h-screen">
        <header
            class="sticky top-0 z-50 bg-white/90 dark:bg-background-dark/90 backdrop-blur-md border-b border-[#e7f3e7] dark:border-white/10 px-4 md:px-40 py-3">
            <div class="max-w-[1200px] mx-auto flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="bg-primary p-1.5 rounded-lg text-white">
                        <span class="material-symbols-outlined text-2xl">mosque</span>
                    </div>
                    <div class="flex flex-col">
                        <h2 class="text-[#0e1b0e] dark:text-white text-lg font-extrabold leading-tight tracking-tight">
                            Assises Nationales des Daara</h2>
                        <span id="alternating-text"
                            class="text-xl md:text-2xl lg:text-3xl font-bold transition-opacity duration-1000"
                            style="color: #1d3d20;">
                            الجلسات الوطنية حول المدارس القرآنية
                        </span>
                        <span class="text-[10px] uppercase tracking-widest text-primary font-bold">Ministère Education
                            National</span>
                    </div>
                </div>
                <div class="hidden md:flex flex-1 justify-end items-center gap-8">
                    <nav class="flex items-center gap-8">
                        <a class="hover:text-primary transition-colors text-sm font-semibold"
                            href="<?= site_url('AssiseDaara') ?>">Accueil</a>
                        <a class="hover:text-primary transition-colors text-sm font-semibold"
                            href="<?= site_url('AssiseDaara/contribution') ?>">Contribution</a>
                        <a data-translate="nav-contribution"
                            class="text-primary transition-colors text-sm font-bold border-b-2 border-primary"
                            href="<?= site_url('AssiseDaara/statistique') ?>">Statistique</a>
                    </nav>

                </div>
            </div>
        </header>
        <main class="flex-1 flex flex-col min-w-0">
            <div class="px-6 lg:px-12 py-8 space-y-8 max-w-[1920px] mx-auto w-full">
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
                    <div>

                        <h2 class="text-3xl font-black text-[#111813] dark:text-white tracking-tight">Tableau de Bord
                        </h2>
                    </div>
                    <div class="flex items-center gap-3">
                        <div
                            class="flex bg-white dark:bg-[#1a2e1f] rounded-lg p-1 border border-[#dbe6df] dark:border-[#2a3f30] mb-4">
                            <button id="exportBtn"
                                class="lg:flex items-center gap-2 px-4 h-10 bg-[#13ec5b] hover:bg-[#11d652] text-[#111813] text-sm font-bold rounded-lg shadow-lg shadow-primary/20 transition-all"
                                disabled>
                                <span class="material-symbols-outlined text-xl">download</span>
                                <span>Exporter Rapport</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div
                        class="bg-white dark:bg-[#1a2e1f] p-6 rounded-2xl border border-[#dbe6df] dark:border-[#2a3f30] shadow-sm hover:shadow-md transition-shadow">
                        <div class="flex justify-between items-start mb-4">
                            <div class="p-3 bg-primary/10 rounded-xl">
                                <span class="material-symbols-outlined text-primary text-3xl">groups</span>
                            </div>
                            <span
                                class="text-emerald-500 text-xs font-bold bg-emerald-50 dark:bg-emerald-900/30 px-2 py-1 rounded-full"></span>
                        </div>
                        <p class="text-[#61896f] text-sm font-medium">Total Contributeurs</p>
                        <p class="text-4xl font-black text-[#111813] dark:text-white mt-1"> 
                            <?= $totalContributions ?>

                        </p>
                    </div>
                    <div
                        class="bg-white dark:bg-[#1a2e1f] p-6 rounded-2xl border border-[#dbe6df] dark:border-[#2a3f30] shadow-sm hover:shadow-md transition-shadow">
                        <div class="flex justify-between items-start mb-4">
                            <div class="p-3 bg-primary/10 rounded-xl">
                                <span class="material-symbols-outlined text-primary text-3xl">chat</span>
                            </div>
                            <span
                                class="text-emerald-500 text-xs font-bold bg-emerald-50 dark:bg-emerald-900/30 px-2 py-1 rounded-full"></span>
                        </div>
                        <p class="text-[#61896f] text-sm font-medium">Suggestions via WhatsApp</p>
                        <p class="text-4xl font-black text-[#111813] dark:text-white mt-1">
                                 <?= $totalWhatsapp ?></p>
                    </div>
                    <div
                        class="bg-white dark:bg-[#1a2e1f] p-6 rounded-2xl border border-[#dbe6df] dark:border-[#2a3f30] shadow-sm hover:shadow-md transition-shadow">
                        <div class="flex justify-between items-start mb-4">
                            <div class="p-3 bg-primary/10 rounded-xl">
                                <span class="material-symbols-outlined text-primary text-3xl">description</span>
                            </div>
                            <span
                                class="text-emerald-500 text-xs font-bold bg-emerald-50 dark:bg-emerald-900/30 px-2 py-1 rounded-full"></span>
                        </div>
                        <p class="text-[#61896f] text-sm font-medium">Suggestions via Formulaire</p>
                        <p class="text-4xl font-black text-[#111813] dark:text-white mt-1"><?= $totalFormulaire ?></p>
                            
                        </p>
                    </div>
                    <div
                        class="bg-white dark:bg-[#1a2e1f] p-6 rounded-2xl border border-[#dbe6df] dark:border-[#2a3f30] shadow-sm hover:shadow-md transition-shadow">
                        <div class="flex justify-between items-start mb-4">
                            <div class="p-3 bg-primary/10 rounded-xl">
                                <span class="material-symbols-outlined text-primary text-3xl">check_circle</span>
                            </div>
                            <span
                                class="text-emerald-500 text-xs font-bold bg-emerald-50 dark:bg-emerald-900/30 px-2 py-1 rounded-full"></span>
                        </div>
                        <p class="text-[#61896f] text-sm font-medium">Fichiers déposés</p>
                        <p class="text-4xl font-black text-[#111813] dark:text-white mt-1">
                             <?= $totalFichiers ?>

                        </p>
                    </div>
                </div>
             <div class="grid grid-cols-1 xl:grid-cols-12 gap-8">
                    <div
                        class="xl:col-span-8 bg-white dark:bg-[#1a2e1f] p-8 rounded-2xl border border-[#dbe6df] dark:border-[#2a3f30] shadow-sm">
                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
                            <div>
                                <h3 class="text-xl font-bold text-[#111813] dark:text-white">Descriptions Récentes des
                                    Contributeurs</h3>
                                <p class="text-sm text-[#61896f]">Suivi en temps réel des suggestions reçues via les
                                    différents canaux</p>
                            </div>
                            <button id="btnSuggestions"
                                class="px-4 py-2 text-xs font-bold bg-background-light dark:bg-[#233a2a] text-[#61896f] rounded-lg border border-[#dbe6df] dark:border-transparent">Tout
                                voir</button>
                        </div>
                        <div id="listeSuggestions" class="overflow-hidden max-h-40 mt-6">
                            <table class="w-full text-left">
                                <thead class="border-b border-[#dbe6df] dark:border-[#2a3f30]">
                                    <tr>
                                        <th class="pb-4 text-xs font-black text-[#61896f] uppercase tracking-wider">
                                            Contributeur</th>
                                        <th class="pb-4 text-xs font-black text-[#61896f] uppercase tracking-wider">Date
                                        </th>
                                        <th class="pb-4 text-xs font-black text-[#61896f] uppercase tracking-wider">
                                             Via</th>
                                        <th class="pb-4 text-xs font-black text-[#61896f] uppercase tracking-wider">
                                            Suggestion</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[#dbe6df] dark:divide-[#2a3f30]">
                                    <?php foreach($assises as $row): 
                                          if (isset($row['canal']) && $row['canal'] === 'whatsapp') {
                                            continue; // on saute les WhatsApp
                                        }
                                    // Initiales sécurisées
                                    $initiales = '??';
                                    if (!empty($row['nom'])) {
                                        $names = array_filter(explode(' ', trim($row['nom'])));
                                        $initiales = '';
                                        foreach ($names as $n) {
                                            $initiales .= strtoupper(mb_substr($n, 0, 1));
                                        }
                                    }

                                    // Canal = formulaire uniquement
                                    $bgColor = 'bg-blue-500/20';
                                    $textColor = 'text-blue-600';
                                    $icon = 'description';
                                    $label = 'Formulaire';
                                ?>
                                    <tr
                                        class="hover:bg-background-light/30 dark:hover:bg-[#233a2a]/30 transition-colors">
                                        <td class="py-4 pr-4">
                                            <div class="flex items-center gap-3">
                                                <div
                                                    class="size-8 rounded-full <?= $bgColor ?> flex items-center justify-center <?= $textColor ?> font-bold text-xs">
                                                    <?= $initiales ?>
                                                </div>
                                                <span class="font-bold text-sm"><?= esc($row['nom']) ?></span>
                                            </div>
                                        </td>

                                        <td class="py-4 text-sm text-[#61896f]">
                                            <?= date('d M Y', strtotime($row['created_at'])) ?>
                                        </td>

                                        <td class="py-4">
                                            <span
                                                class="flex items-center gap-1.5 text-xs font-bold <?= $textColor ?> <?= $bgColor ?> px-2 py-1 rounded-full w-fit">
                                                <span class="material-symbols-outlined text-sm"><?= $icon ?></span>
                                                <?= $label ?>
                                            </span>
                                        </td>

                                        <td class="py-4 text-sm text-[#111813] dark:text-white max-w-xs truncate">
                                            <?= esc($row['description']) ?>
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>

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


                    <div
                        class="xl:col-span-4 bg-white dark:bg-[#1a2e1f] p-8 rounded-2xl border border-[#dbe6df] dark:border-[#2a3f30] shadow-sm flex flex-col">
                        <div class="mb-6">
                            <h3 class="text-xl font-bold text-[#111813] dark:text-white mb-1">Source des Contributions
                            </h3>
                            <p class="text-sm text-[#61896f]">Comparaison WhatsApp vs Formulaire Web</p>
                        </div>
                        <div class="flex-1 flex flex-col items-center justify-center gap-10">
                            <div class="relative size-64 flex items-center justify-center">

                                <canvas id="sourceChart"></canvas>
                                <!-- Texte au centre -->

                                <div class="absolute flex flex-col items-center text-center">
                                    <span class="text-5xl font-black text-[#111813] dark:text-white">64%</span>
                                    <span
                                        class="text-xs font-bold text-[#61896f] uppercase tracking-widest mt-1">WhatsApp</span>
                                </div>
                            </div>


                            <div class="w-full grid grid-cols-1 gap-4 mt-4">
                                <div
                                    class="flex items-center justify-between p-4 rounded-xl bg-background-light dark:bg-[#233a2a] border border-[#dbe6df] dark:border-transparent">
                                    <div class="flex items-center gap-4">
                                        <div class="size-4 rounded-full bg-primary shadow-sm shadow-primary/50"></div>
                                        <span class="text-sm font-bold">Suggestions WhatsApp</span>
                                    </div>
                                    <span id="whatsappCount" class="text-base font-black"><?= $totalWhatsapp ?></span>
                                </div>
                                <div
                                    class="flex items-center justify-between p-4 rounded-xl bg-background-light dark:bg-[#233a2a] border border-[#dbe6df] dark:border-transparent">
                                    <div class="flex items-center gap-4">
                                        <div class="size-4 rounded-full bg-[#61896f]"></div>
                                        <span class="text-sm font-bold">Formulaire Web</span>
                                    </div>
                                    <span id="formulaireCount" class="text-base font-black"><?= $totalFormulaire ?></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="bg-white dark:bg-[#1a2e1f] rounded-2xl border border-[#dbe6df] dark:border-[#2a3f30] overflow-hidden shadow-sm">

                    <div
                        class="px-8 py-6 border-b border-[#dbe6df] dark:border-[#2a3f30] flex justify-between items-center">
                        <div>
                            <h3 class="text-lg font-bold text-[#111813] dark:text-white"> Suggestions et Contributions
                            </h3>
                            <p class="text-sm text-[#61896f] mt-1"> Liste complète des suggestions</p>
                        </div>
                        <button id="btnVoirSuggestions"
                            class="flex items-center gap-2 px-4 py-2 text-sm font-bold text-primary hover:bg-primary/5 rounded-lg transition-colors">
                            <span>Voir les details</span>
                            <span class="material-symbols-outlined text-sm">arrow_forward</span>
                        </button>
                    </div>

                    <div class="overflow-x-auto mt-4" id="suggestionsContainer">
                        <!-- La table sera injectée ici via AJAX -->
                    </div>

                </div>


            </div>
            <footer
                class="bg-white dark:bg-zinc-950 border-t border-[#e7f3e7] dark:border-white/10 pt-16 pb-12 px-4 md:px-40">
                <div class="max-w-[1200px] mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-12 mb-12">
                        <div class="space-y-4">
                            <div class="flex items-center gap-3">
                                <div class="bg-primary/10 p-2 rounded-lg text-primary">
                                    <span class="material-symbols-outlined">account_balance</span>
                                </div>
                                <h3 class="font-bold text-lg">Sphère Ministère de l'Éducation nationale</h3>
                            </div>
                            <p class="text-sm text-zinc-500 leading-relaxed">
                                Sphère ministérielle de Diamniadio<br />
                                Dakar, Sénégal<br />
                                Tel: (+221) 33 849 54 54
                            </p>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-4">Liens Utiles</h3>
                            <ul class="space-y-2 text-sm text-zinc-500 font-medium">
                                <li><a class="hover:text-primary transition-colors" href="#">Programme des Assises</a>
                                </li>
                                <li><a class="hover:text-primary transition-colors" href="#">Documentation technique</a>
                                </li>
                                <li><a class="hover:text-primary transition-colors" href="#">FAQ</a></li>

                            </ul>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg mb-4">Nous suivre</h3>
                            <div class="flex gap-4">
                                <!-- Facebook -->
                                <a href="https://www.facebook.com" target="_blank" rel="noopener"
                                    class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-blue-600 hover:bg-blue-600 hover:text-white transition-all">
                                    <!-- Logo SVG Facebook -->
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                        class="w-5 h-5">
                                        <path
                                            d="M22 12c0-5.522-4.477-10-10-10S2 6.478 2 12c0 5 3.657 9.128 8.438 9.879v-6.987H7.898v-2.892h2.54V9.845c0-2.507 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562v1.875h2.773l-.443 2.892h-2.33v6.987C18.343 21.128 22 17 22 12z" />
                                    </svg>
                                </a>

                                <!-- Twitter -->
                                <a href="https://www.twitter.com" target="_blank" rel="noopener"
                                    class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-sky-500 hover:bg-sky-500 hover:text-white transition-all">
                                    <!-- Logo SVG Twitter -->
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                        class="w-5 h-5">
                                        <path
                                            d="M24 4.557a9.83 9.83 0 0 1-2.828.775 4.932 4.932 0 0 0 2.165-2.724 9.864 9.864 0 0 1-3.127 1.195 4.918 4.918 0 0 0-8.384 4.482A13.944 13.944 0 0 1 1.671 3.149 4.917 4.917 0 0 0 3.195 9.72a4.903 4.903 0 0 1-2.229-.616v.062a4.918 4.918 0 0 0 3.946 4.827 4.902 4.902 0 0 1-2.224.085 4.919 4.919 0 0 0 4.593 3.417 9.867 9.867 0 0 1-6.102 2.104c-.396 0-.788-.023-1.175-.069a13.945 13.945 0 0 0 7.548 2.212c9.057 0 14.01-7.512 14.01-14.01 0-.213-.004-.425-.014-.636A10.025 10.025 0 0 0 24 4.557z" />
                                    </svg>
                                </a>

                                <!-- YouTube -->
                                <a href="https://www.youtube.com" target="_blank" rel="noopener"
                                    class="w-10 h-10 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center text-red-600 hover:bg-red-600 hover:text-white transition-all">
                                    <!-- Logo SVG YouTube -->
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
                                        class="w-5 h-5">
                                        <path
                                            d="M23.498 6.186a2.965 2.965 0 0 0-2.088-2.096C19.57 3.5 12 3.5 12 3.5s-7.57 0-9.41.59a2.965 2.965 0 0 0-2.088 2.096A30.05 30.05 0 0 0 0 12a30.05 30.05 0 0 0 .502 5.814 2.965 2.965 0 0 0 2.088 2.096c1.84.59 9.41.59 9.41.59s7.57 0 9.41-.59a2.965 2.965 0 0 0 2.088-2.096A30.05 30.05 0 0 0 24 12a30.05 30.05 0 0 0-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                                    </svg>
                                </a>
                            </div>


                        </div>
                    </div>
                    <div
                        class="border-t border-zinc-100 dark:border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                        <div class="flex items-center gap-4">
                            <div class="bg-primary/10 p-2 rounded-lg text-primary">
                                <span class="material-symbols-outlined text-sm">shield</span>
                            </div>
                            <p class="text-xs text-zinc-400 font-medium">©️ 2024 République du Sénégal - Ministère de
                                l'Éducation
                                nationale</p>
                        </div>
                        <p class="text-[10px] uppercase tracking-[0.2em] font-bold text-zinc-300">Un Peuple • Un But •
                            Une Foi
                        </p>
                    </div>
                </div>
            </footer>
        </main>
    </div>

</body>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('btnSuggestions');
    const liste = document.getElementById('listeSuggestions');

    btn.addEventListener('click', function() {
        // Retire la limite de hauteur et overflow pour tout afficher
        liste.style.maxHeight = 'none';
        liste.style.overflow = 'visible';
        btn.disabled = true; // optionnel : désactive le bouton après clic
    });
});
</script>
<script>
    $(document).ready(function() {

        $.ajax({
            url: "<?= base_url('AssiseDaara/jsonstatistique') ?>",
            type: "GET",
            dataType: "json",
            success: function(data) {

                const whatsapp = parseInt(data.whatsapp);
                const formulaire = parseInt(data.formulaire);
                const total = whatsapp + formulaire;

                const whatsappPercent = Math.round((whatsapp / total) * 100);
                const formulairePercent = 100 - whatsappPercent;

            // /* 🔹 Mise à jour des chiffres */
            $('#whatsappCount').text(whatsapp.toLocaleString());
            $('#formulaireCount').text(formulaire.toLocaleString());

            /* 🔹 Centre du donut (source dominante) */
            if (whatsapp >= formulaire) {
                $('#percentCenter').text(whatsappPercent + '%');
                $('#labelCenter').text('WhatsApp');
            } else {
                $('#percentCenter').text(formulairePercent + '%');
                $('#labelCenter').text('Formulaire');
            }

            /* 🔹 Chart.js */
            const ctx = document.getElementById('sourceChart').getContext('2d');

            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['WhatsApp', 'Formulaire Web'],
                    datasets: [{
                        data: [whatsapp, formulaire],
                        backgroundColor: ['#16a34a', '#61896f'],
                        borderWidth: 0
                    }]
                },
                options: {
                    cutout: '70%',
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const value = context.raw;
                                    const percent = ((value / total) * 100).toFixed(1);
                                    return context.label + ' : ' + value + ' (' +
                                        percent + '%)';
                                }
                            }
                        }
                    }
                }
            });

        },
        error: function(xhr) {
            console.error(xhr.responseText);
        }
    });

});
</script>

<script>
$(document).ready(function() {

    $('#btnVoirSuggestions').click(function() {

        // Désactiver le bouton pour éviter les multiples clics
        $(this).attr('disabled', true).text('Chargement...');

        $.ajax({
            url: "<?= base_url('AssiseDaara/jsoncontribution') ?>", // Controller à créer
            type: "GET",
            dataType: "json",
            success: function(data) {

                if (data.length === 0) {
                    $('#suggestionsContainer').html(
                        '<p class="p-4 text-center text-gray-500">Aucune suggestion trouvée.</p>'
                    );
                    return;
                }

                // Construction de la table
                let tableHtml = `
                    <table class="min-w-full border border-gray-200 shadow-sm rounded-lg">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="px-4 py-2 border">ID</th>
                                <th class="px-4 py-2 border">Nom complet</th>
                                <th class="px-4 py-2 border">Téléphone</th>
                                <th class="px-4 py-2 border">Thématique</th>
                                <th class="px-4 py-2 border">Email</th>
                                <th class="px-4 py-2 border">Description</th>
                                <th class="px-4 py-2 border">Region</th>
                                 <th class="px-4 py-2 border">Département</th>
                                  <th class="px-4 py-2 border">Fichier</th>
                                <th class="px-4 py-2 border">Date de création</th>
                            </tr>
                        </thead>
                        <tbody>`;

                data.forEach(row => {
                    tableHtml += `
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-2 border">${row.id_}</td>
                            <td class="px-4 py-2 border">${row.nom}</td>
                            <td class="px-4 py-2 border">${row.telephone}</td>
                            <td class="px-4 py-2 border">${row.thematique}</td>
                            <td class="px-4 py-2 border">${row.email}</td>
                            <td class="px-4 py-2 border">${row.description}</td>
                            <td class="px-4 py-2 border">${row.region}</td>
                            <td class="px-4 py-2 border">${row.departement}</td>
                            <td class="px-4 py-2 border">${row.file ? <a href="/uploads/evenements/${row.file}" class="text-blue-600 underline" target="_blank">${row.file}</a> : ''}</td>
                            <td class="px-4 py-2 border">${row.created_at}</td>
                        </tr>`;
                });

                tableHtml += </tbody></table>;

                $('#suggestionsContainer').html(tableHtml);
                // Activer le bouton Export maintenant que le tableau est chargé
                $('#exportBtn').prop('disabled', false);

                $('#btnVoirSuggestions').removeAttr('disabled').text(
                    'Voir les details');
            },
            error: function(xhr) {
                console.error(xhr.responseText);
                $('#suggestionsContainer').html(
                    '<p class="p-4 text-center text-red-500">Erreur lors du chargement des suggestions.</p>'
                );
                $('#btnVoirSuggestions').removeAttr('disabled').text(
                    'Voir les details');
            }
        });
    });


// telecharge le rapport
$(document).on('click', '#exportBtn', function() {
    const table = document.querySelector('#suggestionsContainer table');
    if(!table) return;

    let csv = [];
    const rows = table.querySelectorAll('tr');

    rows.forEach(row => {
        const cols = row.querySelectorAll('td, th');
        const rowData = Array.from(cols).map(col => {
            let text = col.innerText.replace(/"/g,'""'); // Échapper les guillemets
            return "${text}";
        });
        csv.push(rowData.join(';')); // point-virgule pour Excel FR
    });

    // ✅ Ajouter le BOM UTF-8
    const csvContent = "\uFEFF" + csv.join('\n');

    const csvFile = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const downloadLink = document.createElement('a');
    downloadLink.download = 'rapport_suggestions.csv';
    downloadLink.href = URL.createObjectURL(csvFile);
    downloadLink.style.display = 'none';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
});

});
</script>