@extends('layouts.app')
@php
$edicion = false
@endphp


@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>Noticias  
    @can('create', Modules\Noticia\Entities\Noticia::class)
        <a class="btn btn-primary pull-right" href="{{ route('noticias.create') }}">Crear Noticia</a>
        @php
        $edicion = true
        @endphp
    @endcan
    </h3>
<div>




<section class="noticias">
                    <div class="row ">
                            @foreach($noticias as $noticia)
                            <div class="col-sm-12 col-md-6 col-lg-4 mb-4 p-5">
                            <div class="card text-dark card-has-bg click-col" style="background-image:url('{{ (($noticia->getMedia('portada')->first()!=null)?$noticia->getMedia('portada')->first()->getUrl() : asset('img/logo.png')) }}');">
                                <img class="card-img d-none" src="{{ (($noticia->getMedia('portada')->first()!=null)?$noticia->getMedia('portada')->first()->getUrl() : asset('img/logo.png')) }}" alt="{{$noticia->titulo}}">
                                
                                <div class="card-img-overlay d-flex flex-column">
                                    @if($edicion)
                                        <div class="dropdown pull-right">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton-{{ $noticia->id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Acciones</button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-{{ $noticia->id }}">
                                                <a class="dropdown-item" href="{{ route('noticias.show', ['noticia' => $noticia]) }}">Ver</a>
                                                <a class="dropdown-item" href="{{ route('noticias.edit', ['noticia' => $noticia]) }}">Editar</a>
                                                @if($noticia->publicado())
                                                    <form  action="{{ route('noticias.borrador', ['noticia' => $noticia]) }}" method="post">
                                                        @csrf
                                                        <button type="submit" class="dropdown-item">Cambiar a borrador</button>
                                                    </form>
                                                @else
                                                    <form action="{{ route('noticias.publicar', ['noticia' => $noticia]) }}" method="post">
                                                        @csrf
                                                        <button type="submit" class="dropdown-item">Publicar</button>
                                                    </form>
                                                @endif
                                                <form action="{{ route('noticias.destroy', ['id' => $noticia->id]) }}" method="post">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button class="dropdown-item">Borrar</button>
                                                </form>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="text-light">
                                    <small><i class="far fa-clock"></i> {{ fechaFormato($noticia->created_at, 'd/m/Y') }}</small>
                                        <h4 class="card-title mt-0 "><a class="text-white" href="{{ route('noticias.show', ['noticia' => $noticia]) }}">{{ $noticia->titulo}}</a></h4>         
                                    </div>
                                    <div class="position-absolute text-light" style="bottom: 0;right: 0;">
                                        <div class="m-10">
                                            <a class="text-light" href="javascript:void(0)" @click="likeNoticia({{$noticia->id}})">
                                                <i class="fa-regular fa-thumbs-up"></i> <span id="like-noticia-{{$noticia->id}}">{{ $noticia->likes_count}}</span>
                                            </a>

                                            <a class="text-light" href="{{ route('noticias.show', ['noticia' => $noticia]) }}#boton-comentar">
                                                <i class="fa-regular fa-comments"></i> {{ $noticia->allcomentarios_count}}
                                            </a>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                            @endforeach
                    </div>

                    </section>



        <div class=" card-group">
   
                @foreach($noticias as $noticia)
                    @if($loop->index % 3 ==0)
                        </div><div class=" card-group">
                    @endif
                    <div class="card m-1 col-sm-4 col-12">
                        <a href="{{ route('noticias.show', ['noticia' => $noticia->id]) }}"><img src="
                        @if($noticia->getMedia('portada')->first()!=null )
                            {{ $noticia->getMedia('portada')->first()->getUrl() }}
                        @else
                            {{ asset('img/logo.png') }}
                        @endisset
                        " class="card-img-top" alt="..."></a>
                        <div class="card-body">
                           <a href="{{ route('noticias.show', ['noticia' => $noticia->id]) }}"> <h5 class="card-title">{{ $noticia->titulo }}</h5></a>
                            <p class="card-text">{{ $noticia->extracto() }}</p>
                            <p class="font-weight-lighter">
                            Creado por: {{ $noticia->createdBy->name }} el {{ fechaFormato($noticia->created_at, 'j \d\e F Y H:m:s') }}<br/>
                            Act. por: {{ $noticia->updatedBy->name }} el {{ fechaFormato($noticia->updated_at, 'j \d\e F Y H:m:s') }}<br/>
                            Estado:
                                @if($noticia->publicado())
                                Publicado
                                @else 
                                En Borrador
                                @endif
                            </p>
                        </div>
                       
                        <div class="card-footer  text-muted"> 
                        <a href="javascript:void(0)"  @click="likeNoticia({{$noticia->id}})" class="pull-left"><i class="fa fa-2x fa-thumbs-up"></i> <span id="like-noticia-{{$noticia->id}}">{{ $noticia->likes_count}}</span></a>
                        <a href="{{ route('noticias.show', ['noticia' => $noticia]) }}#boton-comentar" class="pull-left"><i class="fa fa-2x fa-comments"></i> {{ $noticia->allcomentarios_count}}</a>
                            @if($edicion)
                            <div class="dropdown pull-right">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton-{{ $noticia->id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Acciones</button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton-{{ $noticia->id }}">
                                    <a class="dropdown-item" href="{{ route('noticias.show', ['noticia' => $noticia]) }}">Ver</a>
                                    <a class="dropdown-item" href="{{ route('noticias.edit', ['noticia' => $noticia]) }}">Editar</a>
                                    @if($noticia->publicado())
                                        <form  action="{{ route('noticias.borrador', ['noticia' => $noticia]) }}" method="post">
                                            @csrf
                                            <button type="submit" class="dropdown-item">Cambiar a borrador</button>
                                        </form>
                                    @else
                                        <form action="{{ route('noticias.publicar', ['noticia' => $noticia]) }}" method="post">
                                            @csrf
                                            <button type="submit" class="dropdown-item">Publicar</button>
                                        </form>
                                    @endif
                                    <form action="{{ route('noticias.destroy', ['id' => $noticia->id]) }}" method="post">
                                        @csrf
                                        @method('DELETE')
                                        <button class="dropdown-item">Borrar</button>
                                    </form>
                                </div>
                            </div>
                            @endif
                        </div>
                       
                    </div>    
                @endforeach
    </div>
    {{ $noticias->links() }}
@endsection


@push('pre-scripts')
    <script>
    window.pageMix.push({
        methods: {
            onBorrarNoticia (id) {
                if (confirm('¿Borrar noticia?')) {
                    axios.delete('{{ route('noticias.index')  }}' + id)
                        .then(res => {
                            window.location.reload()
                        })
                        .catch(err => {
                            console.log(err)
                        })
                }
            },
            likeNoticia(id){
                    this.$http.post(
                        '{{ route('noticias.like') }}',{'idnoticia': id} 
                    ).then(
                        res => {
                            $("#like-noticia-"+id).animate({ opacity: 0 }, 0);
                            $("#like-noticia-"+id).animate({ opacity: 1}, 1000);
                            $("#like-noticia-"+id).html(res.data.likes);
  
                        }
                    ).catch(
                        err => {

                            if (err.response.status === 500) {
                                alert(err.response.data.message)
                            }

                            if (err.response.status === 422) {
                                alert(err.response.data.errors)
                            }
                        }
                    );
                },
        }
    })
    </script>
@endpush