@extends('layouts.app') 

@section('title', $category['title'].' - Новини | Sport1') 

@section('banners_data')
<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/d_vertical_top', [[300, 600]], 'div-gpt-ad-1580307592843-0').addService(googletag.pubads());
    googletag.defineSlot('/26641721/sport1.bg/d_horizontal_1', [[728, 90]], 'div-gpt-ad-1580308155760-0').addService(googletag.pubads());
    googletag.defineSlot('/26641721/sport1.bg/d_vertical_2', [[300, 250]], 'div-gpt-ad-1580308500353-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",
           "itemListElement":[
              {
                 "@type":"ListItem",
                 "position":1,
                 "item":{
                    "@id":"https:sport1.bg",
                    "name":"Sport1.bg"
                 }
              },
              {
                 "@type":"ListItem",
                 "position":2,
                 "item":{
                    "@id":"https://sport1.bg/category/{{ $category['id'] }}",
                    "name":"{{ $category['title'] }}"
                 }
              }
           ]
        }
    </script>
@endsection
@section('content') 
    @include('layouts._breadcrumb',['pageName'=> [$newestArticle['categories']['id'],$newestArticle['categories']['title']]])
    <div class="wrap-width" data-content="{{ $newestArticle['categories']['title'] }}" id="data-content-category">
        <div class="widget widget-news-featured bottom-text">
            <a href="{{ url('article/'.$newestArticle['id']) }}" title="{{ $newestArticle['title'] }}">
                <h1 class="title heading-lg">{{ $newestArticle['title'] }}</h1>
                @if(isset($newestArticle['imgPaths']['data']['urls']['uploaded']['original']))
                    <img class="heading-title-class lazyload" data-src="{{ $newestArticle['imgPaths']['data']['urls']['uploaded']['original'] }}" alt="{{ $newestArticle['title'] }}" style="width:100%">
                @elseif(isset($newestArticle['imgPaths']['data']['urls']['16x9']['770_433']))
                    <img class="heading-title-class lazyload" data-src="{{ $newestArticle['imgPaths']['data']['urls']['16x9']['770_433'] }}" alt="{{ $newestArticle['title'] }}">
                @else
                    <img class="lazyload" data-src="../resources/image/temp/image_placeholder.png" alt="{{ $newestArticle['title'] }}">
                @endif
            </a>
        </div>

        <div class="grid">
                <div class="col-minus-sidebar-1">
                    <div class="box-generic">
                        <div class="widget widget-news-grid">
                            <div class="grid">
                                @foreach($categoryArticles as $article)
                                <a href="{{ url('article/'.$article['id']) }}" title="{{ $article['title'] }}" class="item col-1-2">
                                    <div class="photo photo-second">
                                       @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="../resources/image/temp/image_placeholder.png" alt="{{ $article['title'] }}">
                                        @endif
                                    </div>
                                    <h2 class="title heading-sm">{{ $article['title'] }}</h2>
                                     @if(isset($article['updated']))
                                        <em class="article-time time-updated time">
                                            @include('layouts.logos.icons.updated',['width'=>'15px','height'=>'15px','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">{{ date('d F Y',strtotime(substr($article['fromDate'],0, strpos($article['fromDate'],' ')))).' | '.substr($article['fromDate'],-8,-3) }}</em>
                                    @endif
                                </a>
                                @endforeach
                            </div>
                        </div> <!-- widget -->
                        {{ $categoryArticles->links('vendor.pagination.customPagination') }}
                    </div>
                    <div class="widget widget-banner" id='div-gpt-ad-1580308155760-0' style="margin-top:30px;">
                      <script>
                        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1580308155760-0'); });
                      </script>
                    </div>
                </div> <!-- col-minus-sidebar-1 -->

                <div class="col-sidebar">
                    <div class="widget widget-banner" id='div-gpt-ad-1580308500353-0' style="margin-top:30px;">
                      <script>
                        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1580308500353-0'); });
                      </script>
                    </div>

                    @include('layouts.side-bar-components._most-read',['articles'=>$mostViewed])

                    <div id='div-gpt-ad-1580307592843-0' class="widget widget-banner" style="margin-top:30px;">
                      <script>
                        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1580307592843-0'); });
                      </script>
                    </div>
                </div> <!-- col-sidebar -->
        </div> <!-- grid -->
    </div>
@endsection

@push('scripts')
  <script>
      function setCategoryBread(){
          let category = $("#data-content-category").data('content');
          console.log(category);
          $("#bread-crumbs").empty();
          $("#bread-crumbs").append(`<a href="../" title="Начална страница" class="breadcrumb-entry">Начална страница</a>
                                      <a title="${category}" class="breadcrumb-entry not-active-breadcrumb">${category}</a>
                                      `);
      }
      setCategoryBread();
  </script>
@endpush