<script setup lang="ts">
import BackButton from '@/components/button/BackButton.vue';
import AdminLayout from '@/layouts/AdminLayout.vue';
import type {
    CuttingMaterialCartItem,
    CuttingProductCatalogItem,
    CuttingRawMaterialCatalogItem,
    CuttingResultCartItem,
} from '@/types/cutting';
import { Head } from '@inertiajs/vue3';
import CuttingPosForm from './form/CuttingPosForm.vue';

defineProps<{
    rawMaterialCatalog: CuttingRawMaterialCatalogItem[];
    productCatalog: CuttingProductCatalogItem[];
    draftMaterials: CuttingMaterialCartItem[];
    draftResults: CuttingResultCartItem[];
}>();
</script>

<template>
    <Head title="Tambah Cutting" />

    <AdminLayout>
        <div
            class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
        >
            <div class="space-y-1">
                <h2 class="text-2xl font-bold tracking-tight">
                    Tambah Cutting
                </h2>
            </div>

            <BackButton href="/admin/manage/cuttings" />
        </div>

        <CuttingPosForm
            :raw-material-catalog="rawMaterialCatalog"
            :product-catalog="productCatalog"
            :draft-materials="draftMaterials"
            :draft-results="draftResults"
            submit-url="/admin/manage/cuttings"
            method="post"
            submit-label="Simpan"
        />
    </AdminLayout>
</template>
