$(document).ready(function() {
    // Initialize the FullCalendar
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today', // Navigation buttons on the left
            center: 'title', // Title in the center
        },
        events: 'fetch_events.php', // URL to fetch events
        selectable: false, // Allow dates to be selectable
        selectHelper: false, // Show a placeholder when selecting
        select: function(start, end) {
            // Clear the form inputs
            $('#eventId').val('');
            $('#eventTitle').val('');
            $('#description').val('');
            $('#startTime').val(moment(start).format("YYYY-MM-DD HH:mm:ss"));
            $('#endTime').val(moment(end).format("YYYY-MM-DD HH:mm:ss"));
            // Show the modal for adding a new event
            $('#eventModal').modal('show');
        },
        editable: false, // Allow events to be editable
        eventDrop: function(event) {
            // Update the event's new start and end times
            var start = moment(event.start).format("YYYY-MM-DD HH:mm:ss");
            var end = moment(event.end).format("YYYY-MM-DD HH:mm:ss");
            $.ajax({
                url: 'edit_event.php', // URL to update event
                data: {
                    id: event.id, // Event ID
                    title: event.title, // Event title
                    description: event.description, // Event title
                    start: start, // New start time
                    end: end // New end time
                },
                type: "POST",
                success: function(data) {
                    alert("Event updated successfully"); // Alert on success
                }
            });
        },
        eventClick: function(event) {
            // Populate the form inputs with the event data
            $('#eventId').val(event.id);
            $('#eventTitle').val(event.title);
            $('#description').val(event.description);
            $('#startTime').val(moment(event.start).format("YYYY-MM-DD HH:mm:ss"));
            $('#endTime').val(moment(event.end).format("YYYY-MM-DD HH:mm:ss"));
            // Show the modal for editing the event
            $('#eventModal').modal('show');
        }
    });

    // Initialize datetimepicker for start and end time inputs
    $('.datetimepicker').datetimepicker({
        format: 'Y-MM-DD HH:mm:ss' // Date-time format
    });

    // Handle form submission for adding/editing events
    $('#eventForm').on('submit', function(e) {
        e.preventDefault();
        var id = $('#eventId').val(); // Event ID (if editing)
        var title = $('#eventTitle').val(); // Event title
        var description = $('#description').val(); // Event description
        var start = $('#startTime').val(); // Start time
        var end = $('#endTime').val(); // End time
		var iframeCode = $('#PFlace').val()

        // Determine whether to add or edit event
        var url = id ? 'edit_event.php' : 'add_event.php';
        var data = id ? { id: id, title: title, start: start, end: end } : { title: title, start: start, end: end };

        $.ajax({
            url: url,
            data: data,
            type: "POST",
            success: function(data) {
                $('#calendar').fullCalendar('refetchEvents'); // Refresh events
                $('#eventModal').modal('hide'); // Hide the modal
                alert(id ? 'Event updated successfully' : 'Event added successfully'); // Alert on success
            }
        });
    });

    // Handle event deletion
    $('#deleteEvent').on('click', function() {
        var id = $('#eventId').val(); // Event ID
        if (id && confirm("Do you really want to delete this event?")) {
            $.ajax({
                url: 'fetch_events.php', // URL to delete event
                data: { id: id }, // Event ID to delete
                type: "POST",
                success: function(response) {  // Renommé en 'response' pour plus de clarté
    // Créer ou afficher la lightbox
    let lightbox = $('#lightbox'); // Assurez-vous d'avoir un élément avec l'id "lightbox" dans votre HTML
 
    if (lightbox.length === 0) { // Si la lightbox n'existe pas, on la crée
            lightbox = $('<div id="lightbox"></div>');
            $('body').append(lightbox);
    }
 
    // Remplir le contenu de la lightbox avec les détails de l'événement
    lightbox.html(response); // 'response' contient le HTML ou les informations de l'événement
 
    // Afficher la lightbox (utilisez CSS pour la styliser)
    lightbox.show();
 
    // Gestionnaire pour fermer la lightbox (croix, clic en dehors, etc.)
    let closeButton = $('<span class="close-lightbox">&times;</span>'); // Stylez cette classe en CSS
    lightbox.prepend(closeButton); // Ajoute la croix de fermeture
 
    closeButton.click(function() {
       lightbox.hide();
       lightbox.empty(); // Optionnel : vider le contenu de la lightbox
    });
 
    lightbox.click(function(event) {
       if (event.target === lightbox[0]) { // Fermer si on clique sur le fond (pas le contenu)
              lightbox.hide();
              lightbox.empty(); // Optionnel
       }
    });
},
error: function(xhr, status, error) {
     console.error("Erreur AJAX:", status, error);
     alert("Une erreur s'est produite lors de la récupération des détails de l'événement.");
}

            });
        }
    });
});