<template>
  <section class="flex flex-col gap-4">
    <Panel :header="$t('ایجاد تخفیف جدید')">
      <div class="grid grid-cols-3 gap-7">
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full custom-input" v-model="coupon.startDate" />
            <label>{{ $t("تاریخ شروع") }}</label>
          </FloatLabel>
          <date-picker
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            display-format="jYYYY-jMM-jDD HH:mm"
            :timezone="true"
            color="dimgray"
            v-model="coupon.startDate"
            simple
            custom-input=".custom-input"
          ></date-picker>
        </div>

        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full custom-input2" v-model="coupon.endDate" />
            <label>{{ $t("تاریخ پایان") }}</label>
          </FloatLabel>
          <date-picker
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            display-format="jYYYY-jMM-jDD HH:mm"
            :timezone="true"
            color="dimgray"
            v-model="coupon.endDate"
            simple
            custom-input=".custom-input2"
          ></date-picker>
        </div>
        <div class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="coupon.code" />
            <label>{{ $t("کد تخفیف") }}</label>
          </FloatLabel>
        </div>

        <div class="flex flex-col gap-1">
          <FloatLabel>
            <Dropdown
              v-model="type"
              @change="setType"
              :options="['مبلغ', 'درصد']"
              :optionLabel="levels"
              :optionValue="levels"
              class="w-full"
            />
            <label>{{ $t("نوع تخفیف") }}</label>
          </FloatLabel>
        </div>
        <div v-if="type === 'مبلغ'" class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="coupon.price" />
            <label>{{ $t("مبلغ تخفیف") }}</label>
          </FloatLabel>
        </div>

        <div v-if="type === 'درصد'" class="flex flex-col gap-1">
          <FloatLabel>
            <InputText class="w-full" v-model="coupon.percent" />
            <label>{{ $t("درصد تخفیف") }}</label>
          </FloatLabel>
        </div>


      </div>

      <div class="flex pt-4 justify-end">
        <Button
          :label="$t('save')"
          icon="pi pi-save"
          severity="success"
          :loading="saving"
          @click="create(coupon)"
        />
      </div>
    </Panel>
  </section>
</template>

<script setup>
import { useProductsStore } from "@/stores/products";
import { useDiscountStore } from "@/stores/discounts";
import { ref, reactive, inject } from "vue";

import { useRouter } from "vue-router";
const { toast, t } = inject("service");
const discount = useDiscountStore();
const type = ref(null);
const router = useRouter()
const setType = (val) => {
  if (val.value === "درصد") {
    coupon.discountType = "percent";
  } else {
    coupon.discountType = "price";
  }
};

const coupon = reactive({
  startDate: "",
  endDate: "",
  code: "",
  discountType: type.value,
  price: "",
  percent: null,
  allUsers: true,
});
const saving = ref(false);
const create = async (coupon) => {
  saving.value = true
  const datas = await discount.add(coupon);
  saving.value = false;
  if (datas === true) {
    toast.add({
      life: 2000,
      severity: "success",
      summary: t("successful"),
      detail: t("کد تخفیف ایجاد شد"),
    });
    router.push('/Coupons')
  } else{
    return toast.add({
      life: 2000,
      severity: "error",
      summary: t("error"),
      detail: "خطا رخ داد، مجدد تلاش کنید",
    });
  }

  
};
</script>

<style scoped>
.dp {
  height: 15px;
  border-radius: 10px !important;
}
</style>