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

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

const errors = reactive({
    vorname: '',
    nachname: '',
    geburtsdatum: '',
    localGroup: '',
    address1: '',
    plz: '',
    ort: '',
    telefon_1: '',
    email_1: '',
})

const next = () => {
    errors.vorname = ''
    errors.nachname = ''
    errors.geburtsdatum = ''
    errors.localGroup = ''
    errors.address1 = ''
    errors.plz = ''
    errors.ort = ''
    errors.telefon_1 = ''
    errors.email_1 = ''

    let hasError = false

    if (!props.formData.vorname) {
        errors.vorname = 'Bitte den Vornamen angeben.'
        hasError = true
    }

    if (!props.formData.nachname) {
        errors.nachname = 'Bitte den Nachnamen angeben.'
        hasError = true
    }

    if (!props.formData.geburtsdatum) {
        errors.geburtsdatum = 'Bitte das Geburtsdatum angeben.'
        hasError = true
    }

    if (props.formData.localGroup === '-1') {
        errors.localGroup = 'Bitte den Stamm auswählen.'
        hasError = true
    }

    if (!props.formData.address1) {
        errors.address1 = 'Bitte die Adresse angeben.'
        hasError = true
    }

    if (!props.formData.plz) {
        errors.plz = 'Bitte die Postleitzahl angeben.'
        hasError = true
    }

    if (!props.formData.ort) {
        errors.ort = 'Bitte den Ort angeben.'
        hasError = true
    }

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

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

    if (hasError) {
        return
    }
    emit('next', 4)
}
</script>

<template>
    <div>
        <h3>Persönliche Daten</h3>
        <table class="form-table">
            <tr><td>Vorname:</td><td><input type="text" v-model="props.formData.vorname" /><ErrorText :message="errors.vorname"/></td></tr>
            <tr><td>Nachname:</td><td><input type="text" v-model="props.formData.nachname" /><ErrorText :message="errors.nachname"/></td></tr>
            <tr><td>Pfadiname:</td><td><input type="text" v-model="props.formData.pfadiname" /></td></tr>
            <tr>
                <td>Stamm:</td>
                <td>
                    <select v-model="props.formData.localGroup">
                        <option value="-1">Bitte wählen</option>
                        <option v-for="lg in localGroups" :key="lg.id" :value="lg.id">{{ lg.name }}</option>
                    </select>
                    <ErrorText :message="errors.localGroup" />
                </td>
            </tr>
            <tr><td>Geburtsdatum:</td><td><input type="date" v-model="props.formData.geburtsdatum" /><ErrorText :message="errors.geburtsdatum" /></td></tr>
            <tr>
                <td>Adresse:</td>
                <td>
                    <input type="text" v-model="props.formData.address1" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="text" v-model="props.formData.address2" />
                    <ErrorText :message="errors.address1" />
                </td>
            </tr>
            <tr>
                <td>PLZ, Ort:</td>
                <td>
                    <div class="plz-ort-row">
                        <input maxlength="5" type="text" v-model="props.formData.plz" class="plz-input" placeholder="PLZ" />
                        <input type="text" v-model="props.formData.ort" class="ort-input" placeholder="Ort" />
                    </div>
                    <ErrorText :message="errors.plz" />
                    <ErrorText :message="errors.ort" />
                </td>
            </tr>
            <tr><td>Telefon:</td><td><input type="text" v-model="props.formData.telefon_1" /><ErrorText :message="errors.telefon_1" /></td></tr>
            <tr><td>E-Mail:</td><td><input type="text" v-model="props.formData.email_1" /><ErrorText :message="errors.email_1" /></td></tr>
            <tr>
                <td colspan="2" class="btn-row">
                    <button type="button" class="btn-primary" @click="next">Weiter →</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<style scoped>
.plz-ort-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.plz-input {
    flex: 0 0 100px;
    width: 100px;
}

.ort-input {
    flex: 1;
    min-width: 0;
}

@media (max-width: 639px) {
    .plz-input {
        flex: 0 0 80px;
        width: 80px;
    }
}
</style>
