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

{% block title %}Kalender{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
    <style>
        .fc-event-title {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .fc-event-title i {
            font-size: 1em;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col">
                <h1>Kalender</h1>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div id="calendar"></div>
            </div>
        </div>
    </div>

    <!-- Modal für Termin-Details -->
    <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventModalLabel">Termin-Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <strong>Titel:</strong> <span id="eventTitle"></span>
                    </div>
                    <div class="mb-3">
                        <strong>Typ:</strong> <span id="eventType"></span>
                    </div>
                    <div class="mb-3">
                        <strong>Start:</strong> <span id="eventStart"></span>
                    </div>
                    <div class="mb-3">
                        <strong>Ende:</strong> <span id="eventEnd"></span>
                    </div>
                    <div class="mb-3">
                        <strong>Beschreibung:</strong>
                        <p id="eventDescription"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                locale: 'de',
                events: {
                    url: '/ksbdueren/public/api/appointments',
                    failure: function(error) {
                        console.error('Error loading events:', error);
                    }
                },
                eventClick: function(info) {
                    info.jsEvent.preventDefault(); // Verhindert das Standard-Alert
                    
                    // Termin-Details im Modal anzeigen
                    document.getElementById('eventTitle').textContent = info.event.title;
                    document.getElementById('eventType').textContent = info.event.extendedProps.typeName;
                    document.getElementById('eventStart').textContent = info.event.start.toLocaleString();
                    document.getElementById('eventEnd').textContent = info.event.end.toLocaleString();
                    document.getElementById('eventDescription').textContent = info.event.extendedProps.description || 'Keine Beschreibung vorhanden';
                    
                    // Modal öffnen
                    var eventModal = document.getElementById('eventModal');
                    var modal = new bootstrap.Modal(eventModal);
                    modal.show();
                },
                eventDidMount: function(info) {
                    // Icon vor dem Titel einfügen
                    var titleEl = info.el.querySelector('.fc-event-title');
                    if (titleEl) {
                        var icon = document.createElement('i');
                        icon.className = info.event.extendedProps.icon;
                        titleEl.insertBefore(icon, titleEl.firstChild);
                    }
                }
            });
            calendar.render();
        });
    </script>
{% endblock %}