nhgooi.nl/website/resources/views/partial/radioscheduleweek.blade.php

<?php 
	$pixelsPerHour = 60;
	$border = 1;
	$margin = 1;
?>
<style>
	.schedule {
		color: black;
		width: 100%;
		display: flex;
	}

	.schedule .date-header {
		height: 3em;
		text-align: center;
		font-size: 120%;
		vertical-align: bottom;
	}

	.schedule .time-header {
		height: {{$pixelsPerHour / 2}}px;

	}

	.schedule .timeslots {
		width: 80px;
		min-width: 80px;
	}

	.schedule .date-column {
		flex: 1;
	}

	.schedule a.program {
		display: block;
		color: black;
		text-decoration: none;
		margin: {{$margin}}px;
		border: solid {{$border}}px #03A6E0;
		border-radius: 2px;
		overflow: hidden;
	}

		.schedule a.program:hover {
			color: white;
			background-color: #71c1de;
		}

		.schedule .program.current {
			background-color: #71c1de;
			color: white;
		}

		.schedule .program.non-stop {
			color: #6c757d;
		}

		.schedule .program.special {
			color: #03A6E0;
		}

		.schedule .program .current-marker {
			margin-top: 5px;
			text-align: center;
		}

			.schedule .program .current-marker span {
				padding: 3px;
				color: white;	
				text-align: center;
				background-color: #03A6E0;
				border-radius: 3px;
			}

		.schedule .program .program-title {
			padding: 5px;
			color: white;
			font-weight: bold;
			background-color: #03A6E0;
		}

		.schedule .program .program-content {
			margin: 3px;
		}
</style>

<div class="schedule">
	<div class="timeslots">
		<div class="date-header"></div>
		@for($h = 0; $h < 24; $h += 0.5)
			<div class="time-header">{{$time = gmdate("H:i", $h * 3600)}} uur</div>
		@endfor
	</div>
	

	@php($date = null)
	@php($now = new \DateTime("now"))
	@foreach($schedule as $item)
		@if(($formattedDate = Formatter::fullDate($item['starttime'], 'W d m')) != $date)
			@if($date != null) 
				</div> 
			@endif
				<div class="date-column">
					<div class="date-header">{{$formattedDate}}</div>
			@php($date = $formattedDate)
		@endif
			@php($diff = $item['endtime']->diff($item['starttime']))
			@php($duration = $diff->d * 24 + $diff->h + $diff->m / 60)
			@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
			@php($class = ($item['program']->priority < 2 ? ' special' : '')
						. ($item['program']->nonstop || $item['program']->rerun ? ' non-stop' : '')
						. ($isCurrent ? ' current' : ''))
			
				<a href="{{url('/radio/programma' . $item['program']->url)}}" class="program{{$class}}" style="height: {{$duration * $pixelsPerHour - 2 * $border - $margin}}px;">
					<div class="program-title">{{$item['program']->name}}</div>
					@if($isCurrent) <div class="current-marker"><span>Nu op NH Gooi</span></div> @endif
					<div class="program-content">
						{{Formatter::excerpt(strip_tags($item['program']->description), 150)}}
					</div>
				</a>

	@endforeach
		</div>

</div>

<hr />


<?php
	$dates = array();
	$byStartTime = array();

	foreach($schedule as $item):
		$date = $item['starttime'];
		$time = $item['starttime']->format('H:i');
		$item['enddate'] = Formatter::fullDate($item['endtime'], 'W d m');
		while(true) {
			$formattedDate = Formatter::fullDate($date, 'W d m');
			$dates[$formattedDate] = null;

			if(array_key_exists($time, $byStartTime)) {
				$byStartTime[$time][$formattedDate] = $item;
			} else {
				$byStartTime[$time] = array($formattedDate => $item);
			}

			if($formattedDate == $item['enddate']) { break; }
		
			$date->add(new DateInterval('P1D')); 
			$time = '00:00';
		}
	endforeach;

	$dates = array_keys($dates);
	$now = new \DateTime("now");
?>

<table class="tt_timetable">
		<thead>
				<tr class="row_gray" style="background-color: #F0F0F0 !important;">
						<th></th>
				@for($d = 0; $d < 7; ++$d)
			<th>{{$dates[$d]}}</th>
			@endfor
				</tr>
		</thead>
		<tbody>
		@for($h = 0; $h < 24; $h += 0.5)
		<tr class="{{$h == (int)$h ? "" : "row_gray"}}">
			<td class="tt_hours_column">
				{{$time = gmdate("H:i", $h * 3600)}} uur
			</td>
			@for($d = 0; $d < 7; ++$d)
			@php($date = $dates[$d])
			@if(isset($byStartTime[$time][$date]))
			<?php
				$item = $byStartTime[$time][$date];
				$duration = ($date == $item['enddate'])
					? ($item['endtime']->format('H') - $h)
					: (24 - $h);
				$slots = 2 * $duration;
			?>
			<td class="event" rowspan="{{$slots}}">
				<div class="event_container tt_tooltip" style="height: {{$slots * 20}}px;">
					<a class="event_header" href="#" title="{{$item['program']->name}}">{{$item['program']->name}}</a>
										<div>{!!Formatter::excerpt($item['program']->description, 200)!!}</div>
										<!-- <div class="tt_tooltip_text" style="width: 400px; height: 300px; top: -116px; left: 0px;">
												<div class="tt_tooltip_content">
							<b>{{$item['program']->name}}</b> <br/>
							{!!Formatter::excerpt($item['program']->description, 200)!!}
						</div>
												<div class="tt_tooltip_arrow"></div>
										</div> -->
								</div>

			</td>
			@endif
			@endfor
		</tr>
		@endfor
		</tbody>
</table>

<div class="responsive">
@php($date = null)
@foreach($schedule as $item)
@if(($formattedDate = Formatter::fullDate($item['starttime'], 'W d m')) != $date)
	@php($date = $formattedDate)
	@if($date != null) </ul> @endif
	<h5>{{$formattedDate}}</h2>
	<ul class="tt_items_list thin page_margin_top timetable_clearfix">
@endif
		@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
		@php($class =( $item['program']->priority < 2 ? 'bg-primary'
								:( $item['program']->nonstop || $item['program']->rerun ? 'text-muted'
								:( $isCurrent ? 'bg-info active text-primary'
								:( ''
		)))))

	<li class="timetable_clearfix">
			<div class="event_container">
				<a href="#" title="{{$item['program']->name}}" class="event_header">{{$item['program']->name}} </a>
							@if($isCurrent) <span class="bg-primary current-marker">Nu op NH Gooi</span> @endif
				<p>
				<p>{{Formatter::excerpt(strip_tags($item['program']->description), 200)}}</p>
			</td>
		</tr>
@endforeach
	</ul>