<template>
    <form action="#" method="POST" @submit.prevent="submit" class="px-3">
        <carousel :per-page="1" :navigate-to="innerStep" :pagination-enabled="false" class="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] py-16 px-8 mx-auto">
            <slide>
                <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 v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category_id !== null"></pagination>
            </slide>

            <!-- ********************************* Haus ********************************** -->
            <slide v-if="value.category_id == 'Haus'">
                <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 v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Haus'">
                <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 v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Haus'">
                <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 v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Haus'">
                <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>
                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                <pagination v-model="innerStep" class="mt-24"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Haus'">
                <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 v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
            </slide>

            <!-- ********************************* Gewerbe ********************************** -->
            <slide v-if="value.category_id == 'Gewerbe'">
                <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 Gewerbes?</heading>
                <radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Gewerbe'">
                <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 Gewerbes?</heading>
                <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Gewerbe'">
                <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 v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Gewerbe'">
                <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>
                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                <pagination v-model="innerStep" class="mt-24"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Gewerbe'">
                <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 v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
            </slide>

            <!-- ******************************** Wohnung ******************************** -->
            <slide v-if="value.category_id == 'Wohnung'">
                <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 v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Wohnung'">
                <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 v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Wohnung'">
                <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>
                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                <pagination v-model="innerStep" class="mt-24"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Wohnung'">
                <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 v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
            </slide>

            <!-- ******************************** Grundstueck ******************************** -->
            <slide v-if="value.category_id == 'Grundstück'">
                <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 v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Grundstück'">
                <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 Grundstücks?</heading>
                <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
            </slide>
            <slide v-if="value.category_id == 'Grundstück'">
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
            </slide>

            <slide class="w-full flex-none ">
                <heading>Bitte geben Sie die Daten des Objekts ein</heading>
                <div class="grid grid-cols-2 gap-6">
                    <input type="text" v-model="value.object_address" name="object_address" placeholder="Straße & Hausnr" />
                    <input type="text" v-model="value.object_zip" name="object_zip" placeholder="PLZ" />
                    <input type="text" v-model="value.object_location" name="object_location" placeholder="Ort" />
                </div>
                <pagination v-model="innerStep" class="mt-12" :nextable="value.object_address.length > 0 && value.object_zip.length > 0 && value.object_location.length > 0"></pagination>
            </slide>

            <slide class="w-full flex-none ">
                <heading>Bitte geben Sie Ihre Daten ein</heading>
                <div class="grid grid-cols-2 gap-6">
                    <input type="text" v-model="value.firstname" name="firstname" placeholder="Vorname" />
                    <input type="text" v-model="value.lastname" name="lastname" placeholder="Nachname" />
                    <input type="text" v-model="value.email" name="email" placeholder="E-Mail-Adresse" />
                    <input type="text" v-model="value.phone" name="phone" placeholder="Telefonnummer" />
                </div>
                <v-btn href="#" class="mt-4" :disabled="value.firstname.length == 0 || value.lastname.length == 0 || value.email.length == 0 || value.phone.length == 0" type="submit">Absenden</v-btn>
            </slide>
        </carousel>
    </form>
</template>

<script>
import {Carousel, Slide} from 'vue-carousel';
import Heading from './components/Heading.vue';
import veeno from 'veeno';
import wNumb from 'wnumb';
import 'nouislider/distribute/nouislider.min.css';
import axios from 'axios';

export default {
    data: function() {
        return {
            tooltips: [wNumb({decimals: 0})],
            pipsy: {
                mode: 'range',
                density: 3,
                filter: () => 1,
                format: wNumb({
                    decimals: 0
                })
            },
            range: {min: 1600, max: 2020},
            value: {
                category_id: 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: ''
            },
            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'}
            ],
            conditions: [
                {key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'},
                {key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'},
                {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'}
            ],
            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'}
            ],
            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'}]
        };
    },
    methods: {
        setCategoryId(id) {
            this.value.category_id = id;
            this.innerStep++;
        },
        back() {
            this.innerStep--;
        },
        submit() {
            axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value);
        }
    },
    components: {
        Carousel,
        Slide,
        Heading,
        veeno
    }
};
</script>

<style scoped>
.radio-grid {
    display: grid;
    grid-gap: 1rem;
}
</style>
