<template>
    <v-app id="pages-dasboard">

      <!-- ****** Edit INVOICE ****** -->

      <v-container fluid grid-list-md>

        <v-layout>
          <v-flex xs12 sm8 md10>
            <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
              Print
              <v-icon size="18" right dark>print</v-icon>
            </v-btn>
          </v-flex>
        </v-layout>
        <v-flex xs12 sm12 id="printMe">

          <v-layout wrap>

            <!-- ****** TABLE DATA MARK  ****** -->
            <v-flex xs12 sm12 md12>
              <v-card>
                  <v-layout wrap>
                    <v-flex 12>
                      <br />
                      <v-layout>
                        <v-flex xs12 sm12 md12 class="text-xs-center">
                          <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
                          <p class="title">{{ userData.name }}</p>
                          <p>{{ userData.address }}</p>
                        </v-flex>
  
                        <v-flex xs12 sm12 md12 class="text-xs-center">
                          <v-layout>
                            <v-flex xs4 sm2>
                              <h5 class="right my-1">
                                <b>invoice:</b>
                              </h5>
                            </v-flex>
                            <v-flex sm11 xs8>
                              <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
                            </v-flex>
                          </v-layout>
                          <v-layout>
                            <v-flex xs4 sm2>
                              <h5 class="right my-1">
                                <b>Name:</b>
                              </h5>
                            </v-flex>
                            <v-flex sm11 xs8>
                              <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
                            </v-flex>
                          </v-layout>
                          <v-layout>
                            <v-flex xs4 sm2>
                              <h5 class="right my-1">
                                <b>Class:</b>
                              </h5>
                            </v-flex>
                            <v-flex sm11 xs8>
                              <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
                            </v-flex>
                          </v-layout>
                          <!-- <v-flex xs12 sm6> -->
                          <v-layout>
                            <v-flex xs4 sm2>
                              <h5 class="right my-1">
                                <b>Roll No:</b>
                              </h5>
                            </v-flex>
                            <v-flex sm6 xs8>
                              <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
                            </v-flex>
                          </v-layout>
                          <v-layout>
                            <v-flex xs4 sm2>
                              <h5 class="right my-1">
                                <b>email:</b>
                              </h5>
                            </v-flex>
                            <v-flex sm6 xs8>
                              <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
                            </v-flex>
                          </v-layout>
                          <v-layout>
                            <v-flex xs4 sm2>
                              <h5 class="right my-1">
                                <b>Status :</b>
                              </h5>
                            </v-flex>
                            <v-flex sm6 xs8>
                              <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
                            </v-flex>
                          </v-layout>
                        </v-flex>
                      </v-layout>

                    </v-flex>
                  </v-layout>

                <table class="feeTypeTable tableRsponsive">
                  <tr class="info white--text">
                    <th>#</th>
                    <th>Fee Type</th>
                    <th>Amount</th>
                    <th>Discount</th>
                    <th>Subtotal</th>
                  </tr>
                  <tr
                    v-for="(feeType, index) in feeTypeData"
                    :key="index"
                    v-on:keyup="getAmmountDetails(feeType)"
                  >
                    <td style="width:40px">{{ index + 1 }}</td>
                    <td style="width:120px">{{ feeType.feeTypeName }}</td>
                    <td style="width:120px">{{ feeType.amount }}</td>
                    <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
                    <td style="width:120px">{{ feeType.subTotal }}</td>
                  </tr>
                  <!-- <tfoot>
                    <tr>
                      <td colspan="4">
                        <span class="right subheding">Total Amount (RS) :</span>
                      </td>
                      <td>{{ feeType.subTotal }}</td>
                    </tr>
                    <tr>
                      <td colspan="4">
                        <span class="right subheding">Paid (RS) :</span>
                      </td>
                      <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
                    </tr>
                    <tr>
                      <td colspan="4">
                        <span class="right subheding">Balance (RS) :</span>
                      </td>
                      <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
                    </tr>
                  </tfoot>-->
                </table>
              </v-card>

            </v-flex>
          </v-layout>

        </v-flex>

      </v-container>
      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>
    </v-app>
  </template>
  
  <script>
  import http from "@/Services/http.js";

  import moment from "moment";
  
  export default {
    data: () => ({
      showLoader: false,
      feeTypes: [],

      filterData: [],

      invoiceData: {},
      feeType: {
        amount: "",
        discount: "",
        totalPaidAmount: "",
        subTotal: "",
        feeTypeName: ""
      },
      feeTypeData: [],
      token: "",

      invoiceParticularData: {
        studentId: {
          name: ""
        },
        classId: {
          classNum: ""
        },
      },
      userData: {
        name: ""
      },

    }),

    methods: {

      getInvoiceList() {
        http()
          .get("/getParticularInvoice", {

            params: {
              invoiceId: this.$route.params.viewInvoiceId,
              schoolId: this.$store.state.schoolId
            },

            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.invoiceParticularData = response.data.data;
            this.invoiceData = this.invoiceParticularData;
            this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
            this.feeTypeData = this.invoiceParticularData.feeType;
            (this.feeType.amount = response.data.data.totalAmount),
              (this.feeType.discount = response.data.data.totalDiscount),
              (this.feeType.subTotal = response.data.data.totalSubTotal),

              (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
            this.showLoader = false;

          })

          .catch(error => {

            this.showLoader = false;

            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
              this.$store.dispatch("Role", null);
            }

          });
      },
      getfeeType() {
        http()
          .get("/getFeesList", {

            params: { schoolId: this.$store.state.schoolId },

            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.feeTypes = response.data.data;
          })
          .catch(err => {
            // console.log("err====>", err);
          });
      },
      getAmmountDetails(feeTyp) {
        let feeType = {
          subTotal: "",
          subParticularTotal: "",
          paidAmount: ""
        };

        // *********** SUBTOTAL ***********
        feeType.subTotal =
          Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
        this.feeType.subTotal = feeType.subTotal.toFixed(2);
        // *********** PAID-AMOUNT ***********
        feeType.paidAmount =
          Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
        this.feeType.paidAmount = feeType.paidAmount.toFixed(2);

      },
      printInvoice() {
        // Pass the element id here
        this.$htmlToPaper("printMe");
      },
      getUserData() {
        http()
          .get("/getParticularUserDetail")
          .then(response => {
            this.userData = response.data.data;
          })
          .catch(error => {
            // if (error.response.status === 401) {
            //   this.$router.replace({ path: "/" });
            //   this.$store.dispatch("setToken", null);
            //   this.$store.dispatch("Id", null);
            // }
          });

      }
    },
    mounted() {
      this.token = this.$store.state.token;
      this.getInvoiceList();
      this.getfeeType();

      this.getUserData();

    },
    created() {
      this.$root.$on("app:search", search => {
        this.search = search;
      });
    },
    beforeDestroy() {
      // dont forget to remove the listener
      this.$root.$off("app:search");
    }
  };
  </script>
  
  
  <style scoped>
  .active {
    background-color: gray;
    color: white !important;
  }
  .activebtn {
    color: black !important;
  }
  table {
    border-collapse: collapse;
    border: 1px solid #e2e7eb;
  }

  .open-dialog-button {
    background: #827bfa !important;
    border-color: #827bfa !important;
    text-transform: none !important;
  }

  
  th,
  td {
    border: 1px solid #e2e7eb;
    padding: 10px;
    text-align: center;
  }
  table.feeTypeTable {
    table-layout: auto !important;
    width: 100% !important;
  }

  @media screen and (max-width: 380px) {

    .tableRsponsive {
      display: block;
      position: relative;
      overflow: scroll;
    }

  }

  </style>