{% extends "base.html" %}
{% block title %}Kalender - {{ page_title }}{% endblock %}

{% block head_extra %}
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/main.min.css' rel='stylesheet' />
<style>
  /* Grundlegende Styling-Verbesserungen */
  .fc-highlight {
    background: rgba(59, 130, 246, 0.2);
  }

  /* Styling für ausgewählten Bereich */

  /* Vollbreite für den Kalender */
  .card-body {
    padding: 0 !important;
    height: 100% !important;
    /* Füllt die Höhe des .card aus */
    overflow: hidden;
  }

  .fc-wrapper {
    height: 100% !important;
    /* Sorgt dafür, dass FullCalendar den verfügbaren Platz ausfüllt */
  }

  /* Toolbar-Optimierung für alle Bildschirmgrößen */
.fc-header-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  padding: 0.3rem !important;
  align-items: center !important;
}

/* Sorgt dafür, dass der Titel zwischen den Pfeilen bleibt */
.fc-toolbar-chunk:nth-child(2) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap
}

/* Größere, besser klickbare Pfeiltasten */
.fc-prev-button, .fc-next-button {
  margin: 0 5px !important;
}

/* Für Mobilansicht zusätzliche Optimierungen */
@media (max-width: 480px) {
  .fc-toolbar-title {
    font-size: 1rem !important;
  }
  
  .fc-button {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem !important;
    margin: 0 1px !important;
  }
}

  /* Mobile Optimierungen */
  @media (max-width: 768px) {
    /* Vollbild-Ansatz für mobil */
    .card {
      border: none !important;
      border-radius: 0 !important;
      margin: 0 !important;
      /* Entfernt alle Margins */
      max-width: 100vw !important;
      width: 100vw !important;
      /* Nimmt die volle Breite ein */
      height: 100vh !important;
      /* Nimmt die volle Höhe ein */
      max-height: 100vh !important;
      overflow: hidden;
    }

    /* Für besonders kleine Bildschirme */
    @media (max-width: 375px) {
      .fc-col-header-cell-cushion {
        font-size: 0.8rem;
      }

      .fc-daygrid-event {
        font-size: 10px !important;
      }
    }

    /* Größere Schrift für Datumsangaben */
    .fc .fc-daygrid-day-number {
      font-size: 1rem;
      padding: 4px;
      margin-bottom: 2px;
    }

    /* Mehr Platz in den Zellen */
    .fc .fc-daygrid-day-frame {
      min-height: 70px;
      padding-top: 25px !important;
    }

    /* Größere Termine für bessere Touch-Ziele */
    .fc-event {
      padding: 3px 5px;
      margin-bottom: 2px;
      border-radius: 4px;
      font-size: 0.85rem;
      max-width: 100% !important;
    }

    /* Mehr Platz für Event-Text */
    .fc-event-title {
      white-space: normal !important;
      overflow: visible !important;
      display: block !important;
    }

    /* Entfernt "more" Anzeige und zeigt alle Events */
    .fc-daygrid-more-link {
      display: none !important;
    }

    /* Alle Events anzeigen */
    .fc-daygrid-day-events {
      display: block !important;
      position: relative !important;
      min-height: initial !important;
    }

    /* Buttons in der Toolbar vergrößern */
    .fc .fc-button {
      padding: 0.5em 0.5em;
      font-size: 0.9rem;
      margin: 2px !important;
    }

    /* Anpassen der Kopfzeile */
    .fc .fc-toolbar-title {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      text-align: center;
      width: 100%;
    }

    /* Wochentage größer */
    .fc-col-header-cell-cushion {
      font-size: 0.95rem;
    }

    /* Bessere Darstellung multipler Events */
    .fc-daygrid-day-events {
      margin-top: 0 !important;
      position: relative !important;
      min-height: auto !important;
    }

    /* Events mit besserer Lesbarkeit */
    .fc-daygrid-event {
      white-space: normal !important;
      overflow: visible !important;
      display: block !important;
      font-size: 11px !important;
      line-height: 1.3 !important;
      margin-bottom: 2px !important;
    }

    /* Entfernen der +mehr Anzeige */
    .fc-daygrid-day-bottom {
      display: none !important;
    }

    /* Verbesserte Sichtbarkeit der Tage */
    .fc-daygrid-day-top {
      position: absolute;
      top: 2px;
      left: 2px;
      right: 0;
      text-align: left;
    }

    /* Modales Fenster Anpassungen */
    .modal-dialog {
      margin: 0.5rem auto;
      max-width: 100%;
      padding: 0 15px;
    }

    /* Kalender-Event-Text-Details */
    .fc-event-title-container {
      padding: 0 !important;
    }

    /* Größere Toolbar */
    .fc-toolbar {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .fc-toolbar-chunk {
      display: flex;
      justify-content: center;
      margin-bottom: 5px;
      width: 100%;
    }

    /* "Termin erstellen" Button vergrößern */

    /* FIX: Toolbar horizontal für alle Geräte */
@media (max-width: 768px) {
  /* Überschreibt das column-Layout der Toolbar */
  .fc-toolbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 4px !important;
  }
  
  /* Toolbar-Chunks nebeneinander */
  .fc-toolbar-chunk {
    width: auto !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
  }
  
  /* Kleinerer Monatstitel */
  .fc-toolbar-title {
    font-size: 0.9rem !important;
    margin: 0 2px !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Kleinere Buttons */
  .fc .fc-button {
    padding: 0.2em 0.4em !important;
    font-size: 0.7rem !important;
    margin: 0 1px !important;
  }
}

    #create-new-event-button {
      margin-top: 4px;
      font-size: 0.95rem;
      padding: 8px 12px;
      width: 100%;
      max-width: 200px;
    }
  }

