@extends('layouts.app') 

@section('content')

<div id="home" class="container-fluid container-site">  
	
	@if ($magazine)
	<div class="row">
		<div class="col px-0 px-md-2">
			<div class="d-md-flex home-magazine text-white" style="background-image:url({{\Storage::url($magazine->featured)}});">
				<div class="home-magazine-image w-100 p-4 p-md-0"> 
					<img src="{{ \Storage::url($magazine->cover) }}" class="img-fluid" />
				</div>
				<div class="home-magazine-content w-100 px-4 d-flex align-items-center pt-3"> 
					<div class="w-100" style="max-width: 630px;">
						<div class="home-magazine-header liber d-flex align-items-center">
							<img src="/img/logo_white.png" height="40" />
							   <span class="liber-number mx-2 d-inline-flex align-items-center justify-content-center">{{ $magazine->number }}</span> 
							<span class="home-magazine-season mr-2">{{ $magazine->season }}</span>
							<img src="/img/logo-ac-sm.png" height="50" alt="Arte y Cultura">
						</div>
						<hr class="separator" style="border-width: 1px;"/> 
						<h3 class="text-white"><a href="{{ route('magazine', $magazine->slug) }}">{{ $magazine->topic }}</a></h3>
						<hr class="separator" style="border-width: 1px;"/> 
					</div>
				</div>
				<div class="home-magazine-links d-md-flex align-items-center w-100"> 
					<div class="mx-5 mx-md-0 py-4 py-md-0">
						<a href="{{ route('magazine', $magazine->slug) }}" class="d-block btn-transparent mb-3">Ver contenido</a>
						@if ($json = json_decode($magazine->pdf))
						<a href="{{ \Storage::url($json[0]->download_link)  }}" class="d-block btn-yellow" target="_blank">Ver liber en pdf</a>
						@endif
					</div>
				</div>
			</div>
		</div>
	</div>	
	@endif
	
	@if ($a = $articles->get(0))
	<div class="row pt-3">
		<div class="col-12 col-md-8 px-0 px-md-2">
			<a href="{{ $a->route }}">
				<img src="{{ $a->cache('primary', 'image') }}" width="100%" />
			</a>
		</div>
		<div class="col-12 col-md-4 d-flex">
			<div class="align-self-end">
				<span class="text-uppercase category">{{ $a->subject->name }}</span>
				<h2><a href="{{ $a->route }}">{{ $a->title }}</a></h2>
				<div>{!! $a->meta_description !!}</div>
				<hr class="separator my-1"/>
				@if($a->author)
				<span class="author">Por {{ $a->author->name }} {{ $a->author->surname }}</span>
				@endif
			</div>
		</div>
	</div>
	@endif
		
	<div class="row pt-5">
		<div class="col-12 col-md-5"> 
			@if ($a = $articles->get(1))
			<div class="mb-2"><a href="{{ $a->route }}"><img src="{{$a->cache('secondary', 'image') }}" class="img-fluid" /></a></div>
			<span class="text-uppercase category">{{ $a->subject->name }}</span>
			<h3><a href="{{ $a->route }}">{{ $a->title }}</a></h3>
			<p class="mb-1">{!! mb_strimwidth(html_entity_decode(strip_tags($a->meta_description)), 0, 250, '...') !!}</p>
			@if($a->author)
			<span class="author">Por {{ $a->author->name }} {{ $a->author->surname }}</span>
			@endif
			@endif
		</div>
		<div class="col"> 
			<div class="container pt-4 pt-md-0">
				@foreach($articles->skip(2) as $a)
				<div class="row pb-3">
					<div class="col-12 col-md-4"> 
						<div>
							<a href="{{ $a->route }}"><img src="{{ $a->cache('tertiary', 'image') }}" class="img-fluid w-100" /></a>
						</div> 
					</div>
					<div class="col">
						<hr class="separator mt-4 mt-md-0 mb-2 mb-md-0"/>
						<span class="text-uppercase category">{{ $a->subject->name }}</span>
						<h3 class="mb-0"><a href="{{ $a->route }}">{{ $a->title }}</a></h3>
						@if($a->author)
						<span class="author">Por {{ $a->author->name }} {{ $a->author->surname }}</span>
						@endif
					</div>
				</div>
				@endforeach
			</div>
		</div>
	</div>

	@if($subjects->count() > 0)
	<div class="row pt-5">
		<div class="col"> 
			<h2>Temas destacados</h2>
		</div>
	</div>
	<div class="row pt-3">
		<div class="col"> 
			<div class="slick">
				@foreach($subjects as $a)
				<div class="pr-3">
					<a href="{{ $a->route }}" class="home-subject img-hover-image text-white d-block" style="background-image:url({{ \Storage::url($a->image) }});">
						<div class="home-subject-content d-flex flex-column">
							<div class="h-100">
								<span>{{ $a->subject->name }}</span>	
							</div>
							<h4 class="text-uppercase mb-0 text-white">{{ strip_tags($a->title) }}</h4>
						</div>
					</a>
				</div>
				@endforeach
			</div>
		</div>		
	</div>
	@endif
	
	
	@if($marticles->count() > 0)
	<div class="row pt-5">
		<div class="col"> 
			<h2>Contenido</h2>
		</div>
	</div>
	
	@foreach($marticles as $a)
	<div class="row pt-3">
		<div class="col-12 col-md-6"> 
			<div class="pr-3">
				<a href="{{ $a->route }}" class="img-hover-image magazine-article d-block" style="background-image:url({{ \Storage::url($a->cover) }});"></a>	
			</div>
		</div>
		<div class="col-12 col-md-6"> 
			<div class="px-4">
				<span class="text-uppercase category">{{ @$a->subject->name }}</span>
				<h3><a href="{{ $a->route }}">{{ strip_tags($a->title) }}</a></h3>	
				<!-- <p class="mb-0">{!! mb_strimwidth(html_entity_decode(strip_tags($a->meta_description)), 0, 70, '...') !!}</p>  -->
				@if($a->author)
				<span class="author">Por {{ $a->author->name }} {{ $a->author->surname }}</span>
				@endif
			</div>
		</div>
	</div>
	@endforeach
	@endif
	
	
	@if($podcasts->count() > 0)
	<div class="row pt-5">
		<div class="col"> 
			<h2>Podcast</h2>
		</div>
	</div>
	<div class="row pt-2">
		@foreach($podcasts as $a)
		<div class="col-12 col-md-4 pt-4 pt-md-0"> 
			<div class="home-podcast d-flex">
				<a href="{{ $a->route }}" class="img-hover-image home-podcast-image mr-2 d-block" style="background-image:url({{ \Storage::url($a->image) }});"></a>
				<div class="home-podcast-content">
					<h4><a href="{{ $a->route }}">{{ strip_tags($a->title) }}</a></h4>	
					<p>{!! mb_strimwidth(html_entity_decode(strip_tags($a->meta_description)), 0, 100, '...') !!}</p>
				</div>
			</div>
		</div>
		@endforeach
	</div>
	@endif
	
	
	@if($videos->count() > 0)
	<div class="row pt-5">
		<div class="col"> 
			<h2>Video</h2>
		</div>
	</div>
	<div class="row pt-2">
		@foreach($videos as $a)
		<div class="col-12 col-md-4 pt-4 pt-md-0"> 
			<div class="home-video">
				<a href="{{ $a->route }}" class="img-hover-image home-video-image d-block" style="background-image:url({{ \Storage::url($a->image) }}); height: 200px;"></a>
				<div>
					<h3><a href="{{ $a->route }}">{{ strip_tags($a->title) }}</a></h3>	
					<p>{!! mb_strimwidth(html_entity_decode(strip_tags($a->meta_description)), 0, 100, '...') !!}</p>
				</div>
			</div>
		</div>
		@endforeach
	</div>
	@endif
	
	
	@if($hindsight->count() > 0)
	<div class="row pt-5 bg-light">
		<div class="col"> 
			<div class="px-1 px-md-4">
				<h2 class="px-3">Liber en retrospectiva</h2>
				<p class="px-3">Una selección exclusiva del editor con lo mejor de nuestro archivo</p>
			</div>
		</div>
	</div>
	<div class="row bg-light">
		<div class="col"> 
			<div class="px-3 pb-4">
				<div class="slick-4">
					@foreach($hindsight as $a)
					<div class="px-1 px-md-4">
						<a href="{{ $a->route }}" class="home-hindsight img-hover-image text-white d-block" style="background-image:url({{ \Storage::url($a->image) }});"></a>
						<h4 class="mb-0 pt-2"><a href="{{ $a->route }}">{{ strip_tags($a->title) }}</a></h4>
						@if($a->author)
						<div>
							<span class="author">Por {{ $a->author->name }} {{ $a->author->surname }}</span>
						</div>
						@endif
						@if ($a->magazine)
						<div><span class="category text-uppercase">{{ $a->magazine }}</span></div>
						@endif
					</div>
					@endforeach
				</div>
			</div>
		</div>		
	</div>
	@endif
	
		
</div>

<script>
	$(".slick").slick({
		// normal options...
		infinite: true,
		dots: false,
		arrows: false,
		slidesToShow: 3,
		slidesToScroll: 3,
		// the magic
		responsive: [
			{ breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3 } }, 
			{ breakpoint: 728, settings: { slidesToShow: 1, slidesToScroll: 1 } }, 
		]
	});
	$(".slick-4").slick({
		// normal options...
		infinite: true,
		dots: false,
		arrows: true,
		slidesToShow: 4,
		slidesToScroll: 4,
		// the magic
		responsive: [
			{ breakpoint: 1280, settings: { slidesToShow: 3, slidesToScroll: 3 } }, 
			{ breakpoint: 728, settings: { slidesToShow: 2, slidesToScroll: 2 } }, 
		]
	});
</script>

<!-- Contact Start here -->
<!--
include('layouts.partials.banner_subscribe')
-->
<!-- Contact End  -->

<!-- ****************** -->

@endsection