<script setup>
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import CurrencyInput from "@/Components/CurrencyInput.vue";
import { Label } from "@/Components/ui/label";
import { Input } from "@/Components/ui/input";
import DatePicker from "@/Components/DatePicker.vue";

const props = defineProps({
  show: { type: Boolean, default: false },
  form: { type: Object, required: true },
});

const emit = defineEmits(["close", "submit"]);

const onClose = () => emit("close");
const onSubmit = () => emit("submit");
</script>

<template>
  <CreateDialog
    :show="show"
    title="Dodaj plačilo"
    confirm-text="Shrani"
    :processing="form.processing"
    @close="onClose"
    @confirm="onSubmit"
  >
    <div class="space-y-4">
        <div class="space-y-2">
          <Label for="paymentAmount">Znesek</Label>
          <CurrencyInput
            id="paymentAmount"
            v-model="form.amount"
            :precision="{ min: 0, max: 2 }"
            placeholder="0,00"
            class="w-full"
          />
          <p v-if="form.errors?.amount" class="text-sm text-red-600">
            {{ form.errors.amount }}
          </p>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div class="space-y-2">
            <Label for="paymentCurrency">Valuta</Label>
            <Input
              id="paymentCurrency"
              type="text"
              v-model="form.currency"
              maxlength="3"
              placeholder="EUR"
            />
            <p v-if="form.errors?.currency" class="text-sm text-red-600">
              {{ form.errors.currency }}
            </p>
          </div>
          <div class="space-y-2">
            <Label for="paymentDate">Datum</Label>
            <DatePicker
              id="paymentDate"
              v-model="form.paid_at"
              format="dd.MM.yyyy"
              :error="form.errors?.paid_at"
            />
          </div>
        </div>

        <div class="space-y-2">
          <Label for="paymentReference">Sklic</Label>
          <Input
            id="paymentReference"
            type="text"
            v-model="form.reference"
            placeholder="Sklic"
          />
          <p v-if="form.errors?.reference" class="text-sm text-red-600">
            {{ form.errors.reference }}
          </p>
        </div>
      </div>
    </CreateDialog>
</template>
