<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 { ref } from 'vue';
import { Link } from '@inertiajs/vue3';
import SectionTitle from '@/Components/SectionTitle.vue';
import PersonInfoGrid from '@/Components/PersonInfoGrid.vue';
import Pagination from '@/Components/Pagination.vue';
import SearchInput from '@/Components/SearchInput.vue';
import FormCreateCase from './Partials/FormCreateCase.vue';

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

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

const drawerCreateCase = ref(false);

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

</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 flex justify-between">
                        <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 px-2">
                        <PersonInfoGrid :types="types" :person="client.person"></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>
    <FormCreateCase 
        :show="drawerCreateCase" 
        @close="drawerCreateCase = false" 
        :client-uuid="client?.uuid" 
    />
</template>