<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
              style="
               background-color: #fff;
               border-color: #fff;
               color: rgba(0,0,0,0.87);
               border: 1px solid rgb(226, 231, 235);
               -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);
               box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);"
            >
              <!-- <v-layout wrap> -->
              <v-flex xs12 style="padding:16px 0px;">
                <v-layout wrap>
                  <v-flex xs12 sm3 md4 style="text-align:center">
                    <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
                      style="font-size: 20px !important;
                        font-weight: 500;
                        line-height: 1 !important;
                        letter-spacing: 0.02em !important;
                        margin:8px 0px;"
                    >{{ userData.name }}</p>
                    <p>{{ userData.address }}</p>
                  </v-flex>
                  <v-flex xs12 sm5 md4 class="text-xs-center">
                    <v-layout>
                      <v-flex xs4 sm3>
                        <h5 style="float:right;margin: 4px 0px;">
                          <b>Name:</b>
                        </h5>
                      </v-flex>
                      <v-flex sm9 xs8>
                        <h5
                          style="margin: 4px 0px;float: left;"
                        >{{ invoiceParticularData.studentId.name }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs4 sm3>
                        <h5 style="float:right;margin: 4px 0px;">
                          <b>Class:</b>
                        </h5>
                      </v-flex>
                      <v-flex sm9 xs8>
                        <h5
                          style="margin: 4px 0px;float: left;"
                        >{{ invoiceParticularData.classId.classNum }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs4 sm3>
                        <h5 style="float:right;;margin: 4px 0px;">
                          <b>Roll:</b>
                        </h5>
                      </v-flex>
                      <v-flex sm9 xs8>
                        <h5
                          style="margin: 4px 0px;float: left;"
                        >{{ invoiceParticularData.studentId.rollNo }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs4 sm3>
                        <h5 style="float:right;margin: 4px 0px;">
                          <b>email:</b>
                        </h5>
                      </v-flex>
                      <v-flex sm9 xs8>
                        <h5
                          class="linkCover"
                          style="margin: 4px 0px;float: left;"
                        >{{ invoiceParticularData.studentId.email }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <v-flex xs12 sm4 md4 class="text-xs-center">
                    <v-layout>
                      <v-flex xs4 sm3>
                        <h5 style="float:right;margin: 4px 0px;">
                          <b>invoice:</b>
                        </h5>
                      </v-flex>
                      <v-flex sm9 xs8>
                        <h5
                          style="margin: 4px 0px;float: left;"
                        >#{{ invoiceParticularData.invoiceNumber }}</h5>
                      </v-flex>
                    </v-layout>
                    <v-layout>
                      <v-flex xs4 sm3>
                        <h5 style="float:right;margin: 4px 0px;">
                          <b>Status:</b>
                        </h5>
                      </v-flex>
                      <v-flex sm9 xs8>
                        <h5
                          style="margin: 4px 0px;float: left;"
                        >{{ invoiceParticularData.paymentStatus }}</h5>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-flex>
              <!-- </v-layout> -->
              <table
                class="tableRsponsive"
                style=" 
                   table-layout: auto !important;
                   width: 100% !important;
                   border-collapse: collapse;
                   border: 1px solid #e2e7eb;"
              >
                <tr
                  class="white--text"
                  style="
                  background: #827bfa !important;
                  border-color: #827bfa !important;"
                >
                  <th
                    style="  
                    border: 1px solid #e2e7eb;
                    padding: 10px;
                    text-align: center;"
                  >#</th>
                  <th
                    style=" 
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >Fee Type</th>
                  <th
                    style="
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >Amount</th>
                  <th
                    style="  
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >Discount</th>
                  <th
                    style=" 
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >Subtotal</th>
                </tr>
                <tr
                  v-for="(feeType, index) in feeTypeData"
                  :key="index"
                  v-on:keyup="getAmmountDetails(feeType)"
                >
                  <td
                    style="width:40px;   
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >{{ index + 1 }}</td>
                  <td
                    style="
                     width:120px;  
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >{{ feeType.feeTypeName }}</td>
                  <td
                    style="width:120px; 
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >{{ feeType.amount }}</td>
                  <td
                    style="width:120px; 
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >{{ feeType.amount-feeType.subTotal }}</td>
                  <td
                    style="width:120px;
                      border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                  >{{ feeType.subTotal }}</td>
                </tr>
                <tfoot>
                  <tr>
                    <td
                      colspan="2"
                      style="
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                    >
                      <span style="float:right">Total Amount (RS) :</span>
                    </td>
                    <td
                      style="
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                    >{{ feeType.amount }}</td>
                    <td
                      style="
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                    >{{ feeType.amount-feeType.subTotal }}</td>
                    <td
                      style="
                     border: 1px solid #e2e7eb;
                     padding: 10px;
                     text-align: center;"
                    >{{ feeType.subTotal }}</td>
                  </tr>
                </tfoot>
              </table>
              <v-layout>
                <v-flex xs12>
                  <v-card
                    style="width:22%;
                  position:relative;
                  float:right !important;
                  margin:10px 0px;
                  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
                   box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
                  >
                    <div
                      style="
                 min-height: 20px;
                 padding: 9px;
                 margin-bottom: 20px;
                 background-color: #f0f3f5;
                 border: 1px solid #E2E7EB;
                 border-radius: 3px;"
                    >
                      <p
                        style="
                  margin: 0 0 10px;    
                  font-size: 12px;"
                      >
                        Create By : Admin
                        <br />
                        Date : {{ dates(invoiceParticularData.created) }}
                      </p>
                    </div>
                  </v-card>
                </v-flex>
              </v-layout>
            </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: {
    dates: function(date) {
      return moment(date).format("MMMM DD, YYYY");
    },
    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>
/* table {
  border-collapse: collapse;
  border: 1px solid #e2e7eb;
} */
.open-dialog-button {
  background: #827bfa !important;
  border-color: #827bfa !important;
  text-transform: none !important;
}
.center {
  text-align: center !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>