<template>
  <div id="pre-factor">
    <div>
      <h2>
        <i class="isax isax-receipt-2"></i>
        <span>{{ $t("submitPreFactor") }}</span>
      </h2>
      <p>{{ $t("submitPreFactorDesc") }}</p>
    </div>
    <PanelSalesFactor :data="factorData" />
    <ul>
      <li v-for="(btn, key) in btns" :key="key">
        <Button v-bind="btn.props" @click="click(key)" />
      </li>
    </ul>
  </div>
</template>

<script setup>
import init from "../../../initialize/pre-factor.js";
import html2pdf from "html2pdf.js";
const { btns } = init();
const dialog = inject("dialogRef");
const factorData = dialog.value.data;
const router = useRouter();
const store = useCartStore();

const click = async (key) => {
  if (key == "send") {
    await store.createPayment(factorData._id);
    //   navigateTo(data.value.url, { external: true });
    // store.paymentUrl = ''
  }
  if (key == "save" || key == "print") {
    // Select the element you want to print
    const element = document.getElementById("pre-factor");

    // Configure options for html2pdf
    const options = {
      margin: 1,
      filename: "preFactor.pdf",
      image: { type: "jpeg", quality: 0.98 },
      html2canvas: { scale: 1 },
      jsPDF: { unit: "in", format: "a3", orientation: "landscape" },
    };

    // Generate the PDF
    html2pdf().set(options).from(element).save();
  }

  dialog.value.close();
};
</script>

<style lang="scss">
#pre-factor {
  @apply flex flex-col gap-8 rounded-2xl w-screen lg:w-[79vw] h-auto py-2 bg-white overflow-y-hidden;

  & > div:nth-of-type(1) {
    @apply flex flex-col items-center;

    h2 {
      @apply flex items-center gap-4 text-[#333333];

      i {
        @apply text-2xl;
      }

      span {
        @apply text-xl font-bold font-vazir;
      }
    }

    p {
      @apply w-[23rem] px-1 sm:w-[30.2rem] mt-[1.1rem] text-center text-[#4C4C4C] text-base sm:text-lg font-vazir;
    }
  }

  & > ul {
    @apply w-full flex flex-wrap gap-4 px-8;

    li {
      button {
        @apply w-[12.3rem] h-12 #{!important};

        .p-button-label {
          @apply h-[1.6rem] text-sm lg:text-lg font-medium font-iran-sans;
        }

        .p-button-icon {
          @apply text-2xl text-[#7F7F7F];
        }

        &.p-button-secondary {
          @apply border-[#7F7F7F] justify-center;

          .p-button-label {
            @apply grow-0 text-[#7F7F7F];
          }
        }
      }
    }
  }
}

body:has(.pre-factor) {
  .sales-factor {
    h2 {
      @apply hidden #{!important};
    }
  }
}
</style>
