@extends('mobile.layouts.mobile-app')
{{-- @section('amp-section')
	<link rel="amphtml" href="{{ url('/').'/article-amp/'.$article['id'] }}">
@endsection --}}
@section('title', $article['title'].'News | Sport 1')

@section('banners_data')
	@if(isset($article['imgPaths']['data']['urls']['uploaded']['original']))
		<meta property="og:image" content="{{ $article['imgPaths']['data']['urls']['uploaded']['original'] }}"/>
	@elseif(isset($article['imgPaths']['data']['urls']['16x9']['770_433']))
		<meta property="og:image" content="{{ $article['imgPaths']['data']['urls']['16x9']['770_433'] }}"/>
	@else
		<meta property="og:image" content="../resources/image/temp/image_placeholder.png"/>
	@endif
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag.defineSlot('/26641721/sport1.bg/m_box_4', [[320, 50]], 'div-gpt-ad-1580394023440-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });
</script>

@endsection

@section('structured_data')
 <script type="application/ld+json">
        {
	        "@context": "http://schema.org",
	        "@type": "BreadcrumbList",
	        "datePublished": "{{ $article['fromDate'] }}",
	        "dateModified": "{{ $article['updated_at'] }}",
	        "headline": "{{ $article['title'] }}",
	        "itemListElement": [
	            {
	              "@type": "ListItem",
	              "position": 1,
	              "item": {
	                "@id": "{{ url('/') }}",
	                "name": "Sport1.bg"
	              }
	            },
	            {
	              "@type": "ListItem",
	              "position": 2,
	              "item": {
	                "@id": "{{ url('/category/').$article['category']['id'] }}",
	                "name": "{{ $article['category']['title'] }}"
	              }
	            },
	            {
	              "@type": "ListItem",
	              "position": 3,
	              "item": {
	                "@id": "{{ url('article/').$article['id'] }}",
	                "name": "{{ $article['title'] }}"
	              }
	            }
	          ]
	    }
 </script>
@endsection

@section('content')
	<div class="global-wrap">
		@if(isset($article['categories']))
			{{-- @if(count($relatedTeam)> 0)
			    @include('mobile.layouts._breadcrumb',['pageName'=> [$article['categories']['title'], array_values($relatedTeam)[mt_rand(0,(count($relatedTeam)-1))]['data']['name'],$article['title']]])
			@elseif(count($relatedPlayer) > 0)
			    @include('mobile.layouts._breadcrumb',['pageName'=> [$article['categories']['title'], array_values($relatedPlayer)[mt_rand(0,(count($relatedPlayer)-1))]['data']['name'],$article['title']]])
			@else --}}
			    @include('mobile.layouts._breadcrumb',['pageName'=> $article['categories']['title'],'pageID'=>$article['categories']['id']])
			{{-- @endif --}}
		@endif
		{{-- @include('mobile.layouts._breadcrumb',['pageName'=> [$article['categories']['title']]]) --}}
		<div class="widget widget-news-article widget-news-article-mobile">
			<h2 class="article-title heading-xm">{{ $article['title'] }}</h2>
			@if(isset($article['updated']))
                <em class="article-time time-updated time">
                    @include('layouts.logos.icons.updated',['width'=>'14px','height'=>'14px','fill'=>'gray'])
                    {{ date('d F Y',strtotime(substr($article['updated'],0, strpos($article['updated'],' ')))).' | '.substr($article['updated'],-8,-3) }}
                </em>
            @else
                <em class="article-time time">
                   <em class="article-time">{{ date('d F Y',strtotime(substr($article['fromDate'],0, strpos($article['fromDate'],' ')))).' | '.substr($article['fromDate'],-8,-3) }}</em>
                </em>
            @endif
			{{-- <div class="article-photo">
				<img src="../resources/image/temp/news-2.jpg" alt="" class="news-photo">
			</div>

			<div class="widget widget-news-article-share">
				<ul class="share-media">
					<li class="share-media-item">
						<a href="" title="" target="_blank" class="share-media-like-small"></a>
					</li>
					<li class="share-media-item">
						<a href="" title="" target="_blank" class="share-media-facebook-small"></a>
					</li>
				</ul>
			</div> <!-- share --> --}}
			@if(isset($article['imgPaths']['data']['urls']['uploaded']['original']))
                <img data-src="{{ $article['imgPaths']['data']['urls']['uploaded']['original'] }}" alt="{{ $article['title'] }}" class="image-full-width lazyload">
            @elseif(isset($article['imgPaths']['data']['urls']['16x9']['770_433']))
                <img data-src="{{ $article['imgPaths']['data']['urls']['16x9']['770_433'] }}" alt="{{ $article['title'] }}" class="image-full-width lazyload">
            @else
                <img data-src="../resources/image/temp/image_placeholder.png" alt="{{ $article['title'] }}" class="image-full-width lazyload">
            @endif
			{{-- @if(isset($article['imgPaths']['770_433'])) --}}
				{{-- <div class="gallery-container">
					<div class='container-swipe'> 
						@foreach($article['imgPaths'] as $image)--}}
						{{-- <div class="custom-article-image">
							<img src='{{ $article['imgPaths']['770_433'] }}' alt="{{ $article['title'] }}"/>
						</div> --}}
						{{-- @endforeach
				
					</div>
				</div> --}}
				{{-- @else
					<img class="full-screen-image-mobile" src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $article['title'] }}"/>
				@endif --}}
			<div class="widget widget-news-article-share">
				<ul class="share-media">
					<li class="share-media-item">
						<div class="fb-like" data-href="{{ url('/article/'.$article['id']) }}" data-width="" data-layout="button" data-action="like" data-size="large" data-share="true"></div>
					</li>
				</ul>
				<a href="#news-comments" title="" class="share-comments">
					<i class="icon icon-comments"></i>
					<span class="fb-comments-count" data-href="{{ url('./article/'.$article['id']) }}"></span>
				</a>
			</div>
			{{-- <div class="widget widget-news-article-share wrap-padding">
				<span class="share-divider"></span>
                <ul class="share-media">
                   <li class="share-media-item">
                        <div class="fb-like" data-href="{{ url('/article/'.$article['id']) }}" data-width="" data-layout="button_count" data-action="like" data-size="large" data-share="true"></div>
                    </li>
                </ul>
            </div> --}}
			{{-- <div class="widget widget-news-article-share wrap-padding">
 				<ul class="share-media">
                	<li class="share-media-item">
                        <a href="https://wa.me/?text={{ $article['title'] }} - {{ url('article/'.$article['id']) }}" title="{{ $article['title'].' - WhatsApp' }}" target="_blank" class="share-media-whatsapp"></a>
                    </li>
                    <li class="share-media-item">
                        <a href="viber://forward?text={{ urlencode($article['title']) }} - {{ url('article/'.$article['id']) }}" title="{{ $article['title'].' - WhatsApp' }}" target="_blank" class="share-media-viber"></a>
                    </li>
                    <li class="share-media-item">
                        <a href="mailto:?subject={{ $article['title'] }} - Прочетете повече на: {{ url('article/'.$article['id']) }}" title="{{ $article['title'].' - Mail' }}" target="_blank" class="share-media-mail"></a>
                    </li>
                    <li class="share-media-item">
                        <a id="share-url" title="{{ $article['title'].' - Coppy Link' }}" href="#" onclick="copyToClipboard();" class="share-media-share btn-coppy"></a>
                    </li>
                </ul>
			</div> --}}
			<div class="editor-content">

				{!! $article['content'] !!}
				 @if(isset($article['owner']))
                    <div class="widget widget-news-article-footer">
                        <a {{-- href="" --}} title="" class="article-author">
                            <img data-src="{{ url('./resources/image/temp/player_icon.png') }}" alt="{{ $article['owner'] }}" class="photo lazyload">
                            <div class="text-wrap">
                                <h5 class="name">{{ $article['owner'] }}</h5>
                                <h6 class="position">Спортни новини</h6>
                            </div>
                        </a>
                    </div>
                    @endif
	          	<div class="fb-comments" data-href="{{ url('/article/'.$article['id']) }}" data-width="auto" data-numposts="5" id="news-comments"></div>

			<ul class="article-tags">
				@foreach($relatedPlayer as $player)
				<li>
					<a href="{{ url("/player/".$player['data']['id']) }}" title="{{ $player['data']['name'] }}">
						@if(isset($player['data']['url_thumb']))
						<img data-src="{{ $player['data']['url_thumb'] }}" alt="{{ $player['data']['name'] }}" class="image lazyload">
						@else
						<img data-src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $player['data']['name'] }}" class="image lazyload">
						@endif
						<h6 class="label">{{ $player['data']['name'] }}</h6>
					</a>
				</li>
				@endforeach
				@foreach($relatedTeam as $team)
	            <li>
					<a href="{{ url("/team/".$team['data']['id']) }}" title="{{ $team['data']['name'] }}">
						@if(isset($team['data']['url_logo']))
						<img data-src="{{ $team['data']['url_logo'] }}" alt="{{ $team['data']['name'] }}" class="image lazyload">
						@else
						<img data-src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $team['data']['name'] }}" class="image lazyload">
						@endif
						<h6 class="label">{{ $team['data']['name'] }}</h6>
					</a>
				</li>
				@endforeach
			</ul>
			@if(count($relatedArticle) > 0)
			<div class="box-generic-mobile related-mobile">
				<header class="widget widget-heading-small">
					<h2 class="title heading-md">Свързани новини</h2>
				</header>
				<div class="widget widget-news-grid widget-news-grid-horizontal-mobile">
					@foreach($relatedArticle as $index=>$article)
						<a href="{{ url('article/'.$article['data']['id']) }}" title="{{ $article['data']['title'] }}" class="item grid">
							<div class="photo col-1-2">
								@if(isset($article['data']['imgPaths']['data']['urls']['uploaded']['thumbnail']))
					                <img class="lazyload" data-src="{{ $article['data']['imgPaths']['data']['urls']['uploaded']['thumbnail'] }}" alt="{{ $article['data']['title'] }}">
					            @elseif(isset($article['data']['imgPaths']['data']['urls']['uploaded']['original']))
					                <img class="lazyload" data-src="{{ $article['data']['imgPaths']['data']['urls']['uploaded']['original'] }}" alt="{{ $article['data']['title'] }}">
					            @elseif(isset($article['data']['imgPaths']['data']['urls']['16x9']['770_433']))
					                <img class="lazyload" data-src="{{ $article['data']['imgPaths']['data']['urls']['16x9']['770_433'] }}" alt="{{ $article['data']['title'] }}">
					            @else
					                <img class="lazyload" data-src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $article['data']['title'] }}">
					            @endif
							</div>

							<div class="col-1-2">
								<h2 class="title heading-xxs">{{ $article['data']['title'] }}</h2>
								<em class="category">{{ $article['data']['category']['title'] }}</em>
							</div>
						</a>
						@if($index > 0 && $index % 5 == 0)
		                   <img data-src="{{ url('../resources/image/temp/banner-728-'.rand(2,4).'.jpg')}}" alt="Bet365" class="ad lazyload">
						@endif
					@endforeach
				</div> <!-- widget -->
			</div> <!-- box -->
			@elseif(count($fromSameCategory) > 0)
				<div class="box-generic-mobile">
				<header class="widget widget-heading-small">
					<h2 class="title heading-md">От същата категория</h2>
				</header>
				<div class="widget widget-news-grid widget-news-grid-horizontal-mobile">
					@foreach($fromSameCategory as $index=>$article)
					{{-- {{ dd($article) }} --}}
						<a href="{{ url('article/'.$article['id']) }}" title="{{ $article['title'] }}" class="item grid">
							<div class="photo col-1-2">
								@if(isset($article['imgPaths']['data']['urls']['uploaded']['original']))
					                <img class="lazyload" data-src="{{ $article['imgPaths']['data']['urls']['uploaded']['original'] }}" alt="{{ $article['title'] }}">
					            @elseif(isset($article['imgPaths']['data']['urls']['16x9']['770_433']))
					                <img class="lazyload" data-src="{{ $article['imgPaths']['data']['urls']['16x9']['770_433'] }}" alt="{{ $article['title'] }}">
					            @else
					                <img class="lazyload" data-src="{{ url('../resources/image/temp/image_placeholder.png') }}" alt="{{ $article['title'] }}">
					            @endif
							</div>

							<div class="col-1-2">
								<h2 class="title heading-xxs">{{ $article['title'] }}</h2>
								<em class="category">{{ $article['categories']['title'] }}</em>
							</div>
						</a>
						@if($index % 3 == 0 && $index > 0)
							@switch(rand(1,2))
								@case(1)
									<!-- /26641721/sport1.bg/m_box_4 -->
									<div id='div-gpt-ad-1580394023440-0' class="widget widget-banner">
									  <script>
									    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1580394023440-0'); });
									  </script>
									</div>
									@break
								@case(2)
									<!-- /26641721/sport1.bg/m_box_3 -->
									<div id='div-gpt-ad-1580393912000-0' class="widget widget-banner">
									  <script>
									    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1580393912000-0'); });
									  </script>
									</div>
									@break
								@default
								{{-- @include('layouts.side-bar-components._vertical-banner',
			       					 ['bannerURL'=>'../resources/image/temp/banner-728-'.rand(2,4).'.jpg']) --}}
							@endswitch
						@endif
					@endforeach
				</div> <!-- widget -->
				{{--  <div class="widget widget-news-article box-generic-mobile">
	                <div class="fb-comments" data-href="{{ url('/article/'.$article['id']) }}" data-width="auto" data-numposts="5"></div>
	            </div> --}}
			</div> <!-- box -->
		@endif
		{{-- <a href="" title="" target="_blank" class="widget widget-banner-mobile">
			<img src="{{ url('../resources/image/temp/banner-728.jpg')}}" alt="" class="ad">
		</a> --}}
		<!-- /26641721/sport1.bg/m_box_4 -->
		<div id='div-gpt-ad-1580394023440-0' class="widget widget-banner">
		  <script>
		    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1580394023440-0'); });
		  </script>
		</div>
	</div>
