<script setup>
import ErrorText from "../../../../../../Views/Components/ErrorText.vue";
import {reactive} from "vue";

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

const errors = reactive({
    ansprechpartner: '',
    telefon_2: '',
    email_2: '',
    badeerlaubnis: '',
    first_aid: '',
})

const next = () => {
    errors.ansprechpartner = ''
    errors.telefon_2 = ''
    errors.email_2 = ''
    errors.badeerlaubnis = ''
    errors.first_aid = ''

    let hasError = false

    if (!props.formData.ansprechpartner) {
        errors.ansprechpartner = 'Bitte eine Kontaktperson angeben.'
        hasError = true
    }

    if (props.event.siblingReduction && props.formData.sibling === '-1') {
        errors.sibling = 'Bitte eine Entscheidung treffen.'
    }


    if (!props.formData.telefon_2) {
        errors.telefon_2 = 'Bitte eine Telefonnummer angeben.'
        hasError = true
    }

    if (!props.formData.email_2) {
        errors.email_2 = 'Bitte eine E-Mail-Adresse angeben.'
        hasError = true
    }

    if (props.formData.badeerlaubnis === '-1') {
        errors.badeerlaubnis = 'Bitte triff eine Entscheidung. Bist du dir unsicher, kontaktiere bitte die Aktionsleitung'
        hasError = true
    }

    if (props.formData.first_aid === '-1') {
        errors.first_aid = 'Bitte triff eine Entscheidung. Bist du dir unsicher, kontaktiere bitte die Aktionsleitung.'
        hasError = true
    }

    if (hasError) {
        return
    }

    emit('next', 3)
}
</script>

<template>
    <div>
        <h3>Kontaktperson</h3>
        <table class="form-table">
            <tr>
                <td>Name (Nachname, Vorname):</td>
                <td>
                    <input type="text" v-model="formData.ansprechpartner" />
                    <ErrorText :message="errors.ansprechpartner" />
                </td>

            </tr>
            <tr>
                <td>Telefon:</td>
                <td>
                    <input type="text" v-model="formData.telefon_2" />
                    <ErrorText :message="errors.telefon_2" />
                </td>
            </tr>
            <tr>
                <td>E-Mail:</td>
                <td>
                    <input type="text" v-model="formData.email_2" />
                    <ErrorText :message="errors.email_2" />
                </td>
            </tr>
            <tr>
                <td>Badeerlaubnis:</td>
                <td>
                    <select v-model="formData.badeerlaubnis">
                        <option value="-1">Bitte wählen</option>

                        <option
                            v-for="swimmingPermission in props.event.swimmingPermissions"
                            :value="swimmingPermission.slug">{{swimmingPermission.name}}</option>
                    </select>
                    <ErrorText :message="errors.badeerlaubnis" />
                </td>
            </tr>
            <tr>
                <td>Erweiterte Erste Hilfe erlaubt:*</td>
                <td>
                    <select v-model="formData.first_aid">
                        <option value="-1">Bitte wählen</option>

                        <option
                            v-for="firstAidPermission in props.event.firstAidPermissions"
                            :value="firstAidPermission.slug">{{firstAidPermission.name}}</option>
                    </select><br />
                    <span style="font-size: 0.8rem; color: #6b7280;">
                        Nicht dringend-notwendige Erste-Hilfe-Maßnahmen, beinhaltet das Entfernen von Zecken und Splittern sowie das Kleben von Pflastern.
                    </span>
                    <ErrorText :message="errors.first_aid" />
                </td>
            </tr>
            <tr v-if="event.siblingReduction">
                <td>Ist bereits ein vollzahlendes Geschwisterkind für die Veranstaltung angemeldet:*</td>
                <td>
                    <select v-model="formData.sibling">
                        <option value="-1">Bitte wählen</option>
                        <option value="true">Ja</option>
                        <option value="false">Nein</option>
                    </select><br />
                    <span style="font-size: 0.8rem; color: #6b7280;">
                        Ist bereits ein vollzahlendes Geschwisterkind angemeldet, reduziert sich der Teilnahmebeitrag um 50%. Der Preisnachlass wird am Ende der Anmeldung automatisch abgezogen.
                    </span>
                    <ErrorText :message="errors.sibling" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="btn-row">
                    <button type="button" class="btn-primary" @click="next">Weiter →</button>
                </td>
            </tr>
        </table>
    </div>
</template>
