@extends('layouts.app') 

@section('metas')
<meta property="og:title" content="{{ $article->title }}"/>
<meta property="og:description" content="{{ strip_tags($article->meta_description) }}"/>
<meta property="og:url" content="{{ request()->url() }}" />
<meta property="og:image" content="{{ \Storage::url($article->image) }}" />
@endsection

@section('content')

<div id="article" class="container-fluid container-site pt-3">  
	<div class="row">
		<div class="col-12 col-md-8 px-0 px-md-2 text-center">
			<div class="d-inline-block">
				@if ($article->media_type == 'video')
				<div class="text-left mb-3">
			   		<img src="/img/logo_light.png" height="30" class="mr-2" /> <img src="/img/video_icon_b.png" height="30" /> 
			   </div>
				{!! $article->podcast_js_src  !!}
				@else
				<img src="{{ \Storage::url($article->image) }}" class="article-image" />
				@endif
				<div class="pt-2 article-caption text-left">
					{!! strip_tags($article->caption) !!}
				</div>
			</div>
		</div>
		<div class="col-12 col-md-4 d-flex align-items-start flex-column">
			@if ($magazine && $article->media_type == 'text')
			<div class="liber mb-auto pt-2">
				<img src="/img/logo_light.png" height="30" class="mr-2" /> <span class="liber-number d-inline-flex align-items-center justify-content-center">{{ $magazine->number }}</span>
			</div>
			@elseif ($article->media_type == 'podcast')
			<div class="liber mb-auto pt-2">
				<img src="/img/logo_light.png" height="30" class="mr-2" /> <img src="/img/podcast_icon_b.png" height="30" /> 
			</div>
			@endif
			<div class="pb-2 mt-auto">
				<span class="text-uppercase category">{{ @$article->subject->name }}</span>
				<h2>{{ $article->title }}</h2>
				<div>{!! $article->meta_description !!}</div>
				<hr class="separator my-1"/>
				@if($article->author)
				<span class="author">Por {{ $article->author->name }} {{ $article->author->surname }}</span>
				@endif
			</div>
		</div>
	</div>
	<div class="row pt-4">
		<div class="col-12 col-md-8 px-0 px-md-2">
			<div class="pl-5 pr-5 pr-md-0">
				<div class="article-notes">
					{!! $article->notes !!}
				</div>
				<div class="article-content">
					@if ($article->media_type == 'podcast')
					<div>{!! $article->podcast_js_src  !!}</div>
					@endif
					{!! $article->content !!}
				</div>
				@if ($author = $article->author)
				<hr/>
				<div class="article-author">
					<h3>Autor</h3>
					<div class="d-flex align-items-center">
						<div class="mr-3">
							<img src="{{ $author->cache('square', 'photo') }}" width="100" class="rounded-circle" />
						</div>
						<div>{{ $author->name }} {{ $author->surname }}</div> 
					</div>
					<div class="my-3">
						{!! $author->bio !!}
					</div>
				</div>
				@endif
				@if ($related)
				<hr/>
				<div class="article-related">
					<h3 class="mb-3">Continúa leyendo esta edición de Liber</h3>
					<div class="d-flex">
						<div class="mr-3">
							<span class="category text-uppercase d-block">{{ @$related->subject->name }}</span>
							<a href="{{ $related->route }}" class="article-related-img img-hover-image text-white d-block" style="background-image:url({{ \Storage::url($related->image) }});"></a>
						</div>
						<div>
							<h3 class="mb-0 pt-1"><a href="{{ $related->route }}">{!! strip_tags($related->title) !!}</a></h3>
							<p class="mb-0">{!! mb_strimwidth(strip_tags($related->meta_description), 0, 130, '...') !!}</p>
							@if($related->author)
							<span class="author">Por {{ $related->author->name }} {{ $related->author->surname }}</span>
							@endif
						</div>
					</div>
				</div>
				@endif
				@if (count($interest) > 0)
				<hr/>
				<div class="article-interest">
					@if (in_array($article->media_type, ['video', 'podcast']))
					<h3 class="mb-3">Continuar</h3>
					@else
					<h3 class="mb-3">Te podría interesar</h3>
					@endif
					<div class="container px-0">
						<div class="row">
							<div class="col">
								<div class="slick">
									@foreach($interest as $r)
									<div class="px-3 h-100">
										<a href="{{ $r->route }}" class="article-interest-img img-hover-image text-white d-block" style="background-image:url({{ \Storage::url($r->image) }});"></a>
										<h3><a href="{{ $r->route }}">{!! strip_tags($r->title) !!}</a></h3>
										<p>{!! mb_strimwidth(strip_tags($r->meta_description), 0, 130, '...') !!}</p>
										@if($r->author)
										<span class="author d-block">Por {{ $r->author->name }} {{ $r->author->surname }}</span>
										@endif
									</div>
									@endforeach
								</div>
								
								<!--
								
								-->
							
							</div>
						</div>
					</div>
				</div>
				@endif	
			</div>
		</div>
		<div class="col-12 col-md-4">
			<div class="article-sidebar p-4">
				@if ($magazine)
				<div class="pb-3">Aparece en <span>{{ $magazine->name }}</span></div>
				<div>
					<img src="{{ \Storage::url($magazine->cover) }}" class="img-fluid" />
				</div>
				@endif
				<div class="text-center">
					@if ($magazine)
					@if ($json = json_decode($magazine->pdf))
					<div class="mt-4"><a href="{{ \Storage::url($json[0]->download_link)  }}" class="btn-yellow my-4 d-block mx-2" target="_blank">Ver liber en pdf</a></div>
					@endif		
					@endif
					
					@if ($json = json_decode($article->pdf))			
					<div class="mt-4"><a href="{{ \Storage::url($json[0]->download_link)  }}" class="btn-border-gray d-none d-sm-block mx-2">Ver artículo en pdf</a></div>
					@endif	
				</div>
				<div>
					@if($article->spotify)
					<h3 class="py-3">Playlist relacionada</h3>
					{!! $article->spotify !!}
					@endif
					@if ($tags = array_filter(explode(',', $article->tags), function($i) { return trim($i) != ''; })  )
					<h3 class="pt-3">Palabras clave</h3>
					<p class="tags">{!! join(' ', array_map(function($i) { return '<a href="'.route('search', ['t' => $i]).'">#'.$i.'</a>'; }, $tags)) !!}</p>
					@endif
				</div>
			</div>
		</div>
	</div>
