<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> -->
    <v-layout wrap>
      <v-flex xs12>
        <v-layout wrap row>
          <!-- ***** Total Students ***** -->
          <v-flex xs12 sm12 md9>
            <v-container fluid grid-list-xl>
              <v-flex xs12 sm12 md12>
                <v-layout wrap class>
                  <v-flex xs12 sm12 md3>
                    <router-link :to="{ name:'Students' }">
                      <v-card class="card pink-bgcolor">
                        <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
                        <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
                        <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
                      </v-card>
                    </router-link>
                  </v-flex>
                  <!-- ***** Total Teachers***** -->
                  <v-flex xs12 sm12 md3>
                    <router-link :to="{ name:'Teachers' }">
                      <v-card flat class="card elevation-2 firozi-bgcolor">
                        <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
                        <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />

                        <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
                      </v-card>
                    </router-link>
                  </v-flex>
                  <!-- ***** Total Parents ***** -->
                  <v-flex xs12 sm12 md3>
                    <router-link :to="{ name:'Parents' }">
                      <v-card flat class="card yellow darken-3">
                        <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
                        <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
                        <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
                      </v-card>
                    </router-link>
                  </v-flex>
                  <!-- ***** Total Class***** -->
                  <v-flex xs12 sm12 md3>
                    <router-link :to="{ name:'Class' }">
                      <v-card flat class="card darkBlue-bgcolor">
                        <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
                        <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
                        <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
                      </v-card>
                    </router-link>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-layout>
                <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 1000</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 2000</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 3000</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"> -->
                          <apexchart
                            type="bar"
                            height="250"
                            style="max-width: 800px !important"
                            :options="chartOptions"
                            :series="series"
                          ></apexchart>
                        <!-- </div> -->
                      </v-flex>
                    </v-layout>
                  </v-card>
                </v-flex>
              </v-layout>
              <v-card class="mt-2 card">
                <!-- <full-calendar
                  ref="calendar"
                  defaultView="month"
                  droppable="false"
                  :events="events"
                  :config="config"
                ></full-calendar>-->
                <h4 class="pa-3">
                  <b>Notice</b>
                </h4>

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

                      <td class="text-xs-center">
                        <span>
                          <v-tooltip top>
                            <img
                              slot="activator"
                              style="cursor:pointer; width:25px; height:25px; "
                              @click="profile"
                              src="/static/icon/view.png"
                            />
                            <span>View</span>
                          </v-tooltip>
                        </span>
                      </td>
                    </tr>
                  </template>
                </v-data-table>
              </v-card>
            </v-container>
          </v-flex>
          <v-flex xs12 sm12 md3>
            <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
              <v-card-text>
                <h4 class="text-xs-center py-3">
                  <b>Profile</b>
                </h4>
                <v-flex xs12 class="py-3">
                  <v-layout wrap>
                    <v-flex xs12 sm12 md4>
                      <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
                      <img
                        :src="userData.schoolLogoUrl"
                        v-else-if="userData.schoolLogoUrl"
                        width="80"
                      />
                    </v-flex>
                    <v-flex xs12 sm12 md6>
                      <p class="mb-0 body-1">
                        <i>{{ userData.name }}</i>
                      </p>
                      <p class="mb-0 caption grey--text">{{ userData.email }}</p>
                      <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
                      <address class="caption grey--text mb-3">{{ userData.address }}</address>
                    </v-flex>
                  </v-layout>
                </v-flex>
                <hr />
                <h4 class="text-xs-center py-3">
                  <b>Calender</b>
                </h4>
                <vue-event-calendar :events="demoEvents"></vue-event-calendar>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="500">
      <v-card color="grey lighten-4" flat>
        <v-toolbar dark color="fixcolors">
          <v-spacer></v-spacer>
          <v-btn icon @click="dialog= false">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-flex class="py-4">
          <v-list-tile>
            <v-list-tile-action>
              <v-icon>edit</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-action>
              <v-icon>access_time</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-flex>
      </v-card>
    </v-dialog>
    <div class="loader" v-if="showLoader">
      <v-progress-circular indeterminate color="white"></v-progress-circular>
    </div>
  </v-app>
</template>

<script>
import http from "@/Services/http.js";
import moment from "moment";
// import { FunctionalCalendar } from "vue-functional-calendar";

