<script setup>
import { watch } from "vue";

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

watch(
    () => props.formData.participationType,
    (value) => {
        if (!value) {
            props.formData.beitrag = 'standard'
            return
        }

        props.formData.beitrag = 'standard'
    }
)

const nextStep = () => {
    const hasAddons = (props.event.addons?.length ?? 0) > 0
    emit('next', hasAddons ? 6 : 7)
}
</script>

<template>
    <div>
        <h3 v-if="event.solidarityPayment">Solidarbeitrag – Teilnahmegruppe</h3>
        <h3 v-else>Ich nehme teil als ...</h3>

        <table style="width: 100%;">
            <tr
                v-for="participationType in props.event.participationTypes"
                :key="participationType.type.slug"
                style="vertical-align: top;"
            >
                <td style="width: 50px; padding-top: 6px;">
                    <input
                        :id="participationType.type.slug"
                        v-model="props.formData.participationType"
                        type="radio"
                        :value="participationType.type.slug"
                    />
                </td>
                <td style="padding-bottom: 16px;">
                    <label :for="participationType.type.slug" style="line-height: 1.5; font-weight: 600; cursor: pointer;">
                        {{ participationType.type.name }}
                    </label><br />

                    <label
                        :for="participationType.type.slug"
                        style="line-height: 1.5; padding-left: 15px; font-style: italic; color: #606060; cursor: pointer;"
                    >
                        {{ participationType.description }}
                    </label>

                    <div
                        v-if="props.formData.participationType === participationType.type.slug"
                        style="margin-top: 10px; margin-left: 15px; padding: 12px 14px; background: #f8fafc; border-left: 3px solid #2563eb; border-radius: 6px;"
                    >
                        <template
                            v-if="participationType.amount_reduced !== null || participationType.amount_solidarity !== null"
                        >
                            <div style="margin-bottom: 8px; font-size: 0.95rem; font-weight: 600; color: #374151;">
                                Beitrag auswählen
                            </div>

                            <label style="display: block; margin-bottom: 8px; cursor: pointer;">
                                <input type="radio" v-model="props.formData.beitrag" value="standard" />
                                Standardbeitrag
                                <span style="color: #606060;">
                                    ({{ participationType.amount_standard.readable }}
                                    <template v-if="props.event.payPerDay">/ Tag</template>
                                    <template v-else>Gesamt</template>)
                                </span>
                            </label>

                            <label
                                v-if="participationType.amount_reduced !== null"
                                style="display: block; margin-bottom: 8px; cursor: pointer;"
                            >
                                <input type="radio" v-model="props.formData.beitrag" value="reduced" />
                                Reduzierter Beitrag
                                <span style="color: #606060;">
                                    ({{ participationType.amount_reduced.readable }}
                                    <template v-if="props.event.payPerDay">/ Tag</template>
                                    <template v-else>Gesamt</template>)
                                </span>
                            </label>

                            <label
                                v-if="participationType.amount_solidarity !== null"
                                style="display: block; margin-bottom: 0; cursor: pointer;"
                            >
                                <input type="radio" v-model="props.formData.beitrag" value="solidarity" />
                                Solidaritätsbeitrag
                                <span style="color: #606060;">
                                    ({{ participationType.amount_solidarity.readable }}
                                    <template v-if="props.event.payPerDay">/ Tag</template>
                                    <template v-else>Gesamt</template>)
                                </span>
                            </label>
                        </template>

                        <template v-else>
                            <div style="font-size: 0.9rem; color: #606060;">
                                Standardbeitrag:
                                <strong>{{ participationType.amount_standard.readable }}</strong>
                                <template v-if="props.event.payPerDay">/ Tag</template>
                                <template v-else>Gesamt</template>
                            </div>
                        </template>
                    </div>
                </td>
            </tr>
        </table>

        <div class="btn-row">
            <button type="button" class="btn-secondary" @click="emit('back', 3)">← Zurück</button>
            <button
                type="button"
                v-if="props.formData.participationType"
                class="btn-primary"
                @click="nextStep"
            >
                Weiter →
            </button>
        </div>
    </div>
</template>

