<template>

    <v-app id="pages-dasboard">

      <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->

      <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>

        <v-card>
          <v-toolbar color="grey lighten-2" flat>
            <v-spacer></v-spacer>
            <v-toolbar-title>
              <h3>Notice Board</h3>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-icon @click="closeNotice">close</v-icon>
          </v-toolbar>
          <v-card-text>
            <v-layout>
              <v-flex align-center justify-center layout text-xs-center class="mt-2">

                <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
                <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />

              </v-flex>
            </v-layout>
            <v-container grid-list-md>
              <v-layout wrap>
                <v-flex>
                  <v-layout>
                    <v-flex xs5 sm6>
                      <h5 class="right my-1">
                        <b>Title:</b>
                      </h5>
                    </v-flex>
                    <v-flex sm6 xs8>

                      <h5 class="my-1">{{ notice.title }}</h5>

                    </v-flex>
                  </v-layout>
                  <v-layout>
                    <v-flex xs5 sm6>
                      <h5 class="right my-1">
                        <b>Description:</b>
                      </h5>
                    </v-flex>
                    <v-flex sm6 xs8>

                      <h5 class="my-1">{{ notice.description }}</h5>

                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>
        </v-card>

      </v-dialog>-->
      <!-- <v-container fluid grid-list-xl> -->

  
      <!-- 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-layout wrap>
        <v-flex xs12>
          <v-layout wrap row>
            <!-- ***** Total Students ***** -->
            <v-flex xs12 sm12 md9>
              <v-container fluid grid-list-xl>
                <v-flex xs12 sm12 md12>
                  <v-layout wrap class>
                    <v-flex xs12 sm12 md3>
                      <router-link :to="{ name:'Students' }">
                        <v-card class="card pink-bgcolor">

                          <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>

                          <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />

                          <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
                        </v-card>
                      </router-link>
                    </v-flex>
                    <!-- ***** Total Teachers***** -->
                    <v-flex xs12 sm12 md3>
                      <router-link :to="{ name:'Teachers' }">
                        <v-card flat class="card elevation-2 firozi-bgcolor">

                          <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>

                          <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />

  
                          <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
                        </v-card>
                      </router-link>
                    </v-flex>
                    <!-- ***** Total Parents ***** -->
                    <v-flex xs12 sm12 md3>
                      <router-link :to="{ name:'Parents' }">
                        <v-card flat class="card yellow darken-3">

                          <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>

                          <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />

                          <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
                        </v-card>
                      </router-link>
                    </v-flex>
                    <!-- ***** Total Class***** -->
                    <v-flex xs12 sm12 md3>
                      <router-link :to="{ name:'Class' }">
                        <v-card flat class="card darkBlue-bgcolor">

                          <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>

                          <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />

                          <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
                        </v-card>
                      </router-link>
                    </v-flex>
                  </v-layout>
                </v-flex>

                <p
                  v-if="studentsData.length === 0 && role == 'PARENT'"
                  class="text-center title grey lighten-4 error--text"
                >You have no student registered with scholl</p>
                <v-layout v-if="role != 'PARENT'">

                  <v-flex xs12>
                    <v-card class="card mt-2 account-Card">
                      <h4>
                        <b>Account</b>
                      </h4>
                      <v-layout wrap>
                        <v-flex xs12 sm12 md3>
                          <v-list two-line>
                            <template>
                              <v-list-tile>
                                <v-list-tile-avatar>
                                  <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
                                </v-list-tile-avatar>
                                <v-list-tile-content>
                                  <v-list-tile-title class="mt-2">
                                    <p class="subheading font-color">Fees</p>
                                  </v-list-tile-title>

                                  <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>

                                </v-list-tile-content>
                              </v-list-tile>
                              <v-list-tile>
                                <v-list-tile-avatar>
                                  <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
                                </v-list-tile-avatar>
                                <v-list-tile-content>
                                  <v-list-tile-title class="mt-2">
                                    <p class="subheading font-color">Collection</p>
                                  </v-list-tile-title>

                                  <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>

                                </v-list-tile-content>
                              </v-list-tile>
                              <v-list-tile>
                                <v-list-tile-avatar>
                                  <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
                                </v-list-tile-avatar>
                                <v-list-tile-content>
                                  <v-list-tile-title class="mt-2">
                                    <p class="subheading font-color">Expences</p>
                                  </v-list-tile-title>

                                  <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>

                                </v-list-tile-content>
                              </v-list-tile>
                            </template>
                          </v-list>
                        </v-flex>

                        <v-flex xs12 sm12 md9 lg9>

                          <div id="chart">

                            <div v-if="this.series">
                              <apexchart
                                type="bar"
                                height="250"
                                style="max-width: 800px !important"
                                :options="chartOptions"
                                :series="series"
                                v-show="true"
                              ></apexchart>
                            </div>

                          </div>

                        </v-flex>
                      </v-layout>
                    </v-card>
                  </v-flex>
                </v-layout>

                <v-card class="mt-2 card" v-if="role != 'PARENT'">

                  <!-- <full-calendar
                    ref="calendar"
                    defaultView="month"
                    droppable="false"
                    :events="events"
                    :config="config"
                  ></full-calendar>-->
                  <h4 class="pa-3">
                    <b>Notice</b>
                  </h4>

                  <v-data-table
                    :items="noticeData"
                    class="elevation-0"
                    flat
                    hide-actions
                    hide-headers
                    style="border-spacing: 0 !important;"
                  >
                    <template
                      slot="items"
                      slot-scope="props"
                      v-if="props.index < 5"
                      style="border-spacing: 0 !important;"
                    >
                      <tr class="td-notice">
                        <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                        <td>
                          <span class="grey--text caption">{{ date(props.item.created) }}</span>
                          <br />
                          <span class="body-2">{{ props.item.title}}</span>
                        </td>
                        <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
  
                        <td class="text-xs-center">
                          <span>
                            <v-tooltip top>
                              <img
                                slot="activator"
                                style="cursor:pointer; width:25px; height:25px; "
                                @click="profile"

                                src="/static/icon/view.png"

                              />
                              <span>View</span>
                            </v-tooltip>
                          </span>
                        </td>
                      </tr>
                    </template>
                  </v-data-table>
                </v-card>

                <!-- COURSES -->
                <v-layout v-if="role == 'PARENT'">
                  <v-flex xs12>
                    <v-card class="card mt-2 account-Card">
                      <h4>
                        <b>My Courses</b>
                      </h4>
                      <v-layout wrap>
                        <v-flex xs12 sm12>
                          <v-list two-line>
                            <template>
                              <v-list-tile v-for="(course,i) in courseData" :key="i">
                                <v-list-tile-avatar>

                                  <v-icon
                                    class="account-circle darkBlue-color"
                                    style="cursor: pointer;"
                                  >panorama_fish_eye</v-icon>

                                </v-list-tile-avatar>
                                <v-list-tile-content>

                                  <v-list-tile-title
                                    style="cursor: pointer;"

                                    @click="routeToCourseDetails(course._id)"

                                  >{{ course.courseName }}</v-list-tile-title>

                                </v-list-tile-content>
                              </v-list-tile>
                            </template>
                          </v-list>
                        </v-flex>
                      </v-layout>
                    </v-card>
                  </v-flex>
                </v-layout>
                <v-layout v-if="role == 'PARENT'">
                  <v-flex xs6>
                    <v-card class="mt-2 card">
                      <h4 class="pa-3">
                        <b>Latest Annoucements</b>
                      </h4>
  
                      <v-data-table
                        :items="annoucementData"
                        class="elevation-0"
                        flat
                        hide-actions
                        hide-headers
                        style="border-spacing: 0 !important;"
                      >
                        <template
                          slot="items"
                          slot-scope="props"
                          v-if="props.index < 5"
                          style="border-spacing: 0 !important;"
                        >
                          <tr class="td-notice">
                            <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                            <td>
                              <span class="grey--text caption">{{ date(props.item.created) }}</span>
                              <br />
                              <span class="body-2">{{ props.item.discussionType}}</span>
                            </td>
                            <td class="text-xs-center">
                              <span>
                                <v-tooltip top>
                                  <img
                                    slot="activator"
                                    style="cursor:pointer; width:25px; height:25px; "
                                    src="/static/icon/view.png"
                                  />
                                  <span>View</span>
                                </v-tooltip>
                              </span>
                            </td>
                          </tr>
                        </template>
                      </v-data-table>
                    </v-card>
                  </v-flex>
                  <v-flex xs6>
                    <v-card class="mt-2 card">
                      <h4 class="pa-3">
                        <b>Online User</b>
                      </h4>
  
                      <v-data-table
                        :items="onlineUser"
                        class="elevation-0"
                        flat
                        hide-actions
                        hide-headers
                        style="border-spacing: 0 !important;"
                      >
                        <template
                          slot="items"
                          slot-scope="props"
                          v-if="props.index < 5"
                          style="border-spacing: 0 !important;"
                        >
                          <tr class="td-notice">
                            <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                            <td>
                              <span class="body-2">{{ props.item.user }}</span>
                            </td>
                            <td class="text-xs-center">
                              <span>
                                <v-tooltip top>
                                  <img
                                    slot="activator"
                                    style="cursor:pointer; width:25px; height:25px; "
                                    src="/static/icon/view.png"
                                  />
                                  <span>View</span>
                                </v-tooltip>
                              </span>
                            </td>
                          </tr>
                        </template>
                      </v-data-table>
                    </v-card>
                  </v-flex>
                </v-layout>

              </v-container>
            </v-flex>
            <v-flex xs12 sm12 md3>
              <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
                <v-card-text>
                  <h4 class="text-xs-center py-3">
                    <b>Profile</b>
                  </h4>
                  <v-flex xs12 class="py-3">

                    <v-layout wrap>

                      <v-flex xs12 sm12 md4>
                        <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />

                        <img

                          :src="userData.schoolLogoUrl"
                          v-else-if="userData.schoolLogoUrl"
                          width="80"

                        />

                      </v-flex>
                      <v-flex xs12 sm12 md6>
                        <p class="mb-0 body-1">
                          <i>{{ userData.name }}</i>
                        </p>
                        <p class="mb-0 caption grey--text">{{ userData.email }}</p>
                        <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
                        <address class="caption grey--text mb-3">{{ userData.address }}</address>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                  <hr />

                  <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>

                  <vue-event-calendar :events="activityEvents"></vue-event-calendar>

                  <!-- LATEST ACTIVITY -->
                  <v-card class="my-3 elevation-0">
                    <v-card-text>

                      <v-card-title class="justify-center subheading font-weight-bold">Latest Activity</v-card-title>
                      <div v-for="(activity,index) in activityList" :key="index" class="mt-2">

                        <span

                          :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                          style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

                        ></span>

                        <div style="display: inline-block;" class="ml-2">
                          <div
                            class="grey--text lighten-1 caption"
                          >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                          <div class="body-2">{{activity.meetingEvent.title}}</div>
                        </div>

                      </div>
                    </v-card-text>
                  </v-card>

                </v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>

      <v-dialog v-model="dialog" max-width="500">
        <v-card color="grey lighten-4" flat>
          <v-toolbar dark color="fixcolors">

            <v-spacer></v-spacer>
            <v-btn icon @click="dialog= false">
              <v-icon>close</v-icon>
            </v-btn>
          </v-toolbar>
          <v-flex class="py-4">
            <v-list-tile>
              <v-list-tile-action>
                <v-icon>edit</v-icon>

              </v-list-tile-action>
              <v-list-tile-content>

                <v-list-tile-title>{{ selected.title }}</v-list-tile-title>

              </v-list-tile-content>
            </v-list-tile>

            <v-list-tile>
              <v-list-tile-action>
                <v-icon>access_time</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>

              </v-list-tile-content>
            </v-list-tile>
          </v-flex>
        </v-card>
      </v-dialog>

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

  import moment from "moment";

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

  // import { FunctionalCalendar } from "vue-functional-calendar";

  
  export default {

    components: {
      // FunctionalCalendar
    },

    mixins: [AllApiCalls],

    data() {
      return {

        // data: {
        //   clieckedToday: false
        // },
        // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
        // calendarData: {},
        // calendar: {},

        // CALENDER
        moment: moment,
        activityEvents: [],

        onlineUser: [
          {
            user: "Student Demo"
          },
          {
            user: "Teacher Demo"
          },
          {
            user: "Priyansh Gupta"
          },
          {
            user: "Gaurav Aggarwal"
          },
          {
            user: "Approve Arorra"
          }
        ],

        showLoader: false,

        calendarData: {},

        dialog: false,

        dialogNotice: false,

        HolidaysList: [],
        EventsList: [],

        events: [],

        config: {
          eventClick: event => {
            this.selected = event;
            this.dialog = true;

          }
        },

        selected: {},

        barGraph: [],

        // notice: {},

        userData: {},

        dated: new Date(2018, 0, 9),
        userList: [],
        sectionList: [],

        students: "",
        parents: "",
        teachers: "",

        classes: "",

        noticeData: [],

        expenseData: [],

        feeData: [],
        collectionData: [],

        courseData: [],
        studentsData: [],
        annoucementData: [],
        role: "",

        attrs: [
          {
            key: "today",
            highlight: true,
            dates: new Date()
          }
        ],
        drawer: true,
        items: [
          { title: "Home", icon: "dashboard" },
          { title: "About", icon: "question_answer" }
        ],
        right: null,
  
        series: [
          {
            name: "Total",

            data: []

          }
        ],
        chartOptions: {
          chart: {
            type: "bar",
            height: 150,

            stacked: true
            // animations: {
            //   enabled: true,
            //   easing: "easeinout",
            //   speed: 1200,
            //   animateGradually: {
            //     enabled: true,
            //     delay: 450
            //   },
            //   dynamicAnimation: {
            //     enabled: true,
            //     speed: 450
            //   }
            // }

          },
          plotOptions: {
            bar: {
              horizontal: false,
              columnWidth: "25%",
              // endingShape: "rounded",
              distributed: true
            }
          },

          responsive: [
            {
              breakpoint: 480,
              options: {
                legend: {
                  position: "bottom",
                  offsetX: -10,
                  offsetY: 0
                }
              }
            }
          ],

          legend: {
            show: false
          },
          colors: ["#7852cc", "#f9a825", "#ff8a89"],
          dataLabels: {
            enabled: false
          },
          stroke: {
            show: true,
            width: 2,
            colors: ["transparent"]
          },
          xaxis: {
            categories: ["Fee", "Collections", "Expences"]
          },
          yaxis: {
            title: {
              text: ""
            }
          },
          fill: {
            opacity: 1
          },
          tooltip: {
            y: {
              formatter: function(val, opts) {
                // console.log("opts",opts.w.config.xaxis.categories)
                return "" + val + " ";
              }
            }
          }

        },
  
        // LATEST ACTIVITY
        colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
        activityList: []

      };
    },

    mounted() {

      //  = this.$store.state.schoolToken;
      // console.log("this.$store.state.role", this.token);
      if (this.$store.state.role === "ADMIN") {
        this.token = this.$store.state.token;
      } else if (this.$store.state.schoolRole === "SUPERADMIN") {
        this.token = this.$store.state.schoolToken;

      } else if (this.$store.state.role === "TEACHER") {
        this.token = this.$store.state.token;

      } else if (this.$store.state.role === "ACCOUNTANT") {
        this.token = this.$store.state.token;
      } else if (this.$store.state.role === "LIBRARIAN") {
        this.token = this.$store.state.token;

      } else if (this.$store.state.role === "PARENT") {
        this.token = this.$store.state.token;

      }

      this.role = this.$store.state.role;

      // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);

      // this.getData();

      this.getStudents();
      this.getTeachers();
      this.getParents();
      this.getClasses();

      this.getNoticeData();
      this.getUserData();

      this.getFeesAndCollectionsData();

      this.getExpensesData();

      this.getparentStudents();

      // this.getUsersList();

    },

    methods: {

      async routeToCourseDetails(courseId) {
        /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
        let response = await this.getParticularCourseDetail(courseId);
  
        /* If the response is null then dont route */
        if (response.data.data.length > 0) {
          this.$router.push({
            name: "Course Details",
            query: { courseId: courseId }
          });
        } else {
          this.seeSnackbar("No Data Available", "warning");
        }
      },

      closeNotice() {
        this.dialogNotice = false;
      },

      profile() {

        // this.editedIndex = this.desserts.indexOf(item);

        // this.notice = Object.assign({}, item);
        // this.dialogNotice = true;
        this.$router.push({ name: "NoticeBoard" });

      },

      date: function(date) {

        return moment(date).format("MMMM DD, YYYY  HH:mm");

      },

      activityDate(date) {
        return moment(date).format("MMMM DD, YYYY");
      },

      refreshEvents() {
        this.$refs.calendar.$emit("refetch-events");
      },
      removeEvent() {
        this.$refs.calendar.$emit("remove-event", this.selected);
        this.selected = {};
      },
      eventSelected(event) {
        this.selected = event;

        console.log("this.selected", this.selected);

      },

      // eventDropStart: function(event) {
      //   event.editable = false;
      // },

      eventCreated(...test) {
        console.log(test);

      },

      getStudents() {
        http()

          .get("/getStudentsList", {

            headers: {
              Authorization: "Bearer " + this.token
            }

          })

          .then(response => {
            this.students = response.data.data;
            this.showLoader = false;
          })

          .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);
            }

          });
      },
      getParents() {
        http()

          .get("/getParentsList", {

            headers: {
              Authorization: "Bearer " + this.token
            }

          })

          .then(response => {
            this.parents = response.data.data;
            this.showLoader = false;
          })

          .catch(error => {

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

          });
      },
      getTeachers() {
        http()

          .get("/getTeachersList", {

            headers: {
              Authorization: "Bearer " + this.token
            }

          })

          .then(response => {
            this.teachers = response.data.data;
            this.showLoader = false;
          })

          .catch(error => {

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

          });
      },
      getClasses() {
        http()

          .get("/getClassesList", {

            headers: {
              Authorization: "Bearer " + this.token
            }

          })

          .then(response => {
            this.classes = response.data.data;
            this.showLoader = false;
          })

          .catch(error => {

            this.showLoader = false;

          });

      },
      getNoticeData() {
        this.showLoader = true;
        http()

          .get("/getEventsList", {

            headers: {
              Authorization: "Bearer " + this.token
            }

          })

          .then(response => {
            this.noticeData = response.data.data;
            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;

          });
      },
      getUserData() {

        // this.showLoader = true;

        http()

          .get("/getParticularUserDetail", {

            headers: {
              Authorization: "Bearer " + this.token
            }

          })

          .then(response => {
            this.userData = response.data.data;
            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;

          });

      },

  
      getFeesAndCollectionsData() {
        http()
          .get("/getTotalFeesAndCollections", {
            headers: {
              Authorization: "Bearer " + this.token
            }
          })
          .then(response => {
            this.feeData = response.data.data;
            // this.collectionData = response.data.data;
            this.series[0].data[0] = this.feeData.totalFees;
            this.series[0].data[1] = this.feeData.totalCollection;

            // console.log("this.series====", this.series);

  
            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;
          });
      },

      getExpensesData() {
        http()

          .get("/getTotalExpenses", {
            headers: {
              Authorization: "Bearer " + this.token
            }
          })
          .then(response => {
            this.expenseData = response.data.data;
            // var array = response.data.data.sum;
            this.series[0].data[2] = this.expenseData.sum;

            // this.series = [
            //   {
            //     name: "Total",
            //     data: array
            //   }
            // ];
            // console.log("this.series====", this.series);
            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;
          });

      },
      getparentStudents() {
        this.showLoader = true;
        http()
          .get("/parentStudentsList")
          .then(response => {
            // console.log("resssssss", response.data.data.students[0].classId);
            this.studentsData = response.data.data;
            // localStorage.setItem(
            //   "parentStudentId",
            //   this.studentsData.students[0]._id
            // );
            // localStorage.setItem(
            //   "parentClassId",
            //   this.studentsData.students[0].classId
            // );

            if (localStorage.getItem("parentStudentId") == null) {
              var parentStudentsId = response.data.data.students[0].classId;

              var classId = response.data.data.students[0]._id;

            }
            if (localStorage.getItem("parentStudentId")) {
              var parentStudentsId = localStorage.getItem("parentStudentId");

              var classId = localStorage.getItem("parentClassId");

            }

            this.getCourses(parentStudentsId, classId);
            this.getAnnoucementes(classId);

            this.showLoader = false;
          })
          .catch(err => {
            console.log("err====>", err);
            this.showLoader = false;
          });
      },

      async getCourses(parentStudentsId, classId) {
        /* getStudentCourses - to get courseData - defined in GetApis.js*/
        await this.getStudentCourses({
          classId: classId,
          studentId: parentStudentsId
        });
        // this.showLoader = true;
        // http()
        //   .get("/getStudentCourses", {
        //     params: {
        //       classId: classId,
        //       studentId: parentStudentsId
        //     }
        //   })
        //   .then(response => {
        //     this.courseData = response.data.data;
        //     console.log("course data - ",this.courseData)
        //     this.showLoader = false;
        //   })
        //   .catch(err => {
        //     console.log("err====>", err);
        //     this.showLoader = false;
        //   });

      },

      getAnnoucementes(classId) {

        this.showLoader = true;
        http()
          .get("/getAnnoucementesList", {
            params: {

              classId: classId

            }
          })
          .then(response => {
            this.annoucementData = response.data.data;
            this.showLoader = false;
          })
          .catch(err => {
            console.log("err====>", err);
            this.showLoader = false;
          });

      }

    },

    async created() {

      /* get Latest events list */

      let response = await this.studentMeetingEvents({
        studentId: localStorage.getItem("parentStudentId")
      });
      this.activityList = response.data.data;
  
      /* set activityEvents array to highlight event dates in calender */
      for (var i = 0; i < this.activityList.length; i++) {
        let obj = {};
        obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format("YYYY/MM/DD");;
        obj.title = this.activityList[i].meetingEvent.title;
        this.activityEvents.push(obj);
      }

    }
  };
  </script>

  <style scoped>

  @import "fullcalendar/dist/fullcalendar.css";

  </style>