<template>
  <v-container fluid grid-list-md class="body-color">
    <v-dialog v-model="viewCourseAttendance" max-width="1000" scrollable persistent>
      <v-card flat class="pa-3">
        <v-layout>
          <v-flex xs12>
            <label class="title text-xs-center">Course Attendance</label>
            <v-icon size="24" class="right" @click="viewCourseAttendance = false">cancel</v-icon>
          </v-flex>
        </v-layout>
        <v-card-text>
          <v-data-table :headers="headers" :items="courseAttendanceList">
            <template slot="items" slot-scope="props">
              <tr class="tr">
                <td class="text-xs-center td td-row">{{ props.item.courseId.courseName}}</td>
                <td class="text-xs-center td td-row">{{ props.item.startTime}}</td>
                <td class="text-xs-center td td-row">{{ props.item.endTime }}</td>
              </tr>
            </template>
          </v-data-table>
        </v-card-text>
      </v-card>
    </v-dialog>
    <div>
      <v-layout wrap>
        <v-flex xs12 sm12 md4>
          <v-card flat>
            <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
            <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="!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 sm12 md8>
          <v-card flat>
            <h3 class="py-2 text-xs-center card-style white--text">Attendence</h3>
            <YearCalendar
              v-model="year"
              :activeDates="activeDates"
              prefixClass="your_customized_wrapper_class"
              :activeClass="activeClass"
              @toggleDate="toggleDate"
            ></YearCalendar>
          </v-card>
        </v-flex>
      </v-layout>
    </div>
    <img :src="output" v-show="false" />
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </v-container>
</template>

<script lang="js">
import moment from "moment";
import http from "@/Services/http.js";
import YearCalendar from "vue-material-year-calendar";
import jsPDF from 'jspdf';
    // eslint-disable-next-line
import autoTable from 'jspdf-autotable';

export default {
  components: { YearCalendar },
  data() {
    return {
      output:null,
      showLoader: false,
      token: "",
      year: new Date().getFullYear(),
      activeDates: [],
      activeClass: "",
      studentData: {
        classId: {
          classNum: ""
        },
        sectionId: {
          name: ""
        },
	  },
      courseAttendanceData:{},
      courseAttendanceList: [],
	  viewCourseAttendance: false,
	  headers: [
      { text: "Course Name", value: "courseName", sortable: false, align: "center" },
      {
        text: "Start Time",
        value: "startTime",
        sortable: false,
        align: "center",
      },
      { text: "End Time", value: "endTime", sortable: false, align: "center" },
    ],
    selectedDates: [],
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    this.getStudentAttendence();
	this.getStudentData();
  },
  methods: {
	  toggleDate (dateInfo) {
      if (this.selectedDates.includes(dateInfo.date)) {
          this.viewCourseAttendance = true;
      }
    },
    dates: function(date) {
      return moment(date).format("MMMM DD, YYYY");
    },
    getStudentAttendence() {
      this.showLoader = true;
      http()
        .get(
          "/studentAttendance",
          { params: { studentId: this.$route.params.id } },
          {
            headers: { Authorization: "Bearer " + this.token }
          }
        )
        .then(response => {
          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);
          }
        });
    },
    getStudentData() {
      http()
        .get(
          "/getParticularStudentDetail",
          { params: { studentId: this.$route.params.id } },
          {
            headers: { Authorization: "Bearer " + this.token }
          }
        )
        .then(response => {
		  this.studentData = response.data.data;
		  this.getCourseAttendance(response.data.data.classId._id);
        })
        .catch(err => {
		//   console.log("err====>", err);
		  	this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;
          // this.$router.replace({ path: '/' });
        });
	},
	getCourseAttendance(classId) {
		http()
        .get(
          "/getStudentCourseAttendance",
		  { params: { studentId: this.$route.params.id,
					 classId: classId } 
			},
          {
            headers: { Authorization: "Bearer " + this.token }
          }
        )
        .then(response => {
          this.courseAttendanceData = response.data.data;
          this.courseAttendanceList = response.data.data[0].studentAttendance;
        //   console.log("===this.courseAttendanceList===", this.courseAttendanceList)
		  let array = [];
          for (let i = 0; i < this.courseAttendanceData.length; i++) {
            if (this.courseAttendanceData[i].date) {
                this.selectedDates.push(this.courseAttendanceData[i].date)
              array.push({
                date: this.courseAttendanceData[i].date,
                className: "green"
              });
            }
          }
          this.activeDates = array;
        })
        .catch(err => {
		  	this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;
        });
	},
	profile(item) {
      this.viewCourseAttendance = 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>
<style  scoped>
.card-style {
  background: #7f62f8 !important;
  border-color: #7f62f8 !important;
  border-radius: 12px;
}
</style>