<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ArrowLeft } from '@lucide/vue';
import Heading from '@/components/Heading.vue';
import InputError from '@/components/InputError.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Ads Placement', href: '/placements' },
            { title: 'Baru', href: '/placements/create' },
        ] as BreadcrumbItem[],
    },
});

const form = useForm({ kode: '', keterangan: '', url: '' });

const submit = () => form.post('/placements');
</script>

<template>
    <Head title="Placement Baru" />

    <div class="flex flex-col space-y-6">
        <div>
            <Button as-child variant="ghost" size="sm" class="mb-2">
                <Link href="/placements"><ArrowLeft class="size-4" /> Kembali</Link>
            </Button>
            <Heading title="Placement Baru" description="Sumber lalu lintas iklan (mis. fb, gl)" />
        </div>

        <form @submit.prevent="submit" class="max-w-2xl space-y-6">
            <div class="grid gap-2">
                <Label for="kode">Kode <span class="text-destructive">*</span></Label>
                <Input id="kode" v-model="form.kode" placeholder="mis. fb" required />
                <InputError :message="form.errors.kode" />
            </div>
            <div class="grid gap-2">
                <Label for="keterangan">Keterangan</Label>
                <Input id="keterangan" v-model="form.keterangan" />
                <InputError :message="form.errors.keterangan" />
            </div>
            <div class="grid gap-2">
                <Label for="url">URL</Label>
                <Input id="url" v-model="form.url" placeholder="https://" />
                <InputError :message="form.errors.url" />
            </div>

            <div class="flex justify-end gap-2">
                <Button as-child variant="outline" type="button">
                    <Link href="/placements">Batal</Link>
                </Button>
                <Button type="submit" :disabled="form.processing">Simpan</Button>
            </div>
        </form>
    </div>
</template>