</div>

<div class="social-navbar d-none d-sm-block">
    <ul class="navbar-nav">
        <div id="social-links">
            <ul class="list-unstyled m-0 p-2 text-center">
                <li class="nav-item">
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ route('article', ['slug' => $article->slug]) }}" class="social-button">
						<i class="fab fa-facebook"></i>
					</a>
                </li>
				<hr class="my-1"/>
                <li class="nav-item">
                    <a href="https://twitter.com/intent/tweet?text=Interesante artículo&amp;url={{ route('article', ['slug' => $article->slug]) }}" class="social-button">
						<i class="fab fa-twitter"></i>
					</a>
                </li>
				<hr class="my-1"/>
                <li class="nav-item">
                    <a href="https://wa.me/?text={{ route('article', ['slug' => $article->slug]) }}" class="social-button">
						<i class="fab fa-whatsapp"></i>
					</a>
                </li>
            </ul>
        </div>
    </ul>
</div>

<style>
	.article-content img {
		max-width: 100%;
		height: auto;
	}
</style>

<div id="social-mobile" class="kc_fab_wrapper d-block d-sm-none" ></div>

@if ($json = json_decode($article->pdf))		
<div id="pdf-mobile" class="d-block d-sm-none">
	<a href="{{ \Storage::url($json[0]->download_link)  }}" class="btn-yellow d-flex align-items-center justify-content-center" target="_blank"><i class="fa-light fa-file-pdf"></i></a>
</div>
@endif	

<script>
var links = [
    	{
        	"bgcolor":"#313332",
        	"icon":"<i class='fa-thin fa-share-nodes'></i>"
    	},
    	{
        	"url":"https://www.facebook.com/sharer/sharer.php?u={{ route('article', ['slug' => $article->slug]) }}",
        	"bgcolor":"#313332",
        	"color":"#FFF",
        	"icon":"<i class='fab fa-facebook-f'></i>",
        	"target":"_blank",
			"title" : "Facebook"
    	},
    	{
        	"url":"https://twitter.com/intent/tweet?text=Interesante artículo&amp;url={{ route('article', ['slug' => $article->slug]) }}",
        	"bgcolor":"#313332",
        	"color":"#FFF",
        	"icon":"<i class='fab fa-twitter'></i>",
        	"target":"_blank",
			"title" : "Twitter"
    	},
    	{
        	"url":"https://wa.me/?text={{ route('article', ['slug' => $article->slug]) }}",
        	"bgcolor":"#313332",
        	"color":"#FFF",
        	"icon":"<i class='fab fa-whatsapp'></i>",
        	"target":"_blank",
			"title" : "Whatsapp"
    	}
]
$('.kc_fab_wrapper').kc_fab(links);

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

<!-- Site map Start here -->
<!-- Site map End-->

@endsection