@endsection

@push('scripts-mobile')
     <script src="{{ asset('dist/js/custom/mobile/news-mobile.js')}}"></script>
     <script src="{{ asset('dist/js/custom/mobile/single-new-mobile.js')}}"></script>
      <script type="text/javascript">
            function copyToClipboard() {
              var $temp = "<input id='temp' />";
              console.log($temp);
              $("body").append($temp);
              $("#temp").val(String(window.location)).select();
              document.execCommand("copy");
              $("#temp").remove();
            }
            $(document).ready(function() {
			    setTimeout(function(){
		 			let target = $("div[data-widgetid|='player-h2h']");
		 			if(typeof target !== 'undefined' && target.length > 0){
			            let player1 = target.data('options').playerOne.playerId;
			            let player1_name = target.children('.main-container').children('.header').children('.player-container:first-child').children('.player-name').text();
			            let player2 = target.data('options').playerTwo.playerId;
			            let player2_name = target.children('.main-container').children('.header').children('.player-container:last-child').children('.player-name').text();
			            target.children('.main-container').children('.header').children('.player-container:first-child').wrap(`<a href='../player/${player1}' title="${player1_name}"></a>`);
			            target.children('.main-container').children('.header').children('.player-container:last-child').wrap(`<a href='../player/${player2}' title="${player2_name}"></a>`);
			        }
			    },5000);
			});
        </script>
@endpush