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

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

      <v-container fluid grid-list-md>

        <v-flex xs12 sm12>

          <v-layout>
            <v-flex xs12 sm12 md10 class="mx-auto">
              <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-layout wrap>

            <!-- ****** TABLE DATA MARK  ****** -->

            <v-flex xs12 sm12 md10 lg10 class="mx-auto" id="printMe">

              <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-layout wrap>
                  <v-flex xs12 sm12 md12>
                    <div
                      style="    
                         border-bottom: 1px solid #ddd;
                         overflow: hidden;
                         vertical-align: middle;
                         margin: 10px;
                         padding-bottom: 10px;"
                    >
                      <v-flex xs12 sm12 md12>
                        <v-layout>
                          <div class="school-logo">

                            <v-avatar size="100">

                              <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
                              <img
                                src="/static/schoolIcons/INTRACK_White.png"
                                v-else-if="!userData.schoolLogoUrl"
                              />
                            </v-avatar>
                          </div>
                          <div class="school-name">
                            <h2>{{ userData.name }}</h2>
                          </div>
                        </v-layout>
                      </v-flex>
                    </div>
                  </v-flex>
                  <!-- Profile School -->
                  <v-layout>
                    <!-- school info -->
                    <v-flex xs12 sm12 md12 lg12 style="margin:0px 10px; ">
                      <v-layout wrap>

                        <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;">

                          <span style="font-size: 16px;  color: #707478;">From</span>
                          <br />
                          <p style="font-size:20px;margin-bottom: 16px;">{{ userData.name }}</p>
                          <p
                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                          >{{ userData.address }}</p>
                          <p
                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                          >Phone : {{ userData.mobile }}</p>
                          <p
                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                          >Email : {{ userData.email }}</p>

                        </v-flex>

                        <!-- student info -->

                        <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;">

                          <span style="font-size: 16px;  color: #707478;">To</span>
                          <br />
                          <p
                            style="font-size:20px;margin-bottom: 16px;"
                          >{{ invoiceParticularData.studentId.name }}</p>
                          <p
                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                          >Class : {{ invoiceParticularData.classId.classNum }}</p>
                          <p
                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                          >Roll : {{ invoiceParticularData.studentId.rollNo }}</p>
                          <p
                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                          >Email : {{ invoiceParticularData.studentId.email ? invoiceParticularData.studentId.email: '-' }}</p>

                        </v-flex>

                        <v-flex xs4 sm4 md4 lg4 style="padding:4px;padding-left:16px;">

                          <br />
                          <p
                            style="font-size: 15px;margin:0px;margin-bottom:8px;"
                          >Invoice #{{ invoiceParticularData.invoiceNumber }}</p>
                          <br />

                          <p style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;">
                            Status :
                            <span
                              :style="invoiceParticularData.paymentStatus == 'FULLY_PAID' ? 'color:green' : '' || 
                               invoiceParticularData.paymentStatus == 'PARTIALLY_PAID'  ? 'color:#f39c12 !important' : '' ||
                               invoiceParticularData.paymentStatus == 'NOT_PAID'  ? 'color:red !important' : '' "
                            >{{ invoiceParticularData.paymentStatus }}</span>
                          </p>

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

                </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="4"
                        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.subTotal }}</td>

                    </tr>
                    <tr>

                      <td
                        colspan="4"
                        style="
                       border: 1px solid #e2e7eb;
                       padding: 10px;
                       text-align: center;"
                      >
                        <span style="float:right">Paid (RS) :</span>

                      </td>

                      <td
                        style="
                       border: 1px solid #e2e7eb;
                       padding: 10px;
                       text-align: center;"
                      >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>

                    </tr>
                    <tr>

                      <td
                        colspan="4"
                        style="
                       border: 1px solid #e2e7eb;
                       padding: 10px;
                       text-align: center;"
                      >
                        <span style="float:right">Discount :</span>

                      </td>

                      <td
                        style="
                       border: 1px solid #e2e7eb;
                       padding: 10px;
                       text-align: center;"
                      >{{ feeType.discount}}</td>

                    </tr>
                    <tr>

                      <td
                        colspan="4"
                        style="
                       border: 1px solid #e2e7eb;
                       padding: 10px;
                       text-align: center;"
                      >
                        <span style="float:right">Balance (RS) :</span>

                      </td>

                      <td
                        style="
                       border: 1px solid #e2e7eb;
                       padding: 10px;
                       text-align: center;"
                      >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>

                    </tr>

                  </tfoot>

                </table>

                <v-layout>
                  <v-flex xs12>
                    <v-card

                      style="

                    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.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>
  /* 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;
  }

  .card-style {

    background: #7f62f8 !important;
    border-color: #7f62f8 !important;
    border-radius: 12px;
    text-align: center !important;
    padding-top: 10px !important;

  }
  .add-button {

    background: #feb83c !important;
    border-color: #feb83c !important;
    text-transform: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;

  }
  .clear-button {

    background: #fa7676 !important;
    border-color: #fa7676 !important;
    text-transform: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;

  }
  .card-styles {

    background: #7f62f8 !important;
    border-color: #7f62f8 !important;

  }
  .v-card__actions .v-btn {

    margin: 0 15px !important;
    min-width: 96px !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>