Event addons bookable

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

@@ -0,0 +1,166 @@
+<script setup>
+import {ref} from "vue";
+import {toast} from "vue3-toastify";
+import {request} from "../../../../../resources/js/components/HttpClient.js";
+import AmountInput from "../../../../Views/Components/AmountInput.vue";
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    event: Object,
+})
+
+// Addon-Definition dieses Events: [ { key, title, description, price, flat } ].
+// key bleibt für bestehende Einträge erhalten (Bestandsschutz für bereits gebuchte Zusätze).
+const addons = ref((props.event.addons ?? []).map(a => ({
+    key: a.key ?? '',
+    title: a.title ?? '',
+    description: a.description ?? '',
+    price: a.price != null ? String(a.price).replace('.', ',') : '0',
+    flat: a.flat ?? false,
+})))
+
+function addAddon() {
+    addons.value.push({key: '', title: '', description: '', price: '0', flat: true})
+}
+
+function removeAddon(index) {
+    addons.value.splice(index, 1)
+}
+
+function validate() {
+    for (const addon of addons.value) {
+        if (addon.title.trim() === '') {
+            toast.error('Bitte für jeden Zusatz einen Titel angeben.')
+            return false
+        }
+    }
+
+    return true
+}
+
+async function save() {
+    if (!validate()) {
+        return
+    }
+
+    const response = await request('/api/v1/event/details/' + props.event.id + '/event-addons', {
+        method: 'POST',
+        body: {
+            addons: addons.value,
+        }
+    })
+
+    if (response.status !== 'success') {
+        toast.error(response.message ?? 'Die Zusatzoptionen konnten nicht gespeichert werden.')
+        return
+    }
+
+    toast.success('Die Zusatzoptionen wurden gespeichert')
+    emit('close')
+}
+</script>
+
+<template>
+    <div class="event-addons">
+        <h3>Zusatzoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.9rem;">
+            Buchbare Zusätze zur Veranstaltung (z. B. Parkticket, Aufnäher). Jede Position ist eine Ja/Nein-Auswahl.
+            Preis 0 wird dem Teilnehmenden als „Kostenfrei" angezeigt. Ist „Pauschale" nicht gesetzt, wird der Preis
+            mit der Anzahl der Teilnahmetage multipliziert. Ohne Zusätze wird dieser Schritt in der Anmeldung
+            übersprungen.
+        </p>
+
+        <div v-for="(addon, index) in addons" :key="index" class="addon-card">
+            <div class="addon-head">
+                <div class="addon-fields">
+                    <label class="field-label">Titel</label>
+                    <input type="text" v-model="addon.title" class="width-full" placeholder="z. B. „Parkticket“"/>
+
+                    <label class="field-label">Beschreibung (optional)</label>
+                    <input type="text" v-model="addon.description" class="width-full" placeholder="Kurze Erläuterung"/>
+
+                    <div class="addon-price-row">
+                        <span>
+                            <label class="field-label">Preis</label>
+                            <AmountInput v-model="addon.price" class="width-small"/> Euro
+                        </span>
+                        <label class="flat-label">
+                            <input type="checkbox" v-model="addon.flat"/>
+                            Pauschale (nicht pro Tag)
+                        </label>
+                    </div>
+                </div>
+                <label class="link remove-link" @click="removeAddon(index)">Entfernen</label>
+            </div>
+        </div>
+
+        <div style="margin-top: 16px;">
+            <label class="link" @click="addAddon">+ Zusatz hinzufügen</label>
+        </div>
+
+        <div style="margin-top: 24px;">
+            <input type="button" value="Speichern" @click="save"/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.addon-card {
+    margin-top: 16px;
+    padding: 14px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+}
+
+.addon-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.addon-fields {
+    flex: 1;
+}
+
+.field-label {
+    display: block;
+    font-size: 0.78rem;
+    color: #6b7280;
+    margin: 6px 0 2px;
+}
+
+.addon-fields .field-label:first-child {
+    margin-top: 0;
+}
+
+.addon-price-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 24px;
+    margin-top: 6px;
+}
+
+.flat-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.9rem;
+    color: #374151;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.width-small {
+    width: 90px;
+}
+
+.remove-link {
+    white-space: nowrap;
+    color: #ef4444;
+    font-size: 0.85rem;
+}
+</style>

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

