<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>

    <!-- DIALOG BOX EVENT DETAILS -->
    <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
      <v-card flat class="card-style elevation-0" height="600" dark>
        <v-layout>
          <v-flex xs12>
            <v-icon
              size="24"
              class="right"
              @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
            >cancel</v-icon>
          </v-flex>
        </v-layout>
        <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
          <v-tabs-slider color="yellow"></v-tabs-slider>
          <v-tab v-for="(tab,index) in tabs" :key="index">
            <div class="subheading py-1">{{ tab.name }}</div>
          </v-tab>
          <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
          <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->

          <!-- SCHOOL EVENTS-->
          <v-tab-item>
            <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
              <v-container fluid>
                <v-divider class="white"></v-divider>
                <v-card
                  v-for="(particularEvent,index) in dialogSchoolEvents"
                  :key="index"
                  class="mt-3 pa-2 card-style white--text elevation-0"
                >
                  <div>
                    <div class="headline">{{particularEvent.title}}</div>
                    <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                    <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
                    <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
                    <div v-if="particularEvent.link">
                      Link :
                      <a :href="particularEvent.link">{{particularEvent.link}}</a>
                    </div>
                    <div
                      v-if="particularEvent.description"
                    >Description : {{particularEvent.description}}</div>
                  </div>
                  <v-divider class="white mt-3"></v-divider>
                </v-card>
              </v-container>
            </v-card>
          </v-tab-item>

          <!-- MEETING EVENTS -->
          <v-tab-item>
            <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
              <v-container fluid>
                <v-divider class="white"></v-divider>
                <v-card
                  v-for="(particularEvent,index) in dialogMeetingEvents"
                  :key="index"
                  class="mt-3 pa-2 card-style white--text elevation-0"
                >
                  <div>
                    <div class="headline">{{particularEvent.title}}</div>
                    <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                    <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
                    <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
                    <div v-if="particularEvent.link">
                      Link :
                      <a :href="particularEvent.link">{{particularEvent.link}}</a>
                    </div>
                    <div
                      v-if="particularEvent.description"
                    >Description : {{particularEvent.description}}</div>
                  </div>
                  <v-divider class="white mt-3"></v-divider>
                </v-card>
              </v-container>
            </v-card>
          </v-tab-item>
        </v-tabs>

        <!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
        <v-card flat class="card-style pa-2 elevation-0" dark v-else>
          <v-container fluid>
            <v-divider class="white"></v-divider>
            <v-card
              v-for="(particularEvent,index) in displayEventsList"
              :key="index"
              class="mt-3 pa-2 card-style white--text elevation-0"
            >
              <div>
                <div class="headline">{{particularEvent.title}}</div>
                <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
                <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
                <div v-if="particularEvent.link">
                  Link :
                  <a :href="particularEvent.link">{{particularEvent.link}}</a>
                </div>
                <div
                  v-if="particularEvent.description"
                >Description : {{particularEvent.description}}</div>
              </div>
              <v-divider class="white mt-3"></v-divider>
            </v-card>
          </v-container>
        </v-card>
      </v-card>
    </v-dialog>

    <v-layout wrap row>
      <v-flex xs12 sm12 md8>
        <v-container fluid grid-list-xl>
          <!-- ***** Total Students ***** -->
          <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
            <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>

          <p
            v-if="studentsData.length === 0 && role == 'PARENT'"
            class="text-center title grey lighten-4 error--text"
          >You have no student registered with school</p>
          <!-- ACCOUNT -->
          <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
            <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="showChart">
                        <apexchart
                          type="bar"
                          height="250"
                          style="max-width: 800px !important"
                          :options="chartOptions"
                          :series="series"
                        ></apexchart>
                      </div>
                    </div>
                  </v-flex>
                </v-layout>
              </v-card>
            </v-flex>
          </v-layout>

          <!-- FOR ADMIN ROLE  -->
          <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
            <!-- NOTICE -->
            <v-flex xs12 sm6>
              <v-card class="card">
                <v-container>
                  <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>

                  <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="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-container>
              </v-card>
            </v-flex>

            <!-- SCHOOL EVENTS -->
            <v-flex xs12 sm6>
              <v-card class="card">
                <v-container>
                  <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
                  <div
                    v-for="(schoolEvent,index) in schoolEvents"
                    :key="schoolEvent.title"
                    class="mt-2"
                    style="cursor: pointer;"
                    @click="seeEventDetails(schoolEvent,'schoolEvent')"
                  >
                    <!-- color dot-->
                    <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>
                        <!-- date of event -->
                        <div
                          class="grey--text lighten-1 caption"
                          v-if="schoolEvent.dateOfEvent"
                        >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                        <!-- event title-->
                        <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="schoolEvents.length == 0">
                    <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                  </div>
                </v-container>
              </v-card>
            </v-flex>
          </v-layout>

          

          <!-- FOR TEACHER ROLE  -->
          <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
            <v-layout>
              <v-flex xs6 sm6 md6>
                <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="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-flex>

              <v-flex xs6 sm6 md6>
                <v-card-text>
                  <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
                  <div
                    v-for="(activity,index) in activityList"
                    :key="index"
                    class="mt-2"
                    style="cursor: pointer;"
                    @click="seeEventDetails(activity)"
                  >
                    <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>
                        <div
                          class="grey--text lighten-1 caption"
                          v-if="activity.dateOfEvent"
                        >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                        <div class="body-2" v-if="activity.title">{{activity.title}}</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="activityList.length == 0">
                    <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                  </div>
                </v-card-text>
              </v-flex>
            </v-layout>
          </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;"
                              @click="routeToCourseDetails(course._id)"
                            >panorama_fish_eye</v-icon>-->
                            <span>
                              <v-tooltip top>
                                <img
                                  slot="activator"
                                  style="cursor:pointer; width:25px; height:25px; "
                                  src="/static/icon/view.png"
                                  @click="routeToCourseDetails(course._id)"
                                />
                                <span>View</span>
                              </v-tooltip>
                            </span>
                          </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-spacer></v-spacer>
      <!-- SIDE BAR -->
      <v-flex xs12 sm12 md4>
        <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
          <v-card-text class="px-2">
            <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.profilePicUrl && !userData.schoolLogoUrl"
                    width="80"
                  />
                  <img
                    :src="userData.profilePicUrl"
                    onerror="this.src='/static/icon/user.png';"
                    v-if="userData.profilePicUrl"
                    width="80"
                  />
                  <img
                    :src="userData.schoolLogoUrl"
                    onerror="this.src='/static/icon/user.png';"
                    v-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" @day-changed="handleDayChanged($event)"></vue-event-calendar>

            <!-- MEETING EVENTS -->
            <!-- IF ROLE IS ADMIN -->
            <v-card class="my-3 elevation-0">
              <v-card-text v-if="$store.state.role === 'ADMIN' ">
                <!-- MEETING EVENTS -->
                <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
                <div
                  v-for="(activity,index) in activityList"
                  :key="index"
                  class="mt-2"
                  style="cursor: pointer;"
                  @click="seeEventDetails(activity)"
                >
                  <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>
                      <div
                        class="grey--text lighten-1 caption"
                        v-if="activity.dateOfEvent"
                      >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                      <div class="body-1" v-if="activity.title">{{activity.title}}</div>
                    </div>
                  </div>
                </div>
                <div v-if="activityList.length == 0">
                  <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                </div>
              </v-card-text>

              <!-- ROLE IS NOT ADMIN -->
              <v-card-text v-if="$store.state.role != 'ADMIN'">
                <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
                <div
                  v-for="(activity,index) in activityList"
                  :key="index"
                  class="mt-2"
                  style="cursor: pointer;"
                  @click="seeEventDetails(activity)"
                >
                  <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">
                    <!-- MEETING EVENTS FOR PARENT -->
                    <div v-if="$store.state.role === 'PARENT' ">
                      <div
                        class="grey--text lighten-1 caption"
                        v-if="activity.meetingEvent"
                      >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                      <div
                        class="body-2"
                        v-if="activity.meetingEvent"
                      >{{activity.meetingEvent.title}}</div>
                    </div>

                    <!-- MEETING EVENTS FOR TEACHER -->
                    <div v-if="role === 'TEACHER'">
                      <div
                        class="grey--text lighten-1 caption"
                        v-if="activity.dateOfEvent"
                      >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                      <div class="body-2" v-if="activity.title">{{activity.title}}</div>
                    </div>
                  </div>
                  <div v-if="activityList.length == 0">
                    <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                  </div>
                </div>
              </v-card-text>
            </v-card>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>

    <v-dialog v-model="dialog" max-width="500" persistent>
      <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: {},

      // DIALOG BOX EVENT DETAILS
      tabs: [
        { name: "School Events", icon: "mdi-account" },
        { name: "Meeting Events", icon: "mdi-account-outline" },
      ],
      viewEventDetails: false,
      active: 0,
      particularEvent: [],
      displayEventsList: [],
      dialogSchoolEvents: [],
      dialogMeetingEvents: [],

      // 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: [],
        },
      ],
      showChart: false,
      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) {
              return "" + val + " ";
            },
          },
        },
      },

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

  methods: {
    test(e) {
      console.log(" test - ", e);
    },
    async handleDayChanged(e) {
      console.log("event calender - ", e);
      /*the list of events that will be used in dialog box to display events */
      // this.displayEventsList = [];
      this.dialogMeetingEvents = [];
      this.dialogSchoolEvents = [];

      for (var i = 0; i < e.events.length; i++) {
        if (e.events[i].eventType == "meetingEvent") {
          let meetingEventResponse = await this.getParticularMeetingEvent({
            meetingEventId: e.events[i]._id,
          });
          this.dialogMeetingEvents.push(meetingEventResponse.data.data);
        }
        if (e.events[i].eventType == "schoolEvent") {
          let schoolEventResponse = await this.getParticularSchoolEvent({
            schoolEventId: e.events[i]._id,
          });
          this.dialogSchoolEvents.push(schoolEventResponse.data.data);
        }
      }

      this.viewEventDetails = true;
    },
    async seeEventDetails(activity, message) {
      // if (this.$store.state.role === "TEACHER") {
      //   let response = await this.getParticularMeetingEvent({
      //     meetingEventId: activity._id,
      //   });
      //   this.displayEventsList = [];
      //   this.displayEventsList.push(response.data.data);
      //   this.viewEventDetails = true;
      // }
      if (this.$store.state.role === "PARENT") {
        let response = await this.getParticularMeetingEvent({
          meetingEventId: activity.meetingEvent._id,
        });
        this.displayEventsList = [];
        this.displayEventsList.push(response.data.data);
        this.viewEventDetails = true;
      }
      if (this.$store.state.role === "ADMIN" || this.$store.state.role === "TEACHER") {
        if (message == "schoolEvent") {
          let response = await this.getParticularSchoolEvent({
            schoolEventId: activity._id,
          });
          this.displayEventsList = [];
          this.displayEventsList.push(response.data.data);
        } else {
          let response = await this.getParticularMeetingEvent({
            meetingEventId: activity._id,
          });
          this.displayEventsList = [];
          this.displayEventsList.push(response.data.data);
        }
        this.viewEventDetails = true;
      }
    },
    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("/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;
    },
    // eventDropStart: function(event) {
    //   event.editable = false;
    // },
    eventCreated(...test) {
      console.log(test);
    },
    getStudents() {
      http()
        .get("/getStudentsList")
        .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")
        .then((response) => {
          this.parents = response.data.data;
          this.showLoader = false;
        })
        .catch((error) => {
          // console.log("err====>", err);
          this.showLoader = false;
        });
    },
    getTeachers() {
      http()
        .get("/getTeachersList")
        .then((response) => {
          this.teachers = response.data.data;
          this.showLoader = false;
        })
        .catch((error) => {
          // console.log("err====>", err);
          this.showLoader = false;
        });
    },
    getClasses() {
      http()
        .get("/getClassesList")
        .then((response) => {
          this.classes = response.data.data;
          this.showLoader = false;
        })
        .catch((error) => {
          this.showLoader = false;
        });
    },
    getNoticeData() {
      this.showLoader = true;
      http()
        .get("/getEventsList")
        .then((response) => {
          this.noticeData = response.data.data;
          this.showLoader = false;
        })
        .catch((error) => {
          this.showLoader = false;
        });
    },
    getUserData() {
      // this.showLoader = true;
      if (this.$store.state.role === "PARENT") {
        http()
          .get("/getParticularUserDetail", {
            params: {
              studentId: localStorage.getItem("parentStudentId"),
            },
          })
          .then((response) => {
            this.userData = response.data.data;
            this.showLoader = false;
          })
          .catch((error) => {
            this.showLoader = false;
          });
      } else {
        http()
          .get("/getParticularUserDetail")
          .then((response) => {
            this.userData = response.data.data;
            this.showLoader = false;
          })
          .catch((error) => {
            this.showLoader = false;
          });
      }
    },

    getFeesAndCollectionsData() {
      http()
        .get("/getTotalFeesAndCollections")
        .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;
          this.showLoader = false;
        })
        .catch((error) => {
          this.showLoader = false;
        });
    },
    getExpensesData() {
      http()
        .get("/getTotalExpenses")
        .then((response) => {
          this.expenseData = response.data.data;
          // var array = response.data.data.sum;
          this.series[0].data[2] = this.expenseData.sum;
          this.showChart = true;
          // this.series = [
          //   {
          //     name: "Total",
          //     data: array
          //   }
          // ];
          this.showLoader = false;
        })
        .catch((error) => {
          this.showLoader = false;
        });
    },
    // async getparentStudents() {
    //   this.showLoader = true;
    //   await http()
    //     .get("/parentStudentsList")
    //     .then((response) => {

    //       /* set values in local storage */
    //       this.studentsData = response.data.data.students;
    //       this.showLoader = false;
    //     })
    //     .catch((err) => {
    //       console.log("err====>", err);
    //       this.showLoader = false;
    //     });
    //   await this.getCourses(parentStudentsId, classId);
    //   await this.getAnnoucementes(classId);
    // },
    async getCourses(parentStudentsId, classId) {
      /* getStudentCourses - to get courseData - defined in GetApis.js*/
      await this.getStudentCourses({
        classId: localStorage.getItem("parentClassId"),
        studentId: localStorage.getItem("parentStudentId"),
      });
    },
    getAnnoucementes(classId) {
      this.showLoader = true;
      http()
        .get("/getAnnoucementesList", {
          params: {
            classId: localStorage.getItem("parentClassId"),
          },
        })
        .then((response) => {
          this.annoucementData = response.data.data;
          this.showLoader = false;
        })
        .catch((err) => {
          console.log("err====>", err);
          this.showLoader = false;
        });
    },
    async getMeetingEventes() {
      if (this.role == "TEACHER" || this.role === "ADMIN") {
        this.showLoader = true;
        await http()
          .get("/getMeetingEventesList")
          .then((response) => {
            var activityList = response.data.data;
            this.activityList = activityList;
            this.showLoader = false;

            /* set meetingEvents in 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].dateOfEvent).format(
                "YYYY/MM/DD"
              );
              obj.title = this.activityList[i].title;
              obj._id = this.activityList[i]._id;
              obj.eventType = "meetingEvent";
              /* activityEvents is an array used to display events in calender on particular dates */
              this.activityEvents.push(obj);
            }
          })
          .catch((error) => {
            this.showLoader = false;
          });
      }
      /* If role is ADMIN or TEACHER then school events need to be displayed too */
      if (this.role === "ADMIN" || this.role === "TEACHER") {
        await this.getSchoolEventsList();
        /* set schoolEvents in activityEvents array to highlight event dates in calender */
        for (var i = 0; i < this.schoolEvents.length; i++) {
          let obj = {};
          obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
            "YYYY/MM/DD"
          );
          obj.title = this.schoolEvents[i].title;
          obj._id = this.schoolEvents[i]._id;
          obj.eventType = "schoolEvent";
           /* activityEvents is an array used to display events in calender on particular dates */
          this.activityEvents.push(obj);
        }
      }
    },
  },

  mounted() {
    //  = this.$store.state.schoolToken;
    // console.log("this.$store.state.role", this.token);
    // this.getUsersList();
  },

  async created() {
    if (this.$store.state.role === "ADMIN") {
      // this.token = this.$store.state.token;
      await this.getFeesAndCollectionsData();
      await this.getExpensesData();
    } else if (this.$store.state.schoolRole === "SUPERADMIN") {
      // this.token = this.$store.state.schoolToken;
      await this.getFeesAndCollectionsData();
      await this.getExpensesData();
    } 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;
      // await this.getparentStudents();
      this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
      console.log("students data - ", this.studentsData);
      await this.getCourses();
      await this.getAnnoucementes();
    }
    this.role = this.$store.state.role;

    await this.getStudents();
    await this.getTeachers();
    await this.getParents();
    await this.getClasses();
    await this.getNoticeData();
    await this.getUserData();

    /* get Latest events list for student login*/
    if (this.$store.state.role == "PARENT") {
      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;
        obj._id = this.activityList[i].meetingEvent._id;
        this.activityEvents.push(obj);
      }
    }

    /* get Latest events list for teacher login*/
    if (this.role == "TEACHER" || this.role == "ADMIN") {
      await this.getMeetingEventes();
    }
  },
};
</script>

<style scoped>
@import "fullcalendar/dist/fullcalendar.css";
.wrap-text {
  -webkit-line-clamp: unset !important;
}

a {
  color: white;
}
</style>