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

const next = () => {
    const arrival = new Date(props.formData.arrival)
    arrival.setHours(0,0,0,0);
    const departure = new Date(props.formData.departure)
    const eventStart = new Date(props.event.eventBeginInternal)
    const eventEnd = new Date(props.event.eventEndInternal)

    arrival.setHours(0,0,0,0);
    departure.setHours(0,0,0,0);
    eventStart.setHours(0,0,0,0);
    eventEnd.setHours(0,0,0,0);


    if (arrival < eventStart) {
        alert('Bitte gültige Anreise angeben innerhalb des Veranstaltungszeitraums wählen.')
        return
    }

    if (arrival > eventEnd) {
        alert('Bitte gültige Abreise angeben innerhalb des Veranstaltungszeitraums wählen.')
        return
    }

    if (departure < arrival) {
        alert('Abreise kann niht vor der Anreise liegen. Bitte korrigieren.')
        return
    }



    const hasAddons = (props.event.addons?.length > 0) || props.event.solidarityPayment
    emit('next', 5)



}

const back = () => emit('back', 3)
</script>

<template>
    <div>
        <h3>An- und Abreise</h3>
        <table class="form-table">
            <tr>
                <td>Anreise:</td>
                <td>
                    <input type="date" v-model="formData.arrival" /><br />
                    <select v-model="formData.anreise_essen" style="margin-top: 6px;">
                        <option value="1">Vor dem Abendessen</option>
                        <option value="2">Vor dem Mittagessen</option>
                        <option value="3">Vor dem Frühstück</option>
                        <option value="4">Keine Mahlzeit</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Abreise:</td>
                <td>
                    <input type="date" v-model="formData.departure" /><br />
                    <select v-model="formData.abreise_essen" style="margin-top: 6px;">
                        <option value="1">Nach dem Frühstück</option>
                        <option value="2">Nach dem Mittagessen</option>
                        <option value="3">Nach dem Abendessen</option>
                        <option value="4">Keine Mahlzeit</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="btn-row">
                    <button type="button" class="btn-secondary" @click="back">← Zurück</button>
                    <button type="button" class="btn-primary" @click="next">Weiter →</button>
                </td>
            </tr>
        </table>
    </div>
</template>
