<template>
  <v-app id="pages-dasboard">
    <div>
      <full-calendar
        ref="calendar"
        :event-sources="eventSources"
        @event-selected="eventSelected"
        @event-created="eventCreated"
        :config="config"
      ></full-calendar>
    </div>
    <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,
      events: [
        {
          id: 1,
          title:
            "property to add transparency to a button transparency,property to add transparency to a button transparency",
          start: "2019-09-04 09:30:26.123"
        },
        {
          id: 2,
          title: "event2",
          start: "2019-09-06 09:30:26.123",
          end: "2019-09-07 09:31:26.123",
        },
        {
          id: 3,
          title: "event3",
          start: "2019-09-08 09:30:26.123",
          end: "2019-09-09 09:35:26.123",
        }
      ],
      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;
    },
    eventCreated(...test) {
      console.log(test);
    },
  },
  computed: {
    eventSources() {
      const self = this;
      return [
        {
          events(start, end, timezone, callback) {
            setTimeout(() => {
              callback(self.events.filter(() => Math.random() > 0.5));
            }, 1000);
          }
        }
      ];
    }
  }
};
</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__div {
  text-transform: none;
}
.v-input__prepend-outer {
  margin-right: 0px !important;
}
.v-card__actions .v-btn {
  margin: 0 15px;
  min-width: 120px;
}
.primary {
  background-color: #aaa !important;
  border-color: #aaa !important;
}
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;
}
.active {
  background-color: black;
  color: white !important;
}
.activebtn {
  color: black !important;
}
#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>