<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import List from '@/Components/List.vue';
import ListItem from '@/Components/ListItem.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import ItemGrid from '@/Components/ItemGrid.vue';
import { Item } from '@/Shared/AppObjects';
import Drawer from '@/Components/Drawer.vue';
import InputLabel from '@/Components/InputLabel.vue';
import TextInput from '@/Components/TextInput.vue';
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import SectionTitle from '@/Components/SectionTitle.vue';
import { de } from 'date-fns/locale'

const props = defineProps({
    client: Object 
});

const Address = {
    address: '',
    country: '',
    type_id: 1
}

const Person = {
    first_name: '',
    last_name: '',
    full_name: '',
    address: Address
}

const Contract = {
    reference: '',
    start_date: new Date(),
    type_id: 3
}

const formCreateContract = useForm({
    client_uuid: props.client.uuid,
    person: Person,
    contract: Contract
});

const drawerCreateContract = ref(false);

const openDrawerCreateContract = () => {
    drawerCreateContract.value = true;
}

const closeDrawer = () => {
    drawerCreateContract.value = false
}

const mainAddress = props.client.addresses.filter( a => a.type.id === 1 )[0] ?? '';

const clientInfo = [
    Item.make('nu', 'Nu.', 'number', props.client.nu),
    Item.make('full_name', 'Name', 'string', props.client.full_name),
    Item.make('main_address', 'Address', 'string', mainAddress.address),
    Item.make('tax_number', 'Tax NU.', 'string', props.client.tax_number),
    Item.make('social_security_number', 'Social security NU.', 'string', props.client.social_security_number),
    Item.make('description', 'Description', 'string', props.client.description)
]

const storeContract = () => {
    formCreateContract.post(route('contract.store'), {
        onBefore: () => {
            formCreateContract.contract.start_date = formCreateContract.contract.start_date.toISOString();
        },
        onSuccess: () => {
            closeDrawer();
            formCreateContract.reset();
        }
    });
};


</script>

<template>
    <AppLayout title="Client">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ client.full_name.toUpperCase() }}
            </h2>
        </template>
        
        <div class="pt-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-blue-400">
                    <div class="mx-auto max-w-4x1 p-3">
                        <ItemGrid :items="clientInfo"></ItemGrid>
                    </div>
                </div>
            </div>
        </div>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <div class="mx-auto max-w-4x1 py-3">
                        <PrimaryButton @click="openDrawerCreateContract" class="bg-blue-400">Add contract</PrimaryButton>
                        <List class="mt-2">
                            <ListItem v-for="contract in client.contracts">
                                <div class="flex justify-between shadow rounded border-solid border-l-4 border-red-400 p-2">
                                    <div class="flex min-w-0 gap-x-4">
                                        <div class="min-w-0 flex-auto">
                                            <p class="text-sm font-semibold leading-6 text-gray-900">{{ contract.debtor.full_name }}</p>
                                            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ contract.reference }}</p>
                                        </div>
                                    </div>
                                    <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
                                        <p class="text-sm leading-6 text-gray-900">{{ contract.debtor.nu }}</p>
                                        <div class="mt-1 flex items-center gap-x-1.5">
                                            <p class="text-xs leading-5 text-gray-500">{{ contract.debtor.group.name }}</p>
                                        </div>
                                    </div>
                                </div>
                            </ListItem>
                        </List>
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
    <Drawer
        :show="drawerCreateContract"
        @close="drawerCreateContract = false">

        <template #title>Add contract</template>
        <template #content>
            <form @submit.prevent="storeContract">
                <SectionTitle class="border-b mb-4">
                    <template #title>
                        Person
                    </template>
                </SectionTitle>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="firstname" value="First name"/>
                    <TextInput 
                        id="firstname"
                        ref="firstnameInput"
                        v-model="formCreateContract.person.first_name"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="first-name"
                    />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="lastname" value="Last name"/>
                    <TextInput 
                        id="lastname"
                        ref="lastnameInput"
                        v-model="formCreateContract.person.last_name"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="last-name"
                    />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="fullname" value="Full name"/>
                    <TextInput 
                        id="fullname"
                        ref="fullnameInput"
                        v-model="formCreateContract.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="address" value="Address"/>
                    <TextInput 
                        id="address"
                        ref="addressInput"
                        v-model="formCreateContract.person.address.address"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="address"
                    />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="addressCountry" value="Country"/>
                    <TextInput 
                        id="addressCountry"
                        ref="addressCountryInput"
                        v-model="formCreateContract.person.address.country"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="address-country"
                    />
                </div>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="addressType" value="Address type"/>
                    <select 
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        id="addressType"
                        v-model="formCreateContract.person.address.type_id"
                    >
                        <option value="1">Permanent</option>
                        <option value="2">Temporary</option>
                    <!-- ... -->
                    </select>
                </div>
                <SectionTitle class="mt-4 border-b mb-4">
                    <template #title>
                        Contract
                    </template>
                </SectionTitle>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="contractRef" value="Reference"/>
                    <TextInput 
                        id="contractRef"
                        ref="contractRefInput"
                        v-model="formCreateContract.contract.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="Start date"/>
                    <vue-date-picker id="contractStartDate" :format-locale="de" :enable-time-picker="false" format="dd.MM.yyyy" class="mt-1 block w-full" v-model="formCreateContract.contract.start_date"></vue-date-picker>
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="contractTypeSelect" value="Contract type"/>
                    <select 
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        id="contractTypeSelect"
                        v-model="formCreateContract.person.address.type_id"
                    >
                        <option value="1">Early</option>
                        <option value="2">Hard</option>
                        <option value="3">Delivery</option>
                        <option value="4">Leasing</option>
                    <!-- ... -->
                    </select>
                </div>
                <div class="flex justify-end mt-4">
                    <ActionMessage :on="formCreateContract.recentlySuccessful" class="me-3">
                        Saved.
                    </ActionMessage>

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