<template>
    <div class="col-span-6 sm:col-span-4">
        <jet-label for="brand" value="Marke" />
        <multiselect v-model="brandSelection" @SearchChange="updateBrandSearch" @select="updateBrand" label="name" track-by="id" :options="brands" class="mt-1 block w-full" placeholder="Marke auswählen">
            <template v-slot:noResult>
                <span @click="addBrand">
                    <b>{{ brandSearch }}</b> als neue Marke speichern?
                </span>
            </template>
        </multiselect>
    </div>

    <div v-if="brandSelection" class="col-span-6 sm:col-span-4">
        <jet-label for="model" value="Modell" />
        <multiselect v-model="car_modelSelection" @SearchChange="updateCarModelSearch" @select="updateCarModel" label="name" track-by="id" :options="carModels" class="mt-1 block w-full" placeholder="Modell auswählen">
            <template v-slot:noResult>
                <span @click="addCarModel">
                    <b>{{ modelSearch }}</b> als neues {{ brand.name }}-Modell speichern?
                </span>
            </template>
        </multiselect>
        <jet-input-error :message="form.errors.car_model_id" class="mt-2" />
    </div>

    <div class="col-span-6 sm:col-span-4">
        <div class="grid grid-cols-12 gap-6">
            <div class="col-span-12 sm:col-span-5">
                <jet-label for="stammnummer" value="Stammnummer" />
                <jet-input id="stammnummer" type="text" class="mt-1 block w-full" v-model="form.stammnummer" ref="stammnummer" autocomplete="stammnummer" />
                <jet-input-error :message="form.errors.stammnummer" class="mt-2" />
            </div>
            <div class="col-span-12 sm:col-span-7">
                <jet-label for="vin" value="Chassisnummer" />
                <jet-input id="vin" type="text" class="mt-1 block w-full" v-model="form.vin" ref="vin" autocomplete="vin" />
                <jet-input-error :message="form.errors.vin" class="mt-2" />
            </div>
        </div>
    </div>

    <div class="col-span-6 sm:col-span-4">
        <div class="grid grid-cols-12 gap-6">
            <div class="col-span-6 sm:col-span-6">
                <jet-label for="initial_date" value="Inverkehrssetzung" />
                <datepicker id="initial_date" ref="initial_date" v-model="form.initial_date" inputFormat="dd.MM.yyyy" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" />
                <jet-input-error :message="form.errors.initial_date" class="mt-2" />
            </div>

            <div class="col-span-6 sm:col-span-6">
                <jet-label for="last_check_date" value="Letzte Prüfung" />
                <datepicker id="last_check_date" ref="last_check_date" v-model="form.last_check_date" inputFormat="dd.MM.yyyy" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full" />
                <jet-input-error :message="form.errors.last_check_date" class="mt-2" />
            </div>
        </div>
    </div>

    <div class="col-span-6 sm:col-span-4">
        <jet-label for="kilometers" value="Kilometerstand" />
        <jet-input id="kilometers" type="text" class="mt-1 block w-full" v-model="form.kilometers" ref="kilometers" autocomplete="kilometers" />
        <jet-input-error :message="form.errors.kilometers" class="mt-2" />
    </div>

    <div class="col-span-6 sm:col-span-4">
        <jet-label for="colour" value="Farbe" />
        <jet-input id="colour" type="text" class="mt-1 block w-full" v-model="form.colour" ref="colour" autocomplete="colour" />
        <jet-input-error :message="form.errors.colour" class="mt-2" />
    </div>

    <div class="col-span-6 sm:col-span-4">
        <jet-label for="known_damage" value="Bekannter Schaden" />
        <textarea class="mt-1 block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" v-model="form.known_damage" ref="input">
        </textarea>
        <jet-input-error :message="form.errors.known_damage" class="mt-2" />
    </div>

    <div class="col-span-6 sm:col-span-4">
        <jet-label for="notes" value="Bemerkungen" />
        <textarea class="mt-1 block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" v-model="form.notes" ref="input">
        </textarea>
        <jet-input-error :message="form.errors.notes" class="mt-2" />
    </div>
</template>

<script>
import JetLabel from '@/Jetstream/Label.vue'
import JetInput from '@/Jetstream/Input.vue'
import JetActionMessage from '@/Jetstream/ActionMessage'
import JetInputError from '@/Jetstream/InputError'
import Multiselect from 'vue-multiselect'
import Datepicker from 'vue3-datepicker'

export default {
    components: {
        JetLabel,
        JetInput,
        JetInputError,
        JetActionMessage,
        Multiselect,
        Datepicker,
    },
    props: {
        form: Object,
        brands: Array,
        brand: Object,
        car_model: Object,
    },
    data() {
        return {
            brandSearch: null,
            modelSearch: null,
            carModels: [],
            brandSelection: this.brand,
            car_modelSelection: this.car_model,
        }
    },
    methods: {
        updateBrand(brand) {
            if (brand) {
                this.brand.id = brand.id;
                this.brand.name = brand.name;
                this.brand.models = brand.models;
            } else {
                this.brand.id = null;
                this.brand.name = null;
                this.brand.models = [];
            }
            this.updateCarModelsList(brand);
        },
        updateCarModel(car_model) {
            if (car_model) {
                this.car_model.id = car_model.id;
                this.car_model.name = car_model.name;
                this.form.car_model_id = car_model.id;
            } else {
                this.car_model.id = null;
                this.car_model.name = null;
                this.form.car_model_id = null;
            }
        },
        updateCarModelsList(brand) {
            this.carModels = brand.models ?? [];
            this.car_modelSelection = null;
            this.updateCarModel(null);
        },
        updateBrandSearch(searchQuery, id) {
            this.brandSearch = searchQuery
        },
        addBrand() {
            axios.post(this.route('brands.store'), {
                name: this.brandSearch,
            }).then((response) => {
                this.brandSelection = response.data;
                this.brands.push(this.brandSelection);
                this.updateBrand(this.brandSelection);
            });
        },
        updateCarModelSearch(searchQuery, id) {
            this.modelSearch = searchQuery
        },
        addCarModel() {
            axios.post(this.route('models.store'), {
                name: this.modelSearch,
                brand_id: this.brand.id,
            }).then((response) => {
                this.car_modelSelection = response.data;
                this.carModels.push(this.car_modelSelection);
                this.updateCarModel(this.car_modelSelection);
            });
        },
    },
    mounted: function () {
        this.$nextTick(function () {
            this.brandSelection = this.brands.find(x => x.id === this.brand.id);
            if (this.brandSelection) {
                this.carModels =  this.brandSelection.models ?? [];
            }
        })
    },
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>