<template>
    <form action="#" method="POST" class="px-3 transition-all duration-300 mx-auto max-w-[960px]" @submit.prevent="submit">
        <carousel ref="carousel" v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false">
            <slide :key="0" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
                <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
                <radio-grid id="category" :model-value="value.category" :options="categories" @update:modelValue="onUpdateCategory"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null"> </pagination>
            </slide>

            <!-- ********************************* Haus ********************************** -->
            <slide v-if="value.category == 'Haus'" :key="1" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
                <radio-grid id="house_plot_area" v-model="value.plot_area" :options="plotAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Haus'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
                <radio-grid id="house_living_area" v-model="value.living_area" :options="livingAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Haus'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
                <radio-grid id="house_number_of_rooms" v-model="value.number_of_floors" :options="numbersOfRooms"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Haus'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
                <v-slider v-model="value.construction_year" :min="1900" :max="maxYear"></v-slider>
                <pagination v-model="innerStep" class="mt-24"></pagination>
            </slide>
            <slide v-if="value.category == 'Haus'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
                <radio-grid id="house_condition" v-model="value.condition" :options="conditions"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
            </slide>

            <!-- ********************************* Gewerbe ********************************** -->
            <slide v-if="value.category == 'Gewerbe'" :key="1" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                <heading>Wie ist die gesamte<br /><span class="text-primary">Gewerbefläche</span> des Gewerbes?</heading>
                <radio-grid id="gewerbe_living_area" v-model="value.living_area" :options="gewerbeLivingAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Gewerbe'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes? </heading>
                <radio-grid id="gewerbe_plot_area" v-model="value.plot_area" :options="plotPlotAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Gewerbe'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Gewerbe?</heading>
                <radio-grid id="gewerbe_number_of_rooms" v-model="value.number_of_floors" :options="apartmentNumbersOfRooms"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Gewerbe'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                <heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
                <v-slider v-model="value.construction_year" :min="1900" :max="maxYear"></v-slider>
                <pagination v-model="innerStep" class="mt-24"></pagination>
            </slide>
            <slide v-if="value.category == 'Gewerbe'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
                <radio-grid id="gewerbe_condition" v-model="value.condition" :options="conditions"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
            </slide>

            <!-- ******************************** Wohnung ******************************** -->
            <slide v-if="value.category == 'Wohnung'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
                <radio-grid id="apartment_living_area" v-model="value.living_area" :options="apartmentLivingAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Wohnung'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
                <radio-grid id="apartment_number_of_rooms" v-model="value.number_of_floors" :options="apartmentNumbersOfRooms"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Wohnung'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
                <v-slider v-model="value.construction_year" :min="1900" :max="maxYear"></v-slider>
                <pagination v-model="innerStep" class="mt-24"></pagination>
            </slide>
            <slide v-if="value.category == 'Wohnung'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
                <radio-grid id="apartment_condition" v-model="value.condition" :options="conditions"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
            </slide>

            <!-- ******************************** Grundstueck ******************************** -->
            <slide v-if="value.category == 'Grundstück'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                <heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
                <radio-grid id="plot_plot_area" v-model="value.plot_area" :options="plotPlotAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
            </slide>
            <slide v-if="value.category == 'Grundstück'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
                <radio-grid id="plot_condition" v-model="value.condition" :options="conditions"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
            </slide>

            <slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
                <heading>Bitte geben Sie Ihre <span class="text-primary">Daten</span> ein</heading>
                <div class="grid grid-cols-2 gap-4">
                    <v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
                    <v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
                    <v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
                    <v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
                    <v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
                    <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
                    <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
                    <v-checkbox
                        id="datenschutz"
                        v-model="value.datenschutz"
                        class="col-span-2"
                        name="datenschutz"
                        label='Ich habe die <a href="/datenschutzerklaerung" class="text-primary" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>'
                    />
                </div>
                <pagination
                    v-model="innerStep"
                    class="mt-6"
                    :nextable="
                        value.object_address.length > 0 &&
                        value.object_zip.length > 0 &&
                        value.object_location.length > 0 &&
                        value.firstname.length !== 0 &&
                        value.lastname.length !== 0 &&
                        value.email.length !== 0 &&
                        value.phone.length !== 0 &&
                        value.datenschutz === true
                    "
                    submit
                ></pagination>
            </slide>

            <slide v-if="value.category" :key="slideCount[value.category] + 1">
                <div class="w-full h-full p-3 flex flex-col items-center justify-center">
                    <div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
                    <div class="text-sm mt-4 md:text-lg">
                        In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei Ihnen melden.
                    </div>
                </div>
            </slide>
        </carousel>
    </form>
