<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. {{ feeData.totalFees }}</v-list-tile-title>

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

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

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

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

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

                        <v-flex xs12 sm12 md9 lg9>

                          <div id="chart">
                          <div v-if="this.series">

                            <apexchart
                              type="bar"
                              height="250"

                              style="max-width: 800px !important"

                              :options="chartOptions"
                              :series="series"

                              v-show="true"

                            ></apexchart>

                          </div>

                          </div>

                        </v-flex>
                      </v-layout>
                    </v-card>
                  </v-flex>
                </v-layout>
                <v-card class="mt-2 card">
                  <!-- <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: {},

        barGraph: [],

        // notice: {},

        userData: {},

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

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

        classes: "",

        noticeData: [],

        expenseData: [],

        feeData: [],
        collectionData: [],

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

            data: []

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

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

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

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

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

      };
    },

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

      this.getExpensesData();

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

          });

      },

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

      getExpensesData() {
        http()

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

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

      }

    }
  };
  </script>

  <style scoped>

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

  </style>