<template>
  <v-container fluid grid-list-md>
    <v-layout wrap>
      <v-flex xs12 sm4>
        <v-card flat>
          <h3 class="text-xs-center py-2 grey white--text">Profile</h3>
          <hr />
          <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="160px">
                        <img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
                        <img :src="studentData.profilePicUrl" v-else-if="studentData.profilePicUrl" />
                      </v-avatar>
                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs12 sm12>
                      <h3 class="text-xs-center">
                        <b>{{ studentData.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>{{ studentData.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="right pa-0">
                      <h4>{{ studentData.classId.classNum }}</h4>
                    </v-flex>
                  </v-layout>
                  <v-layout style="border: 1px solid lightgrey;">
                    <v-flex xs6 sm6 class="right pa-0">
                      <h4 class="right">
                        <b>Section :</b>
                      </h4>
                    </v-flex>
                    <v-flex sm6 xs6 class="right pa-0">
                      <h4>{{ studentData.sectionId.name}}</h4>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>
        </v-card>
      </v-flex>
      <v-flex xs12 sm8>
        <v-card flat>
          <h3 class="py-2 text-xs-center grey white--text">
            Attendence
            <span class="ml-4">
              <v-avatar color="green caption" size="12"></v-avatar>
              <span class="subheading">Present</span>
            </span>
            <span class="ml-4">
              <v-avatar color="red caption" size="12" class></v-avatar>
              <span class="subheading">Absent</span>
            </span>
          </h3>
          <hr />
          <YearCalendar
            v-model="year"
            :activeDates.sync="activeDates"
            @toggleDate="toggleDate"
            prefixClass="your_customized_wrapper_class"
            :activeClass="activeClass"
          ></YearCalendar>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import moment from "moment";
import http from "@/Services/http.js";
import YearCalendar from "vue-material-year-calendar";

export default {
  components: { YearCalendar },
  data() {
    return {
      studentsList: [],
      token: "",
      year: new Date().getFullYear(),
      activeDates: [],
      activeClass: "",
      studentData: {}
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    this.getStudentAttendence();
    this.getStudentData();
  },
  methods: {
    dates: function(date) {
      return moment(date).format("MMMM DD, YYYY");
    },
    getStudentAttendence() {
      http()
        .get(
          "/studentAttendance",
          { params: { studentId: this.$route.params.id } },
          {
            headers: { Authorization: "Bearer " + this.token }
          }
        )
        .then(response => {
          let array = [];
          for (let i = 0; i < response.data.data.length; i++) {
            if (response.data.data[i].students[0].isPresent == true) {
              array.push({
                date: response.data.data[i].date,
                className: "green"
              });
            } else if (response.data.data[i].students[0].isPresent == false) {
              array.push({
                date: response.data.data[i].date,
                className: "red"
              });
            }
          }
          this.activeDates = array;
        })
        .catch(err => {
          console.log("err====>", err);
          // this.$router.replace({ path: '/' });
        });
    },
    getStudentData() {
      http()
        .get(
          "/getParticularStudentDetail",
          { params: { studentId: this.$route.params.id } },
          {
            headers: { Authorization: "Bearer " + this.token }
          }
        )
        .then(response => {
          this.studentData = response.data.data;
        })
        .catch(err => {
          console.log("err====>", err);
          // this.$router.replace({ path: '/' });
        });
    },
    toggleDate(dateInfo) {
      console.log(dateInfo); // { date: '2010-10-23', selected: true }
    }
  }
};
</script>

<style lang="stylus">
.your_customized_wrapper_class {
  background-color: #0aa;
  color: white;

  &.red {
    background-color: red;
    color: white;

    &:after {
      background-size: 100% 100%;
    }
  }

  &.blue {
    background-color: #0000aa;
    color: white;
  }

  &.your_customized_classname {
    background-color: yellow;
    color: black;
  }
}
</style>