<template>
    <div class="slider" ref="stepper">
        <div class="px-3 w-full">
            <div v-show="innerStep === 0">
                <h2 class="text-xl font-bold text-primary text-center">Welche Immobilie möchten Sie verkaufen?</h2>
                <div class="radio-grid grid-cols-4">
                    <label :key="index" v-for="category, index in categories" class="option-box">
                        <input class="invisible absolute left-0 top-0" v-model="value.category_id" :value="index" @change="step++" type="radio" name="category">
                        <span>
                            <span v-html="svg('home')"></span>
                            <span v-text="category.label"></span>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="px-3 w-full">
            <div v-show="innerStep === 1">
                <h2 class="text-xl font-bold text-primary text-center">Bitte wählen Sie die Art des Hauses</h2>
                <div v-if="value.category_id !== null" class="radio-grid grid-cols-2">
                    <label :key="index" v-for="kind, index in categories[value.category_id].kinds" class="option-box">
                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.kind_id">
                        <span>
                            <span v-html="svg('home')"></span>
                            <span v-text="kind.label"></span>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="px-3 w-full">
            <div v-show="innerStep === 2">
                <h2 class="text-xl font-bold text-primary text-center">Wählen Sie die Grundstücksfläche</h2>
                <div class="radio-grid grid-cols-4">
                    <label :key="index" v-for="gf, index in grundstuecksflaechen" class="option-box">
                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.grundstuecksflaeche">
                        <span>
                            <span v-html="svg('home')"></span>
                            <span v-text="gf.label"></span>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="px-3 w-full">
            <div v-show="innerStep === 3">
                <h2 class="text-xl font-bold text-primary text-center">Wählen Sie die Wohnfläche</h2>
                <div class="radio-grid grid-cols-4">
                    <label :key="index" v-for="gf, index in wohnflaechen" class="option-box">
                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.wohnflaeche">
                        <span>
                            <span v-html="svg('home')"></span>
                            <span v-text="gf.label"></span>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="px-3 w-full">
            <div v-show="innerStep === 4">
                <h2 class="text-xl font-bold text-primary text-center">Wie viele Etagen hat das Haus?</h2>
                <div class="radio-grid grid-cols-4">
                    <label :key="index" v-for="etage, index in etagen" class="option-box">
                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.etagen">
                        <span>
                            <span v-html="svg('home')"></span>
                            <span v-text="etage.label"></span>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="px-3 w-full">
            <div v-show="innerStep === 5">
                <h2 class="text-xl font-bold text-primary text-center">Wie viele Zimmer hat das Haus</h2>
                <div class="flex flex-col">
                    <input type="range" min="1" max="10" v-model="value.rooms">
                    <input type="text" class="mt-10" v-model="value.rooms" name="rooms">
                    <a href="#" @click.prevent="step++">Weiter</a>
                </div>
            </div>
        </div>
        <div class="px-3 w-full">
            <div v-show="innerStep === 6">
                <h2 class="text-xl font-bold text-primary text-center">Wann wurde das Haus gebaut?</h2>
                <div class="flex flex-col">
                    <input type="range" min="1900" max="2021" v-model="value.constructedAt">
                    <input type="text" class="mt-10" v-model="value.constructedAt" name="constructed_at">
                    <a href="#" @click.prevent="step++">Weiter</a>
                </div>
            </div>
        </div>
        <div class="px-3 w-full">
            <div v-show="innerStep === 7">
                <h2 class="text-xl font-bold text-primary text-center">Bitte geben Sie ihre Daten ein</h2>
                <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.address" name="address" placeholder="Adresse">
                    <input type="text" v-model="value.plz" name="plz" placeholder="PLZ">
                    <input type="text" v-model="value.location" name="location" placeholder="Ort">
                    <input type="text" v-model="value.phone" name="phone" placeholder="Telefonnummer">
                    <input type="text" v-model="value.email" name="email" placeholder="E-Mail-Adresse">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            value: {
                category_id: null,
                kind_id: null,
                grundstuecksflaeche: null,
                wohnflaeche: null,
                rooms: 1,
                constructedAt: 1950,
                firstname: '',
                lastname: '',
                address: '',
                zip: '',
                location: '',
                phone: '',
                email: '',
                etagen: null,
            },
            innerStep: 0,
            slideCount: 8,
            categories: [
                { key: 'house', label: 'Haus', kinds: [
                    { label: 'Einfamilienhaus' },
                    { label: 'Mehrfamilienhaus' },
                    { label: 'Reihenhaus' },
                    { label: 'Doppelhaushälfte' },
                ] },
                { key: 'area', label: 'Grundstück', kinds: [] },
                { key: 'apartment', label: 'Wohnung', kinds: [] },
                { key: 'gewerbe', label: 'Gewerbe', kinds: [] },
            ],
            grundstuecksflaechen: [
                { label: 'bis 300 m²' },
                { label: 'bis 301 - 1000 m²' },
                { label: 'über 1000 m²' },
                { label: 'weiß nicht' },
            ],
            wohnflaechen: [
                { label: 'bis 100 m²' },
                { label: '101 - 200 m²' },
                { label: 'über 200 m²' },
                { label: 'weiß nicht' },
            ],
            etagen: [
                { label: '1' },
                { label: '2' },
                { label: '3' },
                { label: '4 oder mehr' },
            ]
        };
    },
    computed: {
        step: {
            set(index) {
                var _self = this;
                this.innerStep = index;

                this.$nextTick(function() {
                    _self.$refs.stepper.scrollLeft = _self.$refs.stepper.scrollWidth / _self.slideCount * index;
                });
            },
            get() {
                return this.innerStep;
            }
        },
    },
    mounted() {
        this.$refs.stepper.scrollLeft = this.$refs.stepper.scrollWidth / this.slideCount * this.innerStep;
    }
};
</script>

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