<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';

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

console.log(props.types);

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

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

//store contract
const formContract = useForm({
    client_case_uuid: props.client_case.uuid,
    reference: '',
    start_date: new Date().toISOString(),
    type_id: props.types[0].id
});

const storeContract = () => {
    formContract.post(route('clientCase.contract.store', props.client_case), {
        onBefore: () => {
            formContract.start_date = formContract.start_date;
        },
        onSuccess: () => {
            close();
            formContract.reset();
        },
        preserveScroll: true
    });
}

</script>

<template>
    <Drawer
        :show="show"
        @close="close"
    >
        <template #title>Dodaj pogodbo</template>
        <template #content>
            <form @submit.prevent="storeContract">
                <SectionTitle class="mt-4 border-b mb-4">
                    <template #title>
                        Pogodba
                    </template>
                </SectionTitle>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="contractRef" value="Referenca"/>
                    <TextInput
                        id="contractRef"
                        ref="contractRefInput"
                        v-model="formContract.reference"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="contract-reference"
                    />
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="contractStartDate" value="Datum pričetka"/>
                    <vue-date-picker id="contractStartDate" :enable-time-picker="false" format="dd.MM.yyyy" class="mt-1 block w-full" v-model="formContract.start_date"></vue-date-picker>
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="contractTypeSelect" value="Tip"/>
                    <select 
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        id="contractTypeSelect"
                        v-model="formContract.type_id"
                    >
                        <option v-for="t in types" :value="t.id">{{ t.name }}</option>
                    <!-- ... -->
                    </select>
                </div>
                <div class="flex justify-end mt-4">
                    <ActionMessage :on="formContract.recentlySuccessful" class="me-3">
                        Shranjuje.
                    </ActionMessage>

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