@extends ('Layouts.Application')

@section ('MainContent')

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.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>
        <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">
        <div class="table-responsive">
          <table class="table table-condensed table-bordered text-uppercase">
            <thead style="background-color: #9ea4cf;">
              <tr>
                <td colspan="3">
                  NAME : <strong> {{ $studentDetails->student_name }} </strong>
                </td>
                <td colspan="2">
                  ID : <strong> {{ $studentDetails->system_generated_student_id }} </strong>
                </td>
              </tr>
              <tr>
                <td>ROLL : <strong></strong></td>
                <td>CLASS : <strong>{{ $studentDetails->ClassName }}</strong></td>
                <td>SECTION : <strong>{{ $studentDetails->SectionName }}</strong></td>
                <td colspan="2">GROUP : <strong>{{ $studentDetails->GroupName }}</strong></td>
              </tr>
            </thead>
          </table>
          <div id="calendar"></div>
        </div>
      </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.1.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)
      {
        title : '{{ $details->event_title }}',
        start : '{{ $details->event_date }}',
        end: '#{{ $details->event_date_end }}',
        color : '{{ $details->event_color }}'
      },
      @endforeach
    ]
  })
});
</script>

@endsection