
<template>
  <section class="flex flex-col gap-4 pt-7">
    <div class="flex gap-7">
      <div class="flex flex-col gap-7 items-center">
        <div class="flex flex-col gap-1 w-96">
          <FloatLabel>
            <InputText class="w-full" v-model="newFaq.title" />
            <label>{{ $t("سوال") }}</label>
          </FloatLabel>
        </div>

        <div class="flex flex-col gap-1 w-96">
          <FloatLabel>
            <Textarea v-model="newFaq.description" rows="3" class="w-full" />
            <label>{{ $t("پاسخ") }}</label>
          </FloatLabel>
        </div>
      </div>
    </div>

    <div class="w-full flex gap-2 mt-4">
      <Button
        :label="$t('back')"
        outlined
        severity="secondary"
        class="ml-auto"
        @click="dialog.close()"
      />
      <Button
        :label="$t('save')"
        icon="pi pi-save"
        severity="success"
        @click="save(newFaq)"
        :loading="saving"
      />
    </div>
  </section>
</template>

<script setup>
import { inject, reactive, ref } from "vue";
import { useFaqStore } from "@/stores/faq";
const store = useFaqStore();
const saving = ref(false);
const dialog = inject("dialogRef");
const { toast } = inject("service");
const newFaq = reactive({
  title: "",
  description: "",
});

const save = async (newFaq) => {
saving.value = true;
  const send = await store.create(newFaq);
  if (send.status === 200 || send.status === 201) {
    toast.add({
      severity: "success",
      summary: "موفق",
      detail: "آیتم جدید ایجاد شد",
      life: 3000,
    });
    
    dialog.value.close()
  }
  saving.value = false;
  store.index()
};
</script>
