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

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Espace Contribution - Assises Nationales des Daara</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800;900&amp;display=swap"
        rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&amp;display=swap"
        rel="stylesheet" />
    <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
        rel="stylesheet" />
    <script id="tailwind-config">
    tailwind.config = {
        darkMode: "class",
        theme: {
            extend: {
                colors: {
                    "primary": "#17cf17",
                    "background-light": "#f6f8f6",
                    "background-dark": "#112111",
                    "senegal-yellow": "#fdef42",
                    "senegal-red": "#e31b23",
                },
                fontFamily: {
                    "display": ["Public Sans", "sans-serif"],
                    "arabic": ["Noto Sans Arabic", "sans-serif"]
                },
                borderRadius: {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "0.75rem",
                    "full": "9999px"
                },
            },
        },
    }
    </script>
    <style type="text/tailwindcss">
        body {
            font-family: "Public Sans", sans-serif;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .arabic-text {
            font-family: 'Noto Sans Arabic', sans-serif;
        }
    </style>
</head>
<script>
const translations = {
  fr: {
    "site-title": "Assises Nationales des Daara",
    "ministry": "Ministère de l'Éducation nationale",

    "nav-home": "Accueil",
    "nav-contribution": "Contribution",

    "main-title": "Contribuez à l'avenir des Daara",
    "main-desc": "Partagez vos documents, rapports et suggestions pour enrichir la réflexion nationale.",

    "upload-text": "Cliquez pour téléverser ou glissez-déposez vos fichiers ici",
    "submit-btn": "Soumettre le Document"
  },

  ar: {
    "site-title": "الملتقيات الوطنية للمدارس القرآنية",
    "ministry": "وزارة التربية الوطنية",

    "nav-home": "الرئيسية",
    "nav-contribution": "المساهمة",

    "main-title": "ساهموا في مستقبل المدارس القرآنية",
    "main-desc": "شاركونا وثائقكم وتقاريركم واقتراحاتكم لإثراء النقاش الوطني.",

    "upload-text": "انقر للتحميل أو اسحب الملفات هنا",
    "submit-btn": "إرسال الوثيقة"
  }
};
</script>

<body
    class="bg-background-light dark:bg-background-dark text-[#0e1b0e] dark:text-white transition-colors duration-300 min-h-screen flex flex-col">
    <header
        class="sticky top-0 z-50 bg-white/95 dark:bg-background-dark/95 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  data-translate="nav-home" class="hover:text-primary transition-colors text-sm font-semibold"
                        href="/AssiseDaara">Accueil</a>
                    <a  data-translate="nav-contribution"
                    class="text-primary transition-colors text-sm font-bold border-b-2 border-primary"
                        href="/AssiseDaara/contribution">Contribution</a>
                    <a data-translate="nav-statistique"
                        class="hover:text-primary transition-colors text-sm font-semibold"
                        href="/AssiseDaara/statistique">Statistique</a>
                </nav>
                <div class="h-6 w-px bg-zinc-200 dark:bg-white/10"></div>
                <div class="flex items-center gap-2">
                    <select id="languageSelect" class="border rounded-lg px-4 py-2 text-sm font-bold">
                        <option value="fr">Français</option>
                        <option value="ar">العربية</option>
                    </select>
                </div>
            </div>
        </div>
    </header>
    <main class="flex-1 max-w-[1200px] mx-auto w-full px-4 md:px-10 py-12">
        <div class="mb-12 text-center md:text-left">
            <div class="flex items-center gap-3 mb-4 justify-center md:justify-start">
                <span class="h-1 w-12 bg-primary"></span>
                <span class="text-primary font-bold uppercase tracking-widest text-xs">Espace de Contribution</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-black text-[#0e1b0e] dark:text-white mb-6">
                Contribuez à l'avenir des Daara
            </h1>
            <p class="text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl">
                Partagez vos documents, rapports et suggestions pour enrichir la réflexion nationale. Vos contributions
                sont essentielles pour la réussite de ces Assises. (Max 50MB)
            </p>
        </div>
         <?php if (session()->getFlashdata('success')): ?>
        <p style="color:red"><?= session()->getFlashdata('success') ?></p>
    <?php endif; ?>
        <div
            class="bg-white dark:bg-zinc-900 rounded-3xl border border-[#e7f3e7] dark:border-white/5 shadow-2xl shadow-black/5 overflow-hidden">
            <div class="w-full h-1.5 flex">
                <div class="flex-1 bg-primary"></div>
                <div class="flex-1 bg-senegal-yellow"></div>
                <div class="flex-1 bg-senegal-red"></div>
            </div>
            <form action="/AssiseDaara/ajContribution" method="post" class="p-8 md:p-12">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
                    <div class="space-y-6">
                        <div>
                            <label id="nom"  data-translate="name-label"class="block text-sm font-bold mb-2 text-zinc-700 dark:text-zinc-300">Nom du
                                contributeur</label>
                            <input name="nom"
                                class="w-full bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 focus:ring-primary focus:border-primary transition-all"
                                placeholder="Prénom et Nom" type="text" />
                        </div>
                        <div>
                            <label id="telephone"  class="block text-sm font-bold mb-2 text-zinc-700 dark:text-zinc-300">Numéro de
                                téléphone</label>
                            <input name="telephone"
                                class="w-full bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 focus:ring-primary focus:border-primary transition-all"
                                placeholder="+221 7X XXX XX XX" type="tel" />
                        </div>
                        <div>
                            <label  class="block text-sm font-bold mb-2 text-zinc-700 dark:text-zinc-300">Adresse
                                e-mail</label>
                            <input name="email"
                                class="w-full bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 focus:ring-primary focus:border-primary transition-all"
                                placeholder="votre@email.com" type="email" />
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label
                                    class="block text-sm font-bold mb-2 text-zinc-700 dark:text-zinc-300">Région</label>
                               <select name="region"
                                    class="w-full bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 focus:ring-primary focus:border-primary transition-all appearance-none">
                                    <option value="">Choisir votre Région</option>
                                    <option value="1">DAKAR</option>
                                    <option value="2">DIOURBEL</option>
                                    <option value="3">FATICK</option>
                                    <option value="4">KAFFRINE</option>
                                    <option value="5">KAOLACK</option>
                                    <option value="6">KÉDOUGOU</option>
                                    <option value="7">KOLDA</option>
                                    <option value="8">LOUGA</option>
                                    <option value="9">MATAM</option>
                                    <option value="10">SAINT-LOUIS</option>
                                    <option value="11">SÉDHIOU</option>
                                    <option value="12">TAMBACOUNDA</option>
                                    <option value="13">THIÈS</option>
                                    <option value="14">ZIGUINCHOR</option>
                                </select>
                            </div>
                            <div>
                                <label
                                    class="block text-sm font-bold mb-2 text-zinc-700 dark:text-zinc-300">Département</label>
                                <select name="departement"
                                    class="w-full bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 focus:ring-primary focus:border-primary transition-all appearance-none">
                                    <option value="">Choisir votre Departement</option>
                                    <option value="Bakel" data-parent="12">Dpt Bakel</option>
                                    <option value="Bambey" data-parent="2">Dpt Bambey</option>
                                    <option value="Bignona" data-parent="14">Dpt Bignona</option>
                                    <option value="Birkilane" data-parent="4">Dpt Birkilane</option>
                                    <option value="Bounkiling" data-parent="11">Dpt Bounkiling</option>
                                    <option value="Dagana" data-parent="10">Dpt Dagana</option>
                                    <option value="Dakar" data-parent="1">Dpt Dakar</option>
                                    <option value="Diourbel" data-parent="2">Dpt Diourbel</option>
                                    <option value="Fatick" data-parent="3">Dpt Fatick</option>
                                    <option value="Foundiougne" data-parent="3">Dpt Foundiougne</option>
                                    <option value="Gossas" data-parent="3">Dpt Gossas</option>
                                    <option value="Goudiry" data-parent="12">Dpt Goudiry</option>
                                    <option value="Goudomp" data-parent="11">Dpt Goudomp</option>
                                    <option value="Guédiawaye" data-parent="1">Dpt Guédiawaye</option>
                                    <option value="Guinguinéo" data-parent="5">Dpt Guinguinéo</option>
                                    <option value="Kaffrine" data-parent="4">Dpt Kaffrine</option>
                                    <option value="Kanel" data-parent="9">Dpt Kanel</option>
                                    <option value="Kaolack" data-parent="5">Dpt Kaolack</option>
                                    <option value="Kébémer" data-parent="8">Dpt Kébémer</option>
                                    <option value="Kédougou" data-parent="6">Dpt Kédougou</option>
                                    <option value="Keur Massar" data-parent="1">Dpt Keur Massar</option>
                                    <option value="Kolda" data-parent="7">Dpt Kolda</option>
                                    <option value="Koumpentoum" data-parent="12">Dpt Koumpentoum</option>
                                    <option value="Koungheul" data-parent="4">Dpt Koungheul</option>
                                    <option value="Linguère" data-parent="8">Dpt Linguère</option>
                                    <option value="Louga" data-parent="8">Dpt Louga</option>
                                    <option value="Malem Hodar" data-parent="4">Dpt Malem Hodar</option>
                                    <option value="Matam" data-parent="9">Dpt Matam</option>
                                    <option value="Mbacké" data-parent="2">Dpt Mbacké</option>
                                    <option value="Mbour" data-parent="13">Dpt Mbour</option>
                                    <option value="Médina Yoro Foulah" data-parent="7">Dpt Médina Yoro Foulah</option>
                                    <option value="Nioro du Rip" data-parent="5">Dpt Nioro du Rip</option>
                                    <option value="Oussouye" data-parent="14">Dpt Oussouye</option>
                                    <option value="Pikine" data-parent="1">Dpt Pikine</option>
                                    <option value="Podor" data-parent="10">Dpt Podor</option>
                                    <option value="Ranérou Ferlo" data-parent="9">Dpt Ranérou Ferlo</option>
                                    <option value="Rufisque" data-parent="1">Dpt Rufisque</option>
                                    <option value="Saint-Louis" data-parent="10">Dpt Saint-Louis</option>
                                    <option value="Salémata" data-parent="6">Dpt Salémata</option>
                                    <option value="Saraya" data-parent="6">Dpt Saraya</option>
                                    <option value="Sédhiou" data-parent="11">Dpt Sédhiou</option>
                                    <option value="Tambacounda" data-parent="12">Dpt Tambacounda</option>
                                    <option value="Thiès" data-parent="13">Dpt Thiès</option>
                                    <option value="Tivaouane" data-parent="13">Dpt Tivaouane</option>
                                    <option value="Vélingara" data-parent="7">Dpt Vélingara</option>
                                    <option value="Ziguinchor" data-parent="14">Dpt Ziguinchor</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-6">
                        <div>
                            <label
                                class="block text-sm font-bold mb-2 text-zinc-700 dark:text-zinc-300">Thématique</label>
                            <select
                                class="w-full bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 focus:ring-primary focus:border-primary transition-all appearance-none" name="thematique">
                                <option value="1">Cadre juridique et réglementaire des Daara</option>
                                <option value="5">Concepts, finalités, orientations, financement et
                                    gouvernance</option>
                                <option value="2">Environnement d’apprentissage et conditions
                                    d’existence dans les Daara</option>
                                <option value="3">Programmes, enseignement apprentissage,
                                    évaluation, formation et insertion</option>
                                <option value="4">Recrutement, statut et profil des enseignants des
                                    Daara</option>
                            </select>
                        </div>
                        <div>
                            <label
                                class="block text-sm font-bold mb-2 text-zinc-700 dark:text-zinc-300">Description</label>
                            <textarea
                                class="w-full bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-3 focus:ring-primary focus:border-primary transition-all resize-none"
                                placeholder="Décrivez brièvement votre contribution..." rows="6" name="description"></textarea>
                        </div>
                    </div>
                </div>
                <div class="mb-10">
                    <label class="block text-sm font-bold mb-4 text-zinc-700 dark:text-zinc-300">
                        Documents à soumettre (PDF, Word, Images, Audio, Vidéo - Max 10MB par fichier)
                    </label>

                    <!-- Zone cliquable -->
                    <div id="upload-zone" class="border-2 border-dashed border-zinc-200 dark:border-zinc-700 rounded-2xl p-10
                        flex flex-col items-center justify-center
                        bg-zinc-50/50 dark:bg-zinc-800/30
                        hover:border-primary/50 transition-all
                        group cursor-pointer">

                        <div class="w-16 h-16 bg-white dark:bg-zinc-700 rounded-full flex items-center justify-center
                   shadow-sm mb-4 group-hover:scale-110 transition-transform">
                            <span class="material-symbols-outlined text-3xl text-primary">
                                cloud_upload
                            </span>
                        </div>

                        <p  data-translate="upload-text"class="text-zinc-600 dark:text-zinc-400 text-center">
                            <span class="font-bold text-primary">Cliquez pour téléverser</span>
                            ou glissez-déposez vos fichiers ici
                        </p>

                        <p class="text-xs text-zinc-400 mt-2">
                            Maximum 50MB au total
                        </p>

                        <!-- Input fichier caché -->
                        <input type="file" id="file-input" name="documents" class="hidden" multiple
                            accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.mp3,.mp4,.avi">
                    </div>
                </div>
                <div class="flex justify-center md:justify-end">
                    <button data-translate="documents-label"
                        class="bg-primary hover:bg-primary/90 text-white font-black px-12 py-5 rounded-2xl text-xl shadow-lg shadow-primary/20 transition-all flex items-center gap-3 w-full md:w-auto"
                        type="submit">
                        <span class="material-symbols-outlined">send</span>
                        Soumettre le Document
                    </button>
                </div>
            </form>
        </div>
    </main>
    <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>

</body>

</html>

<script>
const uploadZone = document.getElementById('upload-zone');
const fileInput = document.getElementById('file-input');

// Clic sur la zone → ouvre le sélecteur de fichiers
uploadZone.addEventListener('click', () => {
    fileInput.click();
});

// Afficher les fichiers sélectionnés (optionnel)
fileInput.addEventListener('change', () => {
    console.log(fileInput.files);
});
</script>
<script>
const languageSelect = document.getElementById("languageSelect");

function translatePage(lang) {
    document.querySelectorAll("[data-translate]").forEach(el => {
        const key = el.getAttribute("data-translate");
        if (translations[lang] && translations[lang][key]) {
            el.textContent = translations[lang][key];
        }
    });

    // RTL + Police arabe
    if (lang === "ar") {
        document.documentElement.dir = "rtl";
        document.body.classList.add("arabic-text");
    } else {
        document.documentElement.dir = "ltr";
        document.body.classList.remove("arabic-text");
    }

    // Sauvegarde
    localStorage.setItem("lang", lang);
}

// Changement langue
languageSelect.addEventListener("change", e => {
    translatePage(e.target.value);
});

// Chargement initial
const savedLang = localStorage.getItem("lang") || "fr";
languageSelect.value = savedLang;
translatePage(savedLang);
</script>
