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

<script setup>
import {format, parseISO} from "date-fns";

const props = defineProps({
    formData: Object,
    event: Object,
    summaryAmount: String,
    summaryLoading: Boolean,
    submitting: Boolean,
})
const emit = defineEmits(['back', 'submit'])

function formatDate(dateString) {
    if (!dateString) return ''
    return format(parseISO(dateString), 'dd.MM.yyyy')
}

function participationGroup() {
    if (props.formData.participationType === 'team') {
        return 'Kernteam';
    }

    if (props.formData.participationType === 'participant') {
        return 'Teilnehmende';
    }

    if (props.formData.participationType === 'volunteer') {
        return 'Unterstützende';
    }

    return 'Sonstige';
}

function eatingHabit() {
    if (props.formData.eatingHabit === 'EATING_HABIT_VEGAN') {
        return 'Vegan';
    }

    if (props.formData.eatingHabit === 'EATING_HABIT_VEGETARIAN') {
        return 'Vegetarisch';
    }

    return 'Omnivor';
}

</script>

<template>
    <div>
        <h3>Zusammenfassung</h3>

        <div v-if="summaryLoading" style="color: #6b7280; padding: 20px 0;">Wird geladen…</div>
        <div v-else>
            <table class="form-table" style="margin-bottom: 20px;">
                <tr>
                    <td>Dein Name:</td>
                    <td>{{props.formData.vorname}} {{props.formData.vorname}}</td>
                </tr>

                <tr>
                    <td>Deine E-Mail:</td>
                    <td>{{props.formData.email_1}}</td>
                </tr>

                <tr v-if="props.formData.ansprechpartner !== ''">
                    <td>Name deiner Kontaktperson:</td>
                    <td>{{props.formData.ansprechpartner}}</td>
                </tr>

                <tr v-if="props.formData.email_2 !== ''">
                    <td>E-Mail-Adresse deiner Kontaktperson:</td>
                    <td>{{props.formData.email_2}}</td>
                </tr>

                <tr v-if="props.formData.telefon_2 !== ''">
                    <td>Telefonnummer deiner Kontaktperson:</td>
                    <td>{{props.formData.telefon_2}}</td>
                </tr>

                <tr>
                    <td>Teilnahmegruppe:</td>
                    <td>{{ participationGroup() }}</td>
                </tr>

                <tr>
                    <td>Foto-Erlaubnis:</td>
                    <td>
                        <strong>Social Media:</strong> {{props.formData.foto.socialmedia ? 'Ja' : 'Nein'}},
                        <strong>Printmedien:</strong> {{props.formData.foto.print ? 'Ja' : 'Nein'}},
                        <strong>Webseite:</strong> {{props.formData.foto.webseite ? 'Ja' : 'Nein'}},
                        <strong>Partnerorganisationen:</strong> {{props.formData.foto.partner ? 'Ja' : 'Nein'}},
                        <strong>Interne Zwecke:</strong> {{props.formData.foto.intern ? 'Ja' : 'Nein'}}


                    </td>
                </tr>

                <tr>
                    <td>Allergien:</td>
                    <td>{{props.formData.allergien}}</td>
                </tr>

                <tr>
                    <td>Lebensmittelunverträglichkeiten:</td>
                    <td>{{props.formData.intolerances}}</td>
                </tr>

                <tr>
                    <td>Ernährungsweise:</td>
                    <td>{{eatingHabit()}}</td>
                </tr>


                <tr><td>Veranstaltung:</td><td><strong>{{ event.name }}</strong></td></tr>
                <tr><td>Anreise:</td><td>{{ formatDate(formData.arrival) }}</td></tr>
                <tr><td>Abreise:</td><td>{{ formatDate(formData.departure) }}</td></tr>
            </table>

            <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.summary_information_correct" />
                    Ich bestätige, dass alle Angaben korrekt sind.
                </label>
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.summary_accept_terms" />
                    Ich akzeptiere die Teilnahmebedingungen.
                </label>
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.legal_accepted" />
                    Ich stimme der Datenschutzerklärung zu.
                </label>
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.payment" />
                    Ich bestätige, den Betrag von <strong>{{ summaryAmount }}</strong> zu überweisen.
                </label>
            </div>

            <div class="btn-row">
                <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
                <button
                    type="submit"
                    class="btn-primary"
                    :disabled="!formData.summary_information_correct || !formData.summary_accept_terms || !formData.legal_accepted || !formData.payment || submitting"
                    style="background: #059669;"
                >
                    {{ submitting ? 'Wird gesendet…' : 'Jetzt anmelden ✓' }}
                </button>
            </div>
        </div>
    </div>
</template>