File: /var/www/html/xfacil.desafio.com.py/resources/views/livewire/frontcurso.blade.php
<div>
@php
use App\Models\Emoticon;
use Illuminate\Support\Facades\DB;
@endphp
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row" style="padding:20px;">
<div class="col-md-5">
<br><h1 style="color:#fff;text-align:left;font-size: 20px;text-shadow: 2px 2px 2px #888888;"><img src="/images/cursos/{{ $curso->logo }}" width="50px"> <b>{{ $curso->titulo }}</b></h1><br />
<div class="enlace" wire:click="importancia">
<img src="/imagenes/importancia.png" width="20px" style="display:inline;"> IMPORTANCIA
</div>
<div class="enlace" wire:click="alcance">
<img src="/imagenes/alcance.png" width="20px" style="display:inline;"> ALCANCE
</div>
<div class="enlace" wire:click="objetivo">
<img src="/imagenes/objetivo.png" width="20px" style="display:inline;"> OBJETIVO
</div>
<div class="enlace" wire:click="capsula">
<img src="/imagenes/cantidad-capsulas.png" width="20px" style="display:inline;"> CÁPSULAS
</div>
<div class="enlace" wire:click="tutor">
<img src="/imagenes/tutor.png" width="20px" style="display:inline;"> TUTOR
</div>
<div class="enlace" wire:click="recurso">
<img src="/imagenes/recurso-adicional.png" width="20px" style="display:inline;"> RECURSO ADICIONAL
</div>
<div class="enlace" wire:click="apuntes">
<img src="/imagenes/mis-apuntes.png" width="20px" style="display:inline;"> MIS APUNTES
</div>
<div class="enlace" wire:click="reflexion">
<img src="/imagenes/reflexion.png" width="20px" style="display:inline;"> EVALUACIÓN
</div>
<div class="enlace" wire:click="podcast">
<img src="/imagenes/podcast.png" width="20px" style="display:inline;"> PODCAST
</div>
</div>
<div class="col-md-7"><br>
@if($importancia)
<h3 align="center" style="color:white;text-shadow: 2px 2px 2px #888888;">IMPORTANCIA</h3>
<div style="background-color: white; padding: 10px; border-radius: 50px;whith: 100%;">
<?= $importancia ?>
</div>
@endif
@if($alcance)
<h3 align="center" style="color:white;text-shadow: 2px 2px 2px #888888;">ALCANCE</h3>
<div style="background-color: white; padding: 10px; border-radius: 50px;whith: 100%;">
<?= $alcance ?>
</div>
@endif
@if($objetivo)
<h3 align="center" style="color:white;text-shadow: 2px 2px 2px #888888;">OBJETIVO</h3>
<div style="background-color: white; padding: 10px; border-radius: 50px;whith: 100%;">
<?= $objetivo ?>
</div>
@endif
<div {{ ($capsula) ? 'style=display:inline;' : 'style=display:none;' }}>
<div class="row">
<div class="col-md-6">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-interval="false" data-ride="carousel" data-pause="hover">
<div class="carousel-inner">
@foreach($capsulas as $cap)
@php $estado = 'emocion'; @endphp
@if($emo = Emoticon::where('curso_id',$curso_id)->where('usuario_id',Auth::user()->id)->where('capsula_id',$cap->id)->first())
@php
$estado = $emo->emocion;
@endphp
@endif
@php
$megusta = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$cap->id)->where('emocion','me-gusta')->count();
$meencanta = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$cap->id)->where('emocion','me-encanta')->count();
$medivierte = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$cap->id)->where('emocion','me-divierta')->count();
$measombra = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$cap->id)->where('emocion','me-asombra')->count();
$meentristece = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$cap->id)->where('emocion','me-entristece')->count();
$meenoja = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$cap->id)->where('emocion','me-enoja')->count();
@endphp
@if($cap->capsula == $capsula)
<div class="carousel-item active">
@else
<div class="carousel-item">
@endif
<h3 align="center" style="color:white;text-shadow: 2px 2px 2px #888888;">{{ $cap->titulo }}</h3>
<center><video controlslist="nodownload" style="width: 100%;" src="/videos/capsula/{{ $cap->capsula }}" controls></video></center>
<div style="background-color: white;padding: 10px;border-radius: 50px;width:100%;margin: 0 auto;" align="center">
<div class="row">
<div class="col-1">
<img src="/imagenes/reacciones/me-gusta.png" wire:click="addemocion('{{ $cap->id }}','me-gusta','{{$estado}}')" class="emoticones {{ ($estado == 'me-gusta' ? 'activar':'') }}" alt="" width="20px">
</div>
<div class="col-1">
<a href="" data-toggle="modal" data-target="#emocionesModalScrollable" wire:click="envioid({{$cap->id}})"><small>({{$megusta}})</small></a>
</div>
<div class="col-1">
<img src="/imagenes/reacciones/me-encanta.png" wire:click="addemocion('{{ $cap->id }}','me-encanta','{{$estado}}')" class="emoticones {{ ($estado == 'me-encanta' ? 'activar':'') }}" alt="" width="20px">
</div>
<div class="col-1">
<a href="" data-toggle="modal" data-target="#emocionesModalScrollable" wire:click="envioid({{$cap->id}})"><small>({{$meencanta}})</small></a>
</div>
<div class="col-1">
<img src="/imagenes/reacciones/me-divierta.png" wire:click="addemocion('{{ $cap->id }}','me-divierta','{{$estado}}')" class="emoticones {{ ($estado == 'me-divierta' ? 'activar':'') }}" alt="" width="20px">
</div>
<div class="col-1">
<a href="" data-toggle="modal" data-target="#emocionesModalScrollable" wire:click="envioid({{$cap->id}})"><small>({{$medivierte}})</small></a>
</div>
<div class="col-1">
<img src="/imagenes/reacciones/me-asombra.png" wire:click="addemocion('{{ $cap->id }}','me-asombra','{{$estado}}')" class="emoticones {{ ($estado == 'me-asombra' ? 'activar':'') }}" alt="" width="20px">
</div>
<div class="col-1">
<a href="" data-toggle="modal" data-target="#emocionesModalScrollable" wire:click="envioid({{$cap->id}})"><small>({{$measombra}})</small></a>
</div>
<div class="col-1">
<img src="/imagenes/reacciones/me-entristece.png" wire:click="addemocion('{{ $cap->id }}','me-entristece','{{$estado}}')" class="emoticones {{ ($estado == 'me-entristece' ? 'activar':'') }}" alt="" width="20px">
</div>
<div class="col-1">
<a href="" data-toggle="modal" data-target="#emocionesModalScrollable" wire:click="envioid({{$cap->id}})"><small>({{$meentristece}})</small></a>
</div>
<div class="col-1">
<img src="/imagenes/reacciones/me-enoja.png" wire:click="addemocion('{{ $cap->id }}','me-enoja','{{$estado}}')" class="emoticones {{ ($estado == 'me-enoja' ? 'activar':'') }}" alt="" width="20px">
</div>
<div class="col-1">
<a href="" data-toggle="modal" data-target="#emocionesModalScrollable" wire:click="envioid({{$cap->id}})"><small>({{$meenoja}})</small></a>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div><br>
<div class="row">
<div class="col-md-6" align="left">
<a href="#carouselExampleFade" role="button" data-slide="prev">
<img src="/imagenes/imgsystem/arrow.gif" style="width:30%;-webkit-transform:rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);" alt="">
</a>
</div>
<div class="col-md-6" align="right">
<a href="#carouselExampleFade" role="button" data-slide="next">
<img src="/imagenes/imgsystem/arrow.gif" style="width:30%;" alt="">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<form>
<div class="col-md-12">
<div class="form-group">
<label><b style="color:white;;text-shadow: 2px 2px 2px #888888;">Apuntes:</b></label>
<div wire:ignore>
<textarea class="form-control summernote" style="background-color:white;" wire:model="apunte" rows="3"></textarea>
</div>
@error('apunte') <span class="text-danger">{{ $message }}</span>@enderror
</div>
@if($apunteid)
<center><button wire:click.prevent="updatenota({{$apunteid}})" class="btn btn-success">Actualizar</button></center>
@else
<center><button wire:click.prevent="guardarnota()" class="btn btn-success">Guardar</button></center>
@endif
</div>
</form>
<div class="col-md-12"><br>
<div class="card">
<div class="card-body">
<small>{{count($apuntess)}} comentarios</small><hr>
@foreach($apuntess as $apu)
<div class="row">
<div class="col-6">
<em class="blockquote-footer"><b>editado el: </b>{{$apu->updated_at}}</em><hr>
</div>
<div class="col-6" align="right">
<button wire:click="editapunte({{ $apu->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{{ $apu->id }}"><i class="fa fa-trash"></i></button>
<!-- Modal -->
<div class="modal fade" id="exampleModal{{$apu->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 apunte</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 apunte?</p></center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" wire:click="deleteapunte({{ $apu->id }})" class="btn btn-danger" data-dismiss="modal">Eliminar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<?= $apu->apunte ?> <hr>
@endforeach
</div>
</div>
</div><br>
</div>
</div>
</div>
@if($tutor)
<h3 align="center" style="color:white;text-shadow: 2px 2px 2px #888888;">TUTOR</h3>
<div style="background-color: white; padding: 10px; border-radius: 50px;whith: 100%;">
<?= $tutor ?>
</div>
@endif
@if($recurso)
<h3 align="center" style="color:white;text-shadow: 2px 2px 2px #888888;">RECURSO ADICIONAL</h3>
<div style="background-color: white; padding: 10px; border-radius: 50px;whith: 100%;">
<?= $recurso ?>
</div>
@endif
<div {{ ($apuntes) ? 'style=display:inline;' : 'style=display:none;' }}>
<form>
<div class="col-md-12">
<div class="form-group">
<label><b>Mis Apuntes:</b></label>
<div wire:ignore>
<textarea class="form-control summernote" style="background-color:white;" wire:model="apunte" rows="3"></textarea>
</div>
@error('apunte') <span class="text-danger">{{ $message }}</span>@enderror
</div>
@if($apunteid)
<center><button wire:click.prevent="updatenota({{$apunteid}})" class="btn btn-success">Actualizar</button></center>
@else
<center><button wire:click.prevent="guardarnota()" class="btn btn-success">Guardar</button></center>
@endif
</div>
</form>
<div class="col-md-12"><br>
<div class="card">
<div class="card-body">
@foreach($apuntess as $apu)
<div class="row">
<div class="col-6">
<em class="blockquote-footer"><b>editado el: </b>{{$apu->updated_at}}</em><hr>
</div>
<div class="col-6" align="right">
<button wire:click="editapunte({{ $apu->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{{ $apu->id }}"><i class="fa fa-trash"></i></button>
<!-- Modal -->
<div class="modal fade" id="exampleModal{{$apu->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 apunte</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 apunte?</p></center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" wire:click="deleteapunte({{ $apu->id }})" class="btn btn-danger" data-dismiss="modal">Eliminar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<?= $apu->apunte ?> <hr>
@endforeach
</div>
</div>
</div><br>
</div>
@if($reflexion)
@foreach($reflexion as $ref)
<br><h3 align="center" style="color:white;text-shadow: 2px 2px 2px #888888;">{{ $ref->for_nom }}</h3>
<div style="background-color: white; padding: 10px; border-radius: 50px;whith: 100%;">
<?= $ref->for_info ?> <br><hr>
@php $completo = 0; @endphp
@foreach($respuestas as $res)
@if($ref->id == $res->id)
@php $completo = 1; @endphp
@endif
@endforeach
@if($completo == 0)
<center><a href="/e-learning/curso/{{ $ref->id }}/formulario"><button class="btn btn-success">Realizar Evaluación</button></a></center>
@else
<center><p>Intento realizado</p></center>
@foreach($feed as $fe)
@if($fe->formulario_id == $res->id)
<b>Feedback:</b>
<p>{{$fe->feedback}}</p>
@endif
@endforeach
@endif
</div>
@endforeach
@endif
@if($podcast)
<h3 align="center" style="color:white;text-shadow: 2px 2px 2px #888888;">PODCAST</h3>
<div style="background-color: white; padding: 10px; border-radius: 50px;whith: 100%;">
<?= $podcast ?>
</div>
@endif
</div>
<div>
<br><br>
</div>
</div>
<!-- Modal -->
@php
$megusta = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$capsula_id)->where('emocion','me-gusta')->count();
$meencanta = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$capsula_id)->where('emocion','me-encanta')->count();
$medivierte = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$capsula_id)->where('emocion','me-divierta')->count();
$measombra = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$capsula_id)->where('emocion','me-asombra')->count();
$meentristece = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$capsula_id)->where('emocion','me-entristece')->count();
$meenoja = Emoticon::where('curso_id',$curso_id)->where('capsula_id',$capsula_id)->where('emocion','me-enoja')->count();
$emociones = DB::table('emoticons as e')
->join('users as u','e.usuario_id','u.id')
->select('u.name','e.*')
->where('curso_id',$curso_id)->where('capsula_id',$capsula_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>
@section('js')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>
$('.summernote').summernote({
height: 50,
codemirror: {
theme: 'monokai'
},
callbacks: {
onChange: function(contents, $editable) {
@this.set('apunte', contents);
}
}
});
Livewire.on('apunte', apunte => {
$('.summernote').summernote('code', apunte);
console.log(apunte);
});
</script>
@stop
</div>