Additional event informations can be added

app/Domains/Event/Views/Partials/Overview.vue

@@ -1,15 +1,16 @@
 <script setup>
-    import {onMounted, reactive, ref} from "vue";
-    import ParticipationFees from "./ParticipationFees.vue";
-    import ParticipationSummary from "./ParticipationSummary.vue";
-    import CommonSettings from "./CommonSettings.vue";
-    import EventManagement from "./EventManagement.vue";
-    import Modal from "../../../../Views/Components/Modal.vue";
-    import MailCompose from "./MailCompose.vue";
-    import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
-    import {toast} from "vue3-toastify";
+import {onMounted, reactive, ref} from "vue";
+import ParticipationFees from "./ParticipationFees.vue";
+import ParticipationOptions from "./ParticipationOptions.vue";
+import ParticipationSummary from "./ParticipationSummary.vue";
+import CommonSettings from "./CommonSettings.vue";
+import EventManagement from "./EventManagement.vue";
+import Modal from "../../../../Views/Components/Modal.vue";
+import MailCompose from "./MailCompose.vue";
+import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
+import {toast} from "vue3-toastify";
 
-    const props = defineProps({
+const props = defineProps({
         data: Object,
     })
 
@@ -36,6 +37,10 @@
         displayData.value = 'participationFees';
     }
 
+    async function showParticipationOptions() {
+        displayData.value = 'participationOptions';
+    }
+
     async function showEventManagement() {
         displayData.value = 'eventManagement';
     }
@@ -107,6 +112,8 @@
 
 
     <ParticipationFees v-if="displayData === 'participationFees'" :event="dynamicProps.event"  @close="showMain" />
+    <ParticipationOptions v-else-if="displayData === 'participationOptions'" :event="dynamicProps.event"
+                          @close="showMain"/>
     <CommonSettings v-else-if="displayData === 'commonSettings'" :event="dynamicProps.event"  @close="showMain" />
     <EventManagement v-else-if="displayData === 'eventManagement'" :event="dynamicProps.event"  @close="showMain" />
 
@@ -185,7 +192,8 @@
         <div class="event-flexbox-row bottom">
             <label style="font-size: 9pt;" class="link" @click="showCommonSettings">Allgemeine Einstellungen</label> &nbsp;
             <label style="font-size: 9pt;" class="link" @click="showEventManagement">Veranstaltungsleitung</label> &nbsp;
-            <label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label>
+            <label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label> &nbsp;
+            <label style="font-size: 9pt;" class="link" @click="showParticipationOptions">Teilnahmeoptionen</label>
             <a style="font-size: 9pt;" class="link" :href="'/budget/' + props.data.event.costUnit.id">Budget bearbeiten</a>
             <a style="font-size: 9pt;" class="link" :href="'/cost-unit/' + props.data.event.costUnit.id">Ausgabenübersicht</a>
             <a v-if="!dynamicProps.event.registrationAllowed && !dynamicProps.event.archived" style="color: #ff0000; font-size: 9pt;" class="link" @click="archiveEvent">Archivieren</a>

app/Domains/Event/Views/Partials/ParticipationOptions.vue

@@ -0,0 +1,155 @@
+<script setup>
+import {ref} from "vue";
+import {toast} from "vue3-toastify";
+import {request} from "../../../../../resources/js/components/HttpClient.js";
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    event: Object,
+})
+
+// Fragen-Definition dieses Events: [ { key, label, options: [ { value, label } ] } ].
+// key/value bleiben für bestehende Einträge erhalten (Bestandsschutz für bereits gespeicherte Antworten);
+// neue Einträge bekommen serverseitig beim Speichern einen stabilen Slug.
+const questions = ref((props.event.participationOptions ?? []).map(q => ({
+    key: q.key ?? '',
+    label: q.label ?? '',
+    options: (q.options ?? []).map(o => ({value: o.value ?? '', label: o.label ?? ''})),
+})))
+
+function addQuestion() {
+    questions.value.push({key: '', label: '', options: [{value: '', label: ''}, {value: '', label: ''}]})
+}
+
+function removeQuestion(index) {
+    questions.value.splice(index, 1)
+}
+
+function addOption(question) {
+    question.options.push({value: '', label: ''})
+}
+
+function removeOption(question, index) {
+    question.options.splice(index, 1)
+}
+
+function validate() {
+    for (const question of questions.value) {
+        if (question.label.trim() === '') {
+            toast.error('Bitte für jede Frage eine Beschriftung angeben.')
+            return false
+        }
+
+        const validOptions = question.options.filter(o => o.label.trim() !== '')
+        if (validOptions.length < 1) {
+            toast.error('Jede Frage braucht mindestens eine Auswahlmöglichkeit.')
+            return false
+        }
+    }
+
+    return true
+}
+
+async function save() {
+    if (!validate()) {
+        return
+    }
+
+    const response = await request('/api/v1/event/details/' + props.event.id + '/participation-options', {
+        method: 'POST',
+        body: {
+            questions: questions.value,
+        }
+    })
+
+    if (response.status !== 'success') {
+        toast.error(response.message ?? 'Die Teilnahmeoptionen konnten nicht gespeichert werden.')
+        return
+    }
+
+    toast.success('Die Teilnahmeoptionen wurden gespeichert')
+    emit('close')
+}
+</script>
+
+<template>
+    <div class="participation-options">
+        <h3>Teilnahmeoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.9rem;">
+            Pflicht-Auswahlfragen für die Anmeldung (z. B. Kurs oder Stufe). Je Frage ist genau eine Option wählbar.
+            Ohne Fragen wird dieser Schritt in der Anmeldung übersprungen.
+        </p>
+
+        <div v-for="(question, qIndex) in questions" :key="qIndex" class="question-card">
+            <div class="question-head">
+                <input
+                    type="text"
+                    v-model="question.label"
+                    class="width-full"
+                    placeholder="Frage, z. B. „Welchen Kurs möchtest du belegen?“"
+                />
+                <label class="link remove-link" @click="removeQuestion(qIndex)">Frage entfernen</label>
+            </div>
+
+            <div class="options">
+                <div v-for="(option, oIndex) in question.options" :key="oIndex" class="option-row">
+                    <input
+                        type="text"
+                        v-model="option.label"
+                        class="width-full"
+                        placeholder="Auswahlmöglichkeit"
+                    />
+                    <label class="link remove-link" @click="removeOption(question, oIndex)">✕</label>
+                </div>
+                <label class="link" @click="addOption(question)">+ Option hinzufügen</label>
+            </div>
+        </div>
+
+        <div style="margin-top: 16px;">
+            <label class="link" @click="addQuestion">+ Frage hinzufügen</label>
+        </div>
+
+        <div style="margin-top: 24px;">
+            <input type="button" value="Speichern" @click="save"/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.question-card {
+    margin-top: 16px;
+    padding: 14px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+}
+
+.question-head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.options {
+    margin-top: 12px;
+    padding-left: 12px;
+}
+
+.option-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.remove-link {
+    white-space: nowrap;
+    color: #ef4444;
+    font-size: 0.85rem;
+}
+</style>

