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

<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 ?? '',
    title: q.title ?? '',
    label: q.label ?? '',
    options: (q.options ?? []).map(o => ({value: o.value ?? '', label: o.label ?? ''})),
})))

function addQuestion() {
    questions.value.push({key: '', title: '', 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.title.trim() === '') {
            toast.error('Bitte für jede Frage einen Titel 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">
                <div class="question-fields">
                    <label class="field-label">Titel (Überschrift / Feldbeschriftung)</label>
                    <input
                        type="text"
                        v-model="question.title"
                        class="width-full"
                        placeholder="Titel, z. B. „Kurs“"
                    />

                    <label class="field-label">Frage / Erklärtext (optional)</label>
                    <input
                        type="text"
                        v-model="question.label"
                        class="width-full"
                        placeholder="z. B. „Welchen Kurs möchtest du belegen?“"
                    />
                </div>
                <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: flex-start;
    gap: 12px;
}

.question-fields {
    flex: 1;
}

.field-label {
    display: block;
    font-size: 0.78rem;
    color: #6b7280;
    margin: 6px 0 2px;
}

.question-fields .field-label:first-child {
    margin-top: 0;
}

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