<script setup>
import { ref } from "vue";
import { useForm } from "@Services/Api";

import Input from "@Holos/Form/Input.vue";
import Textarea from "@Holos/Form/Textarea.vue";
import Selectable from "@Holos/Form/Selectable.vue";

const form = useForm({
  address: [],
  shortName: "",
  name: "",
  legal: "",
  article: "",
  description: "",
  minimumAmount: "",
  maximumAmount: "",
  sizeUnit: [],
});

const addresses = ref([]);
const sizeUnit = ref([]);
</script>

<template>
  <div class="bg-white rounded-xl p-6 m-3 max-w-auto shadow-lg mb-10">
    <h3 class="text-xl font-semibold mb-4 text-gray-800">
      Crear nuevo concepto de cobro
    </h3>

    <form>
      <div class="mb-5 grid grid-cols-2 gap-4">
        <Selectable
          v-model="form.address"
          label="description"
          title="Direcciones"
          :options="addresses"
          multiple
          required
        />
        <Input
          v-model="form.shortName"
          class="col-span-2"
          id="Nombre corto"
          type="text"
          :onError="form.errors.shortName"
          required
        />
      </div>
      <Input
        v-model="form.name"
        class="col-span-2"
        id="Nombre"
        type="text"
        :onError="form.errors.name"
        required
      />
      <div class="mb-5 grid grid-cols-2 gap-4 py-2">
        <Input
          v-model="form.legal"
          class="col-span-2"
          id="Instrumento Legal"
          type="text"
          :onError="form.errors.legal"
          required
        />
        <Input
          v-model="form.article"
          class="col-span-2"
          id="Articulado"
          type="text"
          :onError="form.errors.article"
          required
        />
      </div>
      <Textarea
        v-model="form.description"
        class="col-span-2"
        id="Descripción"
        :onError="form.errors.description"
        required
      />
      <div class="mb-5 grid grid-cols-2 gap-4 py-2">
        <Input
          v-model="form.minimumAmount"
          class="col-span-2"
          id="Monto mínimo (UMAs)"
          type="text"
          :onError="form.errors.minimumAmount"
          required
        />
        <Input
          v-model="form.maximumAmount"
          class="col-span-2"
          id="Monto máximo (UMAs)"
          type="text"
          :onError="form.errors.maximumAmount"
          required
        />
      </div>
      <hr class="my-4 border-gray-300" />
      <div class="mb-5 grid grid-cols-3 gap-4 py-2">
        <Selectable
          v-model="form.sizeUnit"
          label="description"
          title="Unidad de medida"
          :options="sizeUnit"
          multiple
          required
        />
        <Input
          v-model="form.costMin"
          class="col-span-2"
          id="Costo mínimo (UMAs)"
          type="text"
          :onError="form.errors.costMin"
          required
        />
        <Input
          v-model="form.costMax"
          class="col-span-2"
          id="Costo máximo (UMAs)"
          type="text"
          :onError="form.errors.costMax"
          required
        /> 
      </div>
      <div class="mb-3 p-7 flex justify-center">
        <button
          type="submit"
          class="w-1/4 bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
        >
          Guardar
        </button>
      </div>
    </form>
  </div>
</template>
