<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import ClientForm from '@/components/ClientForm.vue';
import type { ClientFormData } from '@/components/ClientForm.vue';
import Heading from '@/components/Heading.vue';
import { Button } from '@/components/ui/button';
import AppLayout from '@/layouts/AppLayout.vue';

type WorkspaceUser = {
    id: number;
    name: string;
    email: string;
};

type Props = {
    indexUrl: string;
    storeUrl: string;
    legalForms: Record<string, string>;
    clientStatusLabels: Record<string, string>;
    workspaceUsers: WorkspaceUser[];
};

const props = defineProps<Props>();

const form = useForm<ClientFormData>({
    company_name: '',
    legal_form: '',
    ice: '',
    fiscal_id: '',
    rc: '',
    cnss: '',
    patente: '',
    contacts: [
        {
            full_name: '',
            job_title: '',
            email: '',
            phone: '',
            is_principal: true,
        },
    ],
    internal_responsible_id: '',
    status: 'actif',
    internal_notes: '',
});

function submit() {
    form.post(props.storeUrl);
}
</script>

<template>
    <AppLayout
        :breadcrumbs="[
            { title: 'Clients', href: props.indexUrl },
            { title: 'Ajouter un client' },
        ]"
    >
        <Head title="Ajouter un client" />

        <div class="flex flex-col space-y-6 p-4">
            <div class="flex items-center justify-between">
                <Heading
                    title="Ajouter un client"
                    description="Créer un nouveau client dans le workspace"
                />
                <Button variant="outline" as-child>
                    <Link :href="indexUrl">Retour</Link>
                </Button>
            </div>
            <ClientForm
                :form="form"
                :legal-forms="props.legalForms"
                :client-status-labels="props.clientStatusLabels"
                :workspace-users="props.workspaceUsers"
                submit-label="Créer le client"
                @submit="submit"
            />
        </div>
    </AppLayout>
</template>
