<script setup>
import ActionMessage from '@/Components/ActionMessage.vue';
import Drawer from '@/Components/Drawer.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 { useForm } from '@inertiajs/vue3';
import { onMounted } from 'vue';

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


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

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

const form = useForm({
    person: props.client.person
});

const updateClient = () => {
    form.put(route('person.update',  props.client.person ), {
        onSuccess: () => {
            close();
            form.reset();
        }
    });
}

onMounted(() => {
    console.log(props.client)
});

</script>
<template>
    <Drawer
        :show="show"
        @close="close"
    >
        <template #title>Posodobi {{ client.person.full_name }}</template>
        <template #content>
            <form @submit.prevent="updateClient">
                <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.person.full_name"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="full-name"
                    />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="ctaxnumber" value="Davčna" />
                    <TextInput 
                        id="ctaxnumber"
                        ref="ctaxnumberInput"
                        v-model="form.person.tax_number"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="tax-number"
                    />
                </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.person.social_security_number"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="social-security-number"
                    />
                </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"
                    />
                </div>

                <div class="flex justify-end mt-4">
                    <ActionMessage :on="form.recentlySuccessful" class="me-3">
                        Shranjeno.
                    </ActionMessage>

                    <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                        Shrani
                    </PrimaryButton>
                </div>
            </form>
        </template>
    </Drawer>
</template>