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

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('booking_index') }}">Rendez-vous</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Calendrier</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    {# Calendar portlet (styled like devis index) #}
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-calendar fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Rendez-vous</span>
                <span class="caption-helper hidden-print">Calendrier des rendez-vous</span>
            </div>
            <div class="actions hidden-print">
                <div class="btn-group">
                    <a href="{{ path('booking_new') }}" class="btn white"><i class="fa fa-plus"></i> Nouveau rendez-vous</a>
                </div>
            </div>
        </div>
        <div class="portlet-body">
            <div id="booking-calendar"></div>
        </div>
    </div>
</div>

{# Booking details modal #}
<div class="modal fade" id="booking-modal" tabindex="-1" aria-labelledby="booking-modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="booking-modal-title">Détails du booking</h4>
            </div>
                    <div class="modal-body" id="booking-modal-body" style="padding:0; max-height: 70vh; overflow:auto;"></div>
            <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="booking-modal-confirm" data-id="" data-confirmed="0"><i class="fa fa-check"></i> Confirmer</button>
                <a href="#" class="btn btn-primary" id="booking-modal-edit" target="_blank"><i class="fa fa-edit"></i> Modifier</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
    </div>

{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/main.min.css" integrity="" crossorigin="anonymous">
    <style>
        #booking-calendar { min-height: 600px; }
        /* Make calendar match theme spacing */
        .fc .fc-toolbar-title { font-size: 18px; }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js" integrity="" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/locales-all.global.min.js" integrity="" crossorigin="anonymous"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('booking-calendar');
            if (!calendarEl) return;

            var events = [
                {% for booking in bookings %}
                    {% if booking.dateTimeDebut %}
                    {
                        id: '{{ booking.id }}',
                        title: {{ (booking.titre ? booking.titre : booking.objet)|json_encode|raw }},
                        start: '{{ booking.dateTimeDebut|date('c') }}',
                        url: '{{ path('booking_show', { 'id': booking.id }) }}',
                        color: '{{ booking.estHonore ? '#26C281' : '#e7505a' }}'
                    }{{ not loop.last ? ',' : '' }}
                    {% endif %}
                {% endfor %}
            ];

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'fr',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                buttonText: {
                    today: "Aujourd'hui",
                    month: 'Mois',
                    week: 'Semaine',
                    day: 'Jour',
                    list: 'Liste'
                },
                navLinks: true,
                weekNumbers: true,
                selectable: false,
                events: events,
                eventClick: function(info) {
                    // Open details in modal via AJAX instead of navigating
                    if (info.event.id) {
                        info.jsEvent.preventDefault();
                        var id = info.event.id;
                        var modalUrl = modalUrlTemplate.replace('ID_PLACEHOLDER', id);
                        openBookingModal(modalUrl, id, info.event.title);
                    }
                },
                eventTimeFormat: { hour: '2-digit', minute: '2-digit', meridiem: false }
            });

            calendar.render();

            // Modal helpers
            var editUrlTemplate = '{{ path('booking_edit', {'id': 'ID_PLACEHOLDER'}) }}';
            var modalUrlTemplate = '{{ path('booking_show_modal', {'id': 'ID_PLACEHOLDER'}) }}';
            var toggleUrlTemplate = '{{ path('booking_toggle_confirm', {'id': 'ID_PLACEHOLDER'}) }}';
            var lastOpenedBookingId = null;
            function openBookingModal(showUrl, id, title) {
                try {
                    var heading = title ? (title + ' (#' + id + ')') : ('Booking #' + id);
                    $('#booking-modal-title').text(heading);
                } catch (e) { /* ignore */ }
                var editUrl = editUrlTemplate.replace('ID_PLACEHOLDER', id);
                document.getElementById('booking-modal-edit').setAttribute('href', editUrl);
                $('#booking-modal-body').html('<div style="padding:20px; text-align:center;"><i class="fa fa-spinner fa-spin"></i> Chargement...</div>');
                $.get(showUrl).done(function(html){
                    $('#booking-modal-body').html(html);
                    // Configure confirm button according to current status
                    var $content = $('#booking-modal-content');
                    var confirmed = ($content.data('honore') == 1);
                    lastOpenedBookingId = $content.data('booking-id');
                    var $btn = $('#booking-modal-confirm');
                    $btn.attr('data-id', lastOpenedBookingId);
                    $btn.attr('data-confirmed', confirmed ? '1' : '0');
                    if (confirmed) {
                        $btn.removeClass('btn-default').addClass('btn-warning');
                        $btn.html('<i class="fa fa-undo"></i> Déconfirmer');
                    } else {
                        $btn.removeClass('btn-warning').addClass('btn-default');
                        $btn.html('<i class="fa fa-check"></i> Confirmer');
                    }
                    $('#booking-modal').modal('show');
                }).fail(function(){
                    $('#booking-modal-body').html('<div class="alert alert-danger" style="margin:15px;">Impossible de charger les détails du booking.</div>');
                    $('#booking-modal').modal('show');
                });
            }

            // Intercept table "Afficher" buttons
            $(document).on('click', 'a.js-booking-show', function(e){
                e.preventDefault();
                var id = $(this).data('id');
                var url = modalUrlTemplate.replace('ID_PLACEHOLDER', id);
                openBookingModal(url, id, 'Booking');
            });

            // Toggle confirm/unconfirm
            $(document).on('click', '#booking-modal-confirm', function(){
                var id = $(this).attr('data-id');
                if (!id) return;
                var $btn = $(this);
                $btn.prop('disabled', true).append(' <i class="fa fa-spinner fa-spin"></i>');
                $.ajax({ url: toggleUrlTemplate.replace('ID_PLACEHOLDER', id), method: 'POST' })
                    .done(function(res){
                        var confirmed = !!(res && res.estHonore);
                        // Update label inside modal body
                        var $label = $('#booking-honore-label');
                        if ($label.length) {
                            $label.addClass('badge badge-roundless')
                                  .toggleClass('badge-success', confirmed)
                                  .toggleClass('badge-danger', !confirmed)
                                  .removeClass('label-success label-danger')
                                  .text(confirmed ? 'Confirmé' : 'Non confirmé');
                        }

                        // Update button appearance
                        $btn.attr('data-confirmed', confirmed ? '1' : '0');
                        if (confirmed) {
                            $btn.removeClass('btn-default').addClass('btn-warning').html('<i class="fa fa-undo"></i> Déconfirmer');
                        } else {
                            $btn.removeClass('btn-warning').addClass('btn-default').html('<i class="fa fa-check"></i> Confirmer');
                        }

                        // Update calendar event color if present
                        try {
                            var ev = calendar.getEventById(String(id));
                            if (ev) {
                                ev.setProp('color', confirmed ? '#26C281' : '#e7505a');
                            }
                        } catch(e){}
                    })
                    .fail(function(){
                        bootbox.alert('Impossible de mettre à jour le statut.');
                    })
                    .always(function(){
                        $btn.prop('disabled', false);
                    });
            });
        });
    </script>
{% endblock %}