<template>
    <v-app id="pages-dasboard">
      <!-- ****** Edit multiple INVOICE ****** -->
      <v-container fluid grid-list-md>
        <v-card>
          <v-layout wrap>
                    <v-flex 12>
                      <br />

                      <v-layout wrap> 

                        <v-flex xs12 sm6>
                      <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>
                        <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>
               </v-card>

                  <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-container>
        </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 Util from "@/util";
  import moment from "moment";
  
  export default {
    data: () => ({
      showLoader: false,
      feeTypes: [],
      invoiceData: {},
      feeType: {
        amount: "",
        discount: "",
        totalPaidAmount: "",
        subTotal: "",
        feeTypeName: ""
      },
      feeTypeData: [],
      token: "",
      invoiceParticularData: {},
    }),
    
    methods: {
     
      getInvoiceList() {
        http()
          .get("/getParticularInvoice", {
            params: { invoiceId: this.$route.params.viewInvoiceId },
            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
              console.log("response.data.data.totalPaidAmount",response.data.data.totalPaidAmount)
              (this.showLoader = false);
          })
          .catch(err => {
            this.showLoader = false;
          });
      },
      getfeeType() {
        http()
          .get("/getFeesList", {
            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);
      }
    },
    mounted() {
      this.token = this.$store.state.token;
      this.getInvoiceList();
      this.getfeeType();
    },
    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;
  }
  
  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>