<template>
  <section class="content">
      <content-header title="Calendar"/>

      <!-- Main content -->
      <div class="content">
          <div class="container-fluid">
              <div class="row">
                  <div class="col-md-3">
                      <div class="card">
                          <div class="card-header">
                              <h4 class="card-title">Draggable Events</h4>
                          </div>
                          <div class="card-body">
                              <!-- the events -->
                              <div id="external-events">
                                  <div class="external-event bg-success">Lunch</div>
                                  <div class="external-event bg-warning">Go home</div>
                                  <div class="external-event bg-info">Do homework</div>
                                  <div class="external-event bg-primary">Work on UI design</div>
                                  <div class="external-event bg-danger">Sleep tight</div>
                                  <div class="checkbox">
                                      <label for="drop-remove">
                                          <input type="checkbox" id="drop-remove">
                                          remove after drop
                                      </label>
                                  </div>
                              </div>
                          </div>
                          <!-- /.card-body -->
                      </div>
                      <!-- /.card -->
                      <div class="card">
                          <div class="card-header">
                              <h3 class="card-title">Create Event</h3>
                          </div>
                          <div class="card-body">
                              <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                                  <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
                                  <ul class="fc-color-picker" id="color-chooser">
                                      <li><a class="text-primary" href="#"><i class="fas fa-square"></i></a></li>
                                      <li><a class="text-warning" href="#"><i class="fas fa-square"></i></a></li>
                                      <li><a class="text-success" href="#"><i class="fas fa-square"></i></a></li>
                                      <li><a class="text-danger" href="#"><i class="fas fa-square"></i></a></li>
                                      <li><a class="text-muted" href="#"><i class="fas fa-square"></i></a></li>
                                  </ul>
                              </div>
                              <!-- /btn-group -->
                              <div class="input-group">
                                  <input id="new-event" type="text" class="form-control" placeholder="Event Title">

                                  <div class="input-group-append">
                                      <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
                                  </div>
                                  <!-- /btn-group -->
                              </div>
                              <!-- /input-group -->
                          </div>
                      </div>
                  </div>
                  <!-- /.col -->
                  <div class="col-md-9">
                      <div class="card card-primary">
                          <div class="card-body p-0">
                              <!-- THE CALENDAR -->
                              <div id="calendar"></div>
                          </div>
                          <!-- /.card-body -->
                      </div>
                      <!-- /.card -->
                  </div>
                  <!-- /.col -->
              </div>
              <!-- /.row -->
          </div><!-- /.container-fluid -->
      </div>
      <!-- /.content -->
  </section>
</template>