</template>

<script>
import {nextTick} from 'vue';
import Heading from './components/Heading.vue';
import VSlider from './components/VSlider.vue';
import axios from 'axios';
import dayjs from 'dayjs';

export default {
    components: {
        Heading,
        VSlider,
    },
    data: function () {
        return {
            slideCount: {
                Haus: 6,
                Gewerbe: 6,
                Wohnung: 6,
                Grundstück: 3,
            },
            value: {
                category: null,
                living_area: null,
                plot_area: null,
                construction_year: null,
                number_of_floors: null,
                condition: null,
                object_address: '',
                object_zip: '',
                object_location: '',
                firstname: '',
                lastname: '',
                phone: '',
                email: '',
                source: window.location.host,
                datenschutz: false,
            },
            innerStep: 0,
            categories: [
                {key: 'Haus', label: 'Haus', icon: 'category-house'},
                {key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'},
                {key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment'},
                {key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business'},
            ],
            kinds: {
                house: [
                    {
                        kind: 'singleFamily',
                        label: 'Einfamilienhaus',
                        icon: 'kind-house-einfamilie',
                    },
                    {
                        kind: 'multiFamily',
                        label: 'Mehrfamilienhaus',
                        icon: 'kind-house-mehrfamilie',
                    },
                    {
                        kind: 'rowHouse',
                        label: 'Reihenhaus',
                        icon: 'kind-house-reihenhaus',
                    },
                    {
                        kind: 'semiDetached',
                        label: 'Doppelhaushälfte',
                        icon: 'kind-house-doppelhaus',
                    },
                ],
            },
            livingAreas: [
                {key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm'},
                {key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
                {key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg'},
                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
            ],
            apartmentLivingAreas: [
                {key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm'},
                {key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md'},
                {key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg'},
                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
            ],
            gewerbeLivingAreas: [
                {key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm'},
                {key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md'},
                {key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg'},
                {key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg'},
                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
            ],
            conditions: [
                {key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'},
                {key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'},
                {key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg'},
                {key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg'},
                {key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg'},
            ],
            plotAreas: [
                {key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm'},
                {key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md'},
                {key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
            ],
            plotPlotAreas: [
                {key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm'},
                {key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md'},
                {key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'plot-area-lg'},
                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
            ],
            numbersOfFloors: [
                {key: '1', label: '1', icon: 'plot-area-sm'},
                {key: '2', label: '2', icon: 'plot-area-md'},
                {key: '3', label: '3', icon: 'plot-area-lg'},
                {key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg'},
            ],
            numbersOfRooms: [
                {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
                {key: '3-5', label: '3-5', icon: 'plot-area-md'},
                {key: '5-8', label: '5-8', icon: 'plot-area-lg'},
                {key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg'},
            ],
            apartmentNumbersOfRooms: [
                {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
                {key: '3-5', label: '3-5', icon: 'plot-area-md'},
                {key: '6-8', label: '6-8', icon: 'plot-area-lg'},
                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'},
            ],
            wohnflaechen: [{label: 'bis 50 m²'}, {label: '51 - 150 m²'}, {label: 'mehr als 151 m²'}, {label: 'nicht bekannt'}],
            etagen: [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4 oder mehr'}],
            sellables: [{label: '3 Monate'}, {label: '6 Monate'}, {label: '12 Monate oder später'}],
            furnishings: [{label: 'einfach'}, {label: 'gepflegt'}, {label: 'sehr gut'}, {label: 'luxuriös'}],
        };
    },
    computed: {
        maxYear() {
            return dayjs().add(1, 'year').get('year');
        },
    },
    methods: {
        onUpdateCategory(categoryId) {
            this.value.category = categoryId;
            nextTick(() => {
                this.$refs.carousel.updateSlideWidth();
            });
        },
        back() {
            this.innerStep--;
        },
        async submit() {
            await axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value);

            this.innerStep++;
        },
    },
};
</script>
