Calendrier

<?php
/**
 * Template Name: Page Calendrier
 */

get_header();
?>

<!-- Inclusion des fichiers FullCalendar -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>

<div class="content-inner">
    <h2>Calendrier des séminaires</h2>
    <div id="calendar"></div>

    <?php
    // Récupérer les événements de source api_python
    $args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
    'category_name'  => 'seminaire', // Nom slug de la catégorie
    'meta_query'     => [
        [
            'key'     => 'source',
            'value'   => 'api_python',
            'compare' => '='
        ]
    ]
];


    $query = new WP_Query($args);
    $evenements = [];

    while ($query->have_posts()) {
        $query->the_post();

        // Récupération des métadonnées
        $id = get_the_ID();
        $titre = get_the_title();
        $date_debut = get_post_meta($id, 'date_debut', true);
        $date_fin = get_post_meta($id, 'date_fin', true);
        $heure_debut = get_post_meta($id, 'heure_debut', true);
        $heure_fin = get_post_meta($id, 'heure_fin', true);
        $lieu = get_post_meta($id, 'lieu', true);
        $prenom = get_post_meta($id, 'prenomOrateur', true);
        $nom = get_post_meta($id, 'nomOrateur', true);
        $etablissement = get_post_meta($id, 'etablissement', true);
        $pays = get_post_meta($id, 'pays', true);
        $resume = get_post_meta($id, 'resume', true);
        $url = get_post_meta($id, 'url', true);
        $commentaire = get_post_meta($id, 'commentaire', true);
        $pdf = get_post_meta($id, 'pdf', true);

        // Préparer un tableau avec toutes les infos à passer en JSON à JS
        $evenements[] = [
            'id' => $id,
            'title' => $titre,
            'start' => $date_debut,
            'end' => $date_fin ?: $date_debut,
            'extendedProps' => [
                'heure_debut' => $heure_debut,
                'heure_fin' => $heure_fin,
                'lieu' => $lieu,
                'prenomOrateur' => $prenom,
                'nomOrateur' => $nom,
                'etablissement' => $etablissement,
                'pays' => $pays,
                'resume' => $resume,
                'url' => $url,
                'commentaire' => $commentaire,
                'pdf' => $pdf,
                'content' => wp_strip_all_tags(get_the_content()), // si besoin aussi
            ],
        ];
    }

    wp_reset_postdata();
    ?>

    <!-- Modal HTML -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span id="modal-close" class="modal-close">&times;</span>
            <h3 id="modal-title"></h3>
            <div id="modal-body"></div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const calendarEl = document.getElementById('calendar');
            const modal = document.getElementById('modal');
            const modalTitle = document.getElementById('modal-title');
            const modalBody = document.getElementById('modal-body');
            const modalClose = document.getElementById('modal-close');

            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'fr',
                height: 'auto',
                events: <?php echo json_encode($evenements); ?>,
                eventClick: function(info) {
                    const evt = info.event;
                    const props = evt.extendedProps;

                    modalTitle.textContent = evt.title;

                    // Construction HTML détaillée pour la modal
                    let html = `
                        <p><strong>Orateur :</strong> ${props.prenomOrateur || 'Non spécifié'} ${props.nomOrateur || 'Non spécifié'}</p>
                        <p><strong>Établissement :</strong> ${props.etablissement || 'Non spécifié'} (${props.pays || 'Pays Non spécifié'})</p>
                        <p><strong>Dates :</strong> ${evt.startStr} ${props.heure_debut ? 'à ' + props.heure_debut : ''} - ${evt.endStr ? evt.endStr : evt.startStr} ${props.heure_fin ? 'à ' + props.heure_fin : ''}</p>
                        <p><strong>Lieu :</strong> ${props.lieu || 'Non spécifié'}</p>
                        <hr>
                        <p><strong>Résumé :</strong><br>${props.resume || 'Aucun résumé disponible'}</p>
                    `;

                    if(props.url){
                        html += `<p><strong>URL :</strong> <a href="${props.url}" target="_blank" rel="noopener">${props.url}</a></p>`;
                    }
                    if(props.commentaire){
                        html += `<p><strong>Commentaire :</strong><br>${props.commentaire}</p>`;
                    }
                    if(props.pdf){
                        html += `<p><strong>PDF :</strong> <a href="${props.pdf}" target="_blank" rel="noopener">Télécharger les diapositives</a></p>`;
                        html += `<iframe src="${props.pdf}" width="100%" height="500px"></iframe>`;
                    }

                    modalBody.innerHTML = html;

                    // Afficher la modal
                    modal.style.display = 'block';
                }
            });

            calendar.render();

            modalClose.onclick = function() {
                modal.style.display = 'none';
            };

            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
            };
        });
    </script>

    <style>
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
        .fc-event {
            cursor: pointer;
        }

        /* Modal styling */
        .modal {
            display: none; /* Cachée par défaut */
            position: fixed;
            z-index: 9999;
            left: 0; top: 0;
            width: 100%; height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border-radius: 8px;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            position: relative;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }

        .modal-close {
            position: absolute;
            right: 15px;
            top: 10px;
            font-size: 28px;
            font-weight: bold;
            color: #aaa;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .modal-close:hover {
            color: #000;
        }

        hr {
            margin: 15px 0;
            border: none;
            border-top: 1px solid #ddd;
        }

        a {
            color: #0073aa;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</div>

<?php get_footer(); ?>