@extends('layouts.frontend')

@section('title')- {!! $news->meta_title != '' ? $news->meta_title : $news->title !!}@stop

@section('meta')

    @if($news->meta_description != "")
        <meta name="description" content="{{$news->meta_description}}">
    @endif
    @if($news->meta_keywords != "")
        <meta name="keywords" content="{{$news->meta_keywords}}">
    @endif

    <meta property="og:url"           content="{{url()->full()}}" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="{!! $news->title !!}" />
    <meta property="og:description"   content="{{strip_tags($news->text)}}" />
    <meta property="og:image"         content="{{env('APP_URL')}}/files/news/{{$news->image}}" />

@stop

@section('content')

    <div class="container" style="min-height: 450px;margin-top:50px;">
        <div class="row">

                <div class="col-sm-9 single-news">

                    <img src="/files/news/{{$news->image}}" align="left" class="img-responsive">
                    <h1>{{$news->title}}</h1>
                    <h4>{!!$news->text_short!!}</h4>
                    <p style="font-size:16px">{!!$news->text!!}</p>

                    @if(sizeof($aImages) > 0)
                        <br>
                        <div class="title-section">
                            <h1 style="width: 90%"><span>Galleria</span></h1>
                        </div>
                    @endif

                    <div class="row gallery">
                        @foreach($aImages as $idx => $img)
                            <div class="col-sm-2 ">
                                <a href="/files/news/{{$img}}"><img src="/files/news/{{$img}}" class="img-responsive"></a>
                            </div>
                        @endforeach
                    </div>

                    @if($news->video != '')
                        <br>
                        <div class="title-section">
                            <h1 style="width: 90%"><span>Video</span></h1>
                        </div>
                        <div class="row" style="margin-top:30px">
                            <iframe width="560" height="315" src="{{$news->video}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    @endif

                    @if($news->pdf != '')
                        <br>
                        <div class="title-section">
                            <h1 style="width: 90%"><span>Documenti</span></h1>
                        </div>
                        <div class="center-button" style="float:left">
                            <a href="/files/news/{{$news->pdf}}" target="_blank">VISUALIZZA</a>
                        </div>
                    @endif

                    <br><br><br>

                    <div class="fb-share-button"  data-href="{{url()->full()}}"  data-layout="button_count"></div>

                    <a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>

                </div>

                <div class="col-sm-3" >

                    <div class="title-section">
                        <h1><span class="no-border">ULTIME NEWS</span></h1>
                    </div>

                    <div class="item">
                        <ul class="list-posts">

                            @foreach($elements as $e)
                                <li>
                                    <div class="row">
                                        <a href="/{{$event->slug}}/{{$e->slug}}"><img src="/files/news/{{$e->image}}" alt=""></a>
                                        <div class="post-content">
                                            <h2><a href="/{{$event->slug}}/{{$e->slug}}">{{$e->title}}</a></h2>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <ul class="post-tags">
                                            <li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($e->date))}}</li>
                                        </ul>
                                    </div>
                                </li>
                            @endforeach

                        </ul>
                    </div>

                    <div class="center-button">
                        <a href="#">ARCHIVIO NEWS</a>
                    </div>
                    <br><br>
                    <div class="title-section">
                        <h4><span class="no-border">SEGUI CALCIO A 5 ANTEPRIMA SU</span></h4>
                    </div>

                    <div class="row">
                        <div class="col-md-2">
                            <a href="https://it-it.facebook.com/calcioa5anteprima/"><img src="/images/facebook.png"></a>
                        </div>
                        <div class="col-md-2">
                            <a href="https://twitter.com/ca5anteprima"><img src="/images/twitter.png"></a>
                        </div>
                        <div class="col-md-2">
                            <a href="#"><img src="/images/instagram.png"></a>
                        </div>
                    </div>
                </div>



        </div>
    </div>
<br><br>
@stop

@section('extra_js')

<script type="text/javascript">
    $(document).ready(function() {
      $('.gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        closeOnContentClick: false,
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',
        image: {
          verticalFit: true
        },
        gallery: {
          enabled: true
        },
        zoom: {
          enabled: true,
          duration: 300, // don't foget to change the duration also in CSS
          opener: function(element) {
            return element.find('img');
          }
        }

      });
    });
  </script>

@stop