<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,TEACHER 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 title font-weight-bold">Notice Board</v-card-title>

                    <v-layout column>
                      <v-flex
                        v-for="(item,index) in noticeData"
                        :key="index"
                        style="cursor: pointer;"
                      >
                        <v-layout column>
                          <!--Date-->
                          <v-flex class="pb-2 pl-2 pr-2">
                            <v-chip
                              :color="colorsArray[index%colorsArray.length]"
                              text-color="white"
                              class="ma-0"
                            >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
                          </v-flex>
                          <!-- title -->
                          <v-flex class="pa-2">

                            <div class="body-1 font-weight-bold px-2" @click="profile">{{item.title}}</div>

                          </v-flex>

                          <!-- divider -->
                          <v-flex class="pa-2">
                            <v-divider></v-divider>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
  
                    <!-- <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-layout column>
                  <!-- school events -->
                  <v-flex>
                    <v-card class="card">
                      <v-container>
                        <v-card-title class="justify-center title 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>
                  <!-- apex charts - Male Female data -->
                  <v-flex>
                    <v-card>

                      <v-card-title class="justify-center title font-weight-bold">Students</v-card-title>

                      <div id="chart">
                        <apexcharts
                          type="donut"
                          :options="maleFemaleData"
                          :series="maleFemaleSeries"
                        />

                      </div>

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

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

            <v-layout row wrap v-if="role == 'PARENT'">
              <!-- ROLE - PARENT , ACTIVE STUDENTS -->
              <v-flex xs12>
                <v-card class="elevation-0 account-Card">
                  <v-container>
                    <v-card-title class="title font-weight-bold">Students</v-card-title>
                    <v-data-iterator
                      :items="activeStudentsList"
                      :rows-per-page-items="rowsPerPageItems"
                      :pagination.sync="pagination"
                      content-tag="v-layout"
                      row
                      wrap

                    >

                      <template v-slot:item="props">
                        <v-flex xs12 sm6>
                          <v-card style="border: 2px solid black" class="elevation-0" height="300">
                            <v-container>
                              <v-card-text>
                                <v-layout row wrap>
                                  <!-- IMAGE OF ACTIVE STUDENT -->
                                  <v-flex xs12 class="text-xs-center">
                                    <img
                                      :src="props.item.profilePicUrl"
                                      alt="profileImage"
                                      width="80"
                                    />
                                  </v-flex>
                                  <v-flex xs12 class="text-xs-center">
                                    <!--NAME -->
                                    <v-layout class="pa-0 ma-0">
                                      <v-flex xs4 class="body-1 font-weight-bold pa-0 ma-0">
                                        <span class="left">Name:</span>
                                      </v-flex>
                                      <v-flex xs8 class="body-1 font-weight-bold pa-0 ml-2">
                                        <span class="left">{{props.item.name}}</span>
                                      </v-flex>
                                    </v-layout>
                                    <!--ROLLNO -->
                                    <v-layout class="pa-0 ma-0">
                                      <v-flex xs4 class="body-1 font-weight-bold pa-0 ma-0">
                                        <span class="left">Roll No:</span>
                                      </v-flex>
                                      <v-flex xs8 class="body-1 font-weight-bold pa-0 ml-2">
                                        <span class="left">{{props.item.rollNo}}</span>
                                      </v-flex>
                                    </v-layout>
                                    <!--GENDER -->
                                    <v-layout class="pa-0 ma-0">
                                      <v-flex xs4 class="body-1 font-weight-bold pa-0 ma-0">
                                        <span class="left">Gender:</span>
                                      </v-flex>
                                      <v-flex xs8 class="body-1 font-weight-bold pa-0 ml-2">
                                        <span class="left">{{props.item.gender}}</span>
                                      </v-flex>
                                    </v-layout>
                                    <!--EMAIL -->
                                    <v-layout class="pa-0 ma-0">
                                      <v-flex xs4 class="body-1 font-weight-bold pa-0 ma-0">
                                        <span class="left">Email:</span>
                                      </v-flex>
                                      <v-flex xs8 class="body-1 font-weight-bold pa-0 ml-2">
                                        <span class="left">{{props.item.email}}</span>
                                      </v-flex>
                                    </v-layout>
                                  </v-flex>
                                </v-layout>
                              </v-card-text>
                            </v-container>
                          </v-card>
                        </v-flex>
                      </template>
                    </v-data-iterator>
                  </v-container>
                </v-card>
              </v-flex>

              <!-- ROLE - PARENT, MY COURSES -->

              <v-flex xs12>

                <v-card class="elevation-0 account-Card">
                  <v-container>

                    <v-card-title class="title font-weight-bold">My Courses</v-card-title>

                    <v-layout wrap>

                      <v-flex xs3 v-for="(course,i) in courseData" :key="i">
                        <v-btn block outline color="#71d9ea" dark>
                          <span
                            class="subheading font-weight-bold"
                            @click="routeToCourseDetails(course._id)"
                          >{{ course.courseName }}</span>
                        </v-btn>
                        <!-- <v-list two-line>

                          <template>

                            <v-list-tile>

                              <v-list-tile-avatar>

                              </v-list-tile-avatar>

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

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

                        </v-list>-->

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

                  </v-container>

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

  
            <v-layout row wrap v-if="role == 'PARENT'">

              <!-- ROLE - PARENT , LATEST ANNOUNCEMENTS -->
              <v-flex xs12 sm6 md6>
                <!-- NOTICE -->
                <v-card class="account-Card">

                  <v-container>

                    <v-card-title class="justify-center subheading font-weight-bold">Latest Announcements</v-card-title>
                    <v-layout column>
                      <v-flex
                        v-for="(item,index) in annoucementData"
                        :key="index"
                        style="cursor: pointer;"

                      >

                        <v-layout column>
                          <!--Date-->
                          <v-flex class="pb-2 pl-2 pr-2">
                            <v-chip
                              :color="colorsArray[index%colorsArray.length]"
                              text-color="white"
                              class="ma-0"
                            >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
                          </v-flex>
                          <!-- title -->
                          <v-flex class="pa-2">
                            <div
                              class="body-1 font-weight-bold px-2"
                              @click="profile"
                            >{{item.discussionType}}</div>
                          </v-flex>
  
                          <!-- divider -->
                          <v-flex class="pa-2">
                            <v-divider></v-divider>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>

                  </v-container>

                </v-card>

              </v-flex>

  
              <v-flex xs12 sm6>
                <v-layout column>
                  <!-- ROLE - PARENT, SCHOOL EVENTS -->
                  <v-flex>
                    <v-card class="account-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>

              </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 VueApexCharts from "vue-apexcharts";

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

  
  export default {

    components: {

      apexcharts: VueApexCharts,

    },

    mixins: [AllApiCalls],

    data() {
      return {

        studentsData: [],

        // 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: [],

        // apexCharts

        maleFemaleSeries: [],

        maleFemaleData: {
          labels: ["Male", "Female"],
          legend: {
            formatter: function (val, opts) {
              return val + " - " + opts.w.globals.series[opts.seriesIndex];
            },

            position: "bottom",

          },
          dataLabels: {
            enabled: true,

            formatter: function (val, opts) {

              return opts.w.globals.series[opts.seriesIndex];
            },
          },
        },

        // 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: [],

        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 + " ";

              },
            },
          },

        },

        /* ROLE PARENT - ACTIVE STUDENTS  */
        studentsData: [],
        activeStudent: {},
        activeStudentsList: [],
        rowsPerPageItems: [2],
        pagination: {
          rowsPerPage: 2,
        },

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

        activityList: [],

      };
    },

    methods: {

      test(e) {

        //   console.log(" test - ", e);

      },

  
      /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */

      async handleDayChanged(e) {

        //   console.log("event calender - ", e);

        /*the list of events that will be used in dialog box to display events */

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

        /* Opens the dialog box */

        this.viewEventDetails = true;
      },

  
      /* see meeting events, school events individually (when calender is not clicked) */

      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") {

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

            console.log("avnn - ", this.annoucementData);

            this.showLoader = false;
          })

          .catch((err) => {

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

            this.showLoader = false;

            this.snackbar = true;
            this.color = "error";
            this.text = error.response.data.message;

          });

      },

  
      /* MEETING EVENTS, SCHOOL EVENTS */

      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,TEACHER, PARENT then school events need to be displayed too */
        if (
          this.role === "ADMIN" ||
          this.role === "TEACHER" ||
          this.role === "PARENT"
        ) {
          /* this will get data in a  "schoolEvents" data property */

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

      },

      async getMaleFemaleData() {
        await http()
          .get("/getStudentsByGender")
          .then((response) => {
            console.log("gender response - ", response);
            for (var i = 0; i < response.data.data.length; i++) {
              if (response.data.data[i]._id == "male") {
                this.maleFemaleSeries.push(response.data.data[i].total);

              }

              if (response.data.data[i]._id == "female") {
                this.maleFemaleSeries.push(response.data.data[i].total);
              }
            }
          })
          .catch((error) => {
            this.showLoader = false;
          });
      },

    },

  
    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();

        await this.getMaleFemaleData();

      } else if (this.$store.state.schoolRole === "SUPERADMIN") {

        // this.token = this.$store.state.schoolToken;

        await this.getFeesAndCollectionsData();
        await this.getExpensesData();

        await this.getMaleFemaleData();

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

        // this.token = this.$store.state.token;

        await this.getMaleFemaleData();

      } 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") {

        await this.getCourses();

        await this.getAnnoucementes();

        this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
        this.activeStudent = this.$store.getters.GET_ACTIVE_STUDENT;
        /* MAKE A LIST OF STUDENTS WITH STATUS TRUE, FOR DISPLAYING STUDENTS DATA AT TOP */
        for (var i = 0; i < this.studentsData.length; i++) {
          if (this.studentsData[i].status == true) {
            this.activeStudentsList.push(this.studentsData[i]);
          }
        }
        console.log("student list - ", this.activeStudentsList);
        console.log("active - ", this.activeStudent);

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

          obj.eventType = "meetingEvent";

          this.activityEvents.push(obj);
        }

      }

      /* get Latest events list for teacher login*/

      if (
        this.role == "TEACHER" ||
        this.role == "ADMIN" ||
        this.role == "PARENT"
      ) {

        await this.getMeetingEventes();
      }

    },

  };
  </script>

  <style scoped>

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

  .wrap-text {
    -webkit-line-clamp: unset !important;
  }

  
  a {
    color: white;
  }

  </style>