@extends('layout.app')

@push('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/ui/jquery-ui.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/css/plugins/ui/jqueryui.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/calendars/fullcalendar.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/calendars/daygrid.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/vendors/css/calendars/timegrid.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('modern-admin/app-assets/css/plugins/calendars/fullcalendar.min.css') }}">
    <style>
        /* Deux couleurs principales */
        .reservation-event {
            background-color: #2c343b !important;
            border-color: #2c343b !important;
        }
        .voyage-event {
            background-color: #3a44e1 !important;
            border-color: #3a44e1 !important;
        }
        
        /* Styles pour le statut avec icônes */
        .status-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-a-valider { background-color: #FFE66D; color: #333; }
        .status-valide { background-color: #28a745; color: white; }
        .status-rejete { background-color: #dc3545; color: white; }
        .status-en-attente { background-color: #17a2b8; color: white; }
        .status-en-cours { background-color: #007bff; color: white; }
        .status-termine { background-color: #6c757d; color: white; }
        .status-echoue { background-color: #343a40; color: white; }
        
        /* Modal latéral */
        .side-modal {
            position: fixed;
            top: 0;
            right: -500px;
            width: 480px;
            height: 100%;
            background: white;
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
            transition: right 0.3s ease-in-out;
            z-index: 1050;
            display: flex;
            flex-direction: column;
        }
        .side-modal.show {
            right: 0;
        }
        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        .modal-footer {
            padding: 20px;
            border-top: 1px solid #dee2e6;
        }
        .modal-backdrop-custom {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1040;
            display: none;
        }
        .modal-backdrop-custom.show {
            display: block;
        }
        .close-modal {
            font-size: 24px;
            cursor: pointer;
            border: none;
            background: none;
        }
        
        /* Tabs */
        .nav-tabs {
            border-bottom: 2px solid #dee2e6;
        }
        .nav-tabs .nav-link {
            border: none;
            color: #495057;
            font-weight: 500;
            padding: 10px 20px;
        }
        .nav-tabs .nav-link.active {
            color: #007bff;
            border-bottom: 2px solid #007bff;
            background: transparent;
        }
        .tab-pane {
            padding: 20px 0;
        }
        
        /* Commentaires */
        .comment-list {
            max-height: 400px;
            overflow-y: auto;
        }
        .comment-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: start;
            gap: 10px;
        }
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .comment-content {
            flex: 1;
        }
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        .comment-author {
            font-weight: bold;
        }
        .comment-date {
            font-size: 12px;
            color: #999;
        }
        .comment-text {
            color: #666;
        }
        .comment-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-top: 10px;
        }
        
        /* Modal de drag & drop (une seule date) */
        .datetime-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.3);
            z-index: 1060;
            width: 400px;
        }
        .datetime-modal.show {
            display: block;
        }
        .datetime-modal .form-group {
            margin-bottom: 20px;
        }
        .datetime-modal label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        .datetime-modal input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        /* Modal de confirmation avec note */
        .note-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 30px rgba(0,0,0,0.3);
            z-index: 1070;
            width: 450px;
        }
        .note-modal.show {
            display: block;
        }
        .note-modal textarea {
            width: 100%;
            height: 120px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 15px 0;
            resize: vertical;
        }
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1065;
        }
        .modal-overlay.show {
            display: block;
        }
    </style>
@endpush

@section('data_col', '2-columns')
@section('body_class', '2-columns menu-collapsed')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
                <h3 class="content-header-title mb-0 d-inline-block">{{ __('Reservations & Voyages')}}</h3>
                <div class="row breadcrumbs-top d-inline-block"></div>
            </div>
            <div class="content-header-right col-md-6 col-12">
                <div class="btn-group float-md-right">
                    <button type="button" class="btn btn-dark btn-sm ml-1" data-toggle="collapse" data-target="#filtersCollapse" aria-expanded="false" aria-controls="filtersCollapse">
                        <i class="la la-filter"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="content-body pb-5">
            <section>
                <div class="collapse" id="filtersCollapse">
                    <div class="card">
                        <div class="card-content collapse show">
                            <div class="card-body card-dashboard">
                                <div class="row">
                                    <div class="col-md-6">
                                        <fieldset class="text-center mt-2">
                                            <label for="radio-i1">{{ __('All')}}</label>
                                            <input type="radio" name="type" id="radio-i1" class="jui-ni-radio-buttons" value="0" checked>
                                            <label for="radio-i2">{{ __("Réservations")}}</label>
                                            <input type="radio" name="type" id="radio-i2" class="jui-ni-radio-buttons" value="1">
                                            <label for="radio-i3">{{ __("Voyages")}}</label>
                                            <input type="radio" name="type" id="radio-i3" class="jui-ni-radio-buttons" value="2">
                                        </fieldset>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="priority">{{ __('Priority') }}</label>
                                            <select class="form-control" name="priority" id="priority">
                                                <option value="">{{ __('All') }}</option>
                                                @foreach (['low', 'medium', 'high', 'urgent'] as $item)
                                                    <option value="{{$item}}">{{ __($item) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-content collapse show">
                                <div class="card-body">
                                    <div id='fc-bg-events'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
@endsection

@section('modals')
    <!-- Modal latéral -->
    <div class="modal-backdrop-custom" id="modalBackdrop"></div>
    <div class="side-modal" id="eventSideModal">
        <div class="modal-header">
            <h3 id="modalTitle">Détails de l'événement</h3>
            <button class="close-modal" onclick="closeSideModal()">&times;</button>
        </div>
        <div class="modal-body">
            <!-- Tabs -->
            <ul class="nav nav-tabs" id="eventTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="info-tab" data-toggle="tab" href="#info" role="tab">
                        <i class="fas fa-info-circle"></i> Informations
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="comments-tab" data-toggle="tab" href="#comments" role="tab">
                        <i class="fas fa-comments"></i> Commentaires
                    </a>
                </li>
            </ul>
            
            <!-- Contenu des tabs -->
            <div class="tab-content" id="eventTabContent">
                <!-- Tab Informations -->
                <div class="tab-pane fade show active" id="info" role="tabpanel">
                    <div id="modalInfoContent">
                        <!-- Le contenu sera injecté dynamiquement -->
                    </div>
                </div>
                
                <!-- Tab Commentaires -->
                <div class="tab-pane fade" id="comments" role="tabpanel">
                    <div id="modalCommentsContent">
                        <div class="comment-list" id="commentList">
                            <!-- Les commentaires seront chargés dynamiquement -->
                        </div>
                        <div class="comment-input-area">
                            <textarea class="comment-input" id="newComment" placeholder="Ajouter un commentaire..."></textarea>
                            <button class="btn btn-primary btn-sm mt-2" onclick="addComment()">
                                <i class="fas fa-paper-plane"></i> Envoyer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div id="modalActions">
                <!-- Les actions seront injectées dynamiquement -->
            </div>
        </div>
    </div>

    <!-- Modal pour drag & drop (une seule date) -->
    <div class="datetime-modal" id="datetimeModal">
        <h4><i class="fas fa-clock"></i> Modifier la date</h4>
        <form id="datetimeForm">
            <input type="hidden" id="eventId" name="eventId">
            
            <div class="form-group">
                <label for="eventDate"><i class="fas fa-calendar-alt"></i> Date et heure</label>
                <input type="datetime-local" id="eventDate" name="eventDate" class="form-control" required>
            </div>
            
            <div class="text-right">
                <button type="button" class="btn btn-secondary" onclick="closeDateTimeModal()">Annuler</button>
                <button type="submit" class="btn btn-primary">Confirmer</button>
            </div>
        </form>
    </div>

    <!-- Modal pour la note lors du changement de statut -->
    <div class="modal-overlay" id="noteModalOverlay"></div>
    <div class="note-modal" id="noteModal">
        <h4><i class="fas fa-sticky-note"></i> Ajouter une note</h4>
        <p>Veuillez ajouter une note pour justifier ce changement de statut :</p>
        <textarea id="statusNote" placeholder="Entrez votre note ici..."></textarea>
        <div class="text-right">
            <button type="button" class="btn btn-secondary" onclick="closeNoteModal()">Annuler</button>
            <button type="button" class="btn btn-primary" onclick="confirmStatusChange()">Confirmer</button>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('modern-admin/app-assets/js/core/libraries/jquery_ui/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/interactions.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/daygrid.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/timegrid.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/gcal.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/locales-all.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/moment.min.js') }}"></script>
    <script src="{{ asset('modern-admin/app-assets/vendors/js/extensions/moment-timezone.min.js') }}"></script>
    <script>
        // Déclarer les fonctions globalement
        window.closeSideModal = function() {
            document.getElementById('eventSideModal').classList.remove('show');
            document.getElementById('modalBackdrop').classList.remove('show');
        };

        window.closeDateTimeModal = function() {
            document.getElementById('datetimeModal').classList.remove('show');
            if (window.currentEventInfo) {
                window.currentEventInfo.revert();
                window.currentEventInfo = null;
            }
        };

        window.closeNoteModal = function() {
            document.getElementById('noteModal').classList.remove('show');
            document.getElementById('noteModalOverlay').classList.remove('show');
            document.getElementById('statusNote').value = '';
            window.pendingStatusChange = null;
        };

        $(document).ready((function() {
            $(".jui-ni-radio-buttons").checkboxradio({icon: false});
            var calendarEl = document.getElementById("fc-bg-events");
            
            // Données simulées avec une seule date
            var events = [
                // Réservations
                {
                    id: 1,
                    title: "Réservation Client A",
                    start: "2026-02-10T09:00:00",
                    type: "reservation",
                    status: "à valider",
                    client: "Client A",
                    details: "Demande de réservation pour 3 personnes"
                },
                {
                    id: 2,
                    title: "Réservation Client B",
                    start: "2026-02-15T14:00:00",
                    type: "reservation",
                    status: "validé",
                    client: "Client B",
                    details: "Réservation validée pour 2 personnes"
                },
                {
                    id: 3,
                    title: "Réservation Client C",
                    start: "2026-02-20T10:00:00",
                    type: "reservation",
                    status: "rejeté",
                    client: "Client C",
                    details: "Réservation rejetée"
                },
                // Voyages
                {
                    id: 4,
                    title: "Voyage Groupe D",
                    start: "2026-02-05T08:00:00",
                    type: "voyage",
                    status: "en attente",
                    client: "Groupe D",
                    details: "Voyage en attente de départ"
                },
                {
                    id: 5,
                    title: "Voyage Groupe E",
                    start: "2026-02-12T09:30:00",
                    type: "voyage",
                    status: "en cours",
                    client: "Groupe E",
                    details: "Voyage en cours"
                },
                {
                    id: 6,
                    title: "Voyage Groupe F",
                    start: "2026-02-18T10:00:00",
                    type: "voyage",
                    status: "terminé",
                    client: "Groupe F",
                    details: "Voyage terminé"
                },
                {
                    id: 7,
                    title: "Voyage Groupe G",
                    start: "2026-02-22T11:30:00",
                    type: "voyage",
                    status: "échoué",
                    client: "Groupe G",
                    details: "Voyage échoué"
                }
            ];

            // Commentaires simulés
            var comments = {
                1: [
                    { author: "Admin", date: "2026-02-15 10:30", text: "Client très intéressé", avatar: "A" },
                    { author: "Agent", date: "2026-02-15 11:45", text: "Documentation reçue", avatar: "AG" }
                ],
                2: [
                    { author: "Admin", date: "2026-02-16 09:00", text: "Paiement confirmé", avatar: "A" }
                ],
                4: [
                    { author: "Admin", date: "2026-02-17 14:30", text: "Préparation du voyage en cours", avatar: "A" }
                ]
            };

            // Fonction pour obtenir la classe CSS
            function getEventClass(event) {
                return event.type === 'reservation' ? 'reservation-event' : 'voyage-event';
            }

            // Fonction pour obtenir l'icône du statut
            function getStatusIcon(status) {
                const icons = {
                    'à valider': '<i class="fas fa-clock"></i>',
                    'validé': '<i class="fas fa-check-circle"></i>',
                    'rejeté': '<i class="fas fa-times-circle"></i>',
                    'en attente': '<i class="fas fa-hourglass-half"></i>',
                    'en cours': '<i class="fas fa-play-circle"></i>',
                    'terminé': '<i class="fas fa-flag-checkered"></i>',
                    'échoué': '<i class="fas fa-exclamation-triangle"></i>'
                };
                return icons[status] || '<i class="fas fa-question-circle"></i>';
            }

            // Ajouter cette nouvelle fonction
            function getStatusIconForDisplay(status) {
                const icons = {
                    'à valider': '⏳',     // Sablier
                    'validé': '✅',        // Coche verte
                    'rejeté': '❌',        // Croix rouge
                    'en attente': '⏳',    // Réveil
                    'en cours': '▶️',       // Lecture
                    'terminé': '✅',       // Drapeau à damier
                    'échoué': '⚠️'         // Attention
                };
                return icons[status] || '📅';
            }

            // Préparer les événements pour FullCalendar
            var calendarEvents = events.map(function(event) {
                var statusIcon = getStatusIconForDisplay(event.status);
    
                return {
                    id: event.id,
                    title: `${statusIcon} ${event.title}`,
                    start: event.start,
                    allDay: false,
                    className: getEventClass(event),
                    extendedProps: {
                        type: event.type,
                        status: event.status,
                        client: event.client,
                        details: event.details
                    }
                };
            });

            // Ajouter cette nouvelle fonction
            function refreshCalendar() {
                $("body").LoadingOverlay("show");
                calendar.removeAllEvents();
                setTimeout(function() {
                    calendar.addEventSource(calendarEvents);
                    $("body").LoadingOverlay("hide", true);
                }, 2000);
            }

            var calendar = new FullCalendar.Calendar(calendarEl, {
                header: {
                    left: "prev,next today refresh",
                    center: "title",
                    right: "dayGridMonth,timeGridWeek,timeGridDay"
                },
                customButtons: {
                    refresh: {
                        text: '⟳', // Symbole de rafraîchissement
                        click: function() {
                            refreshCalendar();
                        }
                    }
                },
                locale: "{{ auth()->user()->lang??'en' }}",
                buttonIcons: !1,
                navLinks: true,
                businessHours: true,
                plugins: ["dayGrid", "timeGrid", "interaction"],
                editable: true,
                events: calendarEvents,
                eventRender: function(info) {
                    var props = info.event.extendedProps;
                    var startDate = moment(info.event.start).format('DD/MM/YYYY HH:mm');
                    
                    // Construire le contenu du tooltip avec les vraies données
                    var tooltipContent = `${info.event.title}\n`;
                    tooltipContent += `Type: ${props.type === 'reservation' ? 'Réservation' : 'Voyage'}\n`;
                    tooltipContent += `Statut: ${props.status}\n`;
                    tooltipContent += `Client: ${props.client}\n`;
                    tooltipContent += `Date: ${startDate}`;
                    
                    // Ajouter les détails si présents
                    if (props.details) {
                        tooltipContent += `\nDétails: ${props.details}`;
                    }
                    
                    // Appliquer le tooltip
                    info.el.setAttribute('data-toggle', "tooltip");
                    info.el.setAttribute('data-placement', "top");
                    info.el.setAttribute('title', tooltipContent);

                    $(info.el).tooltip({
                        html: false, // Mettre à true si vous voulez utiliser du HTML
                        placement: 'top',
                        trigger: 'hover'
                    });
                },
                eventClick: function(info) {
                    showEventDetails(info.event);
                },
                eventDrop: function(info) {
                    showDateTimeModal(info.event, info);
                }
            });
            
            calendar.render();

            // Afficher les détails dans le modal latéral
            window.showEventDetails = function(event) {
                var props = event.extendedProps;
                
                // Informations
                var infoHtml = `
                    <div class="event-info">
                        <div class="mb-3">
                            <span class="status-badge status-${props.status.replace(' ', '-')}">
                                ${getStatusIcon(props.status)} ${props.status}
                            </span>
                        </div>
                        
                        <table class="table table-borderless">
                            <tr>
                                <td><i class="fas fa-tag"></i> <strong>ID:</strong></td>
                                <td>${event.id}</td>
                            </tr>
                            <tr>
                                <td><i class="fas fa-heading"></i> <strong>Titre:</strong></td>
                                <td>${event.title}</td>
                            </tr>
                            <tr>
                                <td><i class="fas fa-calendar-alt"></i> <strong>Type:</strong></td>
                                <td>${props.type}</td>
                            </tr>
                            <tr>
                                <td><i class="fas fa-user"></i> <strong>Client:</strong></td>
                                <td>${props.client}</td>
                            </tr>
                            <tr>
                                <td><i class="fas fa-info-circle"></i> <strong>Détails:</strong></td>
                                <td>${props.details}</td>
                            </tr>
                            <tr>
                                <td><i class="fas fa-calendar-day"></i> <strong>Date:</strong></td>
                                <td>${moment(event.start).format('DD/MM/YYYY HH:mm')}</td>
                            </tr>
                        </table>
                    </div>
                `;
                
                // Actions
                var actionsHtml = '';
                if (props.type === 'reservation') {
                    actionsHtml = `
                        <button class="btn btn-warning btn-sm" onclick="openNoteModal(${event.id}, 'à valider')">
                            <i class="fas fa-clock"></i> À valider
                        </button>
                        <button class="btn btn-success btn-sm" onclick="openNoteModal(${event.id}, 'validé')">
                            <i class="fas fa-check-circle"></i> Validé
                        </button>
                        <button class="btn btn-danger btn-sm" onclick="openNoteModal(${event.id}, 'rejeté')">
                            <i class="fas fa-times-circle"></i> Rejeté
                        </button>
                        ${props.status === 'validé' ? `
                            <button class="btn btn-primary btn-sm" onclick="planifierVoyage(${event.id})">
                                <i class="fas fa-ship"></i> Planifier voyage
                            </button>
                        ` : ''}
                    `;
                } else {
                    actionsHtml = `
                        <button class="btn btn-info btn-sm" onclick="openNoteModal(${event.id}, 'en attente')">
                            <i class="fas fa-hourglass-half"></i> En attente
                        </button>
                        <button class="btn btn-primary btn-sm" onclick="openNoteModal(${event.id}, 'en cours')">
                            <i class="fas fa-play-circle"></i> En cours
                        </button>
                        <button class="btn btn-secondary btn-sm" onclick="openNoteModal(${event.id}, 'terminé')">
                            <i class="fas fa-flag-checkered"></i> Terminé
                        </button>
                        <button class="btn btn-dark btn-sm" onclick="openNoteModal(${event.id}, 'échoué')">
                            <i class="fas fa-exclamation-triangle"></i> Échoué
                        </button>
                    `;
                }
                
                // Commentaires
                loadComments(event.id);
                
                // Mettre à jour le modal
                document.getElementById('modalInfoContent').innerHTML = infoHtml;
                document.getElementById('modalActions').innerHTML = actionsHtml;
                document.getElementById('modalTitle').innerHTML = props.type === 'reservation' ? 
                    '<i class="fas fa-calendar-check"></i> Détails de la réservation' : 
                    '<i class="fas fa-suitcase"></i> Détails du voyage';
                
                // Afficher le modal
                document.getElementById('eventSideModal').classList.add('show');
                document.getElementById('modalBackdrop').classList.add('show');
            };

            // Charger les commentaires
            window.loadComments = function(eventId) {
                var commentList = document.getElementById('commentList');
                var eventComments = comments[eventId] || [];
                
                if (eventComments.length === 0) {
                    commentList.innerHTML = '<p class="text-muted text-center">Aucun commentaire</p>';
                } else {
                    commentList.innerHTML = eventComments.map(comment => `
                        <div class="comment-item">
                            <div class="comment-avatar">${comment.avatar}</div>
                            <div class="comment-content">
                                <div class="comment-header">
                                    <span class="comment-author">${comment.author}</span>
                                    <span class="comment-date">${comment.date}</span>
                                </div>
                                <div class="comment-text">${comment.text}</div>
                            </div>
                        </div>
                    `).join('');
                }
                
                // Stocker l'ID de l'événement pour l'ajout de commentaire
                document.getElementById('newComment').dataset.eventId = eventId;
            };

            // Ajouter un commentaire
            window.addComment = function() {
                var input = document.getElementById('newComment');
                var eventId = input.dataset.eventId;
                var text = input.value.trim();
                
                if (text) {
                    if (!comments[eventId]) {
                        comments[eventId] = [];
                    }
                    
                    var newComment = {
                        author: "Utilisateur",
                        date: moment().format('YYYY-MM-DD HH:mm'),
                        text: text,
                        avatar: "U"
                    };
                    
                    comments[eventId].push(newComment);
                    loadComments(eventId);
                    input.value = '';
                }
            };

            // Afficher le modal de modification de la date
            window.showDateTimeModal = function(event, info) {
                document.getElementById('eventId').value = event.id;
                document.getElementById('eventDate').value = moment(event.start).format('YYYY-MM-DDTHH:mm');
                
                document.getElementById('datetimeModal').classList.add('show');
                
                // Stocker l'objet info pour le revert si nécessaire
                window.currentEventInfo = info;
            };

            // Ouvrir le modal de note pour changement de statut
            window.openNoteModal = function(eventId, newStatus) {
                window.pendingStatusChange = {
                    eventId: eventId,
                    newStatus: newStatus
                };
                document.getElementById('noteModal').classList.add('show');
                document.getElementById('noteModalOverlay').classList.add('show');
            };

            // Confirmer le changement de statut avec la note
            window.confirmStatusChange = function() {
                var note = document.getElementById('statusNote').value.trim();
                
                if (!note) {
                    alert('Veuillez ajouter une note avant de confirmer le changement de statut.');
                    return;
                }
                
                if (window.pendingStatusChange) {
                    var eventId = window.pendingStatusChange.eventId;
                    var newStatus = window.pendingStatusChange.newStatus;
                    
                    console.log(`Changement de statut de l'événement ${eventId} vers ${newStatus}`);
                    console.log(`Note: ${note}`);
                    
                    // Ajouter la note comme commentaire
                    if (!comments[eventId]) {
                        comments[eventId] = [];
                    }
                    
                    comments[eventId].push({
                        author: "Système",
                        date: moment().format('YYYY-MM-DD HH:mm'),
                        text: `Changement de statut vers "${newStatus}" : ${note}`,
                        avatar: "SYS"
                    });
                    
                    // Simuler une mise à jour
                    setTimeout(function() {
                        alert('Statut mis à jour avec succès !');
                        closeNoteModal();
                        closeSideModal();
                        calendar.refetchEvents();
                    }, 500);
                }
            };

            // Gérer la soumission du formulaire de date
            document.getElementById('datetimeForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                var eventId = document.getElementById('eventId').value;
                var newDate = document.getElementById('eventDate').value;
                
                console.log(`Mise à jour de la date de l'événement ${eventId}: ${newDate}`);
                
                // Simuler une mise à jour
                setTimeout(function() {
                    alert('Date mise à jour avec succès !');
                    closeDateTimeModal();
                    calendar.refetchEvents();
                }, 500);
            });

            // Planifier un voyage
            window.planifierVoyage = function(reservationId) {
                console.log('Planification du voyage à partir de la réservation ' + reservationId);
                setTimeout(function() {
                    alert('Réservation transformée en voyage avec succès !');
                    closeSideModal();
                    calendar.refetchEvents();
                }, 500);
            };

            // Fermer le modal en cliquant sur le backdrop
            document.getElementById('modalBackdrop').addEventListener('click', closeSideModal);
            document.getElementById('noteModalOverlay').addEventListener('click', closeNoteModal);
        }));
    </script>
@endpush