<template>
    <v-app id="login">

      <!-- LOADER -->
      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>
  
      <!-- SNACKBAR -->
      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color="snackbarColor"
      >
        {{ text }}
        <v-spacer></v-spacer>
        <v-btn flat text @click="snackbar = false">X</v-btn>
      </v-snackbar>

      <v-container fluid fill-height>
        <v-layout>
          <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">

            <v-card flat class="Card-style pa-2" id="form">

              <v-layout>
                <v-flex xs12>
                  <label class="title text-xs-center">Change Student</label>
                </v-flex>
              </v-layout>
              <v-card-text>
                <v-flex xs12 sm8 md8 lg8 offset-sm2>
                  <v-form class="mt-3">
                    <v-select
                      :items="studentsData"
                      item-text="name"
                      item-value="_id"
                      v-model="changeStudent"
                      label="Students"
                    ></v-select>
                  </v-form>
                </v-flex>
              </v-card-text>
              <v-card-actions>
                <v-flex text-xs-center>
                  <v-btn round dark :loading="loading" @click="change" class="add-button">Change</v-btn>
                </v-flex>
              </v-card-actions>

            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-app>
  </template>
  <script>
  import http from "@/Services/http.js";

  import AllApiCalls from "@/Services/AllApiCalls.js";

  
  export default {

    mixins: [AllApiCalls],

    data() {
      return {
        snackbar: false,
        y: "top",
        x: "right",
        mode: "",
        timeout: 4000,
        text: "",
        loading: false,
        valid: false,

        changeStudent: "",

        studentsData: [],

      };
    },
    mounted() {
      this.getparentStudents();
    },
    methods: {
      change() {

        localStorage.setItem("parentStudentId", this.changeStudent);
        this.$router.replace({ path: "/" });
      },
      getparentStudents() {
        this.showLoader = true;
        http()
          .get("/parentStudentsList")

          .then((response) => {

            //   console.log("students - ", response.data.data.students);

            /* prepare an array of false status students */
            var indexStatusFalse = [];
            for (var i = 0; i < response.data.data.students.length; i++) {
              if (response.data.data.students[i].status == false) {
                indexStatusFalse.push(i);
              }
            }
            /* introduce a property named disabled in response to make false staus students disbled */
            for (var i = 0; i < indexStatusFalse.length; i++) {
              response.data.data.students[indexStatusFalse[i]].disabled = true;
            }
            /* make an array of students to be displayed in select box */

            this.studentsData = response.data.data.students;

            /* counter to keep a track of number of students that are disabled or false */
            var counter = 0;
            /* if zero element of false students list is > 0 then make first student as defalut selected */
            if (indexStatusFalse[0] > 0) {

              this.changeStudent = response.data.data.students[0]._id;
            }

            //   console.log("indexStatusFalse - ", indexStatusFalse);

            /* if false student is the first one in the list then see if the next is also false */
            if (indexStatusFalse[0] == 0) {
              if (indexStatusFalse.length > 1) {
                for (var i = 1; i < indexStatusFalse.length; i++) {
                  if (indexStatusFalse[i] == i) {
                    if (indexStatusFalse[i - 1] == i - 1) {
                      counter = i + 1;
                      continue;
                    }
                  } else {
                    counter = i;
                    break;
                  }
                }
              } else {
                counter = 1;
              }
            }

            //   console.log("counter - ", counter);

            if (counter == response.data.data.students.length) {
              this.seeSnackbar(
                "Your wards have been removed you will be logged out",
                "warning"
              );
              setTimeout(() => {
                this.$store.dispatch("setToken", null);
                this.$router.replace({ path: "/" });
                this.$store.dispatch("Id", null);
              }, 3000);
            } else {
              this.changeStudent = response.data.data.students[counter]._id;
            }

            localStorage.setItem("parentStudentId", this.changeStudent);

            localStorage.setItem(
              "parentClassId",
              response.data.data.students[0].classId
            );
            this.showLoader = false;
          })

          .catch((err) => {

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

            this.showLoader = false;

            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;

          });

      },

    },
    computed: {
      color() {
        return this.loading ? "success" : "error";

      },
    },

  };
  </script>
  <style scoped>
  img {
    position: absolute;
    top: 13px;
    left: 50px;
  }
  .v-btn--large {
    padding: 0px 74px;
  }
  @media screen and (max-width: 769px) {
    .v-btn--large {
      font-size: 14px;
      height: 44px;
      padding: 0 32px;
    }
  }
  </style>