app/Domains/Event/Views/Partials/SignUpForm/SignupForm.vue

@@ -6,6 +6,7 @@ import StepPersonalData from './steps/StepPersonalData.vue'
 import StepRegistrationMode from './steps/StepRegistrationMode.vue'
 import StepArrival from './steps/StepArrival.vue'
 import StepAddons from './steps/StepAddons.vue'
+import StepParticipationOptions from './steps/StepParticipationOptions.vue'
 import StepPhotoPermissions from './steps/StepPhotoPermissions.vue'
 import StepAllergies from './steps/StepAllergies.vue'
 import StepPaymentMethod from './steps/StepPaymentMethod.vue'
@@ -33,10 +34,11 @@ const steps = [
     { step: 4, label: 'An-/Abreise' },
     { step: 5, label: 'Teilnahmegruppe' },
     { step: 6, label: 'Zusatzoptionen' },
-    { step: 7, label: 'Fotoerlaubnis' },
-    { step: 8, label: 'Allergien' },
-    {step: 9, label: 'Zahlungsart'},
-    {step: 10, label: 'Zusammenfassung'},
+    {step: 7, label: 'Teilnahmeoptionen'},
+    {step: 8, label: 'Fotoerlaubnis'},
+    {step: 9, label: 'Allergien'},
+    {step: 10, label: 'Zahlungsart'},
+    {step: 11, label: 'Zusammenfassung'},
 ]
 </script>
 
