<template>
    <v-app id="pages-dasboard">
      <!-- ****** Edit multiple INVOICE ****** -->

  
      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        color="success"
      >{{ text }}</v-snackbar>
      <v-flex xs12 sm12>
        <v-container fluid grid-list-md>
          <v-layout wrap>
            <v-flex xs12 sm12 md5 class="mt-4">
              <v-card flat>
                <v-toolbar dark class="card-styles" flat>
                  <v-spacer></v-spacer>
                  <v-toolbar-title>
                    <h3>Invoice</h3>
                  </v-toolbar-title>
                  <v-spacer></v-spacer>
                </v-toolbar>
                <v-form ref="form" v-model="valid" lazy-validation class="py-4">

                  <v-layout>

                    <v-flex xs4 class="pt-4 subheading">
                      <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>

                    </v-flex>

                    <v-flex xs6 class="ml-3">

                      <v-select

                        :items="addclass"
                        label="Select Class"
                        v-model="editData.classId"
                        item-text="classNum"
                        item-value="_id"
                        @change="getAllStudents()"

                      ></v-select>
                    </v-flex>

                  </v-layout>
                  <v-layout>
                    <v-flex xs4 class="pt-4 subheading">
                      <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
                    </v-flex>
                    <v-flex xs6 class="ml-3">
                      <v-select
                        :items="studentList"
                        label="Select Incharge"
                        v-model="editData.studentId"
                        item-text="name"
                        item-value="_id"
                      ></v-select>

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

                  <v-layout>
                    <v-flex xs4 class="pt-4 subheading">
                      <label class="right">Date:</label>
                    </v-flex>
                    <v-flex xs6 class="ml-3">
                      <v-menu
                        ref="menu1"
                        :close-on-content-click="false"
                        v-model="menu1"
                        :nudge-right="40"
                        lazy
                        :return-value.sync="editData.date"
                        transition="scale-transition"
                        offset-y
                        full-width
                        min-width="290px"
                      >

                        <v-text-field

                          slot="activator"
                          v-model="editData.date"
                          placeholder="Select date"

                        ></v-text-field>

                        <v-date-picker
                          v-model="editData.date"
                          @input="$refs.menu1.save(editData.date)"
                        ></v-date-picker>
                      </v-menu>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs4 class="pt-4 subheading">
                      <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
                      <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
                    </v-flex>
                    <v-flex xs6 class="ml-3">
                      <v-select
                        :items="paymentStatus"
                        v-model="editData.paymentStatus"
                        item-text="name"
                        item-value="value"
                        label="Select Payment Status"
                        @change="getPayMethodList"
                      ></v-select>
                    </v-flex>
                  </v-layout>
                  <v-layout v-show="showPayMethods">
                    <v-flex xs4 class="pt-4 subheading">
                      <label class="right">Payment Method:</label>
                    </v-flex>
                    <v-flex xs6 class="ml-3">
                      <v-select
                        :items="paymentMethods"
                        v-model="editData.paymentMethod"
                        label="Select Payment Method"
                      ></v-select>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm11>
                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn
                          @click="update(editData)"
                          round
                          dark
                          :loading="loading"
                          class="add-button"
                        >Update</v-btn>
                      </v-card-actions>
                    </v-flex>
                  </v-layout>
                </v-form>
              </v-card>
            </v-flex>
            <v-flex xs12 sm12 md7 class="mt-4">
              <v-card>
                <v-toolbar dark class="card-styles" flat>
                  <v-spacer></v-spacer>
                  <v-toolbar-title>
                    <h3>Fee Type List</h3>
                  </v-toolbar-title>
                  <v-spacer></v-spacer>
                </v-toolbar>
                <v-layout wrap>
                  <v-flex xs12>
                    <v-layout wrap>
                      <v-flex xs12 sm2 class="mt-3">
                        <label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label>
                        <label
                          class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only"
                        >Fee Type:</label>
                      </v-flex>
                      <v-flex xs12 sm4>
                        <v-select
                          :items="feeTypes"
                          v-model="feeType.feeTypeName"
                          item-text="feeType"
                          item-value="feeType"
                          label="Select Fee Type"
                          class="px-2"
                        ></v-select>
                      </v-flex>
                      <v-flex xs12 sm6>
                        <v-btn
                          dark
                          class="right mt-3 hidden-sm-only hidden-xs-only"
                          color="open-dialog-button"
                          @click="selectFeeType"
                        >ADD</v-btn>
                        <v-btn
                          dark
                          class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only"
                          color="open-dialog-button"
                          @click="selectFeeType"
                        >ADD</v-btn>
                      </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>
                    <th>Paid Amount</th>
                    <th>Action</th>
                  </tr>
                  <tr
                    v-for="(feeType, index) in editData.feeType"
                    :key="index"
                    v-on:keyup="getAmmountDetails(feeType,editData.feeType)"
                  >
                    <td style="width:40px">{{ index + 1 }}</td>
                    <td style="width:120px">{{ feeType.feeTypeName }}</td>
                    <td>
                      <v-text-field
                        placeholder="fill your Amount"
                        v-model="feeType.amount"
                        type="number"
                      ></v-text-field>
                    </td>
                    <td>
                      <v-text-field
                        placeholder="fill your Discount"
                        v-model="feeType.discount"
                        type="number"
                      ></v-text-field>
                    </td>
                    <td>{{ feeType.subTotal }}</td>
                    <td v-if="editData.paymentStatus === 'NOT_PAID'">
                      <v-text-field
                        placeholder="fill your Paid Amount"
                        v-model="feeType.paidAmount"
                        type="number"
                        :disabled="disabled"
                      ></v-text-field>
                    </td>
                    <td v-if="editData.paymentStatus != 'NOT_PAID'">
                      <v-text-field
                        placeholder="fill your Paid Amount"
                        v-model="feeType.paidAmount"
                        type="number"
                      ></v-text-field>
                    </td>
                    <td>
                      <v-icon
                        color="error"
                        @click="deleteSelectFee(feeType,editData.feeType,index)"
                      >delete</v-icon>
                    </td>
                  </tr>
                  <tfoot v-if="feeType.amount != 0.00">
                    <tr>
                      <td colspan="2">Total:</td>
                      <td>{{ feeType.amount }}</td>
                      <td>{{ feeType.discount }}</td>

                      <td>{{ feeType.subTotal }}</td>

                      <td>{{ feeType.paidAmount }}</td>

                    </tr>

                  </tfoot>
                  <tfoot v-else-if="feeType.amount == 0.00">
                    <tr>
                      <td colspan="2">Total:</td>
                      <td>{{ editData.totalAmount }}</td>
                      <td>{{ editData.totalDiscount }}</td>
                      <td>{{ editData.totalSubTotal }}</td>
                      <td>{{ editData.totalPaidAmount }}</td>
                    </tr>
                  </tfoot>
                </table>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-flex>

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

    props: ["editData"],

    data: () => ({
      snackbar: false,
      showPayMethods: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",
      showLoader: false,
      loading: false,
      date: null,
      search: "",
      // dialog: false,
      // dialog1: false,
      valid: true,
      validEdit: true,
      // isActive: true,
      // newActive: false,
      showFeeType: false,
      disabled: true,
      details: [],
      feeTypes: [],
      menu1: false,

      // invoiceData: {},

      paymentMethods: ["Cash", "Cheque"],
      feeType: {
        amount: "0.00",
        discount: "0.00",
        paidAmount: "0.00",
        subTotal: "0.00",
        feeTypeName: ""
      },
      feeTypeData: [],
      pagination: {
        rowsPerPage: 15
      },
      token: "",
      editedItem: {},
      invoiceParticularData: {},
      addclass: [],
      studentList: [],
      paymentStatus: [
        {
          name: "Not Paid",
          value: "NOT_PAID"
        },
        {
          name: "Partially Paid",
          value: "PARTIALLY_PAID"
        },
        {
          name: "Fully Paid",
          value: "FULLY_PAID"
        }
      ]
    }),
    // watch: {
    //   menu1(val) {
    //     val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
    //   }
    // },
    methods: {
      save(date) {
        this.$refs.menu1.save(date);
      },
      dates: function(date) {
        return moment(date).format("MMMM DD, YYYY");
      },

      update(editData) {
        // console.log("editData-----------", editData);

        let feeTypeId = "";
        for (let i = 0; i < this.feeTypes.length; i++) {
          if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
            feeTypeId = this.feeTypes[i]._id;
          }
        }

        // console.log(editData);
        let editInvoiceData = {
          invoiceId: editData._id,
          classId: editData.classNum,
          studentId: editData.sectionId,
          date: editData.date,
          paymentStatus: editData.paymentStatus,
          paymentMethod: editData.paymentMethod,
          feeType: editData.feeType,
          totalAmount: this.feeType.amount,
          totalDiscount: this.feeType.discount,
          totalSubTotal: this.feeType.subTotal,
          totalPaidAmount: this.feeType.paidAmount
        };
        if (editInvoiceData.paymentStatus == "NOT_PAID") {
          delete editInvoiceData.totalPaidAmount;
        }
        if (feeTypeId == "") {
          delete editInvoiceData.feeType[0].feeTypeId;
        }
        if (editInvoiceData.paymentStatus == "NOT_PAID") {
          delete editInvoiceData.paymentMethod;

        }

        http()

          .put("/updateInvoice", editInvoiceData)

          .then(response => {

            // this.getInvoiceList();
            this.snackbar = true;
            this.text = "New Invoice added successfully";
            this.loading = false;
            this.$emit("update-editInvoice");

          })

          .catch(error => {

            console.log(error);
            if ((this.snackbar = true)) {
              this.text = error.response.data.message;

            }

            this.loading = false;

          });
      },

      clear() {
        this.$refs.form.reset();
      },

      selectFeeType() {

        // console.log("clckkkkkkkkkkkkkkkkkk", this.feeType.feeTypeName);

        this.showFeeType = true;

        this.editData.feeType.push({ feeTypeName: this.feeType.feeTypeName });

      },

      deleteSelectFee: function(feeTyp, feeTypeList, index) {
        this.editData.feeType.splice(index, 1);
        this.getAmmountDetails(feeTyp, feeTypeList);

        if (this.feeTypeData.length == 0) {
          this.feeType = {
            amount: "0.00",
            discount: "0.00",
            paidAmount: "0.00",
            subTotal: "0.00",
            feeTypeList: ""
          };
        }
      },
      getAllClasses() {
        http()
          .get("/getClassesList", {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.addclass = response.data.data;

            this.getAllStudents();

          })

          .catch(error => {

            // console.log("err====>", err);

            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);
            }

          });
      },
      getAllStudents() {
        http()
          .get("/getStudentsList", {

            params: { classId: this.editData.classNum },

            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.studentList = response.data.data;
          })
          .catch(err => {
            // console.log("err====>", err);
          });
      },
      getfeeType() {
        http()
          .get("/getFeesList", {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.feeTypes = response.data.data;
          })
          .catch(err => {
            // console.log("err====>", err);
          });
      },

      getAmmountDetails(feeTyp, feeTypeList) {
        this.feeTypeData = feeTypeList;

        let feeType = {
          amount: "",
          discount: "",
          subTotal: "",
          subParticularTotal: "",
          paidAmount: ""
        };
        for (let i = 0; i < this.feeTypeData.length; i++) {
          // *********** AMOUNT ***********
          feeType.amount =
            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
          console.log("feeType.amount ", feeType.amount);
          this.feeType.amount = feeType.amount;
          this.feeType.subTotal = feeType.amount;
          this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
          // *********** DISCOUNT ***********
          if (this.feeTypeData[i].discount) {
            feeType.discount =
              Number(feeType.discount) + Number(this.feeTypeData[i].discount);
            console.log("feeType.discount", feeType.discount);
            this.feeType.discount = feeType.discount;
            feeType.subParticularTotal =
              this.feeTypeData[i].amount -
              (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
            console.log("feeType.subTotal", feeType.subTotal);
            this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
          }
          // *********** 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);

  
          // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
          if (feeType.paidAmount > feeType.subTotal) {
            this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
            this.feeType.paidAmount = feeType.subTotal;
          }

        }
      },
      getPayMethodList() {

        if (this.editData.paymentStatus == "PARTIALLY_PAID") {

          this.showPayMethods = true;

        } else if (this.editData.paymentStatus == "FULLY_PAID") {

          this.showPayMethods = true;
        } else {
          this.showPayMethods = false;
        }
      }
    },
    mounted() {
      this.token = this.$store.state.token;

      this.getAllClasses();
      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>