@extends('adminlte::page')

@section('title', 'Painel de administrador')

@section('css')
    <link href="{{asset('assets/fullcalendar/lib/main.css')}}" rel="stylesheet">
@stop

@section('content')
<div id='wrap'>

    <div id='external-events' style="display:none">
        <h4>Draggable Events</h4>

        <div id='external-events-list'>
        <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
            <div class='fc-event-main'>My Event 1</div>
        </div>
        <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
            <div class='fc-event-main'>My Event 2</div>
        </div>
        <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
            <div class='fc-event-main'>My Event 3</div>
        </div>
        <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
            <div class='fc-event-main'>My Event 4</div>
        </div>
        <div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event'>
            <div class='fc-event-main'>My Event 5</div>
        </div>
        </div>

        <p>
        <input type='checkbox' id='drop-remove' />
        <label for='drop-remove'>remove after drop</label>
        </p>
    </div>

    <div id='calendar-wrap'>
        <div id='calendar'></div>
    </div>
</div>
@endsection 


@section('js')
    <script src="{{asset('assets/fullcalendar/lib/main.js')}}"></script>
    <script src="{{asset('assets/fullcalendar/lib/locales-all.js')}}"></script>
@stop

@push('js')
<script>   
    document.addEventListener('DOMContentLoaded', function() {

/* initialize the external events
-----------------------------------------------------------------*/

var containerEl = document.getElementById('external-events-list');
new FullCalendar.Draggable(containerEl, {
  itemSelector: '.fc-event',
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText.trim()
    }
  }
});

//// the individual way to do it
// var containerEl = document.getElementById('external-events-list');
// var eventEls = Array.prototype.slice.call(
//   containerEl.querySelectorAll('.fc-event')
// );
// eventEls.forEach(function(eventEl) {
//   new FullCalendar.Draggable(eventEl, {
//     eventData: {
//       title: eventEl.innerText.trim(),
//     }
//   });
// });

/* initialize the calendar
-----------------------------------------------------------------*/

var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
  },
  locale: 'pt-br',
  dayMaxEventRows: true,
  moreLinkClick: 'popover',
  eventDisplay: 'block',
  navLinks: true,
  events: '{{url("calendar/events")}}',
  editable: true,
  droppable: true, // this allows things to be dropped onto the calendar
  drop: function(arg) {
    // is the "remove after drop" checkbox checked?
    if (document.getElementById('drop-remove').checked) {
      // if so, remove the element from the "Draggable Events" list
      arg.draggedEl.parentNode.removeChild(arg.draggedEl);
    }
  }
});
calendar.render();

});
</script>
@endpush