@@ -2,6 +2,7 @@
 import {onMounted, reactive, ref} from "vue";
 import ParticipationFees from "./ParticipationFees.vue";
 import ParticipationOptions from "./ParticipationOptions.vue";
+import EventAddons from "./EventAddons.vue";
 import ParticipationSummary from "./ParticipationSummary.vue";
 import CommonSettings from "./CommonSettings.vue";
 import EventManagement from "./EventManagement.vue";
@@ -41,6 +42,10 @@ const props = defineProps({
         displayData.value = 'participationOptions';
     }
 
+async function showEventAddons() {
+    displayData.value = 'eventAddons';
+}
+
     async function showEventManagement() {
         displayData.value = 'eventManagement';
     }
@@ -114,6 +119,7 @@ const props = defineProps({
     <ParticipationFees v-if="displayData === 'participationFees'" :event="dynamicProps.event"  @close="showMain" />
     <ParticipationOptions v-else-if="displayData === 'participationOptions'" :event="dynamicProps.event"
                           @close="showMain"/>
+    <EventAddons v-else-if="displayData === 'eventAddons'" :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" />
 
@@ -194,6 +200,8 @@ const props = defineProps({
             <label style="font-size: 9pt;" class="link" @click="showEventManagement">Veranstaltungsleitung</label> &nbsp;
             <label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label> &nbsp;
             <label style="font-size: 9pt;" class="link" @click="showParticipationOptions">Teilnahmeoptionen</label>
+            &nbsp;
+            <label style="font-size: 9pt;" class="link" @click="showEventAddons">Zusatzoptionen</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/ParticipantData.vue

@@ -61,17 +61,26 @@ const form = reactive({
     amountExpected: '',
     cocStatus: '',
     participationOptions: {},
+    selectedAddons: {},
 });
 
 // Teilnahmeoptionen des Events (Definition mit Titel/Frage/Optionen).
 const participationQuestions = computed(() => staticProps.event?.participationOptions ?? []);
 
+// Zusatzoptionen (Event-Addons) des Events.
+const eventAddons = computed(() => staticProps.event?.addons ?? []);
+
 // Gewählte Antwort (Options-Label) eines Teilnehmers zu einer Frage – für die Ansicht „Titel: Antwort".
 function answerLabelFor(questionKey) {
     const answer = (props.participant?.participationOptions ?? []).find(o => o.questionKey === questionKey);
     return answer?.valueLabel ?? '—';
 }
 
+// Hat der Teilnehmer diesen Zusatz gebucht? – für die Ansicht.
+function isAddonSelected(addonKey) {
+    return (props.participant?.selectedAddons ?? []).some(a => a.addonKey === addonKey);
+}
+
 watch(
     () => props.participant,
     (participant) => {
@@ -107,6 +116,9 @@ watch(
         form.participationOptions = Object.fromEntries(
             (participant?.participationOptions ?? []).map(o => [o.questionKey, o.value])
         );
+        form.selectedAddons = Object.fromEntries(
+            (participant?.selectedAddons ?? []).map(a => [a.addonKey, true])
+        );
     },
     { immediate: true }
 );
@@ -402,25 +414,41 @@ function saveParticipant() {
             </div>
         </div>
 
-        <div class="participationData" v-if="participationQuestions.length > 0">
+        <div class="participationData" v-if="participationQuestions.length > 0 || eventAddons.length > 0">
             <div>
-                <h3>Teilnahmeoptionen</h3>
-                <table>
-                    <tr v-for="question in participationQuestions" :key="question.key">
-                        <th>{{ question.title || question.label }}</th>
-                        <td>
-                            <span v-if="!staticProps.editMode">{{ answerLabelFor(question.key) }}</span>
-                            <select v-else v-model="form.participationOptions[question.key]">
-                                <option value="">— keine —</option>
-                                <option v-for="option in question.options" :key="option.value" :value="option.value">
-                                    {{ option.label }}
-                                </option>
-                            </select>
-                        </td>
-                    </tr>
-                </table>
+                <template v-if="participationQuestions.length > 0">
+                    <h3>Teilnahmeoptionen</h3>
+                    <table>
+                        <tr v-for="question in participationQuestions" :key="question.key">
+                            <th>{{ question.title || question.label }}</th>
+                            <td>
+                                <span v-if="!staticProps.editMode">{{ answerLabelFor(question.key) }}</span>
+                                <select v-else v-model="form.participationOptions[question.key]">
+                                    <option value="">— keine —</option>
+                                    <option v-for="option in question.options" :key="option.value"
+                                            :value="option.value">
+                                        {{ option.label }}
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                    </table>
+                </template>
+            </div>
+            <div>
+                <template v-if="eventAddons.length > 0">
+                    <h3>Zusatzoptionen</h3>
+                    <table>
+                        <tr v-for="addon in eventAddons" :key="addon.key">
+                            <th>{{ addon.title }}</th>
+                            <td>
+                                <span v-if="!staticProps.editMode">{{ isAddonSelected(addon.key) ? 'Ja' : '—' }}</span>
+                                <input v-else type="checkbox" v-model="form.selectedAddons[addon.key]"/>
+                            </td>
+                        </tr>
+                    </table>
+                </template>
             </div>
-            <div></div>
         </div>
     </div>
 

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

@@ -107,6 +107,7 @@ const steps = [
                     v-if="currentStep === 11"
                     :formData="formData"
                     :event="event"
+                    :selectedAddons="selectedAddons"
                     :summaryAmount="summaryAmount"
                     :summaryAmountValue="summaryAmountValue"
                     :summaryLoading="summaryLoading"

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

@@ -29,13 +29,21 @@ const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
         <!-- Addons -->
         <div v-if="event.addons?.length > 0">
             <h3>Zusatzoptionen</h3>
-            <div v-for="addon in event.addons" :key="addon.id" style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
+            <div v-for="addon in event.addons" :key="addon.key"
+                 style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
                 <label style="display: flex; gap: 12px; cursor: pointer;">
-                    <input type="checkbox" v-model="selectedAddons[addon.id]" style="margin-top: 4px;" />
+                    <input type="checkbox" v-model="selectedAddons[addon.key]" style="margin-top: 4px;"/>
                     <span>
-                        <strong>{{ addon.name }}</strong>
-                        <span style="display: block; color: #6b7280; font-size: 0.875rem;">Betrag: {{ addon.amount }}</span>
-                        <span style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{ addon.description }}</span>
+                        <strong>{{ addon.title }}</strong>
+                        <span style="display: block; color: #6b7280; font-size: 0.875rem;">
+                            <template v-if="addon.free">Kostenfrei</template>
+                            <template v-else>{{ addon.priceReadable }}<template
+                                v-if="!addon.flat"> / Tag</template></template>
+                        </span>
+                        <span v-if="addon.description"
+                              style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{
+                                addon.description
+                            }}</span>
                     </span>
                 </label>
             </div>

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

@@ -7,6 +7,7 @@ const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'
 const props = defineProps({
     formData: Object,
     event: Object,
+    selectedAddons: {type: Object, default: () => ({})},
     summaryAmount: String,
     summaryAmountValue: {type: Number, default: 0},
     summaryLoading: Boolean,
@@ -35,6 +36,16 @@ const paymentConfirmationText = computed(() => {
 // 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 Zusätze (Event-Addons) für die Zusammenfassung mit Preisanzeige.
+const selectedAddonList = computed(() =>
+    (props.event.addons ?? [])
+        .filter(addon => props.selectedAddons[addon.key])
+        .map(addon => ({
+            title: addon.title,
+            price: addon.free ? 'Kostenfrei' : (addon.priceReadable + (addon.flat ? '' : ' / Tag')),
+        }))
+)
+
 // Gewählte Teilnahmeoptionen für die Zusammenfassung (label statt value anzeigen).
 const selectedParticipationOptions = computed(() =>
     (props.event.participationOptions ?? []).map(question => {
@@ -129,6 +140,11 @@ function eatingHabit() {
                     <td>{{ option.value }}</td>
                 </tr>
 
+                <tr v-for="addon in selectedAddonList" :key="addon.title">
+                    <td>{{ addon.title }}:</td>
+                    <td>{{ addon.price }}</td>
+                </tr>
+
                 <tr>
                     <td>Foto-Erlaubnis:</td>
                     <td>