<script setup>
import CreateDialog from '@/Components/Dialogs/CreateDialog.vue'
import PrimaryButton from '@/Components/PrimaryButton.vue'
import SectionTitle from '@/Components/SectionTitle.vue'
import { useForm } from '@inertiajs/vue3'
import { Label } from "@/Components/ui/label";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";

const props = defineProps({
  show: { type: Boolean, default: false },
  client_case: { type: Object, required: true },
  // Contract can initially be null while dialog is hidden; make it optional to avoid prop warning
  contract: { type: Object, default: null },
})

const emit = defineEmits(['close', 'created'])
const close = () => emit('close')

const form = useForm({
  reference: '',
  name: '',
  description: '',
  type: '',
})

const submit = () => {
  if (!props.contract) {
    // No contract selected; do nothing safely
    return
  }
  form.post(route('clientCase.contract.object.store', { client_case: props.client_case.uuid, uuid: props.contract.uuid }), {
    preserveScroll: true,
    onSuccess: () => { emit('created'); form.reset(); close() },
  })
}
</script>

<template>
  <CreateDialog
    :show="show"
    title="Dodaj premet"
    confirm-text="Shrani"
    :processing="form.processing"
    @close="close"
    @confirm="submit"
  >
    <form @submit.prevent="submit">
        <SectionTitle class="mt-2 border-b mb-4">
          <template #title>Premet</template>
        </SectionTitle>

        <div class="space-y-4">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="space-y-2">
              <Label for="objRef">Referenca</Label>
              <Input
                id="objRef"
                v-model="form.reference"
                type="text"
                placeholder="Referenca"
              />
              <p v-if="form.errors.reference" class="text-sm text-red-600">
                {{ form.errors.reference }}
              </p>
            </div>
            <div class="space-y-2">
              <Label for="objType">Tip</Label>
              <Input
                id="objType"
                v-model="form.type"
                type="text"
                placeholder="Tip"
              />
              <p v-if="form.errors.type" class="text-sm text-red-600">
                {{ form.errors.type }}
              </p>
            </div>
          </div>

          <div class="space-y-2">
            <Label for="objName">Naziv</Label>
            <Input
              id="objName"
              v-model="form.name"
              type="text"
              placeholder="Naziv"
              required
            />
            <p v-if="form.errors.name" class="text-sm text-red-600">
              {{ form.errors.name }}
            </p>
          </div>

          <div class="space-y-2">
            <Label for="objDesc">Opis</Label>
            <Textarea
              id="objDesc"
              v-model="form.description"
              rows="3"
              placeholder="Opis"
            />
            <p v-if="form.errors.description" class="text-sm text-red-600">
              {{ form.errors.description }}
            </p>
          </div>

        </div>
      </form>
    </CreateDialog>
</template>
