<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>