@extends('layouts/full')

@include('widgets/mediaplayer')

@section('title')
	@if($podcast)
		{{ $podcast->title }}
	@elseif($isPodcast)
		NH Gooi Podcast
	@else
		Fragment gemist
	@endif
@endsection

@section('page_class')
	post_container breadcrumb_no_border
@endsection

@section('breadcrumb')
	<ul class="bread_crumb">
		<li><a title="Home" href="/">Home</a></li>
		<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
		@if($isPodcast)
			<li>NH Gooi podcast</li>
		@else
			<li><a title="Home" href="/gemist/fragment">Fragment gemist</a></li>
		@endif
		<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
		@if($podcast && $podcast->program)
			<li><a title="{{$podcast->program->name}}"
				   href="{{route('gemist.programma') . $podcast->program->url}}">{{$podcast->program->name}}</a></li>
			<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
		@endif
		<li>{{ $podcast->title }}</li>
	</ul>
@endsection

@push('scripts')
	<script>
		$(".vertical_carousel").each(function () {
			$(this).before("<a class='slider_control up' id='" + this.id + "_prev' href='#' title='Terug'></a>");
			$(this).after("<a class='slider_control down' id='" + this.id + "_next' href='#' title='Verder'></a>");
			var carouselOptions = {
				direction: "up",
				items: {
					visible: 3,
				},
				scroll: {
					items: 2,
					duration: 500,
					pauseOnHover: true
				},
				auto: {
					items: 3,
					play: true,
					pauseOnHover: true,
				},
				mousewheel: true,
				swipe: {
					onMouse: true,
					onTouch: true
				},
				prev: {
					button: $('.slider_control.up', $(this).parent()),
					pauseOnHover: true,
				},
				next: {
					button: $('.slider_control.down', $(this).parent()),
					pauseOnHover: true,
				},
			};

			$(this).carouFredSel(carouselOptions);

			$(this).parent().parent().hover(function () {
						$(".up.slider_control", this).removeClass("slideDownBack").addClass("slideDown");
						$(".down.slider_control", this).removeClass("slideUpBack").addClass("slideUp");
					},
					function () {
						$(".up.slider_control", this).removeClass("slideDown").addClass("slideDownBack");
						$(".down.slider_control", this).removeClass("slideUp").addClass("slideUpBack");
					});

			//	$(window).trigger("resize");
		});
	</script>
@endpush

@section('content')
	@if ($podcast)
			<?php
			$audioUrl = url($apiUrl . 'podcast/download' . $podcast->url . "?auth=" . $podcast->auth);
			$streamUrl = url($apiUrl . 'podcast/stream' . $podcast->url . "?auth=" . $podcast->auth);
			$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
			?>

		<div class="">
			<div class="row news_post">
				<div class="col-12 col-md content_container">
					<div class="box full-width post single small_image md_margin_top">
						<div class="post_body">
							<ul class="post_details clearfix">
								<li class="detail date">
									<i class="fa-regular fa-clock"></i>
									{{ Formatter::relativeDate($podcast->created) }}
								</li>
								@if($podcast->program)
									<li class="detail author">
										<a href="/{{ ($isPodcast ? 'podcast' : 'programma') . $podcast->program->url }}">{{ $podcast->program->name }}</a>
									</li>
								@endif
							</ul>

							<div class="announcement">
								@include("widgets.audioplayer", [
									'isStream' => false,
									'source' => $streamUrl,
									'lengte' => $podcast->duration / 1000,
									'waveform' => $podcast->waveform
								])

								<div class="clearfix">
									<a class="action_button btn" href="{{$audioUrl}}"
									   title="Download dit fragment als MP3">
										<span>Download fragment</span>
									</a>
									<a class="action_button btn player" href="{{$popoutUrl}}" onclick="pause()">
										<span>Luister in nieuw venster</span>
									</a>
								</div>
							</div>

							<div class="content_box clearfix section_margin_top">

								@if($podcast->image)
									<div class="post_image_box">
										<a href="{{$imgBase . $podcast->image->url}}" class="post_image prettyPhoto"
										   rel="prettyPhoto" title="{{$podcast->image->title}}">
											<img src="{{$imgBase . $podcast->image->url}}"
												 title="{{$podcast->image->title}}" style="display: block;"/>
										</a>
										<div class="sentence">
											<span class="text">{{$podcast->image->title}}</span>
										</div>
									</div>
								@endif
								<div class="post_content page_margin_top_section ">
									<h3 class="excerpt">{!!$podcast->content!!}</h3>
								</div>
							</div>

							<div class="clearfix"></div>

						</div>

					</div>
				</div>
				<div class="col-12 col-md-auto sidebar">

					@if ((isset($podcasts)))
						<div data-tabs>
							<div class="tabs">
								<h4 data-tab-content-id="tab_more_fragmenten"
									class="box_header small flex-grow-1 active">
									<span>Meer {{$isPodcast ? 'afleveringen' : 'fragmenten'}}</span>
								</h4>
							</div>
							<div id="tab_more_fragmenten" class="box tab_content podcast_items active">
								@include('partial/podcastitems', ['id' => 'items-podcasts', 'showTime' => false, 'showImage' => false, 'podcasts' => $podcasts, 'isPodcast' => $isPodcast])
								<a class="btn auto_width" id="meer-nieuws-more-podcast" href="#"
								   data-loadmorenews='{"container":["#items-podcasts"]}'>
									<span class="fas fa-spinner fa-spin" id="loading"></span>
									Meer {{$isPodcast ? 'afleveringen' : 'fragmenten'}}
								</a>
							</div>
						</div>
					@endif

					@include('widgets.banner_sidebar')
				</div>
			</div>
	@endif
@endsection