<script setup>
import DialogModal from "@/Components/DialogModal.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>
  <DialogModal :show="show" @close="onClose">
    <template #title>Dodaj plačilo</template>
    <template #content>
      <div class="space-y-3">
        <div>
          <label class="block text-sm text-gray-700 mb-1">Znesek</label>
          <input
            type="number"
            step="0.01"
            min="0"
            v-model.number="form.amount"
            class="w-full rounded border-gray-300"
          />
          <div v-if="form.errors?.amount" class="text-sm text-red-600 mt-0.5">
            {{ form.errors.amount }}
          </div>
        </div>
        <div class="flex gap-2">
          <div class="flex-1">
            <label class="block text-sm text-gray-700 mb-1">Valuta</label>
            <input
              type="text"
              v-model="form.currency"
              class="w-full rounded border-gray-300"
              maxlength="3"
            />
            <div v-if="form.errors?.currency" class="text-sm text-red-600 mt-0.5">
              {{ form.errors.currency }}
            </div>
          </div>
          <div class="flex-1">
            <label class="block text-sm text-gray-700 mb-1">Datum</label>
            <input type="date" v-model="form.paid_at" class="w-full rounded border-gray-300" />
            <div v-if="form.errors?.paid_at" class="text-sm text-red-600 mt-0.5">
              {{ form.errors.paid_at }}
            </div>
          </div>
        </div>
        <div>
          <label class="block text-sm text-gray-700 mb-1">Sklic</label>
          <input type="text" v-model="form.reference" class="w-full rounded border-gray-300" />
          <div v-if="form.errors?.reference" class="text-sm text-red-600 mt-0.5">
            {{ form.errors.reference }}
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <button type="button" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="onClose">
        Prekliči
      </button>
      <button
        type="button"
        class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
        :disabled="form.processing"
        @click="onSubmit"
      >
        Shrani
      </button>
    </template>
  </DialogModal>
  
</template>
