<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: 'Bank', href: '/banks' },
            { title: 'Baru', href: '/banks/create' },
        ] as BreadcrumbItem[],
    },
});

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

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

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

    <div class="flex flex-col space-y-6">
        <div>
            <Button as-child variant="ghost" size="sm" class="mb-2">
                <Link href="/banks"><ArrowLeft class="size-4" /> Kembali</Link>
            </Button>
            <Heading title="Bank Baru" description="Tambah rekening tujuan pembayaran" />
        </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. BCA" required />
                <InputError :message="form.errors.kode" />
            </div>
            <div class="grid gap-2">
                <Label for="keterangan">Keterangan <span class="text-destructive">*</span></Label>
                <Input id="keterangan" v-model="form.keterangan" placeholder="mis. 1234567890 a.n. OKEWEB" required />
                <InputError :message="form.errors.keterangan" />
            </div>
            <div class="grid gap-2">
                <Label for="status">Status</Label>
                <select id="status" v-model="form.status" class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                    <option :value="true">Aktif</option>
                    <option :value="false">Nonaktif</option>
                </select>
            </div>

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