<script setup>
import { ref, watch } from 'vue';
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 InputLabel from '@/Components/InputLabel.vue';
import TextInput from '@/Components/TextInput.vue';
import { Link, useForm } from '@inertiajs/vue3';
import ActionMessage from '@/Components/ActionMessage.vue';
import Drawer from '@/Components/Drawer.vue';
import Pagination from '@/Components/Pagination.vue';
import SearchInput from '@/Components/SearchInput.vue';

const props = defineProps({
    clients: Object,
    filters: Object
});

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

const formClient = useForm({
    first_name: '',
    last_name: '',
    full_name: '',
    address: Address
});

//Create client drawer
const drawerCreateClient = ref(false);

//Search input
const search = {
    search: props.filters.search,
    route: {
        link: 'client'
    }
}

//Open drawer create client
const openDrawerCreateClient = () => {
    drawerCreateClient.value = true
}


//Close any drawer on page
const closeDrawer = () => {
    drawerCreateClient.value = false
}

//Ajax call post to store new client
const storeClient = () => {
    formClient.post(route('client.store'), {
        onBefore: () => {
            formClient.address.type_id = Number(formClient.address.type_id);
        },
        onSuccess: () => {
            closeDrawer();
            formClient.reset();
        }
    });

};

</script>

<template>
    <AppLayout title="Client">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Clients
            </h2>
        </template>
        <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">
                        <div class="flex justify-between">
                            <PrimaryButton @click="openDrawerCreateClient" class="bg-blue-400">Add client</PrimaryButton>
                            <SearchInput :options="search" />
                        </div>
                        <List class="mt-2">
                            <ListItem v-for="client in clients.data">
                                <div class="flex justify-between shadow rounded border-solid border-l-4 border-blue-400 p-3">
                                    <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"><Link :href="route('client.show', {uuid: client.uuid})">{{ client.person.full_name }}</Link></p>
                                            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ client.person.nu }}</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">{{ client.person.tax_number }}</p>
                                        <div class="mt-1 flex items-center gap-x-1.5">
                                            <p class="text-xs leading-5 text-gray-500">Client</p>
                                        </div>
                                    </div>
                                </div>
                            </ListItem>
                        </List>
                    </div>
                    <Pagination :links="clients.links" :from="clients.from" :to="clients.to" :total="clients.total" />
                </div>
            </div>
        </div>
    </AppLayout>
    <Drawer
        :show="drawerCreateClient"
        @close="drawerCreateClient = false"
    >
        <template #title>Add client</template>
        <template #content>
            <form @submit.prevent="storeClient">
                <div>
                    <div class="col-span-6 sm:col-span-4">
                        <InputLabel for="firstname" value="First name"/>
                        <TextInput 
                            id="firstname"
                            ref="firstnameInput"
                            v-model="formClient.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="formClient.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="formClient.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="formClient.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="formClient.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="formClient.address.type_id"
                        >
                            <option value="1">Permanent</option>
                            <option value="2">Temporary</option>
                        <!-- ... -->
                        </select>
                    </div>
                </div>
                    <div class="flex justify-end mt-4">
                    <ActionMessage :on="formClient.recentlySuccessful" class="me-3">
                        Saved.
                    </ActionMessage>

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