<script setup>
import {nextVisibleFrom, STEP_ADDONS} from "../composables/stepFlow.js";

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

const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
</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.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.key]" style="margin-top: 4px;"/>
                    <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>
        </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="next">Weiter →</button>
        </div>
    </div>
</template>
