@extends('layouts.app')

@section('content')

    @component('shared.breadcrumbs')
        @slot('breadcrumbs')
            <ul>
                <li><a href="{{ route('home') }}">{{ __('Dashboard') }}</a></li>
                <li>&middot;</li>
                <li><a href="{{ route('admin.calendar') }}">{{ __('Calendar') }}</a></li>
            </ul>
        @endslot
    @endcomponent

    <main class="main-content" id="main-content">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body calendar-wrapper">
                            <div id="calendar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="calendar-trash" class="calendar-trash d-none">
            <i class="fas fa-trash-alt"></i>
            <p>
                <small>{{ __('Drag here to delete') }}</small>
            </p>
        </div>
        <div id="edit-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ __('Edit module') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="edit-modal-form">
                        <div id="edit-modal-body" class="modal-body">
                            <p>{{ __('Loading') }}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">{{ __('Save changes') }}</button>
                            <button type="button" class="btn btn-secondary"
                                    data-dismiss="modal">{{ __('Close') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

@endsection

@section('footer')
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar')
        var calendar = new Calendar(calendarEl, {
          //defaultView: 'agendaWeek',
          scrollTime: '{{ now()->format('H:00') }}',
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek',
          },
          eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false,
          },
          eventLimit: 3,
          firstDay: 1,
          nowIndicator: true,
          droppable: true,
          editable: true,
          selectable: false,
          selectMirror: true,
          selectMinDistance: 10,
          slotDuration: '00:15:00',
          slotLabelInterval: '01:00:00',
          slotLabelFormat: {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: false,
            //meridiem: 'short',
            hour12: false,
          },
          eventReceive: function (dropInfo) {
            //console.log('eventReceive', dropInfo);

            axios.put('{{ route('admin.calendar.update') }}', {
              id: dropInfo.event.id,
              start: DateTime.fromJSDate(dropInfo.event.start).toFormat('yyyy-MM-dd HH:mm:ss'),
              end: DateTime.fromJSDate(dropInfo.event.end).toFormat('yyyy-MM-dd HH:mm:ss'),
            }).then(({ data }) => {
              if (data.data.student && data.data.pickup) {
                calendar.getEventById(dropInfo.event.id).
                  setExtendedProp('description', data.data.student.name + ' - ' + data.data.pickup)
              }
            }).then(() => {
              toastr.success('{{ __('Module updated') }}')

              calendar.addEvent(dropInfo.event)
              dropInfo.draggedEl.parentNode.removeChild(dropInfo.draggedEl)
            }).catch(({ response }) => {
              if (response.status === 409) {
                if (confirm('{{ __('Conflicting module:') }} "' + response.data.data.name +
                  '"\r\n {{ __('Do you want to continue?') }}')) {
                  axios.put('{{ route('admin.calendar.update') }}', {
                    id: dropInfo.event.id,
                    start: DateTime.fromJSDate(dropInfo.event.start).toFormat('yyyy-MM-dd HH:mm:ss'),
                    end: DateTime.fromJSDate(dropInfo.event.end).toFormat('yyyy-MM-dd HH:mm:ss'),
                    force: true,
                  }).then(() => {
                    toastr.success('{{ __('Module updated') }}')
                  }).catch(() => {
                    toastr.error('{{ __('An error occurred') }}')
                    dropInfo.revert()
                  })
                }
                else {
                  dropInfo.revert()
                }
              }
              else {
                toastr.error('{{ __('An error occurred') }}')
                dropInfo.revert()
              }
            })
          },
          eventDrop: function (dropInfo) {
            //console.log('eventDrop', dropInfo);

            axios.put('{{ route('admin.calendar.update') }}', {
              id: dropInfo.event.id,
              start: DateTime.fromJSDate(dropInfo.event.start).toFormat('yyyy-MM-dd HH:mm:ss'),
              end: DateTime.fromJSDate(dropInfo.event.end).toFormat('yyyy-MM-dd HH:mm:ss'),
            }).then(() => {
              toastr.success('{{ __('Module updated') }}')
            }).catch(({ response }) => {
              if (response.status === 409) {
                if (confirm('{{ __('Conflicting module:') }} "' + response.data.data.name +
                  '"\r\n {{ __('Do you want to continue?') }}')) {
                  axios.put('{{ route('admin.calendar.update') }}', {
                    id: dropInfo.event.id,
                    start: DateTime.fromJSDate(dropInfo.event.start).toFormat('yyyy-MM-dd HH:mm:ss'),
                    end: DateTime.fromJSDate(dropInfo.event.end).toFormat('yyyy-MM-dd HH:mm:ss'),
                    force: true,
                  }).then(() => {
                    toastr.success('{{ __('Module updated') }}')
                  }).catch(() => {
                    toastr.error('{{ __('An error occurred') }}')
                    dropInfo.revert()
                  })
                }
                else {
                  dropInfo.revert()
                }
              }
              else {
                toastr.error('{{ __('An error occurred') }}')
                dropInfo.revert()
              }
            })
          },
          eventResize: function (resizeInfo) {
            //console.log('eventResize', resizeInfo);

            axios.put('{{ route('admin.calendar.update') }}', {
              id: resizeInfo.event.id,
              start: DateTime.fromJSDate(resizeInfo.event.start).toFormat('yyyy-MM-dd HH:mm:ss'),
              end: DateTime.fromJSDate(resizeInfo.event.end).toFormat('yyyy-MM-dd HH:mm:ss'),
            }).then(() => {
              toastr.success('{{ __('Module updated') }}')
            }).catch(({ response }) => {
              if (response.status === 409) {
                if (confirm('{{ __('Conflicting module:') }} "' + response.data.data.name +
                  '"\r\n {{ __('Do you want to continue?') }}')) {
                  axios.put('{{ route('admin.calendar.update') }}', {
                    id: resizeInfo.event.id,
                    start: DateTime.fromJSDate(resizeInfo.event.start).toFormat('yyyy-MM-dd HH:mm:ss'),
                    end: DateTime.fromJSDate(resizeInfo.event.end).toFormat('yyyy-MM-dd HH:mm:ss'),
                    force: true,
                  }).then(() => {
                    toastr.success('{{ __('Module updated') }}')
                  }).catch(() => {
                    toastr.error('{{ __('An error occurred') }}')
                    resizeInfo.revert()
                  })
                }
                else {
                  resizeInfo.revert()
                }
              }
              else {
                toastr.error('{{ __('An error occurred') }}')
                resizeInfo.revert()
              }
            })
          },
          eventDragStart: function (dragInfo) {
            var trashEl = $('#calendar-trash')
            trashEl.removeClass('d-none')
          },
          eventDragStop: function (dragInfo) {
            var trashEl = $('#calendar-trash')
            var ofs = trashEl.offset()

            var x1 = ofs.left
            var x2 = ofs.left + trashEl.outerWidth(true)
            var y1 = ofs.top
            var y2 = ofs.top + trashEl.outerHeight(true)

            if (dragInfo.jsEvent.pageX >= x1 && dragInfo.jsEvent.pageX <= x2 &&
              dragInfo.jsEvent.pageY >= y1 && dragInfo.jsEvent.pageY <= y2) {
              axios.put('{{ route('admin.calendar.update') }}', {
                id: dragInfo.event.id,
                start: null,
                end: null,
              }).then(() => {
                toastr.success('{{ __('Module removed') }}')
              }).catch(() => {
                toastr.error('{{ __('An error occurred') }}')
              })

              dragInfo.event.remove()
            }

            trashEl.addClass('d-none')
          },
          eventRender: function (info) {
            if (info.el.classList.contains('fc-day-grid-event') && info.event.extendedProps.description) {
              info.el.setAttribute('title', info.event.title)
              info.el.setAttribute('data-container', 'body')
              info.el.setAttribute('data-toggle', 'popover')
              info.el.setAttribute('data-placement', 'top')
              info.el.setAttribute('data-html', 'true')
              info.el.setAttribute('data-content', info.event.extendedProps.description)
              $(info.el).popover({
                trigger: 'hover',
              })
            }
            else if (info.el.classList.contains('fc-time-grid-event') && info.event.extendedProps.description) {
              var div = document.createElement('div')
              div.innerHTML = info.event.extendedProps.description
              div.classList.add('fc-description')

              var target = info.el.querySelector('.fc-content')
              target.appendChild(div)
            }
            else if (info.el.classList.contains('fc-list-item') && info.event.extendedProps.description) {
              var span = document.createElement('span')
              span.innerHTML = info.event.extendedProps.description
              span.classList.add('fc-list-item-description')

              var target = info.el.querySelector('.fc-list-item-title')
              target.appendChild(span)
            }
          },
          eventClick: function (eventInfo) {
            $('#edit-modal').modal('show')

            $.get('{{ route('admin.calendar.edit') }}', { id: eventInfo.event.id }).done((response) => {
              $('#edit-modal-body').html(response)

              $('.chosen-select').chosen({
                width: '100%',
                disable_search_threshold: 10,
              })
            }).fail(() => {
              toastr.error('{{ __('An error occurred') }}')
              $('#edit-modal').modal('hide')
            })
          },
          eventSourceSuccess: function (content, xhr) {
            return content.data
          },
          eventSources: [
            {
              id: 'modules',
              url: '{{ route('admin.calendar.events') }}',
            },
            {
              id: 'vacation',
              url: '{{ route('admin.calendar.vacation') }}',
            },
          ],
        })

        calendar.render()

        let dragger = new Draggable(document.getElementById('unplanned-events'), {
          itemSelector: '.event',
          appendTo: document.getElementById('unplanned-events'),
        })

        dragger.dragging.emitter.on('pointerdown', function () {
          $('#offcanvas-overlay').addClass('d-none')
        })

        dragger.dragging.emitter.on('pointerup', function () {
          $('#offcanvas-overlay').removeClass('d-none')
        })

        $('#edit-modal').on('hidden.bs.modal', function (e) {
          $('#edit-modal-body').html('<p>{{ __('Loading') }}</p>')
        })

        $('#edit-modal-form').on('submit', function (e) {
          e.preventDefault()

          axios.put('{{ route('admin.calendar.update') }}', $('#edit-modal-form').serialize()).then(function () {
            toastr.success('{{ __('Module updated') }}')
          }).catch(function () {
            toastr.error('{{ __('An error occurred') }}')
          }).finally(function () {
            $('#edit-modal').modal('hide')
            calendar.getEventSourceById('modules').refetch()
          })
        })

          @foreach(auth()->user()->schools as $school)
          Echo.channel('school-{{ $school->id }}').listen('RolloutComplete', function (e) {
            toastr.success('{{ __('Modules updated, updating calendar') }}')
            calendar.getEventSourceById('modules').refetch()
          })
          @endforeach
      })
    </script>
@endsection