</style>
{% endblock %}

{% block content %}
<h1 class="mb-4 display-5 fw-bold site-title">Kalender</h1>
<div class="card shadow border-0">
  <div class="card-body p-2 p-sm-3 p-md-4">
    <div id='calendar' class="fc-wrapper">
      <div class="text-center p-5 calendar-loading">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-2">Kalender wird geladen...</p>
      </div>
    </div>
    <div id="events-for-day-container" style="margin-top: 20px;">
      <!-- Hier werden die Termine für den Tag angezeigt -->
    </div>
  </div>
</div>

<!-- Event Modal -->
<div class="modal fade" id="calendarEventModal" tabindex="-1" aria-labelledby="calendarEventModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="calendarEventModalLabel">Termin hinzufügen</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="calendar-event-form">
          <input type="hidden" id="event-id">
          <input type="hidden" id="event-start-date">

          <div class="mb-3">
            <label for="event-title" class="form-label">Name*</label>
            <input type="text" class="form-control" id="event-title" required>
          </div>

          <div class="mb-3">
            <label for="event-time-input" class="form-label">Uhrzeit (optional)</label>
            <input type="time" class="form-control" id="event-time-input">
            <div class="form-text">Leer lassen für ganztägige Termine</div>
          </div>

          <div class="mb-3">
            <label for="event-description" class="form-label">Beschreibung</label>
            <textarea class="form-control" id="event-description" rows="3"></textarea>
          </div>

          <div class="mb-3">
            <label for="event-password" class="form-label">Aktionspasswort*</label>
            <input type="password" class="form-control" id="event-password" required>
          </div>

          <div id="calendar-event-status" class="alert d-none"></div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
        <button type="button" class="btn btn-danger me-auto" id="delete-event-button">Löschen</button>
        <button type="button" class="btn btn-primary" id="save-event-button">Speichern</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts_extra %}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js'></script>

