<template>
  <main id="main" style="padding-bottom:150px">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="section-header">
            <h2>Thank you</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <p>
            Thank you for placing a listing with Uni-Vate, as soon as we receive payment your
            listing will be published.
          </p>
        </div>
      </div>
      <div class="row mt-2">
        <div class="col">
          <div class="section-header">
            <h2>EFT Information</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <table id="bankDetail" class="table table-striped">
            <tr>
              <strong>Banking Details:</strong>
            </tr>
            <tr>
              <td><strong>Bank:</strong></td>
              <td>First National Bank ("FNB")</td>
            </tr>
            <tr>
              <td><strong>Account Type:</strong></td>
              <td>Current</td>
            </tr>
            <tr>
              <td><strong>Account Number:</strong></td>
              <td>62460572152</td>
            </tr>
            <tr>
              <td><strong>Branch:</strong></td>
              <td>Centurion 261550</td>
            </tr>
            <tr>
              <td><strong>Amount:</strong></td>
              <td>R{{ getListingFee.amount }}</td>
            </tr>
            <tr>
              <td><strong>Reference: </strong></td>
              <td>{{ week.id }}</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col">
          <button class="btn-solid-blue" @click="saveBankDetails">SAVE</button>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapGetters } from "vuex";
import jsPDF from "jspdf";
import "jspdf-autotable";
export default {
  props: {
    week: {}
  },
  computed: {
    ...mapGetters("fees", ["getListingFee"])
  },
  methods: {
    saveBankDetails() {
      const doc = new jsPDF();
      var today = new Date();
      var dd = String(today.getDate()).padStart(2, "0");
      var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
      var yyyy = today.getFullYear();

      today = dd + "/" + mm + "/" + yyyy;

      doc.setDrawColor(186, 186, 186);
      doc.line(15, 62, 195, 62);
      doc.setFontSize(20);
      doc.text(115, 25, "Date:");
      doc.setFontSize(9);
      doc.text(115, 30, "As of date " + today);
      doc.addImage("/img/logos/UVProp.png", "PNG", 15, 10, 75, 25);
      doc.setFontSize(12);
      doc.autoTable({
        html: "#bankDetail",
        startY: 47,
        headStyles: {
          fillColor: [255, 255, 255],
          textColor: [0, 0, 0]
        }
      });

      doc.setFontSize(10);
      const pages = doc.internal.getNumberOfPages();
      const pageWidth = doc.internal.pageSize.width;
      const pageHeight = doc.internal.pageSize.height;
      for (let j = 1; j < pages + 1; j++) {
        let horizontalPos = pageWidth / 2;
        let verticalPos = pageHeight - 10;
        doc.setPage(j);
        doc.text(`${j} of ${pages}`, horizontalPos, verticalPos, {
          align: "center"
        });
      }
      doc.save("Uni-Vate EFT" + dd + "-" + mm + "-" + yyyy + ".pdf");
    }
  }
};
</script>

<style lang="scss" scoped></style>
