<template>

    <v-container fluid class="body-color">

      <!-- ****** Edit  Payment History  ****** -->

      <v-dialog v-model="editPaymentDialog" max-width="400px" persistent>

        <v-card flat class="card-style pa-2" dark>
          <v-layout>
            <v-flex xs12>
              <label class="title text-xs-center">Edit Payment History</label>
              <v-icon size="24" class="right" @click="editPaymentDialog = false">cancel</v-icon>
            </v-flex>
          </v-layout>
          <v-form ref="form">
            <v-container fluid>
              <v-flex xs12 sm12>
                <v-layout>
                  <v-flex xs3 class="pt-4 subheading">
                    <label class="right">Amount:</label>
                  </v-flex>
                  <v-flex xs8 sm7 class="ml-3">
                    <v-text-field

                      v-model="editedItem.paidAmount"

                      placeholder="please fill this field"
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex xs12 sm12>
                <v-layout>
                  <v-flex xs3 class="pt-4 subheading">
                    <label class="right">Method:</label>
                  </v-flex>
                  <v-flex xs8 sm7 class="ml-3">
                    <v-select
                      :items="paymentMethod"
                      v-model="editedItem.paymentMethod"
                      label="please fill this field"
                      required
                    ></v-select>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-layout>
                <v-flex xs12>
                  <v-layout>
                    <v-spacer></v-spacer>
                    <v-btn round dark @click="save" class="add-button">Update Payment History</v-btn>
                    <v-spacer></v-spacer>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-container>
          </v-form>
        </v-card>
      </v-dialog>
  
      <!-- ****** PAYMENT HISTORY TABLE ****** -->

      <v-toolbar color="transparent" flat>
        <v-spacer></v-spacer>
        <v-card-title class="body-1" v-show="show">
          <v-btn icon large flat @click="displaySearch">
            <v-avatar size="27">

              <img src="/static/icon/search.png" alt="icon" />

            </v-avatar>
          </v-btn>
        </v-card-title>

        <v-flex xs8 sm8 md3 lg2 v-if="showSearch">

          <v-layout>

            <v-text-field
              autofocus
              v-model="search"
              label="Search"
              prepend-inner-icon="search"
              color="primary"
            ></v-text-field>

            <v-icon @click="closeSearch" color="error">close</v-icon>

          </v-layout>

        </v-flex>
      </v-toolbar>

      <v-data-table
        :headers="headers"
        :items="paymentHistory"
        :pagination.sync="pagination"
        :search="search"
      >
        <template slot="items" slot-scope="props">

          <tr class="tr">

            <td class="td td-row">{{ props.index + 1 }}</td>
            <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td>

            <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>

            <td class="td td-row text-xs-center">{{ props.item.feeType.feeTypeName }}</td>

            <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td>

            <td class="td td-row text-xs-center">{{ props.item.feeType.paidAmount }}</td>

            <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>

            <td class="td td-row text-xs-center">
              <span>
                <v-tooltip top>
                  <img
                    slot="activator"

                    style="cursor:pointer; width:20px; height:18px;"
                    class="mr-3"

                    @click="editItem(props.item)"

                    src="/static/icon/edit.png"

                  />
                  <span>Edit</span>
                </v-tooltip>
                <v-tooltip top>
                  <img
                    slot="activator"

                    style="cursor:pointer;width:20px; height:20px;"
                    class="mr-3"

                    @click="deleteItem(props.item)"

                    src="/static/icon/delete.png"

                  />
                  <span>Delete</span>
                </v-tooltip>
              </span>
            </td>

          </tr>

        </template>
        <v-alert
          slot="no-results"
          :value="true"
          color="error"
          icon="warning"
        >Your search for "{{ search }}" found no results.</v-alert>
      </v-data-table>
      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>

      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color="color"
      >{{ text }}</v-snackbar>

    </v-container>

  </template>
  
  <script>
  import http from "@/Services/http.js";
  import moment from "moment";
  
  export default {
    data: () => ({

      snackbar: false,

      showLoader: false,
      search: "",

      show: true,
      showSearch: false,

      pagination: {

        rowsPerPage: 10,

      },

      paymentMethod: ["Cash", "Cheque"],

      headers: [
        {
          text: "No",

          align: "",

          sortable: false,

          value: "No",

        },

        {
          text: "Student",
          value: "name",
          sortable: false,

          align: "center",

        },

        { text: "Class", value: "class", sortable: false, align: "center" },

        {
          text: "Fee Type",
          value: "feeTypeName",
          sortable: false,

          align: "center",

        },
        {
          text: "Method",
          value: "paymentMethod",
          sortable: false,

          align: "center",

        },

        {
          text: "Paid Amount",
          value: "totalPaidAmount",
          sortable: false,

          align: "center",

        },
        {
          text: "Date",
          value: "date",
          sortable: false,

          align: "center",

        },

        { text: "Action", value: "", sortable: false, align: "center" },

      ],

      paymentHistory: [],

      addPaymentHistoryDialog: "",
      editPaymentDialog: false,

      editedItem: {},
      y: "top",
      x: "right",
      mode: "",
      timeout: 5000,
      text: "",
      color: "",

      snackbar: false,

    }),
    methods: {

      editItem(item) {
        this.editedIndex = this.paymentHistory.indexOf(item);
        this.editedItem = Object.assign({}, item);

        this.editedItem.paidAmount = this.editedItem.feeType.paidAmount;

        this.editPaymentDialog = true;
      },
      deleteItem(item) {
        let deleteGrade = {
          invoiceId: item._id,

          feeTypeId: item.feeType._id,

        };
        http()
          .put(

            "/deleteFeeType",
            confirm("Are you sure you want to delete this?") && deleteGrade,

            {
              headers: {

                Authorization: "Bearer " + this.token,
              },

            }
          )

          .then((response) => {

            this.snackbar = true;
            //   this.text = "Successfully Delete Salary ";
            this.text = response.data.message;
            this.color = "green";
            this.getPaymentHistory();
          })

          .catch((error) => {
            //   console.log("error", error);

            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "red";
          });
      },

      dates: function (date) {

        return moment(date).format("MMMM DD, YYYY");
      },
      getPaymentHistory() {
        this.showLoader = true;
        var token = this.$store.state.token;
        http()

          .get("/getPaymentHistory", {

            params: {
              paymentStatus: "FULLY_PAID",

              schoolId: this.$store.state.schoolId,

            },

            headers: { Authorization: "Bearer " + token },

          })

          .then((response) => {

            this.paymentHistory = response.data.data;
            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);

            }
          });

      },

      save() {
        var updatePayment = {
          invoiceId: this.editedItem._id,
          feeTypeId: this.editedItem.feeType._id,

          paidAmount: this.editedItem.paidAmount,

          paymentMethod: this.editedItem.paymentMethod,

        };
        http()
          .put("/updateFeeType", updatePayment, {
            headers: {

              Authorization: "Bearer " + this.token,
            },

          })

          .then((response) => {

            this.getPaymentHistory();
            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";
            this.editPaymentDialog = false;
          })

          .catch((error) => {
            //   console.log("error", error.response);

            this.snackbar = true;

            this.text = error.response.data.message;

            this.color = "red";
          });
      },

      displaySearch() {

        this.show = false;
        this.showSearch = true;

      },
      closeSearch() {
        this.showSearch = false;
        this.show = true;
        this.search = "";

      },

    },
    mounted() {

      this.token = this.$store.state.token;

      this.getPaymentHistory();

    },

  };

  </script>