<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 md4>
              <v-card flat class="mb-4">
                <v-toolbar dark class="card-styles" flat>
                  <v-spacer></v-spacer>
                  <h3>Profile</h3>
                  <v-spacer></v-spacer>
                </v-toolbar>

                <!-- Profile User-->

                <v-card-text>
                  <v-container>
                    <v-layout wrap>
                      <v-flex xs12>
                        <v-layout>
                          <v-flex
                            xs12
                            class="text-xs-center text-sm-center text-md-center text-lg-center"
                          >
                            <v-avatar size="80px">
                              <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />
                              <img
                                :src="editPayment.profilePicUrl"
                                v-else-if="editPayment.profilePicUrl"
                              />
                            </v-avatar>
                          </v-flex>
                        </v-layout>
                        <v-layout>
                          <v-flex xs12 sm12>
                            <h3 class="text-xs-center">
                              <b>{{ editPayment.studentId.name }}</b>
                            </h3>
                            <p class="text-xs-center grey--text">Student</p>
                          </v-flex>
                        </v-layout>
                        <v-layout style="border: 1px solid lightgrey;">
                          <v-flex xs6 sm6 class="pa-0">
                            <h4 class="right">
                              <b>Roll No :</b>
                            </h4>
                          </v-flex>
                          <v-flex sm6 xs6 class="pa-0">
                            <h4>{{ editPayment.studentId.rollNo }}</h4>
                          </v-flex>
                        </v-layout>
                        <v-layout style="border: 1px solid lightgrey;">
                          <v-flex xs6 sm6 class="pa-0">
                            <h4 class="right">
                              <b>Class :</b>
                            </h4>
                          </v-flex>
                          <v-flex sm6 xs6 class="pa-0">
                            <h4>{{ editPayment.classId.classNum }}</h4>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                  </v-container>
                </v-card-text>
              </v-card>

              <!-- Account Fee Type List User-->

              <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">Payment Method:</label>
                    </v-flex>
                    <v-flex xs7 class="ml-3">
                      <v-select
                        :items="paymentMethods"
                        v-model="editPayment.paymentMethod"
                        label="Select Payment Method"
                      ></v-select>
                    </v-flex>
                  </v-layout>
                  <v-card-actions>
                    <v-spacer class="hidden-xs-only"></v-spacer>
                    <v-btn
                      color="open-dialog-button"

                      round

                      dark

                      class="right add-button"

                      @click="update(editPayment)"
                    >Add Payment</v-btn>
                  </v-card-actions>
                </v-form>
              </v-card>
            </v-flex>
            <v-flex xs12 sm12 md8>
              <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>

                <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 editPayment.feeType"
                    :key="index"
                    v-on:keyup="getAmmountDetails(feeType,editPayment.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-text-field
                        placeholder="fill your Paid Amount"
                        v-model="feeType.paidAmount"
                        type="number"
                      ></v-text-field>
                    </td>

                    <td v-if="!editPayment.feeType">

                      <v-icon
                        color="error"
                        @click="deleteSelectFee(feeType,editPayment.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>{{ editPayment.totalAmount }}</td>
                      <td>{{ editPayment.totalDiscount }}</td>
                      <td>{{ editPayment.totalSubTotal }}</td>
                      <td>{{ editPayment.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: ["editPayment"],
    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(editPayment) {
        // console.log("editPayment-----------", editPayment);
        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(editPayment);
        let editInvoiceData = {
          invoiceId: editPayment._id,
          classId: editPayment.classNum,
          studentId: editPayment.sectionId,
          date: editPayment.date,
          paymentStatus: editPayment.paymentStatus,
          paymentMethod: editPayment.paymentMethod,
          feeType: editPayment.feeType,

          totalAmount: this.feeType.amount.toString(),
          totalDiscount: this.feeType.discount.toString(),
          totalSubTotal: this.feeType.subTotal.toString(),

          totalPaidAmount: this.feeType.paidAmount,

        };

        if (feeTypeId == "") {
          delete editInvoiceData.feeType[0].feeTypeId;
        }
        if (editInvoiceData.paymentStatus == "NOT_PAID") {
          delete editInvoiceData.paymentMethod;
        }

        if (editInvoiceData.totalPaidAmount == "0") {
          if (editInvoiceData.paymentStatus == "NOT_PAID") {
            delete editInvoiceData.totalPaidAmount;
          }

        }

        if (editInvoiceData.totalPaidAmount != "0.00") {
          if (this.feeType.subTotal == this.feeType.paidAmount) {
            editInvoiceData.paymentStatus = "FULLY_PAID";
          }

          if (editInvoiceData.totalPaidAmount) {
            if (this.feeType.subTotal != this.feeType.paidAmount) {
              editInvoiceData.paymentStatus = "PARTIALLY_PAID";
              // console.log("PARTIALLY_PAID");
            }
          }
        }

        if (editInvoiceData.totalSubTotal == "0.00") {
          editInvoiceData.paymentStatus = "FULLY_PAID";
        } else if (editInvoiceData.totalSubTotal != "0.00") {
          if (this.feeType.paidAmount === "0.00") {
            editInvoiceData.paymentStatus = "NOT_PAID";

          }
        }

        http()
          .put("/updateInvoice", editInvoiceData)

          .then((response) => {

            // this.getInvoiceList();
            this.snackbar = true;

            this.text = "Payment added successfully";

            this.loading = false;

            this.$emit("update-Payment");

          })

          .catch((error) => {

            //   console.log(error);

            this.snackbar = true;
            this.text = error.response.data.message;
            this.loading = false;
          });
      },
      clear() {
        this.$refs.form.reset();
      },

      deleteSelectFee: function (feeTyp, feeTypeList, index) {

        this.editPayment.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.editPayment.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 ***********

          if (this.feeTypeData[i].amount) {
            feeType.amount =
              Number(feeType.amount) + Number(this.feeTypeData[i].amount);
            this.feeType.amount = feeType.amount;
            this.feeType.subTotal = feeType.amount;
            this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
          } else if (this.feeTypeData[0].amount == "") {
            this.feeType.amount = "0.00";
            this.feeTypeData[i].subTotal = "0.00";
            this.feeType.subTotal = "0.00";
          } else if (this.feeTypeData[i].amount == "") {
            this.feeType.amount =
              Number(feeType.amount) + Number(this.feeTypeData[i].amount);
            this.feeTypeData[i].subTotal =
              Number(feeType.amount) + Number(this.feeTypeData[i].amount);
            this.feeType.subTotal =
              Number(feeType.amount) + Number(this.feeTypeData[i].amount);
          }

          // *********** DISCOUNT ***********
          if (this.feeTypeData[i].discount) {

            if (
              Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount
            ) {

              feeType.discount =
                Number(feeType.discount) + Number(this.feeTypeData[i].discount);
              this.feeType.discount = feeType.discount;
              feeType.subParticularTotal =

                this.feeTypeData[i].amount - this.feeTypeData[i].discount;

              this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(
                2
              );

            } else if (
              Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount
            ) {
              this.feeTypeData[i].discount = this.feeTypeData[i].amount;

              feeType.discount =
                Number(feeType.discount) + Number(this.feeTypeData[i].discount);
              this.feeType.discount = feeType.discount.toString();
              feeType.subParticularTotal =

                this.feeTypeData[i].amount - this.feeTypeData[i].discount;

              this.feeTypeData[
                i
              ].subTotal = feeType.subParticularTotal.toString();
            }

          } else if (this.feeTypeData[0].discount == "") {
            this.feeType.discount = "0.00";

          }

          // *********** SUBTOTAL ***********

          if (this.feeTypeData[i].subTotal) {
            feeType.subTotal =
              Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
            this.feeType.subTotal = feeType.subTotal.toFixed(2);
          }

          // *********** PAID-AMOUNT ***********

          if (this.feeTypeData[i].paidAmount) {
            feeType.paidAmount =
              Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
            this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
          } else if (this.feeTypeData[0].paidAmount == "") {
            this.feeType.paidAmount = "0.00";
          } else if (this.feeTypeData[i].paidAmount == "") {
            this.feeType.paidAmount = feeType.paidAmount =
              Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
          }

  
          // 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.editPayment.paymentStatus == "PARTIALLY_PAID") {
      //     this.showPayMethods = true;
      //   } else if (this.editPayment.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>