{# Kalender-spezifisches Initialisierungs-Skript (v24 - Mobil optimiert mit Duplikat-Fix) #}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log("Kalender.html - DOMContentLoaded Start (v24 - Mobil optimiert mit Duplikat-Fix)");

    function initializeCalendar() {
      console.log("Attempting FullCalendar initialization...");
      const calendarEl = document.getElementById('calendar');
      const eventModalElement = document.getElementById('calendarEventModal');
      const eventForm = document.getElementById('calendar-event-form');
      const saveEventButton = document.getElementById('save-event-button');
      const deleteEventButton = document.getElementById('delete-event-button');
      const eventTitleInput = document.getElementById('event-title');
      const eventDescriptionInput = document.getElementById('event-description');
      const eventTimeInput = document.getElementById('event-time-input');
      const eventPasswordInput = document.getElementById('event-password');
      const eventIdInput = document.getElementById('event-id');
      const eventStartDateInput = document.getElementById('event-start-date');
      const calendarEventStatus = document.getElementById('calendar-event-status');
      const modalLabel = document.getElementById('calendarEventModalLabel');

      // NEU: Variable zum Speichern des Enddatums
      let selectedEndDate = null;

      // Speichern, ob Events bereits geladen wurden (gegen Duplizierung)
      let eventsLoaded = false;

      // NEU: Farbmap für Namen (Key: Name, Value: Farbcode)
      const nameColorMap = new Map();

      // NEU: Predefinierte Farbliste für unterschiedliche Namen
      const colorList = [
        '#3788d8',
        // Blau (FullCalendar Standard)
        '#ff7676',
        // Rot
        '#50b95c',
        // Grün
        '#9c27b0',
        // Lila
        '#ff9800',
        // Orange
        '#607d8b',
        // Blaugrau
        '#e91e63',
        // Pink
        '#795548',
        // Braun
        '#00bcd4',
        // Türkis
        '#4caf50',
        // Hellgrün
        '#673ab7',
        // Dunkelviolett
        '#ffc107' // Gelb
      ];
      let colorIndex = 0;

      if (!calendarEl || !eventModalElement || !eventForm || !saveEventButton ||
        !deleteEventButton || !eventTitleInput || !eventDescriptionInput ||
        !eventTimeInput || !eventPasswordInput || !eventIdInput ||
        !eventStartDateInput || !calendarEventStatus || !modalLabel) {
        console.error("Missing required DOM elements for calendar!");
        return;
      }

      const eventModal = new bootstrap.Modal(eventModalElement);

      const showCalendarStatus = (msg, isErr = false, t = 4000) => {
        if (!calendarEventStatus) return;

        if (!msg) {
          calendarEventStatus.classList.add('d-none');
          return;
        }

        calendarEventStatus.textContent = msg;
        calendarEventStatus.classList.remove('d-none', 'alert-success', 'alert-danger');
        calendarEventStatus.classList.add(isErr ? 'alert-danger' : 'alert-success');

        if (t > 0) {
          setTimeout(() => {
            calendarEventStatus.classList.add('d-none');
          }, t);
        }
      };

      if (typeof FullCalendar === 'undefined' || typeof FullCalendar.Calendar !== 'function') {
        console.error("FEHLER: FullCalendar nicht verfügbar!");
        return;
      }

      console.log("FullCalendar object available.");

      // Lokales Passwort lesen
      let localSharedPassword = document.body.dataset.actionPassword || '';
      if (!localSharedPassword) console.error("Kalender: Konnte Aktionspasswort nicht lesen!");

      // NEU: Funktion zum Zuweisen oder Abrufen einer Farbe für einen Namen
      function getColorForName(name) {
        if (!name) return colorList[0]; // Standardfarbe für leere Namen

        // Falls der Name schon eine Farbe hat, diese zurückgeben
        if (nameColorMap.has(name)) {
          return nameColorMap.get(name);
        }

        // Sonst neue Farbe zuweisen und speichern
        const newColor = colorList[colorIndex % colorList.length];
        colorIndex++;
        nameColorMap.set(name, newColor);

        console.log(`Neue Farbe für "${name}": ${newColor}`);
        return newColor;
      }

      // Funktion zur Anreicherung von Events mit Zeitinformationen
      function enrichEventWithTimeInfo(event) {
        // Wenn das Ereignis noch keine Zeit hat, aber ein Startdatum mit Zeitkomponente
        if ((!event.extendedProps || !event.extendedProps.time) &&
          event.start && typeof event.start.toISOString === 'function') {

          const isoString = event.start.toISOString();

          // Wenn die ISO-Zeit vorhanden ist (enthält 'T')
          if (isoString.includes('T')) {
            if (!event.extendedProps) {
              event.extendedProps = {};
            }

            // Zeitstring extrahieren (HH:MM)
            event.extendedProps.time = isoString.split('T')[1].substring(0, 5);
            console.log(`Zeit für Event '${event.title}' hinzugefügt: ${event.extendedProps.time}`);
          }
        }
        return event;
      }

      try {
        const calendar = new FullCalendar.Calendar(calendarEl, {
          locale: 'de',
          initialView: 'dayGridMonth',
          headerToolbar: {
  left: 'today',
  center: 'prev,title,next',
  right: 'dayGridMonth'
},
          buttonText: {
            today: 'Heute',
            month: 'Monat'
          },
          fixedWeekCount: false,
          // Zeigt nur die Wochen des aktuellen Monats
          showNonCurrentDates: true,
          // Verbirgt Tage aus den angrenzenden Monaten
          firstDay: 1,
          // 1 = Montag als erster Tag der Woche
          editable: false,
          selectable: true, // Wichtig: Deaktiviere die Standardauswahl
          selectMirror: true,
          navLinks: true,
          dayMaxEvents: 3,
          nowIndicator: true,
          handleWindowResize: true,
          selectAllow: function(selectInfo) {
        return true; // Erlaubt alle Auswahlbereiche
    },
    selectOverlap: true, // Erlaubt Überlappungen bei der Auswahl

          // Touch-Unterstützung für mobile Geräte
          longPressDelay: 100,
          // Reduziert die Zeit zum Starten einer Auswahl (in Millisekunden)
          selectLongPressDelay: 100,
          // Reduziert die Zeit für den Beginn einer Touch-Auswahl

          // NEU: Eventquelle mit Event-Nachbehandlung für Farben
          eventSources: [{
  url: '/api/calendar/events',
  method: 'GET',
  success: function(events) {
    console.log(`${events.length} Events vom Server geladen`);

    // Events nach Namen Farben zuweisen
    events.forEach(event => {
      if (event.title) {
        event.backgroundColor = getColorForName(event.title);
        event.borderColor = event.backgroundColor;
      }

      // Sicherstellen, dass extendedProps vorhanden ist
      if (!event.extendedProps) {
        event.extendedProps = {};
      }

      // Zeit als extendedProps speichern, wenn verfügbar
      if (event.start && typeof event.start === 'string' && event.start.includes('T')) {
        event.extendedProps.time = event.start.split('T')[1].substring(0, 5);
      }
    });

    return events;
  },
  failure: function() {
    console.error("Failed to load events from API");
    showCalendarStatus('Fehler beim Laden der Termine', true);
  }
}],

datesSet: function(info) {
  console.log("Datumsbereich geändert:", info.startStr, "bis", info.endStr);
  
  // Events neu laden
  calendar.refetchEvents();
},

          // NEU: Farben für Events basierend auf Namen
          eventDidMount: function(info) {
            // Event-Farbe basierend auf Name setzen
            const eventTitle = info.event.title;
            if (eventTitle) {
              const color = getColorForName(eventTitle);
              // DOM-Element direkt ein Styling verpassen
              info.el.style.backgroundColor = color;
              info.el.style.borderColor = color;
            }

            // Tooltip für Termin
            if (info.event.extendedProps && info.event.extendedProps.description) {
              const tooltip = new bootstrap.Tooltip(info.el, {
                title: info.event.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
              });
            }
          },

          eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
          },
          eventDisplay: 'block',

          // --- ENTFERNTER select Callback ---
          select: function(info) {
  console.log('Ausgewählter Zeitraum:', info.startStr, 'bis', info.endStr);
  
  // Speichere das ursprüngliche Enddatum von FullCalendar
  selectedEndDate = info.endStr;
  console.log('Selected End Date:', selectedEndDate);
  
  // Modal für neuen Termin öffnen
  eventForm.reset();
  eventIdInput.value = '';
  eventStartDateInput.value = info.startStr.split('T')[0];
  
  // Modal-Titel mit Datumsbereich
  const startDate = new Date(info.startStr);
  const endDate = new Date(info.end);
  endDate.setDate(endDate.getDate() - 1); // Nur für die Anzeige
  
  const dateFormat = { day: '2-digit', month: '2-digit', year: 'numeric' };
  
  const startStrDe = startDate.toLocaleDateString('de-DE', dateFormat);
  const endStrDe = endDate.toLocaleDateString('de-DE', dateFormat);
  
  if (startStrDe === endStrDe) {
    modalLabel.textContent = 'Neuer Termin am ' + startStrDe;
  } else {
    modalLabel.textContent = `Neuer Termin vom ${startStrDe} bis ${endStrDe}`;
  }
  
  deleteEventButton.style.display = 'none';
  showCalendarStatus('');
  eventPasswordInput.value = '';
  eventModal.show();
},


selectConstraint: {
  start: '00:00', // Erlaubt Auswahl ab Tagesbeginn
  end: '24:00'    // bis Tagesende
},
selectMinDistance: 6, // Mindestabstand in Pixeln für Touch-Auswahl

          // --- NEUER dayClick Callback ---
          dateClick: function(info) {
  console.log('Tag geklickt:', info.dateStr);
  
  // Verhindern des Wechsels zur Tagesansicht auf Mobilgeräten
  info.dayEl.addEventListener('click', function(e) {
    e.preventDefault();
    return false;
  });

  // Modal für neuen Termin öffnen
  eventForm.reset();
  eventIdInput.value = '';
  eventStartDateInput.value = info.dateStr;
  
  // Modal-Titel mit Datum
  const clickedDate = new Date(info.dateStr);
  const dateStr = clickedDate.toLocaleDateString('de-DE', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  });
  
  modalLabel.textContent = 'Neuer Termin am ' + dateStr;
  
  // Modal vorbereiten und anzeigen
  deleteEventButton.style.display = 'none';
  showCalendarStatus('');
  eventPasswordInput.value = '';
  eventTimeInput.disabled = false;
  eventTimeInput.value = '';
  eventModal.show();
},

navLinks: false, // Deaktiviert die Navigation zu Tagesansicht
handleWindowResize: true,
contentHeight: 'auto',
initialView: 'dayGridMonth',
views: {
  dayGridMonth: {
    titleFormat: { year: 'numeric', month: 'long' }
  }
},

          // --- AKTUALISIERTER eventClick Callback ---
          eventClick: function(info) {
            console.log("Event clicked:", info.event);

            // Normaler Bearbeitungsmodus für Events
            eventForm.reset();

            try {
              console.log("Event Startdatum:", info.event.start);
              console.log("Event startStr:", info.event.startStr);
              console.log("Event extendedProps:", info.event.extendedProps);

              // Uhrzeit sorgfältig aus allen möglichen Quellen extrahieren
              let startTime = '';

              // 1. Versuche zuerst, die Zeit aus extendedProps zu holen
              if (info.event.extendedProps && info.event.extendedProps.time) {
                console.log("Zeit aus extendedProps:", info.event.extendedProps.time);
                startTime = info.event.extendedProps.time;
              }
              // 2. Versuche die Zeit aus dem Startdatum zu extrahieren, wenn es ein datetime ist
              else if (info.event.start && info.event.startStr && info.event.startStr.includes('T')) {
                // ISO-Zeitstring extrahieren (HH:MM)
                startTime = info.event.startStr.split('T')[1].substring(0, 5);
                console.log("Zeit aus startStr extrahiert:", startTime);
              }
              // 3. Letzter Versuch: wenn das Event-Objekt eine allDay-Property hat
              else if (info.event.allDay === false && info.event.start) {
                // Zeit vom JavaScript Date-Objekt extrahieren
                const hours = info.event.start.getHours().toString().padStart(2, '0');
                const minutes = info.event.start.getMinutes().toString().padStart(2, '0');
                startTime = `${hours}:${minutes}`;
                console.log("Zeit aus Date-Objekt extrahiert:", startTime);
              }

              const eventId = info.event.id;
              const title = info.event.title;
              const description = info.event.extendedProps ? (info.event.extendedProps.description || '') : '';
              const startDate = info.event.start.toISOString().split('T')[0];

              eventIdInput.value = eventId;
              eventTitleInput.value = title;
              eventDescriptionInput.value = description;
              eventStartDateInput.value = startDate;
              eventTimeInput.value = startTime;

              console.log(`Termin wird bearbeitet: ID=${eventId}, Zeit=${startTime}`);
            } catch (timeErr) {
              console.error("Fehler beim Extrahieren der Zeit:", timeErr);
              // Fallback: Setze keine Zeit

              const eventId = info.event.id;
              const title = info.event.title;
              const description = info.event.extendedProps ? (info.event.extendedProps.description || '') : '';
              const startDate = info.event.start ? info.event.start.toISOString().split('T')[0] : '';

              eventIdInput.value = eventId;
              eventTitleInput.value = title;
              eventDescriptionInput.value = description;
              eventStartDateInput.value = startDate;
              eventTimeInput.value = '';
            }

            // Zeitfeld immer aktiviert für alle Ereignistypen
            eventTimeInput.disabled = false;

            modalLabel.textContent = 'Termin bearbeiten';
            deleteEventButton.style.display = 'block';
            showCalendarStatus('');
            eventPasswordInput.value = '';
            eventModal.show();
          }
        });

        // --- Hilfsfunktion zum Öffnen des Modals ---
        function openEventModalForDate(dateStr) {
          // Neuen Termin vorbereiten
          eventForm.reset();
          eventIdInput.value = ''; // Immer ein neuer Eintrag
          eventStartDateInput.value = dateStr; // Startdatum setzen
          selectedEndDate = null; // Zurücksetzen
          

          // Modal-Titel anpassen
          const start = new Date(dateStr + 'T00:00:00Z');
          const startStrDe = start.toLocaleDateString('de-DE', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric'
          });
          modalLabel.textContent = 'Neuer Termin am ' + startStrDe;

          // Zeitfeld immer aktiviert lassen
          eventTimeInput.disabled = false;
          eventTimeInput.value = '';

          deleteEventButton.style.display = 'none';
          showCalendarStatus('');
          eventPasswordInput.value = '';
          eventModal.show();
        }

        // --- Hilfsfunktion zum Anzeigen der Termine für einen Tag ---
        function showEventsForDay(dateStr, events) {
          const container = document.getElementById('events-for-day-container');
          container.innerHTML = ''; // Leere den Container

          if (events.length === 0) {
            container.textContent = 'Keine Termine an diesem Tag.';
          } else {
            const list = document.createElement('ul');
            events.forEach(event => {
              const listItem = document.createElement('li');
              listItem.textContent = event.title + ' (' + (event.extendedProps.time || 'Ganztägig') + ') - ' + (event.extendedProps.description || '');
              list.appendChild(listItem);
            });
            container.appendChild(list);
          }

          const addButton = document.createElement('button');
          addButton.textContent = 'Neuen Termin hinzufügen';
          addButton.className = 'btn btn-primary btn-sm';
          addButton.addEventListener('click', () => {
            openEventModalForDate(dateStr);
          });
          container.appendChild(addButton);
        }

        // --- AKTUALISIERTER Save-Event-Handler ---
        saveEventButton.addEventListener('click', async () => {
          console.log(">>> SAVE Event Button clicked <<<");
          const evId = eventIdInput.value;
          const ti = eventTitleInput.value.trim();
          const de = eventDescriptionInput.value.trim();

          // Zeit richtig behandeln
          let time = eventTimeInput.value;
          console.log("Zeitfeld Wert:", time); // Debugging-Ausgabe für die Zeit

          const date = eventStartDateInput.value; // Startdatum
          const pwInput = eventPasswordInput.value;
          const pw = pwInput.trim();
          const expectedPw = localSharedPassword;

          console.log("--- Save Event JS Check ---");
          console.log("Event ID:", evId ? evId : "NEW");
          console.log("Name:", ti ? "OK" : "MISSING");
          console.log("Date:", date ? "OK" : "MISSING");
          console.log("Time:", time ? time : "NOT SET");
          console.log("Password provided:", pw ? "YES" : "NO");
          const comparisonResult = pw === expectedPw;
          console.log("JS Check - Comparison Result:", comparisonResult);

          if (!ti || !date || !pw) {
            showCalendarStatus('Name, Datum & Passwort nötig!', true);
            return;
          }

          if (!comparisonResult) {
            showCalendarStatus('Falsches Aktionspasswort! (JS Check)', true);
            return;
          }

          console.log("JS Password Check OK on Save.");

          // Daten für API vorbereiten
            const eventData = {
            title: ti,
            description: de,
            date: date,
            password: pw
            };

            // Zeit und Enddatum verarbeiten
            if (time) {
            eventData.time = time;
            eventData.start = `${date}T${time}:00`;
            } else {
            eventData.time = "";
            eventData.start = date;
            }

            // Wenn ein Enddatum ausgewählt wurde, füge es hinzu
            if (selectedEndDate) {
            eventData.end_date = selectedEndDate;
            console.log("Sending end_date:", eventData.end_date);
            }
          // Stellen Sie sicher, dass die Zeitdaten genau so in den API-Request eingebettet werden:
          console.log("Zeit beim Senden:", time); // Debugging-Ausgabe für die Zeit
          if (time) {
            // Zusätzlich als direktes Feld und in ISO-Format
            eventData.time = time;
            // Wenn wir eine Zeit haben, setzen wir auch ein ISO-Datum+Zeit
            eventData.start = `${date}T${time}:00`;
          } else {
            // Bei ganztägigen Events
            eventData.time = "";
            eventData.start = date;
          }

                  // URL und Methode je nach Modus (neu oder bearbeiten)
          let url = '/api/calendar/events';
          let method = 'POST';

          // Wenn Event-ID vorhanden ist, dann bearbeiten wir
          if (evId) {
            url = `/api/calendar/update/${evId}`;
            method = 'POST';
            // Event-ID zur Anfrage hinzufügen
            eventData.id = evId;
          }

          try {
            showCalendarStatus('Speichere...', false, 0);
            const resp = await fetch(url, {
              method: method,
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(eventData)
            });

            const res = await resp.json();
            console.log("API Response:", res);

            if (resp.ok && res.success) {
              showCalendarStatus(evId ? 'Aktualisiert!' : 'Gespeichert!', false);
              eventModal.hide();

              // Debug-Ausgabe zum Event
              console.log("Termin erfolgreich gespeichert:", res.event);

              // WICHTIG: Vor dem Neuladen der Events den Ladezustand zurücksetzen
              eventsLoaded = false;

              // Alle bestehenden Events entfernen
              calendar.getEvents().forEach(e => e.remove());

              // FIX: KEIN direktes Hinzufügen des Events zum Kalender
              // Stattdessen nur via refetchEvents() laden
              calendar.refetchEvents();

              // Nach erfolgreicher Speicherung Log der Events ausgeben
              console.log("Calendar Events after refetch:", calendar.getEvents());
            } else {
              showCalendarStatus(`Fehler: ${res.error || 'Serverfehler'}`, true);
            }
          } catch (err) {
            console.error("Save Event Error:", err);
            showCalendarStatus('Netzwerkfehler.', true);
          } finally {
            selectedEndDate = null; // Enddatum nach Senden zurücksetzen
          }
        });

        deleteEventButton.addEventListener('click', async () => {
          console.log(">>> DELETE Event Button clicked <<<");
          const evId = eventIdInput.value;
          const pw = eventPasswordInput.value.trim();
          const expectedPw = localSharedPassword;

          if (!evId) {
            showCalendarStatus('Kein Event ausgewählt.', true);
            return;
          }

          if (!pw) {
            showCalendarStatus('Passwort erforderlich!', true);
            return;
          }

          if (pw !== expectedPw) {
            showCalendarStatus('Falsches Aktionspasswort!', true);
            return;
          }

          if (!confirm('Termin wirklich löschen?')) {
            return;
          }

          try {
            showCalendarStatus('Lösche...', false, 0);

            // Logging für mehr Transparenz
            console.log(`Sende Löschanfrage für Event ID: ${evId}`);

            const resp = await fetch(`/api/calendar/delete/${evId}`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                password: pw
              })
            });

            // Ausführliche Protokollierung der Server-Antwort
            console.log(`Server-Antwort Status: ${resp.status}`);
            let responseText;
            try {
              responseText = await resp.text();
              console.log(`Server-Antwort: ${responseText}`);
            } catch (textErr) {
              console.error("Fehler beim Lesen der Antwort:", textErr);
            }

            let res;
            try {
              // Versuche die Antwort als JSON zu parsen
              res = JSON.parse(responseText);
            } catch (jsonErr) {
              console.error("Fehler beim JSON-Parsing:", jsonErr);
              showCalendarStatus(`Ungültige Serverantwort: ${responseText.substring(0, 50)}...`, true);
              return;
            }

            if (resp.ok && res.success) {
              showCalendarStatus('Gelöscht!', false);
              eventModal.hide();

              // WICHTIG: Vor dem Neuladen der Events den Ladezustand zurücksetzen
              eventsLoaded = false;

              // Alle bestehenden Events entfernen
              calendar.getEvents().forEach(e => e.remove());

              // Events neu laden
              calendar.refetchEvents();
            } else {
              showCalendarStatus(`Fehler: ${res.error || 'Serverfehler'}`, true);
            }
          } catch (err) {
            console.error("Delete Event Error:", err);
            showCalendarStatus('Netzwerkfehler beim Löschen. Prüfen Sie die Konsole für Details.', true);
          }
        });

        calendar.render();

