@extends ('Layouts.Application')

@section ('MainContent')

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' />

<style type="text/css">
#calendar {
  max-width: 1000px;
  margin: 0 auto;
}
.fc-title {
  font-size: 15px;
}
</style>

<div class="row">
  <div class="col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading"><strong>Academic Calendar</strong>
        @if (4 == $userRoleId)
          <a href="{{ route('LoggedIn.Task.AcademicCalendarNew.create') }}" class="pull-right btn btn-primary btn-xs" title="Academic Calendar">
            <i class="fa fa-plus-circle"></i> Create Event
          </a>
        @endif

        <a href="{{ route('LoggedIn.Task.AcademicCalendarNew.printCalender') }}" class="pull-right btn btn-primary btn-xs">
          <i class="fa fa-print"></i> Print
        </a>
      </div>
      <div class="panel-body">
        @include ('Layouts.FormValidationErrors')
        @include ('Layouts.ErrorSuccessAndWarninMessages')
      </div>
      <div id="calendar"></div>
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
  // page is now ready, initialize the calendar...
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    firstDay: 6,
    eventLimit: true,
    events : [
      @foreach ($calendarDetails as $details)
      {
        id    : 'event_no_{{ $details->id }}',
        title : '{{ $details->event_title }}',
        start : '{{ $details->event_date }}',
        end   : '{{ $details->event_date_end }}',
        color : '#{{ $details->event_color }}',
        description: '{!! $details->event_description !!}'
      },
      @endforeach
    ],
    eventClick: function(info) {
      alert('Event: ' + info.event.title);
      alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
      alert('View: ' + info.view.type);

      // change the border color just for fun
      info.el.style.borderColor = 'red';
    },
  });
});
</script>

@endsection