<?php
require_once 'config/database.php';
$stmt = $pdo->prepare("SELECT * FROM pages WHERE slug = :slug");
$stmt->execute(['slug' => 'conseil-municipal']);
$page = $stmt->fetch();
$content = $page ? $page['content'] : '';
$title = $page ? $page['title'] : 'Le conseil municipal';

// --- GESTION DU CONSEIL MUNICIPAL ---
$stmtElus = $pdo->query("SELECT * FROM council_members ORDER BY list_order ASC, id ASC");
$elus = $stmtElus->fetchAll();

$stmtCommissions = $pdo->query("SELECT * FROM commissions ORDER BY list_order ASC, id ASC");
$commissions = $stmtCommissions->fetchAll();

include 'includes/header.php';
?>

<main class="min-h-screen py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <h2 class="font-serif text-3xl md:text-4xl font-bold text-alsace-red mb-8 border-b-2 border-alsace-red pb-4">
            <?php echo htmlspecialchars($title); ?>
        </h2>
        
        <!-- Le texte éventuel venant de l'éditeur (Le mot d'intro) -->
        <?php if (!empty(strip_tags($content)) && trim(strip_tags($content)) !== 'Contenu à définir'): ?>
        <div class="bg-white rounded-xl shadow-md p-8 border border-gray-100 prose max-w-none mb-12">
            <?php echo $content; ?>
        </div>
        <?php endif; ?>

        <!-- SECTION : LE CONSEIL MUNICIPAL (CARROUSEL) -->
        <div class="mb-16">
            <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <i data-lucide="users" class="w-6 h-6 text-alsace-red mr-2"></i> L'Équipe Municipale
            </h3>
            
            <?php if (count($elus) > 0): ?>
            <div class="relative">
                <!-- Zone de défilement -->
                <div class="flex overflow-x-auto space-x-6 pb-6 pt-2 snap-x snap-mandatory scrollbar-hide" style="scrollbar-width: none; -ms-overflow-style: none;">
                    <?php foreach($elus as $elu): ?>
                    <!-- Carte Élu -->
                    <div class="flex-none w-64 bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden snap-start hover:-translate-y-1 transition duration-300 group">
                        <div class="h-64 overflow-hidden relative">
                            <img src="<?php echo htmlspecialchars($elu['photo'] ? $elu['photo'] : 'https://placehold.co/400x500/EAE0D5/7B2C2D?text=Photo'); ?>" alt="<?php echo htmlspecialchars($elu['name']); ?>" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                        </div>
                        <div class="p-5 relative -mt-16 bg-white mx-4 rounded-t-lg shadow-sm text-center">
                            <h4 class="font-bold text-lg text-gray-800 mb-1"><?php echo htmlspecialchars($elu['name']); ?></h4>
                            <span class="inline-block px-3 py-1 bg-red-50 text-alsace-red text-xs font-bold rounded-full">
                                <?php echo htmlspecialchars($elu['role']); ?>
                            </span>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                <!-- Indication visuelle de scroll sur mobile -->
                <div class="absolute right-0 top-1/2 -translate-y-1/2 bg-gradient-to-l from-gray-50 to-transparent w-16 h-full pointer-events-none md:hidden"></div>
            </div>
            <p class="text-center text-sm text-gray-400 mt-2 hidden md:block">
                <i data-lucide="mouse-pointer-click" class="w-4 h-4 inline mr-1"></i> Faites glisser pour voir tous les élus
            </p>
            <?php else: ?>
                <p class="text-gray-500 text-sm">Le conseil municipal n'est pas encore renseigné.</p>
            <?php endif; ?>
        </div>

        <!-- SECTION : COMMISSIONS & DÉLÉGATIONS -->
        <div>
            <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <i data-lucide="briefcase" class="w-6 h-6 text-alsace-red mr-2"></i> Commissions et Délégations
            </h3>
            
            <?php if (count($commissions) > 0): ?>
            <div class="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-gray-50 border-b border-gray-200">
                                <th class="px-6 py-4 text-sm font-bold text-gray-700 uppercase tracking-wider w-1/3">Commission / Délégation</th>
                                <th class="px-6 py-4 text-sm font-bold text-gray-700 uppercase tracking-wider">Membres désignés</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <?php foreach($commissions as $com): ?>
                            <tr class="hover:bg-gray-50 transition group">
                                <td class="px-6 py-4">
                                    <span class="font-bold text-gray-800 group-hover:text-alsace-red transition"><?php echo htmlspecialchars($com['name']); ?></span>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex flex-wrap gap-2">
                                        <?php 
                                        $m_list = explode(',', $com['members']);
                                        foreach($m_list as $m) {
                                            $m = trim($m);
                                            if($m) echo '<span class="inline-flex items-center bg-gray-100 rounded-full px-3 py-1 text-xs font-bold text-gray-700"><i data-lucide="user" class="w-3 h-3 mr-1"></i>' . htmlspecialchars($m) . '</span>';
                                        }
                                        ?>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
            <?php else: ?>
                <p class="text-gray-500 text-sm">Les commissions ne sont pas encore renseignées.</p>
            <?php endif; ?>
        </div>

    </div>
</main>

<style>
    /* Masquer la barre de défilement pour le carrousel tout en gardant la fonctionnalité */
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
</style>

<script>
    if(typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
</script>

<?php include 'includes/footer.php'; ?>