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

const props = defineProps({
    client: Object,
    client_cases: Object,
    urlPrev: String,
    filters: Object
});

console.log(props.client_cases)

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

const Phone = {
    nu: '',
    country_code: '00386',
    type_id: 1
}

const Person = {
    first_name: '',
    last_name: '',
    full_name: '',
    tax_number: '',
    social_security_number: '',
    description: '',
    address: Address,
    phone: Phone
}

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

const search = {
    search: props.filters.search,
    route: {
        link: 'client.show',
        options: {uuid: props.client.uuid}
    }
}

const drawerCreateCase = ref(false);

const openDrawerCreateCase = () => {
    drawerCreateCase.value = true;
}

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

const getMainAddress = (adresses) => {
    const addr = adresses.filter( a => a.type.id === 1 )[0] ?? '';
    const country = addr.country !== '' ? ` - ${addr.country}` : '';
    return addr.address !== '' ? addr.address + country : '';
}

const getMainPhone = (phones) => {
    const pho = phones.filter( a => a.type.id === 1 )[0] ?? '';
    const countryCode = pho.country_code !== null ? `+${pho.country_code} ` : '';
    return pho.nu !== '' ? countryCode + pho.nu: '';
}
const clientInfo = new Object({
    nu: props.client.person.nu,
    full_name: props.client.person.full_name,
    main_address: getMainAddress(props.client.person.addresses),
    main_phone: getMainPhone(props.client.person.phones),
    tax_number: props.client.person.tax_number,
    social_security_number: props.client.person.social_security_number,
    description: props.client.person.description
});

const storeCase = () => {
    formCreateCase.post(route('clientCase.store'), {
        onSuccess: () => {
            closeDrawer();
            formCreateCase.reset();
            console.log(props.client_cases)
        }
    });
};


</script>

<template>
    <AppLayout title="Client">
        <template #header></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">
                        <SectionTitle>
                            <template #title>
                                {{ client.person.full_name }}
                            </template>
                            
                        </SectionTitle>
                    </div>
                </div>
            </div>
        </div>
        <div class="pt-1">
            <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">
                        <PersonInfoGrid :person="clientInfo"></PersonInfoGrid>
                    </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">
                        <div class="flex justify-between">
                            <PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400">Dodaj</PrimaryButton>
                            <SearchInput :options="search" />
                        </div>
                        <List class="mt-2">
                            <ListItem v-for="clientCase in client_cases.data">
                                <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"><Link :href="route('clientCase.show', {uuid: clientCase.uuid})">{{ clientCase.person.full_name }}</Link></p>
                                            <p class="mt-1 truncate text-xs leading-5 text-gray-500"></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">{{ clientCase.person.nu }}</p>
                                        <div class="mt-1 flex items-center gap-x-1.5">
                                            <p class="text-xs leading-5 text-gray-500">Primer naročnika</p>
                                        </div>
                                    </div>
                                </div>
                            </ListItem>
                        </List>
                    </div>
                    <Pagination :links="client_cases.links" :from="client_cases.from" :to="client_cases.to" :total="client_cases.total" />
                </div>
            </div>
        </div>
    </AppLayout>
    <Drawer
        :show="drawerCreateCase"
        @close="drawerCreateCase = false">

        <template #title>Nova primer</template>
        <template #content>
            <form @submit.prevent="storeCase">
                <SectionTitle class="border-b mb-4">
                    <template #title>
                        Oseba
                    </template>
                </SectionTitle>

                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="fullname" value="Naziv"/>
                    <TextInput 
                        id="fullname"
                        ref="fullnameInput"
                        v-model="formCreateCase.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="taxnumber" value="Davčna"/>
                    <TextInput 
                        id="taxnumber"
                        ref="taxnumberInput"
                        v-model="formCreateCase.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="socialSecurityNumber" value="Matična / Emšo"/>
                    <TextInput 
                        id="socialSecurityNumber"
                        ref="socialSecurityNumberInput"
                        v-model="formCreateCase.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="address" value="Naslov"/>
                    <TextInput 
                        id="address"
                        ref="addressInput"
                        v-model="formCreateCase.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="Država"/>
                    <TextInput 
                        id="addressCountry"
                        ref="addressCountryInput"
                        v-model="formCreateCase.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="Vrsta naslova"/>
                    <select 
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        id="addressType"
                        v-model="formCreateCase.person.address.type_id"
                    >
                        <option value="1">Stalni</option>
                        <option value="2">Začasni</option>
                    <!-- ... -->
                    </select>
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="phoneCountyCode" value="Koda države tel."/>
                    <select 
                        class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
                        id="phoneCountyCode"
                        v-model="formCreateCase.person.phone.country_code"
                    >
                        <option value="00386">+386 (Slovenija)</option>
                        <option value="00385">+385 (Hrvaška)</option>
                        <option value="0039">+39 (Italija)</option>
                        <option value="0036">+39 (Madžarska)</option>
                        <option value="0043">+43 (Avstrija)</option>
                        <option value="00381">+381 (Srbija)</option>
                        <option value="00387">+387 (Bosna in Hercegovina)</option>
                        <option value="00382">+382 (Črna gora)</option>
                    <!-- ... -->
                    </select>
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="phoneNu" value="Telefonska št."/>
                    <TextInput 
                        id="phoneNu"
                        ref="phoneNuInput"
                        v-model="formCreateCase.person.phone.nu"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="phone-nu"
                    />
                </div>
                <div class="col-span-6 sm:col-span-4">
                    <InputLabel for="description" value="Opis"/>
                    <TextInput 
                        id="description"
                        ref="descriptionInput"
                        v-model="formCreateCase.description"
                        type="text"
                        class="mt-1 block w-full"
                        autocomplete="description"
                    />
                </div>
                <div class="flex justify-end mt-4">
                    <ActionMessage :on="formCreateCase.recentlySuccessful" class="me-3">
                        Shranjeno.
                    </ActionMessage>

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