<template>
    <div class="flex gap-8 scroll-smooth snap-mandatory overflow-auto snap-x max-w-[1260px] py-16 px-8 mx-auto" ref="stepper">
        <div class="w-full flex-none snap-always snap-center">
            <div>
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
                <h2 class="text-4xl font-bold text-gray-700 text-center mt-2">
                    Welche <span class="text-primary">Immobilie</span><br>möchten Sie verkaufen?
                </h2>
                <radio-grid v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
                <pagination v-model="innerStep" @next="step++" @prev="step--" class="mt-5"></pagination>
            </div>
        </div>
        <div class="w-full flex-none snap-always snap-center">
            <div>
                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                <h2 class="text-4xl font-bold text-gray-700 text-center mt-2">
                    Bitte wählen Sie<br>die <span class="text-primary">Art</span> des Hauses
                </h2>
                <radio-grid v-model="value.kind_id" class="mt-8" :options="kinds[value.category_id]"></radio-grid>
                <pagination v-model="innerStep" @next="step++" @prev="step--" class="mt-5"></pagination>
            </div>
        </div>
        <!--
        <div class="w-full flex-none snap-always snap-center">
            <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="w-full flex-none snap-always snap-center">
            <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="w-full flex-none snap-always snap-center">
            <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="w-full flex-none snap-always snap-center">
            <div v-show="innerStep === 5">
                <h2 class="text-xl font-bold text-primary text-center">Wie ist die Ausstattung des Hauses</h2>
                <div class="radio-grid grid-cols-4">
                    <label :key="index" v-for="furnishing, index in furnishings" class="option-box">
                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="furnishing" :value="index" v-model="value.furnishing">
                        <span>
                            <span v-html="svg('home')"></span>
                            <span v-text="furnishing.label"></span>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="w-full flex-none snap-always snap-center">
            <div v-show="innerStep === 6">
                <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="w-full flex-none snap-always snap-center">
            <div v-show="innerStep === 7">
                <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="1880" 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="w-full flex-none snap-always snap-center">
            <div v-show="innerStep === 8">
                <h2 class="text-xl font-bold text-primary text-center">Wann wollen Sie die Immobilie verkaufen?</h2>
                <div class="radio-grid grid-cols-3">
                    <label :key="index" v-for="sellable, index in sellables" class="option-box">
                        <input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="sellable" :value="index" v-model="value.sellable">
                        <span>
                            <span v-html="svg('home')"></span>
                            <span v-text="sellable.label"></span>
                        </span>
                    </label>
                </div>
            </div>
        </div>
        <div class="w-full flex-none snap-always snap-center">
            <div v-show="innerStep === 9">
                <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>
                <h2 class="text-xl font-bold text-primary text-center">Daten des Objekts</h2>
                <div class="grid grid-cols-2 gap-6">
                    <input type="text" v-model="value.property_plz" name="property_plz" placeholder="PLZ der Immobilie">
                </div>
            </div>
        </div>
        -->
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            value: {
                category_id: 'house',
                kind_id: null,
                grundstuecksflaeche: null,
                wohnflaeche: null,
                rooms: 1,
                constructedAt: 1950,
                firstname: '',
                lastname: '',
                address: '',
                zip: '',
                location: '',
                phone: '',
                email: '',
                etagen: null,
                property_plz: '',
                sellable: null,
                furnishing: null,
            },
            innerStep: 0,
            slideCount: 2,
            categories: [
                {key: 'house', label: 'Haus', 'icon': 'category-house'},
                {key: 'area', label: 'Grundstück', icon: 'category-plot'},
                {key: 'apartment', 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' },
                ]
            },
            grundstuecksflaechen: [
                { label: 'bis 200 m²' },
                { label: 'bis 201 - 800 m²' },
                { label: 'mehr als 800 m²' },
                { label: 'nicht bekannt' },
            ],
            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: {
        step: {
            set(index) {
                console.log(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>
