<script setup lang="ts">
    import AppLayout from '@/layouts/AppLayout.vue';
    import { type BreadcrumbItem } from '@/types';
    import { Head, Link, useForm } from '@inertiajs/vue3';
    import { Button } from '@/components/ui/button';
    import { Input } from '@/components/ui/input';
    import { Label } from '@/components/ui/label';
    import { Plus } from 'lucide-vue-next';

    const form = useForm({
        username: '',
        name: '',
    });

    const breadcrumbs: BreadcrumbItem[] = [
        { title: 'Dashbord', href: '/dashboard' },
        { title: 'Brukere',  href: '/smartdok/profiles' },
        { title: 'Opprett',  href: '/smartdok/profiles/create' },
    ];

    function submit() {
        form.post(route('smartdok.profiles.store'), {
            onSuccess: () => {
            // Optionally reset or navigate; Inertia will handle redirect
            },
        });
    }
</script>

<template>
    <Head title="Opprett bruker" /> 
    <AppLayout :breadcrumbs="breadcrumbs">
      <div class="mb-6 flex items-center justify-between p-6">
        <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
          Opprett bruker
        </h3>
      </div>

      <div class="flex justify-center items-center">
        <form @submit.prevent="submit" class="space-y-6 min-w-2xl lg:min-w-3xl xl:min-w-4xl">
            <!-- Brukernavn -->
            <div>
                <Label for="username">Brukernavn:</Label>
                <Input
                    id="username"
                    v-model="form.username"
                    type="text"
                    placeholder="Skriv inn brukernavn"
                    class="mt-2"
                />
                <p v-if="form.errors.username" class="mt-1 text-sm text-red-600">
                    {{ form.errors.username }}
                </p>
            </div>  
            <!-- Navn -->
            <div>
                <Label for="name">Navn:</Label>
                <Input
                    id="name"
                    v-model="form.name"
                    type="text"
                    placeholder="Skriv inn fullt navn"
                    class="mt-2"
                />
                <p v-if="form.errors.name" class="mt-1 text-sm text-red-600">
                    {{ form.errors.name }}
                </p>
            </div>
            <!-- Actions -->
            <div class="flex items-center justify-end space-x-4">
                <Link href="/smartdok/profiles">
                    <Button variant="outline">
                        Avbryt
                    </Button>
                </Link>
                <Button type="submit" :disabled="form.processing">
                    Opprett
                </Button>
            </div>
        </form>
      </div>
    </AppLayout>
</template>
