<script setup>
const props = defineProps({ formData: Object, event: Object, selectedAddons: Object })
const emit = defineEmits(['next', 'back'])
</script>

<template>
    <div>
        <!-- Solidarbeitrag-Auswahl -->
        <div v-if="event.solidarityPayment" style="margin-bottom: 20px;">
            <h3>Beitrag</h3>
            <label v-if="event.participationFee_1?.active" style="display: block; margin-bottom: 8px;">
                <input type="radio" v-model="formData.beitrag" value="reduced" />
                {{ event.participationFee_1.name }} ({{ event.participationFee_1.amount }} €)
            </label>
            <label style="display: block; margin-bottom: 8px;">
                <input type="radio" v-model="formData.beitrag" value="regular" />
                {{ event.participationFee_2?.name ?? 'Regulärer Beitrag' }} ({{ event.participationFee_2?.amount }} €)
            </label>
            <label v-if="event.participationFee_3?.active" style="display: block; margin-bottom: 8px;">
                <input type="radio" v-model="formData.beitrag" value="social" />
                {{ event.participationFee_3.name }} ({{ event.participationFee_3.amount }} €)
            </label>
        </div>

        <!-- 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;">
                <label style="display: flex; gap: 12px; cursor: pointer;">
                    <input type="checkbox" v-model="selectedAddons[addon.id]" 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>
                    </span>
                </label>
            </div>
        </div>

        <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>
        </div>
    </div>
</template>
