<div class="wrapper-admin-backend">
  <ul class="list-group mt-3">
    <li class="list-group-item mb-0 d-flex align-items-center">
      <label class="mb-0 mr-1">Shortcode: <code id="ts-calendar-shortcode">[ts_calendar id='{{ postid }}']</code></label>
      <button class="btn btn-secondary btn-sm copy-shortcode-button" type="button" title="Kopieren">
        <i class="fas fa-copy"></i>
      </button>
    </li>
    <li class="list-group-item mb-0">
      <h6 class="mb-3">Kalender-Button</h6>
      
       <div class="form-group mb-0">
        <div class="d-flex align-items-center mb-2">
          <label class="mb-0 mx-0" for="ts-calendar-button-link">Zielseite (URL)</label>
          <button class="btn btn-outline-secondary btn-sm ml-2" type="button" data-toggle="modal" data-target="#ts-calendar-url-helpmodal" title="Hilfe">
            <i class="fas fa-question-circle"></i>
          </button>
        </div>
        <div class="input-group">
          <input type="url" class="form-control" id="ts-calendar-button-link" placeholder="https://…" value="{{ target_url|e }}" />
          <div class="input-group-append">
            <button type="button" class="btn btn-outline-secondary" id="ts-calendar-clear-link" title="Eingabe löschen"><i class="fas fa-trash"></i></button>
            <button type="button" class="btn btn-outline-secondary" id="ts-calendar-open-filter" title="Training/Lektion auswählen"><i class="fas fa-filter"></i></button>
          </div>
        </div>
        <small class="form-text text-muted">Zielseite für den Kalender-Button (optional - für Kalenderseiten nicht erforderlich).</small>
      </div>
      <div class="accordion mt-3" id="calendarBtnAccordion">
        <div class="">
          <div class="" id="calendarBtnAccordionHeading">
            <button class="btn btn-link btn-block text-left collapsed accordiontitle accordiontitle-small" type="button" data-toggle="collapse" data-target="#calendarBtnMoreOptions" aria-expanded="false" aria-controls="calendarBtnMoreOptions">
              <i class="fas fa-plus ts-accordion-plus"></i>Weitere Optionen
            </button>
          </div>
          <div id="calendarBtnMoreOptions" class="collapse" aria-labelledby="calendarBtnAccordionHeading" data-parent="#calendarBtnAccordion">
            <div class="">
              <div class="form-group mb-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-button-title">Kalender-Button Beschriftung <span id="main-button-label-required-indicator" class="text-danger" style="display:none;">*</span></label>
                <input type="text" class="form-control" id="ts-calendar-button-title" placeholder="z. B. Eintrag erstellen" value="{{ button_label|e }}" />
                <small class="form-text text-muted" id="main-button-label-help">Beschriftung für den Kalender-Button.</small>
              </div>
              <div class="form-group mb-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-button-css">Kalender-Button CSS</label>
                <input type="text" class="form-control" id="ts-calendar-button-css" placeholder="z. B. display:block; margin:0 auto; width:100%;" value="{{ button_css|e }}" />
                <small class="form-text text-muted">Eigene CSS-Deklarationen für den Button, z. B. zentrieren (display:block; margin:0 auto;), links/rechts (float:left/right;), volle Breite (width:100%).</small>
              </div>
              <div class="form-group mb-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-button-classes">Kalender-Button Klassen</label>
                <input type="text" class="form-control" id="ts-calendar-button-classes" placeholder="z. B. btn-lg d-inline-block" value="{{ button_classes|e }}" />
                <small class="form-text text-muted">Zusätzliche CSS-Klassen (Bootstrap u. a.), getrennt durch Leerzeichen.</small>
              </div>

              <div class="form-group mb-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-button-parent-css">Kalender-Button Parent CSS</label>
                <input type="text" class="form-control" id="ts-calendar-button-parent-css" placeholder="z. B. text-align:center;" value="{{ button_parent_css|e }}" />
                <small class="form-text text-muted">CSS für das umschließende Element des Buttons (z. B. text-align:center zum Zentrieren).</small>
              </div>

              <hr class="my-3">
              <h6 class="mb-2">Zusatz-Button</h6>
              <div class="form-group mb-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-left-button-label">Zusatz-Button Beschriftung</label>
                <input type="text" class="form-control" id="ts-calendar-left-button-label" placeholder="z. B. Hilfe" value="{{ left_button_label|e }}" />
              </div>
              <div class="form-group mb-0">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-left-button-url">Zusatz-Button URL</label>
                <input type="text" class="form-control" id="ts-calendar-left-button-url" placeholder="http://..." value="{{ left_button_url|e }}" />
                <small class="form-text text-muted">URL für den Zusatz-Button.</small>
              </div>
              <div class="form-group mt-3 mb-0">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-left-button-css">Zusatz-Button CSS</label>
                <input type="text" class="form-control" id="ts-calendar-left-button-css" placeholder="z. B. margin-right:8px;" value="{{ left_button_css|e }}" />
              </div>
              <div class="form-group mt-3 mb-0">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-left-button-classes">Zusatz-Button Klassen</label>
                <input type="text" class="form-control" id="ts-calendar-left-button-classes" placeholder="z. B. btn-sm" value="{{ left_button_classes|e }}" />
                <small class="form-text text-muted">Zusätzliche CSS-Klassen (Bootstrap u. a.), getrennt durch Leerzeichen.</small>
              </div>
              <div class="form-group mt-3 mb-0">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-left-button-parent-css">Zusatz-Button Parent CSS</label>
                <input type="text" class="form-control" id="ts-calendar-left-button-parent-css" placeholder="z. B. float:left;" value="{{ left_button_parent_css|e }}" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>

  <style>
  /* Verhindert Überlappungen zwischen Checkbox und Label im Filter-Modal */
  #ts-calendar-filter-list .form-check { display: flex; align-items: flex-start; padding-left: 0; }
  #ts-calendar-filter-list .form-check-input { position: static; margin: 0 .5rem 0 0; margin-top: .2rem; flex: 0 0 auto; }
  #ts-calendar-filter-list .form-check-label { flex: 1 1 auto; margin: 0; line-height: 1.3; word-break: break-word; }
  @media (max-width: 576px){
    #ts-calendar-filter-list { padding-right: 12px; }
  }
  /* Responsive Höhe für die Ergebnisliste im Modal */
  #ts-calendar-filter-list { max-height: 70vh; }
  @media (max-width: 576px){
    #ts-calendar-filter-list { max-height: 60vh; }
    #ts-calendar-filter-modal .modal-dialog { margin: .5rem; }
  }
  @media (min-width: 992px){
    #ts-calendar-filter-list { max-height: 600px; }
  }
  /* Fixe Höhe für das Filter-Modal: Modal selbst bleibt konstant hoch,
     die Ergebnisliste scrollt innerhalb des Modals. */
  #ts-calendar-filter-modal .modal-content { height: 80vh; display: flex; flex-direction: column; }
  @media (max-width: 576px){
    #ts-calendar-filter-modal .modal-content { height: 90vh; }
  }
  #ts-calendar-filter-modal .modal-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  #ts-calendar-filter-modal #ts-calendar-filter-list { flex: 1 1 auto; overflow-y: auto; max-height: none; }
  </style>

  <div class="modal fade" id="ts-calendar-filter-modal" tabindex="-1" role="dialog" aria-labelledby="ts-calendar-filter-modal-label" aria-hidden="true" data-backdrop="false" data-keyboard="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="ts-calendar-filter-modal-label">Training/Lektion für Zielseite (URL) auswählen</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <div class="mb-2">
            <div class="input-group">
              <input type="text" class="form-control" id="ts-calendar-filter-search" placeholder="Suche..." />
              <div class="input-group-append">
                <button type="button" class="btn btn-outline-secondary" id="ts-calendar-clear-search" title="Suche leeren"><i class="fas fa-trash"></i></button>
              </div>
            </div>
          </div>
           <div id="ts-calendar-filter-list" class="card panel panel-default mb-0" style="overflow-y: auto; padding: 9px; margin-top: -1px;">
            <div class="text-muted">Lade Daten…</div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
          <button type="button" class="btn btn-primary" id="ts-calendar-filter-apply">Übernehmen</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="ts-calendar-url-helpmodal" tabindex="-1" role="dialog" aria-labelledby="ts-calendar-url-helpmodal-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="ts-calendar-url-helpmodal-label"><i class="fas fa-question-circle"></i> Zielseite (URL)</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <p>Mit der Zielseite wird festgelegt, wohin der Button im Kalender führt. <strong>Optional:</strong> Für Kalenderseiten (ohne Button) ist keine Zielseite erforderlich.</p>
                     <ul class="mb-2">
             <li><b>Ganzes Training</b>: Im Filter wird ein Training ausgewählt. Wichtig: In den Trainings-Optionen muss der Haken bei „Als Kalender-Training verwenden" gesetzt sein, sonst funktioniert die Verlinkung nicht.</li>
             <li><b>Nur eine Lektion</b>: Im Filter wird eine Lektion ausgewählt. Auch hier gilt: Das zugehörige Training braucht den Haken „Als Kalender-Training verwenden".</li>
             <li><b>Kalenderseiten</b>: Für die Kalenderseiten-Funktionalität (z.B. Tagebuch-Seiten) ist keine Zielseite erforderlich. Der Kalender dient nur als Datumsspeicher.</li>
           </ul>
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
        </div>
      </div>
    </div>
  </div>

    <li class="list-group-item mb-0">
      <div class="accordion" id="calendarStyleAccordion">
        <div class="">
          <div class="" id="calendarStyleHeading">
            <button class="btn btn-link btn-block text-left collapsed accordiontitle accordiontitle-small" type="button" data-toggle="collapse" data-target="#calendarStyleOptions" aria-expanded="false" aria-controls="calendarStyleOptions">
              <i class="fas fa-plus ts-accordion-plus"></i>Kalender Style
            </button>
          </div>
          <div id="calendarStyleOptions" class="collapse" aria-labelledby="calendarStyleHeading" data-parent="#calendarStyleAccordion">
            <div class="">
              <div class="form-group mb-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-widget-css">Kalender-Widget CSS</label>
                <input type="text" class="form-control" id="ts-calendar-widget-css" placeholder="z. B. background: #f8f9fa;" value="{{ calendar_widget_css|e }}" />
              </div>
              <div class="form-group mb-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-input-css">Kalender-Input CSS</label>
                <input type="text" class="form-control" id="ts-calendar-input-css" placeholder="z. B. display:none;" value="{{ calendar_input_css|e }}" />
                <small class="form-text text-muted">Eigene CSS-Regeln für das Datumsfeld (z. B. <code>display:none;</code> zum Ausblenden).</small>
              </div>
              <div class="form-group mb-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-status-dot-css">Erledigt-Punkte CSS</label>
                <input type="text" class="form-control" id="ts-calendar-status-dot-css" placeholder="z. B. background:#28a745; width:6px; height:6px;" value="{{ calendar_status_dot_css|e }}" />
                <small class="form-text text-muted">CSS für den kleinen Punkt in erledigten Tagen (Standard ist ein grüner Punkt). Beispiel: background:#28a745; border:1px solid #1e7e34;</small>
              </div>
              <div class="form-group mb-0">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-hover-bg-css">Tagesfeld-Hervorhebung CSS</label>
                <input type="text" class="form-control" id="ts-calendar-hover-bg-css" placeholder="z. B. background:#f0f8ff; border:1px solid #d0e8ff;" value="{{ calendar_hover_bg_css|e }}" />
                <small class="form-text text-muted">CSS, das angezeigt wird, wenn ein Tagesfeld hervorgehoben ist (z. B. beim Darüberfahren mit der Maus oder beim Tastaturfokus).</small>
              </div>

              <div class="form-group mb-3 mt-3">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-weekdays-css">Wochentage CSS</label>
                <input type="text" class="form-control" id="ts-calendar-weekdays-css" placeholder="z. B. background:#f8f9fa; color:#333;" value="{{ calendar_weekdays_css|e }}" />
              </div>

              <div class="form-group mb-0">
                <label class="mb-2 mx-0 mt-0" for="ts-calendar-selected-day-css">Ausgewählter Tag CSS</label>
                <input type="text" class="form-control" id="ts-calendar-selected-day-css" placeholder="z. B. background:#ffe8a1; border:1px solid #e0b94d;" value="{{ calendar_selected_day_css|e }}" />
              </div>

              
            </div>
          </div>
        </div>
      </div>
    </li>

    <li class="list-group-item mb-0">
      <h6 class="mb-3">Navigation-Buttons (in Lektionsseiten)</h6>
      
             <div class="form-group mb-3">
         <label class="mb-2 mx-0 mt-0" for="ts-calendar-lektionen-button-label">Lektionen-Button Beschriftung <span id="lektionen-label-required-indicator" class="text-danger" style="display:none;">*</span></label>
         <input type="text" class="form-control" id="ts-calendar-lektionen-button-label" placeholder="z. B. Zurück zum Kalender" value="{{ lektionen_button_label|e }}" />
         <small class="form-text text-muted" id="lektionen-label-help">Beschriftung für den Lektionen-Button (Standard: "Lektionen").</small>
       </div>

              <div class="form-group mb-3">
         <label class="mb-2 mx-0 mt-0" for="ts-calendar-lektionen-button-url">Lektionen-Button URL <span id="lektionen-url-required-indicator" class="text-danger" style="display:none;">*</span></label>
                   <input type="text" class="form-control" id="ts-calendar-lektionen-button-url" placeholder="http://..." value="{{ lektionen_button_url|e }}" />
         <small class="form-text text-muted" id="lektionen-url-help">Ziel-URL für den Lektionen-Button. Wird nur benötigt, wenn die Zielseite eine spezifische Lektion ist (mit idt2).</small>
       </div>

              <div class="form-group mb-3">
         <label class="mb-2 mx-0 mt-0" for="ts-calendar-abschliessen-button-label">Abschließen-Button Beschriftung</label>
         <input type="text" class="form-control" id="ts-calendar-abschliessen-button-label" placeholder="z. B. Training beenden" value="{{ abschliessen_button_label|e }}" />
         <small class="form-text text-muted">Beschriftung für den Abschließen-Button (Standard: "abschließen").</small>
       </div>

              <div class="form-group mb-3">
         <label class="mb-2 mx-0 mt-0" for="ts-calendar-abschliessen-button-url">Abschließen-Button URL <span id="abschliessen-url-required-indicator" class="text-danger" style="display:none;">*</span></label>
                   <input type="text" class="form-control" id="ts-calendar-abschliessen-button-url" placeholder="http://..." value="{{ abschliessen_button_url|e }}" />
         <small class="form-text text-muted" id="abschliessen-url-help">Ziel-URL für den Abschließen-Button (nur erforderlich wenn Zielseite definiert ist).</small>
       </div>
    </li>

    <li class="list-group-item mb-0">
      <h6 class="mb-3">Zurück-Button (in Training-Übersicht)</h6>
      
             <div class="form-group mb-3">
         <label class="mb-2 mx-0 mt-0" for="ts-calendar-zum-kalender-button-label">Zurück-Button Beschriftung <span id="zum-kalender-label-required-indicator" class="text-danger" style="display:none;">*</span></label>
         <input type="text" class="form-control" id="ts-calendar-zum-kalender-button-label" placeholder="z. B. Zurück zum Kalender" value="{{ zum_kalender_button_label|e }}" />
         <small class="form-text text-muted" id="zum-kalender-label-help">Beschriftung für den Zurück-Button (Standard: "Zum Kalender").</small>
       </div>

              <div class="form-group mb-3">
         <label class="mb-2 mx-0 mt-0" for="ts-calendar-zum-kalender-button-url">Zurück-Button URL <span id="zum-kalender-url-required-indicator" class="text-danger" style="display:none;">*</span></label>
                   <input type="text" class="form-control" id="ts-calendar-zum-kalender-button-url" placeholder="http://..." value="{{ zum_kalender_button_url|e }}" disabled />
         <small class="form-text text-muted" id="zum-kalender-url-help">Ziel-URL für den Zurück-Button. Wird nur benötigt, wenn die Zielseite ein ganzes Training ist (nur idt1, ohne idt2).</small>
       </div>
    </li>
  </ul>
  <div class="mt-3">
    <button type="button" class="btn btn-primary" id="ts-calendar-save-options" data-postid="{{ postid }}">Speichern</button>
    <span id="ts-calendar-save-feedback" class="ml-2 text-muted" style="display:none;">Gespeichert.</span>
    <button type="button" class="btn btn-danger float-right" id="backendDeleteCalendarData" data-calendarid="{{ postid }}"><i class="fas fa-user-times"></i>&nbsp;Daten löschen</button>
  </div>
