{# templates/appointment/calendar.html.twig #}

{% extends 'base.html.twig' %}

{% block title %}Calendrier des rendez-vous{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.7.0/main.min.css' rel='stylesheet' />
    <style>
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
        .appointment-detail {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f0f0f0;
        }
        .appointment-detail a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="container">
        <h1 class="my-4">Calendrier des rendez-vous</h1>
        <div class="row">
            <div class="col-md-8">
                <div id="calendar"></div>
            </div>
            <div class="col-md-4">
                <div id="appointment-details">
                    <!-- Contenu dynamiquement généré par JavaScript -->
                    <h3 id="appointment-count"></h3>
                    <div id="selected-appointments">
                        <!-- Contenu des rendez-vous sélectionnés -->
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.7.0/main.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                selectable: true,
                events: [], // Pas d'événements affichés dans le calendrier
                select: function(info) {
                    showAppointments(info.start);
                }
            });
            calendar.render();

            function showAppointments(date) {
                var formattedDate = date.toLocaleDateString('fr-FR', {
                    day: '2-digit',
                    month: 'long',
                    year: 'numeric'
                });

                var appointmentCountTitle = document.getElementById('appointment-count');
                var selectedAppointmentsContainer = document.getElementById('selected-appointments');
                selectedAppointmentsContainer.innerHTML = ''; // Nettoyer le contenu précédent

                var appointments = [
                    {% for appointment in appointments %}
                    {
                        title: '{{ appointment.properties.title }}',
                        date: '{{ appointment.date|date('Y-m-d H:i:s') }}',
                        propertyUrl: '{{ path('app_properties_show', { 'id': appointment.properties.id }) }}',
                        inPerson: {{ appointment.inPerson ? 'true' : 'false' }},
                        user: {
                            name: '{{ appointment.user.name }}',
                            url: '{{ path('app_user_show', { 'id': appointment.user.id }) }}'
                        }
                    }{% if not loop.last %},{% endif %}
                    {% endfor %}
                ];

                var matchingAppointments = appointments.filter(function(appointment) {
                    var eventDate = new Date(appointment.date);
                    return eventDate.toLocaleDateString('fr-FR', {
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric'
                    }) === formattedDate;
                });

                if (matchingAppointments.length > 0) {
                    appointmentCountTitle.textContent = matchingAppointments.length + ' rendez-vous trouvés pour le ' + formattedDate;
                } else {
                    appointmentCountTitle.textContent = 'Aucun rendez-vous trouvé pour le ' + formattedDate;
                }

                matchingAppointments.forEach(function(appointment) {
                    var appointmentDetailDiv = document.createElement('div');
                    appointmentDetailDiv.classList.add('appointment-detail');

                    var appointmentDate = document.createElement('h2');
                    appointmentDate.textContent = new Date(appointment.date).toLocaleDateString('fr-FR', {
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                    appointmentDetailDiv.appendChild(appointmentDate);

                    var appointmentType = document.createElement('p');
                    appointmentType.textContent = 'Type du rendez-vous: ' + (appointment.inPerson ? 'En personne' : 'À distance');
                    appointmentDetailDiv.appendChild(appointmentType);

                    var propertyLink = document.createElement('p');
                    propertyLink.innerHTML = 'Bien concerné: <a href="' + appointment.propertyUrl + '">' + appointment.title + '</a>';
                    appointmentDetailDiv.appendChild(propertyLink);

                    var userLink = document.createElement('p');
                    userLink.innerHTML = 'Utilisateur: <a href="' + appointment.user.url + '">' + appointment.user.name + '</a>';
                    appointmentDetailDiv.appendChild(userLink);

                    selectedAppointmentsContainer.appendChild(appointmentDetailDiv);
                });
            }
        });
    </script>
{% endblock %}