@@ -93,12 +95,16 @@ const steps = [
                 <StepArrival        v-if="currentStep === 4" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
                 <StepRegistrationMode v-if="currentStep === 5" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
                 <StepAddons         v-if="currentStep === 6" :formData="formData" :event="event" :selectedAddons="selectedAddons" @next="goToStep" @back="goToStep" />
-                <StepPhotoPermissions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
-                <StepAllergies      v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
-                <StepPaymentMethod v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
+                <StepParticipationOptions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep"
+                                          @back="goToStep"/>
+                <StepPhotoPermissions v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep"
+                                      @back="goToStep"/>
+                <StepAllergies v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
+                               @back="goToStep"/>
+                <StepPaymentMethod v-if="currentStep === 10" :formData="formData" :event="event" @next="goToStep"
                                    @back="goToStep"/>
                 <StepSummary
-                    v-if="currentStep === 10"
+                    v-if="currentStep === 11"
                     :formData="formData"
                     :event="event"
                     :summaryAmount="summaryAmount"

app/Domains/Event/Views/Partials/SignUpForm/composables/stepFlow.js

@@ -0,0 +1,45 @@
+// Zentrale Schrittreihenfolge des Anmelde-Wizards. Einige Schritte sind optional und werden
+// übersprungen, wenn sie für das Event nicht zutreffen (Zusatzoptionen, Teilnahmeoptionen).
+// Der Zahlungsschritt wird separat in useSignupForm anhand des berechneten Betrags übersprungen.
+export const STEP_AGE = 1
+export const STEP_CONTACT = 2
+export const STEP_PERSONAL = 3
+export const STEP_ARRIVAL = 4
+export const STEP_REGISTRATION = 5
+export const STEP_ADDONS = 6
+export const STEP_PARTICIPATION_OPTIONS = 7
+export const STEP_PHOTO = 8
+export const STEP_ALLERGIES = 9
+export const STEP_PAYMENT = 10
+export const STEP_SUMMARY = 11
+
+// Ob ein (optionaler) Schritt für dieses Event angezeigt wird.
+export function stepVisible(event, step) {
+    if (step === STEP_ADDONS) {
+        return (event.addons?.length ?? 0) > 0
+    }
+
+    if (step === STEP_PARTICIPATION_OPTIONS) {
+        return (event.participationOptions?.length ?? 0) > 0
+    }
+
+    return true
+}
+
+// Nächster sichtbarer Schritt nach `step` (überspringt ausgeblendete optionale Schritte).
+export function nextVisibleFrom(event, step) {
+    let candidate = step + 1
+    while (candidate < STEP_SUMMARY && !stepVisible(event, candidate)) {
+        candidate++
+    }
+    return candidate
+}
+
+// Vorheriger sichtbarer Schritt vor `step`.
+export function prevVisibleFrom(event, step) {
+    let candidate = step - 1
+    while (candidate > STEP_AGE && !stepVisible(event, candidate)) {
+        candidate--
+    }
+    return candidate
+}

app/Domains/Event/Views/Partials/SignUpForm/composables/useSignupForm.js

@@ -1,5 +1,6 @@
 import {reactive, ref} from 'vue'
 import axios from 'axios'
+import {STEP_PAYMENT, STEP_SUMMARY} from './stepFlow.js'
 
 export function useSignupForm(event, participantData) {
     const currentStep = ref(1)
@@ -16,6 +17,8 @@ export function useSignupForm(event, participantData) {
         eatingHabit: 'EATING_HABIT_VEGAN',
         paymentMethod: activeMethods.length === 1 ? activeMethods[0].slug : null,
         paymentOptions: {},
+        // Antworten auf die event-spezifischen Teilnahmeoptionen: { [question.key]: option.value }
+        participationOptions: {},
         userId: participantData.id,
         eventId: event.id,
         vorname: participantData.firstname ?? '',
@@ -79,10 +82,6 @@ export function useSignupForm(event, participantData) {
         }
     }
 
-    // Steps: ... 8 Allergien, 9 Zahlungsart, 10 Zusammenfassung.
-    const STEP_PAYMENT = 9
-    const STEP_SUMMARY = 10
-
     const goToStep = async (step) => {
         if (step === STEP_PAYMENT) {
             // Betrag ermitteln: Bei 0 € wird die Zahlungsart-Auswahl übersprungen.

app/Domains/Event/Views/Partials/SignUpForm/steps/StepAddons.vue

@@ -1,6 +1,10 @@
 <script setup>
+import {nextVisibleFrom, STEP_ADDONS} from "../composables/stepFlow.js";
+
 const props = defineProps({ formData: Object, event: Object, selectedAddons: Object })
 const emit = defineEmits(['next', 'back'])
+
+const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
 </script>
 
 <template>
@@ -39,7 +43,7 @@ const emit = defineEmits(['next', 'back'])
 
         <div class="btn-row">
             <button type="button" class="btn-secondary" @click="emit('back', 5)">← Zurück</button>
-            <button type="button" class="btn-primary" @click="emit('next', 7)">Weiter →</button>
+            <button type="button" class="btn-primary" @click="next">Weiter →</button>
         </div>
     </div>
 </template>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepAllergies.vue

@@ -43,8 +43,8 @@ const emit = defineEmits(['next', 'back'])
             </tr>
             <tr>
                 <td colspan="2" class="btn-row">
-                    <button type="button" class="btn-secondary" @click="emit('back', 7)">← Zurück</button>
-                    <button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
+                    <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
+                    <button type="button" class="btn-primary" @click="emit('next', 10)">Weiter →</button>
                 </td>
             </tr>
         </table>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepParticipationOptions.vue

@@ -0,0 +1,48 @@
+<script setup>
+import {computed} from "vue";
+import {nextVisibleFrom, prevVisibleFrom, STEP_PARTICIPATION_OPTIONS} from "../composables/stepFlow.js";
+
+const props = defineProps({formData: Object, event: Object})
+const emit = defineEmits(['next', 'back'])
+
+const questions = computed(() => props.event.participationOptions ?? [])
+
+// Pflichtfeld: "Weiter" erst möglich, wenn jede Frage beantwortet ist.
+const canProceed = computed(() =>
+    questions.value.every(q => {
+        const value = props.formData.participationOptions[q.key]
+        return value !== undefined && value !== null && String(value).trim() !== ''
+    })
+)
+
+const back = () => emit('back', prevVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
+const next = () => emit('next', nextVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
+</script>
+
+<template>
+    <div>
+        <h3>Teilnahmeoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.95rem; margin-bottom: 20px;">
+            Bitte triff für jede Auswahl eine Entscheidung.
+        </p>
+
+        <table class="form-table">
+            <tr v-for="question in questions" :key="question.key">
+                <td>{{ question.label }}:</td>
+                <td>
+                    <select v-model="formData.participationOptions[question.key]">
+                        <option value="">Bitte wählen</option>
+                        <option v-for="option in question.options" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                        </option>
+                    </select>
+                </td>
+            </tr>
+        </table>
+
+        <div class="btn-row">
+            <button type="button" class="btn-secondary" @click="back">← Zurück</button>
+            <button type="button" class="btn-primary" :disabled="!canProceed" @click="next">Weiter →</button>
+        </div>
+    </div>
+</template>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepPaymentMethod.vue

@@ -78,8 +78,8 @@ const canProceed = computed(() => {
         </div>
 
         <div class="btn-row">
-            <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
-            <button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 10)">Weiter →
+            <button type="button" class="btn-secondary" @click="emit('back', 9)">← Zurück</button>
+            <button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 11)">Weiter →
             </button>
         </div>
     </div>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepPhotoPermissions.vue

@@ -1,16 +1,15 @@
 <script setup>
+import {prevVisibleFrom, STEP_ALLERGIES, STEP_PHOTO} from "../composables/stepFlow.js";
+
 const props = defineProps({ formData: Object, event: Object })
 const emit = defineEmits(['next', 'back'])
 
 const acceptAll = () => {
     Object.keys(props.formData.foto).forEach(k => props.formData.foto[k] = true)
-    emit('next', 8)
+    emit('next', STEP_ALLERGIES)
 }
 
-const back = () => {
-    const hasAddons = (props.event.addons?.length > 0) || props.event.solidarityPayment
-    emit('back', hasAddons ? 6 : 5)
-}
+const back = () => emit('back', prevVisibleFrom(props.event, STEP_PHOTO))
 </script>
 
 <template>
@@ -27,7 +26,7 @@ const back = () => {
         <div class="btn-row">
             <button type="button" class="btn-secondary" @click="back">← Zurück</button>
             <button type="button" class="btn-primary" style="background: #059669;" @click="acceptAll">Alle akzeptieren & weiter</button>
-            <button type="button" class="btn-primary" @click="emit('next', 8)">Weiter →</button>
+            <button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
         </div>
     </div>
 </template>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepRegistrationMode.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { watch } from "vue";
+import {watch} from "vue";
+import {nextVisibleFrom, STEP_REGISTRATION} from "../composables/stepFlow.js";
 
 const props = defineProps({ formData: Object, event: Object })
 const emit = defineEmits(['next', 'back'])
@@ -17,8 +18,7 @@ watch(
 )
 
 const nextStep = () => {
-    const hasAddons = (props.event.addons?.length ?? 0) > 0
-    emit('next', hasAddons ? 6 : 7)
+    emit('next', nextVisibleFrom(props.event, STEP_REGISTRATION))
 }
 </script>
 

app/Domains/Event/Views/Partials/SignUpForm/steps/StepSummary.vue

@@ -32,8 +32,17 @@ const paymentConfirmationText = computed(() => {
     return template.replaceAll('{amount}', props.summaryAmount ?? '')
 })
 
-// Zurück führt zur Zahlungsart (9), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (8).
-const backTarget = computed(() => props.summaryAmountValue > 0 ? 9 : 8)
+// Zurück führt zur Zahlungsart (10), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (9).
+const backTarget = computed(() => props.summaryAmountValue > 0 ? 10 : 9)
+
+// Gewählte Teilnahmeoptionen für die Zusammenfassung (label statt value anzeigen).
+const selectedParticipationOptions = computed(() =>
+    (props.event.participationOptions ?? []).map(question => {
+        const value = props.formData.participationOptions[question.key]
+        const option = (question.options ?? []).find(o => o.value === value)
+        return {label: question.label, value: option?.label ?? ''}
+    }).filter(entry => entry.value !== '')
+)
 
 const canSubmit = computed(() =>
     props.formData.summary_information_correct
@@ -115,6 +124,11 @@ function eatingHabit() {
                     <td>{{ participationGroup() }}</td>
                 </tr>
 
+                <tr v-for="option in selectedParticipationOptions" :key="option.label">
+                    <td>{{ option.label }}:</td>
+                    <td>{{ option.value }}</td>
+                </tr>
+
                 <tr>
                     <td>Foto-Erlaubnis:</td>
                     <td>