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

<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>