<template>
  <v-container fluid grid-list-md>
    <v-layout row>
      <v-dialog v-model="dialogExport" max-width="500px">
        <v-btn slot="activator" color="grey" class="right" dark>
          Export
          <v-icon dark right size="20">save_alt</v-icon>
        </v-btn>
        <v-card>
          <h3 class="text-xs-center py-2 grey lighten-1 white--text">Export</h3>
          <v-card-text>
            <v-container grid-list-md>
              <v-layout wrap>
                <v-flex xs12>
                  <!-- <v-text-field label="Email" required></v-text-field> -->
                  <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-layout>
            </v-container>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click.native="dialogExport = false">Close</v-btn>
            <download-csv :data="json_data">
              <v-btn color="blue darken-1" flat @click.native="exportData">Export</v-btn>
            </download-csv>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-layout>
    <v-layout wrap>
      <v-flex xs12 sm4>
        <v-card flat>
          <h3 class="text-xs-center py-2 grey lighten-1 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="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 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>
      </v-flex>
    </v-layout>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </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: [],
      json_data: [],
      dialogExport: false,
      startDate: "",
      endDate: "",
      menuEndDate: false,
      menuStartDate: false,
      showLoader: false,
      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() {
      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 => {
          console.log("err====>", err);
          this.showLoader = false;
          if (error.response.status === 401) {
            this.$router.replace({ path: "/" });
            this.$store.dispatch("setToken", null);
            this.$store.dispatch("Id", 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.$router.replace({ path: '/' });
        });
    },
    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;
        })
        .catch(err => {
          console.log("err====>", err);
          // this.$router.replace({ path: '/' });
        });
    }
  }
};
</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>