@extends('layouts/full')

@include('widgets/mediaplayer')

@section('title')
	@if ($podcast)
		{{$podcast->title}}
	@else
		Fragment {{$title}} niet gevonden
	@endif
@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>
		<li><a title="Fragment gemist" href="{{route('gemist')}}">Fragment gemist</a></li>
		<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>Fragment</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')
	@parent
	@if ($podcast)
			<?php
			$audioUrl = url($apiUrl . 'podcast/download' . $podcast->url . "?auth=" . $podcast->auth);
			$popoutUrl = route('luister.podcast') . $podcast->url . '?auth=' . $podcast->auth;
			?>

		<div class="row page_margin_top">
			<div class="column column_2_3">
				<div class="row">
					<div class="post single small_image">
						<h1>Fragment gemist</h1>
						<ul class="post_details clearfix">
							<li class="detail date">{{ Formatter::relativeDate($podcast->created) }}</li>
							@if($podcast->program)
								<li class="detail"><a
											href="{{ route('programma') . $podcast->program->url }}">{{ $podcast->program->name }}</a>
								</li>
							@endif
						</ul>

						<div class="announcement">
							<audio controls autoplay="true">
								<source src="{{$audioUrl}}" type="audio/mpeg"/>
							</audio>
							<div class="clearfix">
								<a class="action_button" href="{{$audioUrl}}" title="Download dit fragment als MP3">
									<span class="fa fa-download"></span>
									<span>Download fragment</span>
								</a>
								<a class="action_button player" href="{{$popoutUrl}}">
									<span class="fa fa-external-link-alt"></span>
									<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>{!!$podcast->content!!}</h3>
							</div>
						</div>

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


					</div>
				</div>
				<!--
                                <div class="row page_margin_top">
                                    <div class="share_box clearfix">
                                        <label>Share:</label>
                                        <ul class="social_icons clearfix">
                                            <li>
                                                <a target="_blank" title="" href="http://facebook.com/QuanticaLabs" class="social_icon facebook">
                                                    &nbsp;
                                                </a>
                                            </li>
                                            <li>
                                                <a target="_blank" title="" href="https://twitter.com/QuanticaLabs" class="social_icon twitter">
                                                    &nbsp;
                                                </a>
                                            </li>
                                            <li>
                                                <a title="" href="mailto:contact@pressroom.com" class="social_icon mail">
                                                    &nbsp;
                                                </a>
                                            </li>
                                            <li>
                                                <a title="" href="#" class="social_icon skype">
                                                    &nbsp;
                                                </a>
                                            </li>
                                            <li>
                                                <a title="" href="http://themeforest.net/user/QuanticaLabs?ref=QuanticaLabs" class="social_icon envato">
                                                    &nbsp;
                                                </a>
                                            </li>
                                            <li>
                                                <a title="" href="#" class="social_icon instagram">
                                                    &nbsp;
                                                </a>
                                            </li>
                                            <li>
                                                <a title="" href="#" class="social_icon pinterest">
                                                    &nbsp;
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                -->
			</div>
			<div class="column column_1_3">


				@if(count($related) > 1)
					<h4 class="box_header page_margin_top_section">Meer uit deze uitzending</h4>
					<div class="vertical_carousel_container clearfix">
						<ul class="blog podcasts vertical_carousel" id="related_items">
							@foreach($related as $relatedItem)
								@if($relatedItem->id == $podcast->id)
									@continue
								@endif
								<li class="post">
									<div class="post_content">
										<h5>
											<a href="{{ route('gemist.fragment') . $relatedItem->url }}"
											   title="{{$relatedItem->title}}">
												<span class="fa fa-chevron-circle-right"></span>
												{{$relatedItem->titleWithoutProgram()}}
											</a>
										</h5>
										<p class="post_details simple" title="{{$relatedItem->content}}">
											{{Formatter::excerpt($relatedItem->content, 80)}}
										</p>
									</div>
								</li>
							@endforeach
						</ul>
					</div>
					<a href="{{route('gemist.programma') . $podcast->program->url}}"
					   class="more">Meer {{$podcast->program->name}}</a>
				@endif


				<h4 class="box_header page_margin_top_section">Meer fragmenten</h4>
				<nav>
					<ul class="blog podcasts">
						<li class="post">
							<a href="{{route('gemist')}}" class="read_more">
								<span class="arrow"></span>
								<span>Alle recente fragmenten</span>
							</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	@endif
@endsection