@extends('layouts.web')

@section('page-title') {{ $content->title }} @endsection
@section('meta')
  <meta property="og:url" content="{{url($category->slug.'/blog/'.$content->slug)}}" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="{{$content->title}}" />
  <meta property="og:image" content="{{asset('assets/img/optimized/image-'.$content->images)}}" /> 
  <meta property="og:description" content="{{ strip_tags(substr($content->description, 0, 150))}}..." />
  <meta property="fb:app_id" content="116494819024922" />
  <meta property="article:author" content="268002723664026" />
  <meta property="article:publisher" content="140826800272366402653947357" /> 
  
@endsection
@section('content')

<div class="stricky-header stricked-menu main-menu">
    <div class="sticky-header__content"></div><!-- /.sticky-header__content -->
</div><!-- /.stricky-header -->

<section class="page-header">
  <div class="page-header__bg" style="background-image: url({{asset('assets/images/header.jpg')}});"></div>
  <div class="container">
    <h2>{{$content->title}} </h2>
    <ul class="thm-breadcrumb list-unstyled">
        <li class="text-white"><a href="{{url('/')}}">Inicio</a></li>
        <li>/</li>
        <li><span class="text-white">{{$category->category}}</span></li>
    </ul>
  </div>
</section>

@if (Auth::user())

<div class="container">
  <div class="row py-2">
    <div class="col-6 col-md-3 text-center p-1">
      <a href="{{url('contenido/'.$category->slug.'/editar/'.$content->id)}}" class="btn btn-success btn-block"> 
        <i class="fas fa-edit"></i>  
        Editar
      </a>
    </div>
    @if ($content->status==1)
    <div class="col-6 col-md-3 text-center p-1">
      <a href="{{url('contenido/'.$category->slug.'/status/'.$content->id)}}" class="btn btn-light btn-block">
        <i class="fas fa-eye-slash"></i>  
        Despublicar
      </a>
    </div>
    @else
    <div class="col-6 col-md-3 text-center p-1">
      <a href="{{url('contenido/'.$category->slug.'/status/'.$content->id)}}" class="btn btn-light btn-block">
        <i class="fas fa-eye"></i>  
        Publicar
      </a>
    </div>
    @endif 
    <div class="col-6 col-md-3 text-center p-1">
      <a href="{{url('contenido/eliminar', $content->id )}}" class="btn btn-danger btn-block">
        <i class="fas fa-trash"></i>  
        Eliminar
      </a>
    </div>
    <div class="col-6 col-md-3 text-center p-1">
      <a href="{{route('archivos.edit',$content->slug)}}" class="btn btn-info btn-block">
        <i class="fas fa-file"></i>  
        Adjuntar Archivo
      </a>
    </div>
  </div>
</div>

@endif

@if (isset($content))

  <div class="row pt-3 container-item">
    <div class="col s12 m6">
      @if(Auth::user())
        @if($content->status == 1)
          <div class="card">
        @else
          <div class="card" style="opacity: 0.5;">                       
        @endif
        @else
        <div class="card">
        @endif
        <div class="card-image text-center">
          <img  class="materialboxed" data-caption="{{$content->title}}" src="{{asset('assets/img/optimized/image-'.$content->images)}}">
        </div>
        <div class="container">
          <span class="card-title titlePrimary">
            <small class="text-left">
              <i class="fa fa-user"></i>
              <small>Escrito por:</small> 
              @if ($content->created_by_alias) {{$content->created_by_alias}} @else {{$content->author}} @endif
            @if(Auth::user())
              @if($content->status == 1)
                <span class="btn btn-success"> <i class="fa fa-eye"></i> Contenido Publicado</span>
              @else
                <span class="btn btn-danger" style="opacity:1"> <i class="fa fa-eye-slash"></i> Contenido Despublicado</span>                          
              @endif
            @endif                        
              </small>
          </span>
        </div>
        <div class="card-content">
          <div class="container">
            <div class="text-left timeDescription">
              @php
                echo "<i class='fa fa-calendar' aria-hidden='true'></i> ";
                echo date('d M Y',strtotime($content->publish_up));
                echo "<span class='ml-2 badge badge-secondary'>";
                echo \Carbon\Carbon::now()->subMinutes( \Carbon\Carbon::now()->diffInMinutes( \Carbon\Carbon::parse($content->publish_up)))->diffForHumans();
                echo "</span>";
              @endphp
            </div> 
            {!! $content->description !!}
          </div>
          
          <ul class="collapsible popout container" data-collapsible="accordion">
              
          @if($files->first()) 
            <li>
              <div class="collapsible-header"><i class="fa fa-file-text"></i>Documentos <span class="new badge">{{$files->count() }} Archivos</span></div>
              <div class="collapsible-body">
                <div class="collection">
                  @foreach ($files as $file)
                    <a href="{{asset('assets/files/'.$file->file)}}" target="_new" class="collection-item">
                      <i class="fas fa-file"></i> {{$file->name}}
                      <div class="badge">
                        <i class="fa fa-cloud-download fa-2x" ></i>
                      </div>
                    </a>
                  @endforeach
                </div>
              </div>
            </li>
          @else
            _
          @endif
          @if($images->first()) 
            <li>
              <div class="collapsible-header"><i class="fa fa-picture-o"></i>Imágenes <span class="new badge">{{$images->count() }} Elementos</span></div>
              <div class="collapsible-body">
                {{-- <span>{{$images}}</span> --}}
                <div class="caroussel">
                  <div class="slider">
                    <ul class="slides">      
                      @foreach ($images as $image)
                      <li>
                        <img src="{{asset('assets/img/optimized/image-'.$image->file)}}" alt="{{$image->name}}" class="materialboxed">
                        <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
                        <div class="caption center-align">
                          <h3>{{$image->title}}</h3>
                          <h5 class="light grey-text text-lighten-3">{{$image->description}}</h5>
                          @if (Auth::user())
                            <span class="new badge red">
                                <a href="" class="titleHref"><i class="fa fa-close"></i> Eliminar imagen</a>
                            </span>
                          @endif
                        </div>
                        </li>
                        @endforeach 
                    </ul>
                  </div>
                </div>
              </div>
            </li>
          @endif  
          </ul>

          <div class="container text-center">
            <a target="_new" href="https://wa.me/?text=Hola!, quiero compartirte: {{url($category->slug.'/blog/'.$content->slug)}}" class="btn-whatsapp btn btn-success">
              <i class="fab fa-whatsapp"></i> Compartir por WhatsApp
            </a>
            <div class="d-block fb-like" data-href="{{url($category->slug.'/blog/'.$content->slug)}}" data-width="500" data-layout="button" data-action="like" data-size="large" data-show-faces="true" data-share="true">Me Gusta </div>  
          </div>
          <div class="container text-center">
            <div class="fb-comments" data-href="{{url($category->slug.'/blog/'.$content->slug)}}" data-numposts="5"></div>                      
          </div>

        </div>
      </div>
    </div>
  </div>

  <hr>
@else
    @include('partials.noData')
@endif

@stop

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function(){
          $('.parallax').parallax();
        });
        $(document).ready(function(){
          $('.carousel').carousel();
        });
        $(document).ready(function(){
          $('.slider').slider();
        });

    </script> 

 @include('partials.share')
  
@stop