// Pfeiltasten an die richtige Position bringen
function repositionArrowButtons() {
  // Kurz warten, bis der Kalender vollständig gerendert ist
  setTimeout(() => {
    // Toolbar und Buttons finden
    const toolbar = document.querySelector('.fc-header-toolbar');
    if (!toolbar) return;
    
    const titleEl = toolbar.querySelector('.fc-toolbar-title');
    const prevButton = toolbar.querySelector('.fc-prev-button');
    const nextButton = toolbar.querySelector('.fc-next-button');
    
    if (!titleEl || !prevButton || !nextButton) {
      console.error("Konnte Toolbar-Elemente nicht finden");
      return;
    }
    
    // Container für Titel mit Pfeilen erstellen
    const titleWrapper = document.createElement('div');
    titleWrapper.className = 'title-with-arrows';
    titleWrapper.style.display = 'flex';
    titleWrapper.style.alignItems = 'center';
    titleWrapper.style.justifyContent = 'center';
    
    // Pfeiltasten aus ihrem aktuellen Container entfernen
    prevButton.parentNode.removeChild(prevButton);
    nextButton.parentNode.removeChild(nextButton);
    
    // Titel ersetzen
    const parent = titleEl.parentNode;
    parent.removeChild(titleEl);
    parent.appendChild(titleWrapper);
    
    // Elemente in richtiger Reihenfolge einfügen
    titleWrapper.appendChild(prevButton);
    titleWrapper.appendChild(titleEl);
    titleWrapper.appendChild(nextButton);
    
    // Styling für bessere Abstände
    prevButton.style.marginRight = '8px';
    nextButton.style.marginLeft = '8px';
    titleEl.style.margin = '0';
    
    console.log("Pfeiltasten wurden neu positioniert");
  }, 100);
}

