# 📅 Termin & Zeit Spalte - Intelligente Anzeige

## Übersicht

Die "Termin & Zeit" Spalte zeigt nun **dynamisch unterschiedliche Informationen** je nach Kurstyp an.

## 🎯 Anzeige-Modi nach Kurstyp

### 1. **Einmaliges Event** (`event`)
```
┌─────────┐
│   27    │  
│ 10.2025 │  10:16 - 10:16
└─────────┘  📅 Einmaliges Event
```
**Zeigt**:
- Großes Datum-Badge (blau)
- Uhrzeit
- Label "Einmaliges Event"

---

### 2. **Dauerhafter Kurs** (`recurring_course`)
```
[🔄 Mo, Mi, Fr]

🕐 10:00 - 11:00
Dauerhafter Kurs
```
**Zeigt**:
- Badge mit Wochentagen (Mo, Mi, Fr)
- Sync-Icon
- Uhrzeit
- Label "Dauerhafter Kurs"
- Tooltip mit vollen Wochentag-Namen

---

### 3. **Zeitlich begrenzter Kurs** (`limited_course`)
```
📅 14.10.2025 - 14.12.2025

[Mo, Mi, Fr]

🕐 17:00 - 18:00
```
**Zeigt**:
- Zeitraum (von - bis)
- Badge mit Wochentagen (wenn vorhanden)
- Uhrzeit

---

### 4. **Ferienkurs** (`holiday_course`)

#### Variante A: Mit Zeitraum
```
[🏖️ Ferienkurs]

📅 14.10.2025 - 18.10.2025

🕐 09:00 - 10:00
```
**Zeigt**:
- Gelber "Ferienkurs" Badge
- Zeitraum
- Uhrzeit

#### Variante B: Einzelner Tag
```
┌──────────┐
│  Ferien  │  
│  14.10   │  🕐 09:00 - 10:00
└──────────┘  
```
**Zeigt**:
- Gelbes Ferien-Badge
- Tag.Monat
- Uhrzeit

---

## 🎨 Design-Details

### Farb-Schema
- **Blau** (`#4e73df`): Events & normale Termine
- **Gelb** (`#f6c23e`): Ferienkurse
- **Info** (`#17a2b8`): Zeitlich begrenzte Kurse
- **Primary** (`#4e73df`): Dauerhafte Kurse

### Icons
- 📅 `fa-calendar-day` - Event
- 🔄 `fa-sync-alt` - Wiederkehrend
- 📆 `fa-calendar-alt` - Zeitraum
- 🏖️ `fa-umbrella-beach` - Ferienkurs
- 🕐 `fa-clock` - Uhrzeit

### Badges
- **Wochentage**: `bg-primary` / `bg-info` je nach Typ
- **Ferienkurs**: `bg-warning text-dark`

---

## 💻 Technische Implementation

### Backend (API)
Zusätzliche Felder in `AdminAppointmentsController`:
```php
'startDate' => $availability->getStartDate()?->format('d.m.Y'),
'endDate' => $availability->getEndDate()?->format('d.m.Y'),
'specificDate' => $availability->getSpecificDate()?->format('d.m.Y'),
'daysOfWeek' => [1, 3, 5] // Mo, Mi, Fr
```

### Frontend (JavaScript)
Funktion: `getAppointmentDateDisplay(appointment)`

**Switch-Case Logic**:
```javascript
switch(appointment.courseType) {
    case 'event':           // → Datum-Badge + Zeit
    case 'recurring_course': // → Wochentage + Zeit
    case 'limited_course':  // → Zeitraum + Wochentage + Zeit
    case 'holiday_course':  // → Ferienkurs-Badge + Zeitraum + Zeit
    default:                // → Fallback: Datum + Zeit
}
```

---

## 📊 Beispiele aus der Praxis

### Beispiel 1: Herbst Ferienspecial
```
[🏖️ Ferienkurs]
📅 14.10.2025 - 18.10.2025
🕐 09:00 - 10:00
```
**Kurstyp**: `holiday_course`

---

### Beispiel 2: Wöchentlicher Schwimmkurs
```
[🔄 Do]
🕐 10:16 - 10:16
Dauerhafter Kurs
```
**Kurstyp**: `recurring_course`  
**Wochentage**: Donnerstag

---

### Beispiel 3: 8-Wochen-Intensivkurs
```
📅 01.11.2025 - 27.12.2025
[Mo, Mi, Fr]
🕐 17:00 - 18:00
```
**Kurstyp**: `limited_course`  
**Wochentage**: Montag, Mittwoch, Freitag

---

## ✨ Vorteile

1. **Kontextuelle Information**: Jeder Kurstyp zeigt relevante Daten
2. **Platzsparend**: Nur nötige Informationen werden angezeigt
3. **Visuell unterscheidbar**: Verschiedene Farben/Badges pro Typ
4. **Benutzerfreundlich**: Auf einen Blick erkennbar
5. **Responsiv**: Funktioniert auf allen Bildschirmgrößen

---

## 🔧 Anpassungen

### Neue Kurstypen hinzufügen
In `getAppointmentDateDisplay()` einen neuen Case hinzufügen:
```javascript
case 'your_new_type':
    html += `
        <div>
            <!-- Your custom HTML -->
        </div>
    `;
    break;
```

### Wochentag-Namen ändern
In `dayNames` und `dayNamesShort` Objekte anpassen:
```javascript
const dayNames = {
    1: 'Monday', 2: 'Tuesday', // ...
};
```

### Farben anpassen
Background-Farben in den Template-Strings ändern:
```javascript
style="background: linear-gradient(135deg, #YOUR_COLOR_1, #YOUR_COLOR_2);"
```

---

## 📝 Zusammenfassung

Die intelligente Anzeige macht die Termine-Liste **übersichtlicher und informativer**, indem sie genau die Informationen zeigt, die für den jeweiligen Kurstyp relevant sind.

| Kurstyp | Zeigt | Highlight |
|---------|-------|-----------|
| Event | Datum + Zeit | Großes Datum-Badge (blau) |
| Dauerhaft | Wochentage + Zeit | Wochentag-Badge mit Sync-Icon |
| Zeitlich begrenzt | Zeitraum + Wochentage + Zeit | Von-Bis Datum |
| Ferienkurs | Ferien-Badge + Zeitraum + Zeit | Gelber Ferien-Badge |

**Status**: ✅ Vollständig implementiert und getestet