File: /var/www/html/xfacil.desafio.com.py/resources/views/livewire/frontnoticias.blade.php
<div>
@php
use Illuminate\Support\Facades\DB;
@endphp
<!-- Theme style -->
<style>
.brands {
width: 100%;
padding-top: 90px;
padding-bottom: 90px
}
.brands_slider_container {
height: 130px;
border: solid 1px #e8e8e8;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
padding-left: 97px;
padding-right: 97px;
background: #fff
}
.brands_slider {
height: 100%;
margin-top: 5px
}
.brands_item {
height: 100%
}
.brands_item video {
max-width: 200px;
}
.brands_nav {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding: 5px;
cursor: pointer
}
.brands_nav i {
color: #e5e5e5;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
.brands_nav:hover i {
color: #676767;
}
.brands_prev {
left: 40px;
font-size:32px;
}
.brands_next {
right: 40px;
font-size:32px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<style>
.col{
background-color: white;margin: 5px;color: rgb(37, 37, 90);
}
div.enlace{
margin: 10px;
padding: 5px;
background: linear-gradient(90deg, rgba(255,30,0,0.3701855742296919) 0%, rgba(156,70,59,0.7315301120448179) 0%, rgba(51,74,128,0.8183648459383753) 100%);
color:white;
border-radius:50px;
}
div.enlace:hover{
background: rgb(255,30,0);
background: linear-gradient(90deg, rgba(255,30,0,1) 0%, rgba(223,73,53,1) 0%, rgba(255,247,0,1) 100%);
cursor: pointer;
}
.emoticones:hover{
transform: scale(1.3);
cursor: pointer;
}
.activar{
transform: scale(1.3);
filter: drop-shadow(5px 5px 10px #444);
}
</style>
<div class="row">
<div class="col-md-12">
<div class="brands">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 style="color:white;text-align:center;">{{ $titulo }}</h3>
<center><video src="/videos/noticia/{{ $video }}" width="70%" controls></video></center>
</div>
<div class="col">
<div class="brands_slider_container" wire:ignore>
<div class="owl-carousel owl-theme brands_slider">
@foreach($noticias as $not)
<div class="owl-item" >
<div class="brands_item d-flex flex-column justify-content-center" wire:click="cambiar({{ $not->id }})"><video src="/videos/noticia/{{ $not->video }}"></video></div>
</div>
@endforeach
</div> <!-- Brands Slider Navigation -->
<div class="brands_nav brands_prev"><i class="fa fa-toggle-left"></i></div>
<div class="brands_nav brands_next"><i class="fa fa-toggle-right"></i></div>
</div>
</div>
<div class="col-md-12">
<form>
<div class="form-group"><br>
<label><b style="color:white;text-shadow: 2px 2px 2px #888888;">{{count($comentarios)}} Comentarios:</b></label>
<div wire:ignore>
<textarea class="form-control summernote" style="background-color:white;" wire:model="comentario" rows="3"></textarea>
</div>
@error('comentario') <span class="text-danger">{{ $message }}</span>@enderror
</div>
@if($updateMode)
<center><button wire:click.prevent="updatecomentario()" class="btn btn-success">Actualizar</button></center>
@else
<center><button wire:click.prevent="guardarcomentario()" class="btn btn-success">Guardar</button></center>
@endif
</form>
</div>
<div class="col-md-12"><br>
<div class="card">
<div class="card-body">
@foreach($comentarios as $com)
<div class="row">
<div class="col-6">
<em class="blockquote-footer"><b>editado el: </b>{{$com->updated_at}} <b> - por: </b>{{$com->name}}</em><hr>
</div>
<div class="col-6" align="right">
@if($com->usuario_id == Auth::user()->id)
<button wire:click="editcomentario({{ $com->id }})" class="btn btn-sm btn-info"><i class="fa fa-edit"></i></button>
<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal{{ $com->id }}"><i class="fa fa-trash"></i></button>
<!-- Modal -->
<div class="modal fade" id="exampleModal{{$com->id}}" 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">Eliminar comentario</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<center><p>¿Realmente quiere eliminar el comentario?</p></center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" wire:click="deletecomentario({{ $com->id }})" class="btn btn-danger" data-dismiss="modal">Eliminar</button>
</div>
</div>
</div>
</div>
@endif
</div>
</div>
<?= $com->comentario ?> <hr>
@endforeach
</div>
</div>
</div><br>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
@php
$emociones = DB::table('emoticonnoticias as e')
->join('users as u','e.usuario_id','u.id')
->select('u.name','e.*')
->where('noticia_id',$not_id)
->where('emocion','LIKE','%'.$this->emocion.'%')->get();
@endphp
<div class="modal fade" wire:ignore.self id="emocionesModalScrollable" tabindex="-1" role="dialog" aria-labelledby="emocionesModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="emocionesModalScrollableTitle">Reacciones</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<ol>
@foreach($emociones as $emoci)
<ul>
@if($emoci->emocion == "me-gusta")
<img src="/imagenes/reacciones/me-gusta.png" width="20px"> {{$emoci->name}}
@endif
@if($emoci->emocion == "me-encanta")
<img src="/imagenes/reacciones/me-encanta.png" width="20px"> {{$emoci->name}}
@endif
@if($emoci->emocion == "me-divierta")
<img src="/imagenes/reacciones/me-divierta.png" width="20px"> {{$emoci->name}}
@endif
@if($emoci->emocion == "me-asombra")
<img src="/imagenes/reacciones/me-asombra.png" width="20px"> {{$emoci->name}}
@endif
@if($emoci->emocion == "me-entristece")
<img src="/imagenes/reacciones/me-entristece.png" width="20px"> {{$emoci->name}}
@endif
@if($emoci->emocion == "me-enoja")
<img src="/imagenes/reacciones/me-enoja.png" width="20px"> {{$emoci->name}}
@endif
</ul>
@endforeach
</ol>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
if($('.brands_slider').length){
var brandsSlider = $('.brands_slider');
brandsSlider.owlCarousel({
loop:true,
autoplay:false,
autoplayTimeout:5000,
nav:false,
dots:false,
autoWidth:true,
items:1,
margin:42
});
if($('.brands_prev').length){
var prev = $('.brands_prev');
prev.on('click', function(){
brandsSlider.trigger('prev.owl.carousel');
});
}
if($('.brands_next').length){
var next = $('.brands_next');
next.on('click', function(){
brandsSlider.trigger('next.owl.carousel');
});
}
}
});
</script>
</div>