<template>
  <v-app id="pages-dasboard">
    <full-calendar ref="calendar" :events="events" :config="config"></full-calendar>
    <v-dialog v-model="dialog" max-width="500">
      <v-card color="grey lighten-4" flat>
        <v-toolbar dark color="fixcolors">
          <v-toolbar-side-icon></v-toolbar-side-icon>
          <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> -->
          <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-sub-title>{{ date(selected.end) }}</v-list-tile-sub-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 Util from "@/util";
import moment from "moment";

export default {
  data() {
    return {
      showLoader: false,
      dialog: false,
      HolidaysList: [],
      EventsList: [],
      events: [],
      config: {
        eventClick: event => {
          this.selected = event;
          this.dialog = true;
        }
      },
      selected: {}
    };
  },
  methods: {
    date: function(date) {
      return moment(date).format("MMMM DD, YYYY  HH:mm:ss");
    },
    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);
    },
    eventCreated(...test) {
      console.log(test);
    },
    getHolidays() {
      this.showLoader = true;
      var token = this.$store.state.token;
      http()
        .get("/getHolidaysList", {
          headers: { Authorization: "Bearer " + token }
        })
        .then(response => {
          this.HolidaysList = response.data.data;
          // this.events = response.data.data;
          this.showLoader = false;
        })
        .catch(err => {
          // 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);
          }
        });
      // },
      // getEvents() {
      var token = this.$store.state.token;
      http()
        .get("/getSchoolEventsList", {
          headers: { Authorization: "Bearer " + token }
        })
        .then(response => {
          this.EventsList = response.data.data;
          let allData = [];
          allData = this.HolidaysList.concat(this.EventsList);
          this.events = allData;
          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);
          }
        });
    }
    // eventSources() {
    //   const self = this;
    //   return [
    //     {
    //       events(start, end, timezone, callback) {
    //         setTimeout(() => {
    //           callback(self.events.filter(() => Math.random() > 0.5));
    //         }, 1000);
    //       }
    //     }
    //   ];
    // }
  },
  mounted() {
    // this.getEvents();
    this.getHolidays();
  }
};
</script>
<style>
@import "fullcalendar/dist/fullcalendar.css";
.fc button {
  background: #39b982 !important;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 6px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 8px 2px !important;
  cursor: pointer;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.v-tabs__container--icons-and-text {
  height: 64px !important;
}
.v-tabs__div {
  text-transform: none;
}
.v-input__prepend-outer {
  margin-right: 0px !important;
}
.v-card__actions .v-btn {
  margin: 0 15px;
  min-width: 120px;
}

h4 {
  background-repeat: no-repeat;
  padding: 8px;
  margin: auto;
  font-size: 25px;
}
#name {
  position: absolute;
  left: 100px;
  top: 17px;
}
#icon {
  position: absolute;
  right: 8px;
  top: 8px;
}
#m {
  position: relative;
  left: 135px;
  top: -15px;
}
#G {
  position: absolute;
  top: 38px;
  color: white;
}
#bt {
  position: relative;
  top: -20px;
  left: 115px;
}
#e {
  position: relative;
  top: 5px;
  right: -30px;
  height: 17px;
  cursor: pointer;
}
#d {
  position: relative;
  top: 5px;
  right: -70px;
  height: 17px;
  cursor: pointer;
}
#indexId {
  padding: 0 0px !important;
}
#td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
#dialog {
  height: 550px;
}
#flex {
  height: 300px;
}
.top {
  margin-top: 100px;
}
.v-tabs__item a {
  font-size: 16px !important;
}
@media screen and (max-width: 769px) {
  .top {
    margin-top: 0 !important;
  }
  .userSearch .v-icon {
    font-size: 20px !important;
    margin-left: 20px;
  }
}
@media screen and (max-width: 380px) {
  .pl-3 {
    padding-left: 0px !important;
  }
  .right {
    float: none !important;
  }
  .subheading {
    font-size: 14px !important;
  }
  .v-card__actions .v-btn {
    margin: 0 0px;
    min-width: 100px;
  }
  .subheading {
    font-size: 12px !important;
  }
  h5 {
    font-size: 13px;
  }
}
.v-icon {
  font-size: 30px;
}
@media screen and (min-width: 1270px) {
  .hide {
    display: none;
  }
}
@media screen and (max-width: 420px) {
  .userSearch .v-text-field .v-label {
    line-height: 24px !important;
  }
  .userSearch .v-label {
    font-size: 13px !important;
  }
  .v-list__tile {
    font-size: 14px;
    padding: 0 10px;
  }
  .name {
    font-size: 15px;
  }
}
</style>