@extends('contractor.layout.master')
@section('ptitle','Contractor')
@section('page_title', 'Work Order')
@section('subpage', 'Graph & Summary Report')
@section('img_profile', asset($user->StaffDetail->user_pic))
@section('login_name', $user->StaffDetail->name )
@section('last_login', $user->last_login_at )

@section('content')
<div class="fluid">
	
	<!-- Calendar -->
	<div class="widget grid2 widgetH"></div>
	<div class="widget grid8">
		<div class="whead"><h6 id="title">Calendar</h6></div>
		<div id="calendar_cs"></div>
	</div>
	<div class="widget grid2 widgetH"></div>

</div>
@endsection

@section('external_js')
	<script type="text/javascript">
		$(document).ready(function(){

			$("#default").show();
			$("#new").hide();

			var today = "{{ $today }}";

			$('#calendar_cs').fullCalendar({
				header: {
					left: 'prev,next,today',
					center: 'title',
					right: 'month,agendaWeek,agendaDay,listWeek'
				},
				defaultView: 'month',
				defaultDate: today,
				navLinks: true, // can click day/week names to navigate views
				firstDay: 1,
				eventLimit: true, // allow "more" link when too many events
				events: {
					url: "{{ url('/contractor/get-all-calendar') }}",
					type: 'POST',
					data: function () { // a function that returns an object
						return {
							"status": $('#wstatus').val(),
							"_token": "{{ csrf_token() }}"
						};
					},
					error: function() {
						alert('there was an error while fetching events!');
					},
				},
				eventClick: function(event) {
					if (event.url) {
						window.open(event.url);
						return false;
					}
				},
				selectable:false,
				editable:false,
			});

			$('#wstatus').on('change',function(){
				$('#calendar_cs').fullCalendar('refetchEvents');
			});
		});
	</script>
@endsection