<template>
  <v-container fluid grid-list-md class="body-color">
    <div v-show="hideData">
      <v-layout row>
        <v-btn @click="exportPdf" round class="right open-dialog-button" dark>
          Export Pdf
          <v-icon dark right size="20">save_alt</v-icon>
        </v-btn>
        <v-dialog v-model="dialogExport" max-width="500px" persistent>
          <v-btn round slot="activator" class="right open-dialog-button" dark>
            Export csv
            <v-icon dark right size="20">save_alt</v-icon>
          </v-btn>
          <v-card flat class="card-style pa-2" dark>
            <v-layout>
              <v-flex xs12>
                <label class="title text-xs-center">Export</label>
                <v-icon size="24" class="right" @click="dialogExport = false">cancel</v-icon>
              </v-flex>
            </v-layout>
            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12>
                    <v-menu
                      ref="menuStartDate"
                      :close-on-content-click="false"
                      v-model="menuStartDate"
                      :nudge-right="40"
                      :return-value.sync="startDate"
                      lazy
                      transition="scale-transition"
                      offset-y
                      full-width
                      min-width="290px"
                    >
                      <v-text-field
                        slot="activator"
                        v-model="startDate"
                        label="Select Start Date"
                        prepend-icon="event"
                        readonly
                      ></v-text-field>
                      <v-date-picker
                        v-model="startDate"
                        @input="$refs.menuStartDate.save(startDate)"
                      ></v-date-picker>
                    </v-menu>
                  </v-flex>
                  <v-flex xs12>
                    <v-menu
                      ref="menuEndDate"
                      :close-on-content-click="false"
                      v-model="menuEndDate"
                      :nudge-right="40"
                      :return-value.sync="endDate"
                      lazy
                      transition="scale-transition"
                      offset-y
                      full-width
                      min-width="290px"
                    >
                      <v-text-field
                        slot="activator"
                        v-model="endDate"
                        label="Select End Date"
                        prepend-icon="event"
                        readonly
                      ></v-text-field>
                      <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>
                    </v-menu>
                  </v-flex>
                  <v-flex xs12>
                    <v-card-actions>
                      <v-spacer></v-spacer>

                      <v-btn class="add-button" round @click="exportData">Export</v-btn>
                    </v-card-actions>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card-text>
          </v-card>
        </v-dialog>
      </v-layout>
      <v-layout wrap>
        <v-flex xs12 sm12 md4>
          <v-card flat>
            <!-- <v-layout>
              <v-flex xs12>
                <label class="title  card-style text-xs-center">Profile</label>
              </v-flex>
            </v-layout>-->
            <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
              <span class="ml-4">
                <v-avatar class="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>
            <YearCalendar
              v-model="year"
              :activeDates="activeDates"
              prefixClass="your_customized_wrapper_class"
              :activeClass="activeClass"
            ></YearCalendar>
          </v-card>
        </v-flex>
      </v-layout>
    </div>
    <v-layout v-show="showPdfData">
      <v-container>
        <v-flex xs12 sm12 md8 offset-sm2>
          <v-btn class="right add-button" @click="generatePDF2Canvas()" :loading="loadingPdf" dark>
            Download
            <v-icon dark right size="20">save_alt</v-icon>
          </v-btn>
        </v-flex>
      </v-container>
    </v-layout>
    <v-layout v-show="showPdfData">
      <v-container>
        <v-layout v-show="showPdfData">
          <v-flex xs12 sm12 md8 offset-sm2>
            <div ref="printMe">
              <v-flex xs12 class="pl-3">
                <v-layout>
                  <v-flex xs6 sm2 class="pa-0 mb-1">
                    <h4>
                      <b>Name</b>
                    </h4>
                  </v-flex>
                  <v-flex sm10 xs6 class="pa-0">
                    <h4>: {{ studentData.name }}</h4>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm2 class="pa-0 mb-1">
                    <h4>
                      <b>Type</b>
                    </h4>
                  </v-flex>
                  <v-flex sm10 xs6 class="pa-0 mb-1">
                    <h4>: Student</h4>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm2 class="pa-0 mb-1">
                    <h4>
                      <b>Roll No</b>
                    </h4>
                  </v-flex>
                  <v-flex sm10 xs6 class="pa-0 mb-1">
                    <h4>: {{ studentData.rollNo }}</h4>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm2 class="pa-0 mb-1">
                    <h4>
                      <b>Class</b>
                    </h4>
                  </v-flex>
                  <v-flex sm10 xs6 class="pa-0 mb-1">
                    <h4>: {{ studentData.classId.classNum }}</h4>
                  </v-flex>
                </v-layout>
                <v-layout>
                  <v-flex xs6 sm2 class="pa-0 mb-1">
                    <h4>
                      <b>Section</b>
                    </h4>
                  </v-flex>
                  <v-flex sm10 xs6 class="pa-0 mb-3">
                    <h4>: {{ studentData.sectionId.name}}</h4>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-card flat>
                <h3 class="py-2 text-xs-center grey lighten-1 white--text">
                  Attendence
                  <span class="ml-4">
                    <v-avatar class="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>
                <YearCalendar
                  v-model="year"
                  :activeDates="activeDates"
                  prefixClass="your_customized_wrapper_class"
                  :activeClass="activeClass"
                ></YearCalendar>
              </v-card>
            </div>
          </v-flex>
        </v-layout>
      </v-container>
    </v-layout>
    <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 {
      showPdfData:false,
      hideData:true,
      loadingPdf:false,
      output:null,
      studentsList: [],
      json_data: [],
      dialogExport: false,
      startDate: "",
      endDate: "",
      menuEndDate: false,
      menuStartDate: false,
      showLoader: false,
      token: "",
      year: new Date().getFullYear(),
      activeDates: [],
      activeClass: "",
      studentData: {
        classId: {
          classNum: ""
        },
        sectionId: {
          name: ""
        },
      },
    };
  },
  mounted() {
    this.token = this.$store.state.token;
    this.getStudentAttendence();
    this.getStudentData();
  },
  methods: {
    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;
          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(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;
        })
        .catch(err => {
		//   console.log("err====>", err);
		  	this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;
          // this.$router.replace({ path: '/' });
        });
    },
    convertToCSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';

    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','

            line += array[i][index];
        }

        str += line + '\r\n';
    }

    return str;
    },
    exportData() {
      http()
        .get(
          "/studentAttendanceByMonth",
          {
            params: {
              studentId: this.$route.params.id,
              startDate: this.startDate,
              endDate: this.endDate
            }
          },
          {
            headers: { Authorization: "Bearer " + this.token }
          }
        )
        .then(response => {
          this.json_data = response.data.data;
          this.dialogExport = false;
        //   console.log("hh",this.json_data)
           var jsonObject = JSON.stringify(this.json_data);

    var csv = this.convertToCSV(jsonObject);

    var exportedFilenmae = "studentAttendance" + '.csv';
    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
          if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, exportedFilenmae);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", exportedFilenmae);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
        })
        .catch(err => {
        //   console.log("err====>", err);
		  // this.$router.replace({ path: '/' });
		  	this.snackbar = true;
        	this.color = "error";
            this.text = error.response.data.message;
        });
    },
    exportPdf(){
        this.hideData = false;
        this.showPdfData = true   
    },
     async  generatePDF2Canvas(){
            this.loadingPdf = true
            const el = this.$refs.printMe;
            // add option type to get the image version
            // if not provided the promise will return 
            // the canvas.
            const options = {
                type: 'dataURL'
            }
            this.output = await this.$html2canvas(el, options);
            if(this.output) {
               this.loadingPdf = false
            }
            let doc = new jsPDF();
            doc.addImage(this.output, 'JPEG', 5, 10, 200, 280);
            doc.save("Attendance.pdf");
        }
  }
};
</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>
.add-button {
  background: #feb83c !important;
  border-color: #feb83c !important;
  text-transform: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.card-style {
  background: #7f62f8 !important;
  border-color: #7f62f8 !important;
  border-radius: 12px;
}
.open-dialog-button {
  background: #827bfa !important;
  border-color: #827bfa !important;
  text-transform: none !important;
}
</style>