Rent Receipt

<template>
  <div class="h-[700px] w-full">
    <iframe v-if="pdfLink" :src="pdfLink" class="h-full w-full" />
  </div>
</template>

<script setup lang="ts">
  import { _colors } from "#tailwind-config/theme";

  const pdfLink = ref();

  const loadPdf = async () => {
    const { $pdfMake } = useNuxtApp();

    const bigMarging: [number, number, number, number] = [0, 0, 0, 30];
    const smallMarging: [number, number, number, number] = [0, 0, 0, 10];

    $pdfMake
      .createPdf(
        {
          content: [
            {
              text: "Rent Reciept",
              margin: bigMarging,
              style: { alignment: "center", fontSize: 20, bold: true },
            },
            // Date on the left
            {
              text: [
                { text: "Date: ", bold: true },
                { text: "_______________________________", font: "Roboto" },
              ],
              margin: bigMarging,
            },
            // Tenant
            {
              text: [
                { text: "Tenant's Name: ", bold: true },
                { text: "____________________________________", font: "Roboto" },
              ],
              margin: smallMarging,
            },
            //Address
            {
              text: [
                { text: "Address of the rented property: ", bold: true },
                { text: "_____________________________________________", font: "Roboto" },
              ],
              margin: bigMarging,
            },
            // Amoun received
            {
              text: [
                { text: "Amount Received: ", bold: true },
                { text: "____________________________________", font: "Roboto" },
              ],
              margin: smallMarging,
            },
            // Payment method
            { text: "Payment Method:", style: { bold: true }, margin: smallMarging },
            "[  ]  Cash",
            "[  ]  Check",
            "[  ]  Money Order",
            { text: "[  ]  Other", margin: smallMarging },

            {
              text: [
                { text: "Rent required: ", bold: true },
                { text: "____________________________________", font: "Roboto" },
              ],
              margin: smallMarging,
            },
            {
              text: [
                { text: "Rent outstanding:", bold: true },
                { text: "____________________________________", font: "Roboto" },
              ],
              margin: smallMarging,
            },
            {
              text: [
                { text: "Rent covers from ", bold: true },
                { text: "________________________", font: "Roboto" },
                { text: " to ", bold: true },
                { text: "________________________", font: "Roboto" },
              ],
              margin: [0, 0, 0, 50],
            },
            {
              columns: [
                { text: { text: "Landlord's Signature: ", bold: true }, margin: smallMarging },
                { text: { text: "Tenant's Signature: ", bold: true }, margin: smallMarging },
              ],
            },
            {
              columns: [
                { text: { text: "_______________________________", font: "Roboto" } },
                { text: { text: "_______________________________", font: "Roboto" } },
              ],
            },
          ],
          defaultStyle: { color: _colors.slate[700], font: "playfair" },
        },
        {},
        {
          playfair: {
            normal:
              "https://cdn.jsdelivr.net/npm/typeface-playfair-display@1.1.13/files/playfair-display-latin-400.woff",
            bold: "https://cdn.jsdelivr.net/npm/typeface-playfair-display@1.1.13/files/playfair-display-latin-700.woff",
            italics:
              "https://cdn.jsdelivr.net/npm/typeface-playfair-display@1.1.13/files/playfair-display-latin-400italic.woff",
            bolditalics:
              "https://cdn.jsdelivr.net/npm/typeface-playfair-display@1.1.13/files/playfair-display-latin-700italic.woff",
          },
          ...useFontPresets(),
        }
      )
      .getDataUrl((dataUrl: any) => {
        pdfLink.value = dataUrl;
      });
  };
  onMounted(async () => {
    await loadPdf();
  });
</script>