@extends('masterpage.masterpage')

<link href="../public/bower_components/admin-lte/plugins/fullcalendar/lib/main.min.css" rel="stylesheet" />

@section('content')
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Agenda</h1>
          </div>
        </div>
      </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                  <div class="card">
                    <div class="card-body">
                      <div id='calendar'></div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </section>

@stop  

@section('scripts')

<script src="../public/bower_components/admin-lte/plugins/fullcalendar/lib/main.js"></script>
<script src="../public/bower_components/admin-lte/plugins/fullcalendar/lib/locales/pt-br.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>

<script type="text/javascript">

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      initialDate: {!! json_encode($data) !!},
      locale: 'pt-br',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      events: JSON.parse( {!! json_encode($events) !!} ),
      eventRender: function(info) {
        console.log(info.description);
        var tooltip = new Tooltip(info.el, {
          title: info.description,
          placement: 'top',
          trigger: 'hover',
          container: 'body'
        });
      }
    });

    calendar.render();
  });



</script>

@stop