<script setup>
import DialogModal from '@/Components/DialogModal.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import SectionTitle from '@/Components/SectionTitle.vue';
import TextInput from '@/Components/TextInput.vue';
import axios from 'axios';
import { inject, onMounted, ref } from 'vue';
import InputError from './InputError.vue';

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    person: Object
});

const processingUpdate = ref(false);
const errors = ref({});

const emit = defineEmits(['close']);

const close = () => {
    emit('close');

    setTimeout(() => {
        errors.value = {};
    }, 500);
}

const form = ref({
    full_name: props.person.full_name,
    tax_number: props.person.tax_number,
    social_security_number: props.person.social_security_number,
    description: props.person.description
});

const updatePerson = () => {
    processingUpdate.value = true;
    errors.value = {};

    axios({
        method: 'put',
        url: route('person.update',  props.person ),
        data: form.value
    }).then((response) => {
        
        props.person.full_name = response.data.person.full_name;
        props.person.tax_number = response.data.person.tax_number;
        props.person.social_security_number = response.data.person.social_security_number;
        props.person.description = response.data.person.description;

        processingUpdate.value = false;
        close();
    }).catch((reason) => {
        console.log(reason.response.data);
        errors.value = reason.response.data.errors;
        processingUpdate.value = false;
    });
}

</script>
<template>
    <DialogModal
        :show="show"
        @close="close"
    >
        <template #title>Posodobi {{ person.full_name }}</template>
        <template #content>
            <form @submit.prevent="updatePerson">
                <SectionTitle class="border-b mb-4">
                    <template #title>
                        Oseba
                    </template>
                </SectionTitle>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="cfulname" value="Naziv" />
                    <TextInput 
                        id="cfullname"
                        ref="cfullnameInput"
                        v-model="form.full_name"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="full-name"
                    />
                    <InputError v-if="errors.full_name !== undefined" v-for="err in errors.full_name" :message="err" />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="ctaxnumber" value="Davčna" />
                    <TextInput 
                        id="ctaxnumber"
                        ref="ctaxnumberInput"
                        v-model="form.tax_number"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="tax-number"
                    />
                    <InputError v-if="errors.tax_number !== undefined" v-for="err in errors.tax_number" :message="err" />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="csocialSecurityNumber" value="Matična / Emšo" />
                    <TextInput 
                        id="csocialSecurityNumber"
                        ref="csocialSecurityNumberInput"
                        v-model="form.social_security_number"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="social-security-number"
                    />
                    <InputError v-if="errors.social_security_number !== undefined" v-for="err in errors.social_security_number" :message="err" />
                </div>
                
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="cdescription" value="Opis"/>
                    <TextInput 
                        id="cdescription"
                        ref="cdescriptionInput"
                        v-model="form.description"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="description"
                    />
                    <InputError v-if="errors.description !== undefined" v-for="err in errors.description" :message="err" />
                </div>

                <div class="flex justify-end mt-4">

                    <PrimaryButton :class="{ 'opacity-25': processingUpdate }" :disabled="processingUpdate">
                        Shrani
                    </PrimaryButton>
                </div>
            </form>
        </template>
    </DialogModal>
</template>