export default {
  components: {
    // FunctionalCalendar
  },
  data() {
    return {
      // data: {
      //   clieckedToday: false
      // },
      // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
      // calendarData: {},
      // calendar: {},
      demoEvents: [
        {
          date: "2020/01/10", // Required
          title: "Foo" // Required
        },
        {
          date: "2020/01/12",
          title: "Bar",
          desc: "description",
          customClass: "disabled highlight" // Custom classes to an calendar cell
        }
      ],

      showLoader: false,
      calendarData: {},
      dialog: false,
      dialogNotice: false,
      HolidaysList: [],
      EventsList: [],
      events: [],
      config: {
        eventClick: event => {
          this.selected = event;
          this.dialog = true;
        }
      },
      selected: {},
      // notice: {},
      userData: {},
      dated: new Date(2018, 0, 9),
      userList: [],
      sectionList: [],
      students: "",
      parents: "",
      teachers: "",
      classes: "",
      noticeData: [],
      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: [66, 44, 33]
        }
      ],
      chartOptions: {
        chart: {
          type: "bar",
          height: 150,
          stacked: true
          // animations: {
          //   enabled: true,
          //   easing: "easeinout",
          //   speed: 1200,
          //   animateGradually: {
          //     enabled: true,
          //     delay: 450
          //   },
          //   dynamicAnimation: {
          //     enabled: true,
          //     speed: 450
          //   }
          // }
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: "25%",
            // endingShape: "rounded",
            distributed: true
          }
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              legend: {
                position: "bottom",
                offsetX: -10,
                offsetY: 0
              }
            }
          }
        ],
        legend: {
          show: false
        },
        colors: ["#7852cc", "#f9a825", "#ff8a89"],
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ["transparent"]
        },
        xaxis: {
          categories: ["Fee", "Collections", "Expences"]
        },
        yaxis: {
          title: {
            text: ""
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function(val, opts) {
              // console.log("opts",opts.w.config.xaxis.categories)
              return "" + val + " ";
            }
          }
        }
      }
    };
  },
  mounted() {
    //  = this.$store.state.schoolToken;
    // console.log("this.$store.state.role", this.token);
    if (this.$store.state.role === "ADMIN") {
      this.token = this.$store.state.token;
    } else if (this.$store.state.schoolRole === "SUPERADMIN") {
      this.token = this.$store.state.schoolToken;
    }
    // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
    // this.getData();
    this.getStudents();
    this.getTeachers();
    this.getParents();
    this.getClasses();
    this.getNoticeData();
    this.getUserData();
    // this.getUsersList();
  },
  methods: {
    closeNotice() {
      this.dialogNotice = false;
    },
    profile() {
      // this.editedIndex = this.desserts.indexOf(item);
      // this.notice = Object.assign({}, item);
      // this.dialogNotice = true;
      this.$router.push({ name: "NoticeBoard" });
    },
    date: function(date) {
      return moment(date).format("MMMM DD, YYYY  HH:mm");
    },
    refreshEvents() {
      this.$refs.calendar.$emit("refetch-events");
    },
    removeEvent() {
      this.$refs.calendar.$emit("remove-event", this.selected);
      this.selected = {};
    },
    eventSelected(event) {
      this.selected = event;
      console.log("this.selected", this.selected);
    },
    // eventDropStart: function(event) {
    //   event.editable = false;
    // },
    eventCreated(...test) {
      console.log(test);
    },
    getStudents() {
      http()
        .get("/getStudentsList", {
          headers: {
            Authorization: "Bearer " + this.token
          }
        })
        .then(response => {
          this.students = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          // console.log("err====>", err);
          this.showLoader = false;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    },
    getParents() {
      http()
        .get("/getParentsList", {
          headers: {
            Authorization: "Bearer " + this.token
          }
        })
        .then(response => {
          this.parents = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          // console.log("err====>", err);
          this.showLoader = false;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    },
    getTeachers() {
      http()
        .get("/getTeachersList", {
          headers: {
            Authorization: "Bearer " + this.token
          }
        })
        .then(response => {
          this.teachers = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          // console.log("err====>", err);
          this.showLoader = false;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    },
    getClasses() {
      http()
        .get("/getClassesList", {
          headers: {
            Authorization: "Bearer " + this.token
          }
        })
        .then(response => {
          this.classes = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          this.showLoader = false;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          //   this.$store.dispatch("Role", null);
          // }
        });
    },
    getNoticeData() {
      this.showLoader = true;
      http()
        .get("/getEventsList", {
          headers: {
            Authorization: "Bearer " + this.token
          }
        })
        .then(response => {
          this.noticeData = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          this.showLoader = false;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    },
    getUserData() {
      // this.showLoader = true;
      http()
        .get("/getParticularUserDetail", {
          headers: {
            Authorization: "Bearer " + this.token
          }
        })
        .then(response => {
          this.userData = response.data.data;
          this.showLoader = false;
        })
        .catch(error => {
          this.showLoader = false;
          // if (error.response.status === 401) {
          //   this.$router.replace({ path: "/" });
          //   this.$store.dispatch("setToken", null);
          //   this.$store.dispatch("Id", null);
          // }
        });
    }
  }
};
</script>

<style scoped>
@import "fullcalendar/dist/fullcalendar.css";
</style>