<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-avatar>
                        <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
                        <img
                          src="/static/schoolIcons/INTRACK_White.png"
                          v-else-if="!userData.schoolLogoUrl"
                        />
                      </v-avatar>
                      <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>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-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>Payment Method :</b>
                          </h5>
                        </v-flex>
                        <v-flex sm6 xs8>
                          <h5 class="my-1">{{ invoiceParticularData.paymentMethod }}</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="2">
                      <span class="right subheding">Total Amount (RS) :</span>
                    </td>
                    <td>{{ feeType.amount }}</td>
                    <td>{{ feeType.amount-feeType.subTotal }}</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.viewPaymentInvoiceId,
            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>