@extends('layouts.app')


@push('head')
   
@endpush
@section('breadcrumb')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
    <li class="breadcrumb-item"><a href="{{ route('noticias.index')}}">Noticias</a></li>
    <li class="breadcrumb-item active" aria-current="page">Ver Noticia</li>
  </ol>
</nav>
@stop


@section('content')
    <div class="bgc-white p-20 bd">
        <h3 class="text-center">{{ $noticia->titulo }}</h3>

        <div class="d-flex1 align-items-center1 justify-content-center1">
            <div class="card news-article">
                <div class="card-body">
                    <div>
                        @if($noticia->getMedia('portada')->count() > 0)
                            <div class="mb-3">
                                <img src="{{ $noticia->getMedia('portada')->first()->getUrl() }}" class="img-fluid"
                                     alt="Portada">
                            </div>
                        @endif

                        <div>
                            <div>Por: <b>{{ $noticia->createdBy->full_name }}</b></div>
                            <div>Creado: {{ fechaFormato($noticia->created_at, 'd/m/Y') }}</div>
                        </div>

                        <hr>

                        <div class="text-justify">                        
                            {!! $noticia->contenido !!}
                        </div>
                    </div>
                    <div class="d-flex justify-content-end mt-1"><a href="javascript:void(0)"  onClick="likeNoticia({{$noticia->id}})"><i class="fa fa-2x fa-thumbs-up"></i> <span id="like-noticia-{{$noticia->id}}">{{ $noticia->likes_count}}</span></a></div>
                </div>
                
            </div>

        </div>

        <div class="card border-light mb-3" >
            <div class="card-header"><h4>Comentarios</h4></div>
            <div class="card-body bgc-grey-200 pt-1 pl-0 pr-0">

            @foreach($noticia->comentarios as $comentario)
@php
$tab=0;
//$noticia->comentarios->dump()
@endphp
<div class="col-12" id="comentario-{{$comentario->id}}">
        <div class="media bgc-white p-5 mB-10 rounded" style="margin-left:0px">
            <div class="media-left pr-2" style="width:75px;">            
            <p style="
                overflow-wrap: break-word;
                    text-transform: capitalize;
                    text-align: center;
                    font-size: 11px;
                    line-height: 1em;
                ">
                <img src="{{$comentario->usuario->imagenPerfil() ?? 'http://fakeimg.pl/50x50' }}" class="media-object rounded-circle" style="width:40px">
                {{ ucfirst($comentario->usuario->full_name) }}
            </p>
            </div>
            <div class="media-body">
            
            <p class="">
                {{$comentario->comentario}}
            </p>
            <div class="d-flex justify-content-end mt-1"><a href="javascript:void(0)" data-toggle="modal" data-target="#modalComentario" onclick="modal(this)" data-parentid="{{$comentario->id}}" class="btn btn-link">Responder</a></div>
            
            </div>
        </div>
    </div>
                @if($comentario->children->count() > 0)
                    @include('noticia::comentarios', ['comentarios' => $comentario->children,'tab'=>$tab])
                @endif
            @endforeach    
            <div class="d-flex justify-content-end mt-1"><a href="javascript:void(0)" id="boton-comentar" onclick="modal(this)" class="btn btn-link" data-toggle="modal" data-parentid="" data-target="#modalComentario">Comentar</a></div>            
            </div>
        </div>
    </div>


    <!-- Modal -->
<div class="modal fade" id="modalComentario" tabindex="-1" role="dialog" aria-labelledby="modalComentarioLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form action="{{ route('noticias.comentar',['noticia'=>$noticia])}}" method="post">
        @csrf
        <input type="hidden" name="parentid" value="">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalComentarioLabel">-</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            
        <textarea name="comentario" class="form-control"></textarea>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn btn-primary">Guardar</button>
        </div>
        </div>
    </form>
  </div>
</div>
@endsection

@push('post-scripts')
    <script>
     function modal(event) {

            var button = $(event) 
            var parentid = button.data('parentid');
            var modal = $("#modalComentario");
            modal.find('input[name=parentid]').val(parentid);
            if(parentid!="")
                modal.find("#modalComentarioLabel").html("Responder comentario");
            else
                modal.find("#modalComentarioLabel").html("Agregar Comentario");    
    }
    function likeNoticia(id){
                    $.post(
                        '{{ route('noticias.like') }}',{'idnoticia': id,"_token": "{{ csrf_token() }}"} 
                    ).done(function(res){
                            $("#like-noticia-"+id).animate({ opacity: 0 }, 0);
                            $("#like-noticia-"+id).animate({ opacity: 1}, 1000);
                            $("#like-noticia-"+id).html(res.likes);
  
                        }
                    );
                }
        
    </script>

@endpush