@php
  $URL_ATUAL = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
@endphp
@extends('templates.prefeitura4.layout')

@section('header')
  <!-- You can use Open Graph tags to customize link previews.
            Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url" content="{{ url('noticia/' . $pages->url) }}" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="{{ $account->name }} - {{ $pages->titulo }}" />
  <meta property="og:description" content="{{ $pages->titulo }}" />
  <meta property="og:image" content="{{ asset($pages->imagem) }}" />
@endsection

@section('content')

  <div class="noticias-index">
    <div class="noticias-index-title">
      <h2 class="font40">{{ $pages->titulo }}</h2>
    </div>
    <div class="noticias-index-subtitle font20">{{$pages->descricao}}</div>
    <div class="noticias-index-content">
      <div class="noticias-index-header">
        <div class="noticias-index-updateat font14">
          @php
            $entrada = new DateTime(date('Y-m-d H:i:s'));
            $saida = new DateTime($pages->updated_at);
            $intervalo = $saida->diff($entrada);
            // dd($intervalo);
            // $intervalo = DateTime::createFromFormat($formato, $intervalo);
          @endphp
          {{ $pages->created_at }} Atualizado há
          @if ($intervalo->y != 0)
            {{ $intervalo->y }} anos
          @endif
          @if ($intervalo->m != 0)
            {{ $intervalo->m }} meses
          @endif
          @if ($intervalo->d != 0)
            {{ $intervalo->d }} dias
          @endif
          @if ($intervalo->h != 0)
            {{ $intervalo->h }} horas
          @endif
          @if ($intervalo->i != 0)
            {{ $intervalo->i }} minutos
          @endif
          @if ($intervalo->s != 0)
            {{ $intervalo->s }} segundos
          @endif
        </div>
        <div class="type linha">
          <i class="{{ $pages->icon }}" aria-hidden="true"></i>
          <p class="text-uppercase font12">{{ $pages->name }}</p>
          <div class="share">
            <!-- Button trigger modal -->
            <a href="#" type="button" data-toggle="modal" data-target="#exampleModal">
              <i class="fa fa-share-alt"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="noticias-index-content-body font14">
        <img src="{{ $pages->imagem->encode('data-url') }}" alt="{{ $pages->url }}">
        {!! $pages->conteudo !!}
      </div>
      @if (isset($imagens))
        <div class="container noticias-index-content-footer">
          <div class="row">
            <div class="col-sm-12">
              <div class="carousel box-carousel " id="box-carousel" style="margin: 0; padding: 0;">
                @foreach ($imagens as $imagem)
                  <div>
                    <div class="noticias-box">
                      <img class="img-fluids" src="{{ $imagem->url->encode('data-url') }}" style=" width:100%; height:100%;">
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      @endif
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Compartilhar</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container">
            {{-- ATENTION --}}
            <div class="modal-social">
              <a href="#">
                <div class="social-buttons">
                  <i class="fa fa-envelope" aria-hidden="true"></i>
                </div>
              </a>
              <a href="#">
                <div class="social-buttons">
                  <i class="fa fa-facebook" aria-hidden="true"></i>
                </div>
              </a>
              <a href="#">
                <div class="social-buttons">
                  <i class="fa fa-whatsapp" aria-hidden="true"></i>
                </div>
              </a>
              <a href="#">
                <div class="social-buttons">
                  <i class="fa fa-twitter" aria-hidden="false"></i>
                </div>
              </a>
            </div>
            <div class="social-input">
              <input type="url" readonly="readonly" id="social-input" value={{ $URL_ATUAL }}>
              <button class="center" onclick="copiarTexto()">
                <i class="fa fa-copy" aria-hidden="true"></i> &nbsp;
              </button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
@endsection

@section('post-script')
  <script>
    function copiarTexto() {
      let textoCopiado = document.getElementById("social-input");
      textoCopiado.select();
      textoCopiado.setSelectionRange(0, 99999)
      document.execCommand("copy");
      alert("Link Copiado Com Sucesso!");
    }
  </script>

  <script>
    $(document).ready(function() {
      $('.box-carousel').slick({
        dots: false,
        arrows: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        prevArrow: "<button type='button' class='mission-prev-arrow'></button>",
        nextArrow: "<button type='button' class='mission-next-arrow'></button>"
      });
    });
  </script>

  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
@endsection