</div>

<script>
 document.addEventListener("DOMContentLoaded", function(){
   
       // Funktion zur Überprüfung der Zielseite-URL und Anpassung der Button-Pflichtfeld-Logik
    function updateButtonRequirements() {
      var targetUrl = document.getElementById("ts-calendar-button-link").value;
      
      // Haupt-Kalender-Button Beschriftung Logik
      var mainButtonLabelInput = document.getElementById("ts-calendar-button-title");
      var mainButtonLabelRequiredIndicator = document.getElementById("main-button-label-required-indicator");
      var mainButtonLabelHelpText = document.getElementById("main-button-label-help");
      
      if(mainButtonLabelInput && mainButtonLabelRequiredIndicator && mainButtonLabelHelpText) {
        if(targetUrl && targetUrl.trim() !== '') {
          // Target URL vorhanden - Button-Label wird Pflichtfeld
          mainButtonLabelInput.required = true;
          mainButtonLabelRequiredIndicator.style.display = "inline";
          mainButtonLabelHelpText.innerHTML = "Beschriftung für den Kalender-Button <strong>(Pflichtfeld)</strong> - da eine Zielseite definiert ist.";
          
          // Wenn Button-Label leer ist, setze Default-Wert
          if(!mainButtonLabelInput.value || mainButtonLabelInput.value.trim() === '') {
            mainButtonLabelInput.value = "Eintrag erstellen"; // Default-Wert setzen
          }
        } else {
          // Keine Target URL - Button-Label ist optional
          mainButtonLabelInput.required = false;
          mainButtonLabelRequiredIndicator.style.display = "none";
          mainButtonLabelHelpText.innerHTML = "Beschriftung für den Kalender-Button.";
        }
      }
      
      // Lektionen-Button Logik
      var lektionenUrlInput = document.getElementById("ts-calendar-lektionen-button-url");
      var lektionenRequiredIndicator = document.getElementById("lektionen-url-required-indicator");
      var lektionenHelpText = document.getElementById("lektionen-url-help");
      
      // Lektionen-Button Beschriftung Logik
      var lektionenLabelInput = document.getElementById("ts-calendar-lektionen-button-label");
      var lektionenLabelRequiredIndicator = document.getElementById("lektionen-label-required-indicator");
      var lektionenLabelHelpText = document.getElementById("lektionen-label-help");
      
      // "Zum Kalender"-Button Logik
      var zumKalenderUrlInput = document.getElementById("ts-calendar-zum-kalender-button-url");
      var zumKalenderRequiredIndicator = document.getElementById("zum-kalender-url-required-indicator");
      var zumKalenderHelpText = document.getElementById("zum-kalender-url-help");
      
      // "Zum Kalender"-Button Beschriftung Logik
      var zumKalenderLabelInput = document.getElementById("ts-calendar-zum-kalender-button-label");
      var zumKalenderLabelRequiredIndicator = document.getElementById("zum-kalender-label-required-indicator");
      var zumKalenderLabelHelpText = document.getElementById("zum-kalender-label-help");
      
      // Abschließen-Button Logik
      var abschliessenUrlInput = document.getElementById("ts-calendar-abschliessen-button-url");
      var abschliessenRequiredIndicator = document.getElementById("abschliessen-url-required-indicator");
      var abschliessenHelpText = document.getElementById("abschliessen-url-help");
      
      // Null-Checks für alle Elemente
      if (!lektionenUrlInput || !lektionenRequiredIndicator || !lektionenHelpText || 
          !lektionenLabelInput || !lektionenLabelRequiredIndicator || !lektionenLabelHelpText ||
          !zumKalenderUrlInput || !zumKalenderRequiredIndicator || !zumKalenderHelpText ||
          !zumKalenderLabelInput || !zumKalenderLabelRequiredIndicator || !zumKalenderLabelHelpText ||
          !abschliessenUrlInput || !abschliessenRequiredIndicator || !abschliessenHelpText) {
        console.warn("Ein oder mehrere Kalender-Button-Elemente wurden nicht gefunden");
        return;
      }
      
      // Nur prüfen wenn Target URL vorhanden ist
      if(targetUrl && targetUrl.trim() !== '') {
        try {
          // Unterstütze sowohl relative als auch absolute URLs
          var url;
          if(targetUrl.startsWith('http')) {
            url = new URL(targetUrl);
          } else {
            url = new URL(targetUrl, window.location.origin);
          }
          var idt2 = url.searchParams.get('idt2');
          
                   if(idt2 && idt2.trim() !== '') {
           // Spezifische Lektion (mit idt2) - Lektionen-Button wird Pflichtfeld, "Zum Kalender"-Button wird deaktiviert
           lektionenUrlInput.disabled = false;
           lektionenUrlInput.required = true;
           lektionenRequiredIndicator.style.display = "inline";
           lektionenHelpText.innerHTML = "Ziel-URL für den Lektionen-Button <strong>(Pflichtfeld)</strong>. Da die Zielseite eine spezifische Lektion ist, kann der User nicht zur Lektionsübersicht navigieren.";
           
           // Lektionen-Button Beschriftung aktivieren
           lektionenLabelInput.disabled = false;
           lektionenLabelInput.style.opacity = "1";
           lektionenLabelRequiredIndicator.style.display = "none";
           lektionenLabelHelpText.innerHTML = "Beschriftung für den Lektionen-Button (Standard: \"Lektionen\").";
           
           zumKalenderUrlInput.disabled = true;
           zumKalenderUrlInput.required = false;
           zumKalenderRequiredIndicator.style.display = "none";
           zumKalenderHelpText.innerHTML = "Ziel-URL für den \"Zum Kalender\"-Button. <strong>Nicht relevant</strong> - da die Zielseite eine spezifische Lektion ist.";
           
           // Zurück-Button Beschriftung auch deaktivieren
           zumKalenderLabelInput.disabled = true;
           zumKalenderLabelInput.style.opacity = "0.6";
           zumKalenderLabelInput.value = "Zum Kalender"; // Standardwert setzen wenn deaktiviert
           zumKalenderLabelRequiredIndicator.style.display = "none";
           zumKalenderLabelHelpText.innerHTML = "Beschriftung für den Zurück-Button. <strong>Nicht relevant</strong> - da der Zurück-Button nicht angezeigt wird.";
           
           // Abschließen-Button aktivieren und required (bei idt2)
           abschliessenUrlInput.disabled = false;
           abschliessenUrlInput.required = true;
           abschliessenRequiredIndicator.style.display = "inline";
           abschliessenHelpText.innerHTML = "Ziel-URL für den Abschließen-Button <strong>(Pflichtfeld)</strong>.";
           
           // Abschließen-Button Beschriftung aktivieren
           var abschliessenLabelInput = document.getElementById("ts-calendar-abschliessen-button-label");
           if(abschliessenLabelInput) {
             abschliessenLabelInput.disabled = false;
             abschliessenLabelInput.style.opacity = "1";
           }
          } else {
            // Ganzes Training (nur idt1) - Lektionen-Button wird deaktiviert, "Zum Kalender"-Button wird Pflichtfeld
            lektionenUrlInput.disabled = true;
            lektionenUrlInput.required = false;
            lektionenRequiredIndicator.style.display = "none";
            lektionenHelpText.innerHTML = "Ziel-URL für den Lektionen-Button. <strong>Nicht relevant</strong> - da die Zielseite ein ganzes Training ist.";
            
            // Lektionen-Button Beschriftung auch deaktivieren
            lektionenLabelInput.disabled = true;
            lektionenLabelInput.style.opacity = "0.6";
            lektionenLabelInput.value = "Lektionen"; // Standardwert setzen wenn deaktiviert
            lektionenLabelRequiredIndicator.style.display = "none";
            lektionenLabelHelpText.innerHTML = "Beschriftung für den Lektionen-Button. <strong>Nicht relevant</strong> - da der Lektionen-Button nicht angezeigt wird.";
            
            zumKalenderUrlInput.disabled = false;
            zumKalenderUrlInput.required = true;
            zumKalenderRequiredIndicator.style.display = "inline";
            zumKalenderHelpText.innerHTML = "Ziel-URL für den \"Zum Kalender\"-Button <strong>(Pflichtfeld)</strong>. Da die Zielseite ein ganzes Training ist, wird dieser Button in der Training-Übersicht angezeigt.";
            
            // Zurück-Button Beschriftung aktivieren
            zumKalenderLabelInput.disabled = false;
            zumKalenderLabelInput.style.opacity = "1";
            zumKalenderLabelRequiredIndicator.style.display = "none";
            zumKalenderLabelHelpText.innerHTML = "Beschriftung für den Zurück-Button (Standard: \"Zum Kalender\").";
            
           // Abschließen-Button aktivieren und required (bei idt1)
           abschliessenUrlInput.disabled = false;
           abschliessenUrlInput.required = true;
           abschliessenRequiredIndicator.style.display = "inline";
           abschliessenHelpText.innerHTML = "Ziel-URL für den Abschließen-Button <strong>(Pflichtfeld)</strong>.";
           
           // Abschließen-Button Beschriftung aktivieren
           var abschliessenLabelInput = document.getElementById("ts-calendar-abschliessen-button-label");
           if(abschliessenLabelInput) {
             abschliessenLabelInput.disabled = false;
             abschliessenLabelInput.style.opacity = "1";
           }
          }
        } catch(e) {
          // Ungültige URL - Standard auf deaktiviert setzen
          lektionenUrlInput.disabled = true;
          lektionenUrlInput.required = false;
          lektionenRequiredIndicator.style.display = "none";
          lektionenHelpText.innerHTML = "Ziel-URL für den Lektionen-Button. <strong>Nicht relevant</strong> - da die Zielseite ein ganzes Training ist.";
          
          // Lektionen-Button Beschriftung auch deaktivieren
          lektionenLabelInput.disabled = true;
          lektionenLabelInput.style.opacity = "0.6";
          lektionenLabelInput.value = "Lektionen"; // Standardwert setzen wenn deaktiviert
          lektionenLabelRequiredIndicator.style.display = "none";
          lektionenLabelHelpText.innerHTML = "Beschriftung für den Lektionen-Button. <strong>Nicht relevant</strong> - da der Lektionen-Button nicht angezeigt wird.";
          
          zumKalenderUrlInput.disabled = true;
          zumKalenderUrlInput.required = false;
          zumKalenderRequiredIndicator.style.display = "none";
          zumKalenderHelpText.innerHTML = "Ziel-URL für den \"Zum Kalender\"-Button. Wird nur benötigt, wenn die Zielseite ein ganzes Training ist (nur idt1, ohne idt2).";
          
          // Zurück-Button Beschriftung auch deaktivieren
          zumKalenderLabelInput.disabled = true;
          zumKalenderLabelInput.style.opacity = "0.6";
          zumKalenderLabelInput.value = "Zum Kalender"; // Standardwert setzen wenn deaktiviert
          zumKalenderLabelRequiredIndicator.style.display = "none";
          zumKalenderLabelHelpText.innerHTML = "Beschriftung für den Zurück-Button. <strong>Nicht relevant</strong> - da der Zurück-Button nicht angezeigt wird.";
          
          // Abschließen-Button URL und Beschriftung deaktivieren
          abschliessenUrlInput.disabled = true;
          abschliessenUrlInput.required = false;
          abschliessenRequiredIndicator.style.display = "none";
          abschliessenHelpText.innerHTML = "Ziel-URL für den Abschließen-Button. <strong>Nicht relevant</strong> - da keine gültige Zielseite definiert ist.";
          
          // Abschließen-Button Beschriftung auch deaktivieren
          var abschliessenLabelInput = document.getElementById("ts-calendar-abschliessen-button-label");
          if(abschliessenLabelInput) {
            abschliessenLabelInput.disabled = true;
            abschliessenLabelInput.style.opacity = "0.6";
            abschliessenLabelInput.value = "abschließen"; // Standardwert setzen wenn deaktiviert
          }
        }
      } else {
        // Keine Target URL - alle Buttons deaktivieren und nicht required
        lektionenUrlInput.disabled = true;
        lektionenUrlInput.required = false;
        lektionenRequiredIndicator.style.display = "none";
        lektionenHelpText.innerHTML = "Ziel-URL für den Lektionen-Button. <strong>Nicht relevant</strong> - da keine Zielseite definiert ist.";
        
        // Lektionen-Button Beschriftung auch deaktivieren
        lektionenLabelInput.disabled = true;
        lektionenLabelInput.style.opacity = "0.6";
        lektionenLabelInput.value = "Lektionen"; // Standardwert setzen wenn deaktiviert
        lektionenLabelRequiredIndicator.style.display = "none";
        lektionenLabelHelpText.innerHTML = "Beschriftung für den Lektionen-Button. <strong>Nicht relevant</strong> - da keine Zielseite definiert ist.";
        
        zumKalenderUrlInput.disabled = true;
        zumKalenderUrlInput.required = false;
        zumKalenderRequiredIndicator.style.display = "none";
        zumKalenderHelpText.innerHTML = "Ziel-URL für den \"Zum Kalender\"-Button. <strong>Nicht relevant</strong> - da keine Zielseite definiert ist.";
        
        // Zurück-Button Beschriftung auch deaktivieren
        zumKalenderLabelInput.disabled = true;
        zumKalenderLabelInput.style.opacity = "0.6";
        zumKalenderLabelInput.value = "Zum Kalender"; // Standardwert setzen wenn deaktiviert
        zumKalenderLabelRequiredIndicator.style.display = "none";
        zumKalenderLabelHelpText.innerHTML = "Beschriftung für den Zurück-Button. <strong>Nicht relevant</strong> - da keine Zielseite definiert ist.";
        
        // Abschließen-Button URL und Beschriftung deaktivieren
        abschliessenUrlInput.disabled = true;
        abschliessenUrlInput.required = false;
        abschliessenRequiredIndicator.style.display = "none";
        abschliessenHelpText.innerHTML = "Ziel-URL für den Abschließen-Button. <strong>Nicht relevant</strong> - da keine Zielseite definiert ist.";
        
        // Abschließen-Button Beschriftung auch deaktivieren
        var abschliessenLabelInput = document.getElementById("ts-calendar-abschliessen-button-label");
        if(abschliessenLabelInput) {
          abschliessenLabelInput.disabled = true;
          abschliessenLabelInput.style.opacity = "0.6";
          abschliessenLabelInput.value = "abschließen"; // Standardwert setzen wenn deaktiviert
        }
      }
    }
   
       // Event-Listener für Zielseite-URL-Änderungen
    var targetUrlInput = document.getElementById("ts-calendar-button-link");
    if(targetUrlInput) {
      targetUrlInput.addEventListener("input", updateButtonRequirements);
      targetUrlInput.addEventListener("change", updateButtonRequirements);
    }
    
    // Initial ausführen
    updateButtonRequirements();
  var saveBtn=document.getElementById("ts-calendar-save-options");
  if(saveBtn){
    // Button-Breite fixieren, damit sich beim Spinner/Status-Icon die Größe nicht ändert
    try { var w = saveBtn.offsetWidth; if (w && w > 0) { saveBtn.style.minWidth = w + 'px'; } } catch(e){}
                   saveBtn.addEventListener("click", function(){
                           // Validierung der Pflichtfelder
        var targetUrl = document.getElementById("ts-calendar-button-link").value;
        var mainButtonLabel = document.getElementById("ts-calendar-button-title").value;
        var lektionenUrl = document.getElementById("ts-calendar-lektionen-button-url").value;
        var abschliessenUrl = document.getElementById("ts-calendar-abschliessen-button-url").value;
        var zumKalenderUrl = document.getElementById("ts-calendar-zum-kalender-button-url").value;
        
                 // Prüfe ob Felder deaktiviert sind und setze dann leere Werte
         var lektionenUrlInput = document.getElementById("ts-calendar-lektionen-button-url");
         var zumKalenderUrlInput = document.getElementById("ts-calendar-zum-kalender-button-url");
         
         if(lektionenUrlInput && lektionenUrlInput.disabled) {
           lektionenUrl = '';
         }
         
         if(zumKalenderUrlInput && zumKalenderUrlInput.disabled) {
           zumKalenderUrl = '';
         }
      
      // Target URL ist jetzt optional - keine Validierung mehr erforderlich
      
      // Validierung: Haupt-Button-Label ist Pflichtfeld wenn Target URL vorhanden ist
      if(targetUrl && targetUrl.trim() !== '' && (!mainButtonLabel || mainButtonLabel.trim() === '')) {
        alert("Bitte geben Sie eine Beschriftung für den Kalender-Button ein. Da eine Zielseite definiert ist, ist dieses Feld erforderlich.");
        document.getElementById("ts-calendar-button-title").focus();
        return;
      }
      
                                           // Prüfe ob Button-URLs Pflichtfelder sind (abhängig von Zielseite UND ob Target URL vorhanden ist)
         var lektionenUrlRequired = false;
         var zumKalenderUrlRequired = false;
         
         // Nur prüfen wenn Target URL vorhanden ist
         if(targetUrl && targetUrl.trim() !== '') {
           try {
             // Unterstütze sowohl relative als auch absolute URLs
             var url;
             if(targetUrl.startsWith('http')) {
               url = new URL(targetUrl);
             } else {
               url = new URL(targetUrl, window.location.origin);
             }
             var idt2 = url.searchParams.get('idt2');
             lektionenUrlRequired = (idt2 && idt2.trim() !== '');
             zumKalenderUrlRequired = !lektionenUrlRequired; // Gegenteil von lektionenUrlRequired
           } catch(e) {
             lektionenUrlRequired = false;
             zumKalenderUrlRequired = false;
           }
         }
        
        if(lektionenUrlRequired && !lektionenUrl) {
          alert("Bitte geben Sie eine URL für den Lektionen-Button ein. Da die Zielseite eine spezifische Lektion ist, ist dieses Feld erforderlich.");
          document.getElementById("ts-calendar-lektionen-button-url").focus();
          return;
        }
        
        if(zumKalenderUrlRequired && !zumKalenderUrl) {
          alert("Bitte geben Sie eine URL für den \"Zum Kalender\"-Button ein. Da die Zielseite ein ganzes Training ist, ist dieses Feld erforderlich.");
          document.getElementById("ts-calendar-zum-kalender-button-url").focus();
          return;
        }
      
      // Abschließen-Button nur required wenn Target URL vorhanden ist
      if(targetUrl && targetUrl.trim() !== '' && !abschliessenUrl) {
        alert("Bitte geben Sie eine URL für den Abschließen-Button ein.");
        document.getElementById("ts-calendar-abschliessen-button-url").focus();
        return;
      }
     
     var btn=this; var originalHtml = btn.innerHTML;
     btn.disabled=true; btn.innerHTML = '<span class="userfeedback-loading d-inline-flex align-items-center"><i class="fas fa-spinner"></i></span>';
     var postid=this.getAttribute("data-postid");
     var data={
       action:"backend_calendar_save_options",
       postid:postid,
                               options: JSON.stringify({
           calendar_widget_css: (document.getElementById("ts-calendar-widget-css") ? document.getElementById("ts-calendar-widget-css").value : ''),
           calendar_input_css: (document.getElementById("ts-calendar-input-css") ? document.getElementById("ts-calendar-input-css").value : ''),
           calendar_weekdays_css: (document.getElementById("ts-calendar-weekdays-css") ? document.getElementById("ts-calendar-weekdays-css").value : ''),
           calendar_button_label: document.getElementById("ts-calendar-button-title").value,
           target_url: targetUrl,
           calendar_button_css: (document.getElementById("ts-calendar-button-css") ? document.getElementById("ts-calendar-button-css").value : ''),
           calendar_button_classes: (document.getElementById("ts-calendar-button-classes") ? document.getElementById("ts-calendar-button-classes").value : ''),
           calendar_button_parent_css: (document.getElementById("ts-calendar-button-parent-css") ? document.getElementById("ts-calendar-button-parent-css").value : ''),
           lektionen_button_label: document.getElementById("ts-calendar-lektionen-button-label").value,
           lektionen_button_url: lektionenUrl,
           abschliessen_button_label: document.getElementById("ts-calendar-abschliessen-button-label").value,
           abschliessen_button_url: abschliessenUrl,
           zum_kalender_button_label: document.getElementById("ts-calendar-zum-kalender-button-label").value,
           zum_kalender_button_url: zumKalenderUrl,
           left_button_label: (document.getElementById("ts-calendar-left-button-label") ? document.getElementById("ts-calendar-left-button-label").value : ''),
           left_button_url: (document.getElementById("ts-calendar-left-button-url") ? document.getElementById("ts-calendar-left-button-url").value : ''),
           left_button_css: (document.getElementById("ts-calendar-left-button-css") ? document.getElementById("ts-calendar-left-button-css").value : ''),
           left_button_classes: (document.getElementById("ts-calendar-left-button-classes") ? document.getElementById("ts-calendar-left-button-classes").value : ''),
           left_button_parent_css: (document.getElementById("ts-calendar-left-button-parent-css") ? document.getElementById("ts-calendar-left-button-parent-css").value : ''),
           calendar_status_dot_css: (document.getElementById("ts-calendar-status-dot-css") ? document.getElementById("ts-calendar-status-dot-css").value : ''),
           calendar_hover_bg_css: (document.getElementById("ts-calendar-hover-bg-css") ? document.getElementById("ts-calendar-hover-bg-css").value : '')
         })
     };
    jQuery.post(ajaxurl, data, function(resp){
      var fb=document.getElementById("ts-calendar-save-feedback");
      if(resp && resp.indexOf("ok") !== -1){
        btn.innerHTML = '<span class="userfeedback-success d-inline-flex align-items-center"><i class="far fa-check-circle"></i></span>';
        if(fb){ fb.style.display="inline"; setTimeout(function(){ fb.style.display="none"; },1500);} 
      } else {
        btn.innerHTML = '<span class="userfeedback-error d-inline-flex align-items-center"><i class="far fa-times-circle"></i></span>';
      }
      setTimeout(function(){ btn.disabled=false; btn.innerHTML = originalHtml; }, 1200);
    }).fail(function(){
      btn.innerHTML = '<span class="userfeedback-error d-inline-flex align-items-center"><i class="far fa-times-circle"></i></span>';
      setTimeout(function(){ btn.disabled=false; btn.innerHTML = originalHtml; }, 1200);
    });
  }); }

  (function(){
    var openBtn = document.getElementById("ts-calendar-open-filter");
    var clearBtn = document.getElementById("ts-calendar-clear-link");
    var clearSearchBtn = document.getElementById("ts-calendar-clear-search");
    var listEl = document.getElementById("ts-calendar-filter-list");
    var applyBtn = document.getElementById("ts-calendar-filter-apply");
    var searchEl = document.getElementById("ts-calendar-filter-search");
    var loadedData = null;
    var pinnedTrainingId = null; // bleibt während eines geöffneten Modals bestehen
    var currentSelection = { type: null, trainingId: null, trainingSlug: null, lessonId: null, firstPageSlug: null };
    function renderList(filter, prioritizeTop){
      if(!loadedData){ listEl.innerHTML = '<div class="text-muted">Keine Daten</div>'; return; }
      var html = '';
      var f = (filter||'').toLowerCase();
      var listData = loadedData;
      var topId = null;
      if (prioritizeTop && currentSelection && currentSelection.trainingId) {
        topId = currentSelection.trainingId;
      } else if (pinnedTrainingId) {
        topId = pinnedTrainingId;
      }
      if (topId) {
        // Kopie sortieren, damit Originalreihenfolge erhalten bleibt
        listData = loadedData.slice().sort(function(a,b){
          var aSel = (a.id === topId);
          var bSel = (b.id === topId);
          if (aSel && !bSel) return -1;
          if (!aSel && bSel) return 1;
          return 0;
        });
      }
        listData.forEach(function(t){
        var tMatch = t.title.toLowerCase().indexOf(f) !== -1 || t.slug.toLowerCase().indexOf(f) !== -1;
        var lessonsHtml = '';
        var hasLessonMatch = false;
        t.lessons.forEach(function(l){
          var lMatch = l.title.toLowerCase().indexOf(f) !== -1 || l.slug.toLowerCase().indexOf(f) !== -1;
          if(lMatch) hasLessonMatch = true;
          var disabled;
          if (currentSelection.type === 'training') {
            // Wenn ein Training gewählt ist, alle Lektionen deaktivieren
            disabled = true;
          } else if (currentSelection.type === 'lesson') {
            // Bei Lektion nur genau diese aktiv lassen
            disabled = !(currentSelection.trainingId === t.id && currentSelection.lessonId === l.id);
          } else {
            disabled = false;
          }
          var checked = (currentSelection.type === 'lesson' && currentSelection.lessonId === l.id) || (currentSelection.type === 'training' && currentSelection.trainingId === t.id);
          lessonsHtml += `
            <div class="form-check ml-4 my-1">
              <input type="checkbox" class="form-check-input ts-cal-filter-lesson" data-training-id="${t.id}" data-lesson-id="${l.id}" data-first-page-slug="${l.first_page_slug}" id="ts-cal-lesson-${l.id}" ${(checked?"checked":"")} ${(disabled?"disabled":"")}>
              <label class="form-check-label" for="ts-cal-lesson-${l.id}">${l.title}</label>
            </div>
          `;
        });
        var tDisabled = (currentSelection.type === 'lesson' && currentSelection.trainingId !== t.id) || (currentSelection.type === 'training' && currentSelection.trainingId !== t.id);
        var tChecked = (currentSelection.type === 'training' && currentSelection.trainingId === t.id);
        if(!f || tMatch || hasLessonMatch){
          html += `
            <div class="form-check my-1">
              <input type="checkbox" class="form-check-input ts-cal-filter-training" data-training-id="${t.id}" data-training-slug="${t.slug}" id="ts-cal-training-${t.id}" ${(tChecked?"checked":"")} ${((tDisabled && !tChecked)?"disabled":"")}>
              <label class="form-check-label font-weight-bold" for="ts-cal-training-${t.id}">${t.title}</label>
            </div>
          ` + lessonsHtml + `<hr class="my-2">`;
        }
      });
      if(!html){ html = '<div class="text-muted">Keine Treffer</div>'; }
      listEl.innerHTML = html;
    }
         function preselectFromInput(){
       var val = document.getElementById('ts-calendar-button-link').value || '';
       try {
         // Unterstütze sowohl relative als auch absolute URLs
         var u;
         if(val.startsWith('http')) {
           u = new URL(val);
         } else {
           u = new URL(val, window.location.origin);
         }
         var trainingsSlug = u.searchParams.get('trainings');
         var seitenSlug = u.searchParams.get('seiten');
         var idt1 = u.searchParams.get('idt1');
         var idt2 = u.searchParams.get('idt2');
         currentSelection = { type: null, trainingId: null, trainingSlug: null, lessonId: null, firstPageSlug: null };
         if(trainingsSlug && idt1){
           currentSelection = { type: 'training', trainingId: parseInt(idt1,10), trainingSlug: trainingsSlug, lessonId: null, firstPageSlug: null };
         } else if(seitenSlug && idt1 && idt2){
           currentSelection = { type: 'lesson', trainingId: parseInt(idt1,10), trainingSlug: null, lessonId: parseInt(idt2,10), firstPageSlug: seitenSlug };
         }
       } catch(e){ currentSelection = { type: null, trainingId: null, trainingSlug: null, lessonId: null, firstPageSlug: null }; }
     }
    function attachHandlers(){
      listEl.addEventListener('change', function(e){
        if(e.target && e.target.classList.contains('ts-cal-filter-training')){
          var tid = parseInt(e.target.getAttribute('data-training-id'),10);
          var tslug = e.target.getAttribute('data-training-slug');
          if(e.target.checked){ currentSelection = { type: 'training', trainingId: tid, trainingSlug: tslug, lessonId: null, firstPageSlug: null }; } else { currentSelection = { type: null, trainingId: null, trainingSlug: null, lessonId: null, firstPageSlug: null }; }
          renderList(searchEl.value, false);
        }
        if(e.target && e.target.classList.contains('ts-cal-filter-lesson')){
          var tid = parseInt(e.target.getAttribute('data-training-id'),10);
          var lslug = e.target.getAttribute('data-first-page-slug');
          var lid = parseInt(e.target.getAttribute('data-lesson-id'),10);
          if(e.target.checked){ currentSelection = { type: 'lesson', trainingId: tid, trainingSlug: null, lessonId: lid, firstPageSlug: lslug }; } else { currentSelection = { type: null, trainingId: null, trainingSlug: null, lessonId: null, firstPageSlug: null }; }
          renderList(searchEl.value, false);
        }
      });
      searchEl.addEventListener('input', function(){ renderList(searchEl.value, false); });
    }
         function buildUrlFromSelection(){
       if(!currentSelection.type) return '';
       
       // Verwende die serverseitig bereitgestellte Basis-URL für Subdomain-Support
       var baseUrl = '{{ base_url|e }}';
       
       if(currentSelection.type === 'training'){
         return baseUrl + '/?trainings=' + encodeURIComponent(currentSelection.trainingSlug) + '&idt1=' + encodeURIComponent(currentSelection.trainingId);
       } else {
         return baseUrl + '/?seiten=' + encodeURIComponent(currentSelection.firstPageSlug) + '&idt1=' + encodeURIComponent(currentSelection.trainingId) + '&idt2=' + encodeURIComponent(currentSelection.lessonId);
       }
     }
    if(openBtn){ openBtn.addEventListener('click', function(){
      var btn=this; var originalHtml = btn.innerHTML;
      btn.disabled=true; btn.innerHTML = '<span class="userfeedback-loading d-inline-flex align-items-center"><i class="fas fa-spinner"></i></span>';
      if(!loadedData){
        listEl.innerHTML = '<div class="text-muted">Lade Daten…</div>';
        jQuery.post(ajaxurl, { action: 'backend_calendar_get_calendar_trainings' }, function(resp){
          // resp ist bereits ein JS-Objekt/Array (wp_send_json). Nicht erneut parsen.
          var data = resp;
          if (typeof resp === 'string') {
            try { data = JSON.parse(resp); } catch(e) { data = []; }
          }
          loadedData = Array.isArray(data) ? data : (data && data.data ? data.data : []);
          preselectFromInput();
          pinnedTrainingId = currentSelection && currentSelection.trainingId ? currentSelection.trainingId : null;
          renderList('', true);
          attachHandlers();
          btn.disabled=false; btn.innerHTML = originalHtml;
          jQuery('#ts-calendar-filter-modal').modal({ backdrop: false, keyboard: true, show: true });
        }).fail(function(){
          listEl.innerHTML = '<div class="text-danger">Fehler beim Laden</div>';
          btn.innerHTML = originalHtml; btn.disabled=false;
        });
      } else {
        preselectFromInput();
        pinnedTrainingId = currentSelection && currentSelection.trainingId ? currentSelection.trainingId : null;
        renderList('', true);
        btn.disabled=false; btn.innerHTML = originalHtml;
        jQuery('#ts-calendar-filter-modal').modal({ backdrop: false, keyboard: true, show: true });
      }
    }); }
    // Beim Schließen Reset des angepinnten Trainings
    jQuery('#ts-calendar-filter-modal').on('hidden.bs.modal', function(){ pinnedTrainingId = null; });
    if(clearSearchBtn){ clearSearchBtn.addEventListener('click', function(){
      var s = document.getElementById('ts-calendar-filter-search');
      if(s){ s.value = ''; renderList(''); s.focus(); }
    }); }
    if(clearBtn){ clearBtn.addEventListener('click', function(){
      var inp = document.getElementById('ts-calendar-button-link');
      if(inp){ inp.value = ''; }
    }); }
         if(applyBtn){ applyBtn.addEventListener('click', function(){
       var url = buildUrlFromSelection();
       if(url){ 
         document.getElementById('ts-calendar-button-link').value = url; 
                   // Pflichtfeld-Logik nach URL-Änderung aktualisieren
          updateButtonRequirements();
       }
       jQuery('#ts-calendar-filter-modal').modal('hide');
     }); }
  })();
  // Kalender-Daten löschen: Modal öffnen
  jQuery(document).on('click', '#backendDeleteCalendarData', function(e){
    e.preventDefault();
    jQuery('#deleteCalendarDataModal').modal('show');
  });
  // Bestätigen im Modal
  jQuery(document).on('click', '#deleteCalendarDataModalConfirm', function(e){
    e.preventDefault();
    var btn = this; var originalHtml = btn.innerHTML; btn.disabled = true; btn.innerHTML = '<span class="userfeedback-loading d-inline-flex align-items-center"><i class="fas fa-spinner"></i></span>';
    var calendarId = jQuery('#backendDeleteCalendarData').data('calendarid');
    jQuery.post(ajaxurl, { action: 'backend_calendar_delete_data', calendar_id: calendarId }, function(resp){
      if(resp && resp.success){
        btn.innerHTML = '<span class="userfeedback-success d-inline-flex align-items-center"><i class="far fa-check-circle"></i></span>';
        setTimeout(function(){ jQuery('#deleteCalendarDataModal').modal('hide'); btn.disabled=false; btn.innerHTML = originalHtml; }, 1000);
      } else {
        btn.innerHTML = '<span class="userfeedback-error d-inline-flex align-items-center"><i class="far fa-times-circle"></i></span>';
        setTimeout(function(){ btn.disabled=false; btn.innerHTML = originalHtml; }, 1200);
      }
    }).fail(function(){
      btn.innerHTML = '<span class="userfeedback-error d-inline-flex align-items-center"><i class="far fa-times-circle"></i></span>';
      setTimeout(function(){ btn.disabled=false; btn.innerHTML = originalHtml; }, 1200);
    });
  });
});
</script>

<div class="wrapper-admin-backend">
  <div class="modal fade" id="deleteCalendarDataModal" tabindex="-1" role="dialog" aria-labelledby="deleteCalendarDataModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteCalendarDataModalLabel">Löschen von Daten bestätigen</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>
            Möchten Sie alle Nutzereingaben, die diesem Kalender zugeordnet sind, wirklich <b>unwiderruflich</b> löschen?
          </p>
          <p class="d-none">
            Sie können die Daten davor im <a href="{{ dataexport_url }}" target="_blank">Datenexport</a> herunterladen.
          </p>
        </div>
        <div class="modal-footer d-flex justify-content-between">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">Abbrechen</button>
          <button class="btn btn-danger" type="button" id="deleteCalendarDataModalConfirm"><i class="fas fa-user-times"></i>&nbsp;Daten löschen</button>
        </div>
      </div>
    </div>
  </div>
</div>

