<template>
  <v-container fluid class="body-color">
    <!-- SHOW TABLE -->
    <v-data-table :headers="headers" :items="versionList">
      <template slot="items" slot-scope="props">
        <tr class="tr">
          <td class="text-xs-center td td-row">{{ props.index + 1}}</td>
          <td class="text-xs-center td td-row">{{ props.item.androidAppVersion}}</td>
          <td class="text-xs-center td td-row">{{ props.item.iosAppVersion}}</td>
          <td class="text-xs-center td td-row">
            <span>
              <v-tooltip top>
                <img
                  slot="activator"
                  style="cursor:pointer; width:20px; height:18px; "
                  @click="editAppVersion(props.item)"
                  src="/static/icon/edit.png"
                  class="mr-3"
                />
                <span>Edit</span>
              </v-tooltip>
            </span>
          </td>
        </tr>
      </template>
    </v-data-table>

    <!-- EDIT VERSION DILAOG -->
    <v-dialog v-model="editVerionDilaog" max-width="600px" scrollable persistent>
      <v-card flat class="card-style pa-2" dark>
        <v-layout>
          <v-flex xs12>
            <label class="title text-xs-center">Edit Version</label>
            <v-icon size="24" class="right" @click="editVerionDilaog = false">cancel</v-icon>
          </v-flex>
        </v-layout>
        <v-card-text class="hidden-xs-only hidden-sm-only">
          <v-form ref="editAppVersionForm" v-model="validEditVersion" lazy-validation>
            <v-flex xs12>
              <v-layout>
                <v-flex xs3 sm4 class="pt-4 subheading">
                  <label class="right">App Version:</label>
                </v-flex>
                <v-flex xs8 sm6 class="ml-3">
                  <v-text-field
                    placeholder="fill app version"
                    v-model="editedItem.androidAppVersion"
                    required
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-flex xs12>
              <v-layout>
                <v-flex xs3 sm4 class="pt-4 subheading">
                  <label class="right">IOS Version:</label>
                </v-flex>
                <v-flex xs8 sm6 class="ml-3">
                  <v-text-field
                    placeholder="fill ios version"
                    v-model="editedItem.iosAppVersion"
                    required
                  ></v-text-field>
                </v-flex>
              </v-layout>
            </v-flex>
            <v-layout>
              <v-flex xs12 sm12>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn round dark @click="update" class="add-button">Update</v-btn>
                  <v-spacer></v-spacer>
                </v-card-actions>
              </v-flex>
            </v-layout>
          </v-form>
        </v-card-text>
      </v-card>
    </v-dialog>

    <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="success"
    >{{ text }}</v-snackbar>
  </v-container>
</template>

<script>
import http from "@/Services/http.js";
import Util from "@/util";
import moment from "moment";

export default {
  data: () => ({
    //SNACKBAR
    snackbar: false,
    y: "top",
    x: "right",
    color: "",
    mode: "",
    timeout: 3000,
    text: "",

    headers: [
      {
        text: "No",
        align: "center",
        sortable: false,
        value: "No",
      },
      {
        text: "Android App Version",
        value: "",
        sortable: false,
        align: "center",
      },
      {
        text: "IOS App Version",
        value: "",
        sortable: false,
        align: "center",
      },
      { text: "Action", value: "", sortable: false, align: "center" },
    ],
    versionList: [],
    editedItem: {
      androidAppVersion: "",
      iosAppVersion: "",
    },

    editVerionDilaog: false,
    validEditVersion: true,
    showLoader: false,
  }),

  methods: {
    editAppVersion(item) {
      this.editedIndex = this.versionList.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.editVerionDilaog = true;
    },
    getAppVersion() {
      http()
        .get("getAppVersion", {
          headers: {
            Authorization: "Bearer " + this.schoolToken,
          },
        })
        .then((response) => {
          this.versionList = [response.data.data];
        })
        .catch((error) => {
          this.showLoader = false;
          this.snackbar = true;
          this.color = "error";
          this.text = error.response.data.message;
        });
    },
    update() {
      if (this.$refs.editAppVersionForm.validate()) {
        let editVersion = {
          appVersionId: this.editedItem._id,
          androidAppVersion: this.editedItem.androidAppVersion,
          iosAppVersion: this.editedItem.iosAppVersion,
        };
        http()
          .put("/updateAppVersion", editVersion, {
            headers: { Authorization: "Bearer " + this.schoolToken },
          })
          .then((response) => {
            this.snackbar = true;
            this.color = "success";
            this.text = response.data.message;
            this.getAppVersion();
            this.editVerionDilaog = false;
          })
          .catch((error) => {
            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;
          });
      }
    },
  },

  mounted() {
    this.getAppVersion();
    this.role = this.$store.state.role;
    this.token = this.$store.state.token;
    this.schoolToken = this.$store.state.schoolToken;
  },
};
</script>