<script>
  import ContentHeader from '@/layout/components/Content/ContentHeader.vue'
  //fullCalendar 2.2.5
  import "@/libs/default/plugins/fullcalendar/fullcalendar.min.js"

  export default {
      name: "Calendar",
      components: {
           ContentHeader
      },
        created () {
            $(function () {

                /* initialize the external events
                 -----------------------------------------------------------------*/
                function ini_events(ele) {
                    ele.each(function () {

                        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                        // it doesn't need to have a start or end
                        var eventObject = {
                            title: $.trim($(this).text()) // use the element's text as the event title
                        }

                        // store the Event Object in the DOM element so we can get to it later
                        $(this).data('eventObject', eventObject)

                        // make the event draggable using jQuery UI
                        $(this).draggable({
                            zIndex        : 1070,
                            revert        : true, // will cause the event to go back to its
                            revertDuration: 0  //  original position after the drag
                        })

                    })
                }

                ini_events($('#external-events div.external-event'))

                /* initialize the calendar
                 -----------------------------------------------------------------*/
                //Date for the calendar events (dummy data)
                var date = new Date()
                var d    = date.getDate(),
                    m    = date.getMonth(),
                    y    = date.getFullYear()
                $('#calendar').fullCalendar({
                    header    : {
                        left  : 'prev,next today',
                        center: 'title',
                        right : 'month,agendaWeek,agendaDay'
                    },
                    buttonText: {
                        today: 'today',
                        month: 'month',
                        week : 'week',
                        day  : 'day'
                    },
                    //Random default events
                    events    : [
                        {
                            title          : 'All Day Event',
                            start          : new Date(y, m, 1),
                            backgroundColor: '#f56954', //red
                            borderColor    : '#f56954' //red
                        },
                        {
                            title          : 'Long Event',
                            start          : new Date(y, m, d - 5),
                            end            : new Date(y, m, d - 2),
                            backgroundColor: '#f39c12', //yellow
                            borderColor    : '#f39c12' //yellow
                        },
                        {
                            title          : 'Meeting',
                            start          : new Date(y, m, d, 10, 30),
                            allDay         : false,
                            backgroundColor: '#0073b7', //Blue
                            borderColor    : '#0073b7' //Blue
                        },
                        {
                            title          : 'Lunch',
                            start          : new Date(y, m, d, 12, 0),
                            end            : new Date(y, m, d, 14, 0),
                            allDay         : false,
                            backgroundColor: '#00c0ef', //Info (aqua)
                            borderColor    : '#00c0ef' //Info (aqua)
                        },
                        {
                            title          : 'Birthday Party',
                            start          : new Date(y, m, d + 1, 19, 0),
                            end            : new Date(y, m, d + 1, 22, 30),
                            allDay         : false,
                            backgroundColor: '#00a65a', //Success (green)
                            borderColor    : '#00a65a' //Success (green)
                        },
                        {
                            title          : 'Click for Google',
                            start          : new Date(y, m, 28),
                            end            : new Date(y, m, 29),
                            url            : 'http://google.com/',
                            backgroundColor: '#3c8dbc', //Primary (light-blue)
                            borderColor    : '#3c8dbc' //Primary (light-blue)
                        }
                    ],
                    editable  : true,
                    droppable : true, // this allows things to be dropped onto the calendar !!!
                    drop      : function (date, allDay) { // this function is called when something is dropped

                        // retrieve the dropped element's stored Event Object
                        var originalEventObject = $(this).data('eventObject')

                        // we need to copy it, so that multiple events don't have a reference to the same object
                        var copiedEventObject = $.extend({}, originalEventObject)

                        // assign it the date that was reported
                        copiedEventObject.start           = date
                        copiedEventObject.allDay          = allDay
                        copiedEventObject.backgroundColor = $(this).css('background-color')
                        copiedEventObject.borderColor     = $(this).css('border-color')

                        // render the event on the calendar
                        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true)

                        // is the "remove after drop" checkbox checked?
                        if ($('#drop-remove').is(':checked')) {
                            // if so, remove the element from the "Draggable Events" list
                            $(this).remove()
                        }

                    }
                })

                /* ADDING EVENTS */
                var currColor = '#3c8dbc' //Red by default
                //Color chooser button
                var colorChooser = $('#color-chooser-btn')
                $('#color-chooser > li > a').click(function (e) {
                    e.preventDefault()
                    //Save color
                    currColor = $(this).css('color')
                    //Add color effect to button
                    $('#add-new-event').css({
                        'background-color': currColor,
                        'border-color'    : currColor
                    })
                })
                $('#add-new-event').click(function (e) {
                    e.preventDefault()
                    //Get value and make sure it is not null
                    var val = $('#new-event').val()
                    if (val.length == 0) {
                        return
                    }

                    //Create events
                    var event = $('<div />')
                    event.css({
                        'background-color': currColor,
                        'border-color'    : currColor,
                        'color'           : '#fff'
                    }).addClass('external-event')
                    event.html(val)
                    $('#external-events').prepend(event)

                    //Add draggable funtionality
                    ini_events(event)

                    //Remove event from text input
                    $('#new-event').val('')
                })
            })
        }
    }
</script>

