@extends('layouts.app')
@section('content')

<div role="main" class="main">
	<section class="page-header mb-0">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-md-6 text-left">
					<h1 class="font-weight-bold">Doctors Timetable</h1>
				</div>

				<div class="col-md-6">
					<ul class="breadcrumb justify-content-start justify-content-md-end mb-0">
						<li><a href="{{ route('/', [ 'locale' => Request::has('locale') ? Request::get('locale') : 'en' ]) }}">Home</a></li>
						<li class="active">Doctors Timetable</li>
					</ul>
				</div>
			</div>
		</div>
	</section>

	<section class="section">
		<div class="container">
			<div class="event-calendar"></div>
		</div>
	</section>

</div>


@endsection



@section('css')

<link href="{{ asset('dist/equinox.css') }}" rel="stylesheet" type="text/css">

@endsection



@section('js')  

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<script src="{{ asset('dist/equinox.min.js') }}"></script>

<script>
$('.event-calendar').equinox({
	events: [
		@php
		if(isset($schedules) && count($schedules) > 0 ) {
			foreach($schedules as $key => $value){
			$doctor = isset($value->doctor) ? $value->doctor->name : '';
			$datetime = isset($value->schedule_date) ? $value->schedule_date : '';
			$datetimedisplay = isset($value->schedule_date) ? date('h:i a', strtotime($value->schedule_date)) : '';
			$remark = isset($value->remark) ? $value->remark : '';	
			$color = $remark == 'Off' || $remark == 'off' ? 'red' : 'blue';

		@endphp
			{
			start: '{{ $datetime }}',
			end: '{{ $datetime }}',
			title: 'Dr. {{ $doctor }} {{ $remark }}',
			url: '#',
			class: '',
			color: '{{ $color }}',
			data: {}
			},

		@php 
			}
		}
		@endphp
		]
	});
</script>
@endsection