// Funktion aufrufen
repositionArrowButtons();

// Auch nach Datumsänderungen die Buttons neu positionieren
calendar.on('datesSet', function() {
  repositionArrowButtons();
});

        console.log("FullCalendar initialized and rendered (v24 - Mobil optimiert mit Duplikat-Fix).");
      } catch (e) {
        console.error("!!! Error initializing FullCalendar:", e);
        if (calendarEl) {
          calendarEl.innerHTML = `
                    <div class="alert alert-danger m-3">
                        <h4 class="alert-heading">Fehler beim Laden des Kalenders</h4>
                        <p>Der Kalender konnte nicht initialisiert werden. Bitte aktualisieren Sie die Seite oder versuchen Sie es später erneut.</p>
                        <hr>
                        <p class="mb-0">Technische Details: ${e.message}</p>
                    </div>
                `;


                
        // Fix für die mobile Toolbar
setTimeout(() => {
  const toolbar = document.querySelector('.fc-header-toolbar');
  if (toolbar) {
    // Explizit Row-Layout erzwingen
    toolbar.style.display = 'flex';
    toolbar.style.flexDirection = 'row';
    toolbar.style.flexWrap = 'nowrap';
    
    // Alle Toolbar-Chunks auf einer Linie
    const chunks = toolbar.querySelectorAll('.fc-toolbar-chunk');
    chunks.forEach(chunk => {
      chunk.style.width = 'auto';
      chunk.style.marginBottom = '0';
    });
  }
}, 100);
        }
      }
    } // Ende initializeCalendar

initializeCalendar();

}); // Ende DOMContentLoaded
</script>
{% endblock %}