@extends('layouts.app')
<link href="{{ asset('assets/newsite/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Calendar Dashboard</div>

                <div class="card-body">
				
					<div class="response"></div>
					<div id='calendar'></div>
					
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('scripts')
<script src="{{ asset('assets/plugins/fullcalendar/packages/core/main.js') }}"></script>
    <script src="{{ asset('assets/plugins/fullcalendar/packages/daygrid/main.js') }}"></script> 
    <script src="{{ asset('assets/plugins/fullcalendar/packages/interaction/main.js') }}"></script> 
    <script src="{{ asset('assets/plugins/fullcalendar/packages/list/main.js') }}"></script> 
    <script src="{{ asset('assets/plugins/fullcalendar/packages/timegrid/main.js') }}"></script> 
	<script>

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
          // plugins: [ 'dayGrid', 'timegrid', 'list', 'interaction' ],
          plugins: [ 'dayGrid' , 'interaction'],
		  selectable: true,
		  dateClick: function(info) {
			// alert('Clicked on: ' + info.dateStr);
			// alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
			// alert('Current view: ' + info.view.type);
			//change the day's background color just for fun
			// info.dayEl.style.backgroundColor = 'red';
			// prompt('Event Title: ');
			$('#myModal').load('/calendar_add/'+info.dateStr, function(response) {
			  $('#myModal').modal( {backdrop:'static'} );
			});
		  },
		  eventClick: function(info) {
			  info.jsEvent.preventDefault(); // don't let the browser navigate
			  view_event(info.event.id);
		  }
		  
        });

        calendar.render();
	    @foreach($events['events'] as $event)
			 
			calendar.addEvent({ id: '', title: '', start: '', color: '#17a2b8' });
	    @endforeach
      });

	function view_event(id)
	{
		// console.log('event_id: '+id);
		$('#myModal').load('/calendar_view_event/'+id, function(response) {
			  $('#myModal').modal( {backdrop:'static'} );
		});
	}
	
    </script>
@endsection