Sindbad~EG File Manager

<div>
    <style>
        #boton{
            position: fixed;
            z-index: 1;
            left: 1%;
            bottom: 5%;
            border: 1px solid rgba(0,0,0,.1);
            border-radius: .25rem;
            box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.1);
            width: 50px;
            height: 50px;
            background-color: #ffffff;
        }
        #boton img{
            width: 30px;
            height: 30px;
            margin-left: -3px;
            margin-top: -35px;
        }
        #boton span{
            top: -10px !important;
            right: -15px;
        }
        #mitoast {
            visibility: hidden;
            position: fixed;
            z-index: 1;
            left: 3.5%;
            bottom: 10%;
            border: 1px solid rgba(0,0,0,.1);
            border-radius: .25rem;
            box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.1);
            max-width: 310px;
            width: 310px;
            background-color: #ffffff;
            opacity: 1;
            height: 500px;
            max-height: 500px;
        }
        
        #mitoast.mostrar {
            visibility: visible;
        }
        
        @-webkit-keyframes fadein {
            from {right: 0; opacity: 0;} 
            to {right: 2.5%; opacity: 1;}
        }
        
        @keyframes  fadein {
            from {right: 0; opacity: 0;}
            to {right: 2.5%; opacity: 1;}
        }
        
        @-webkit-keyframes fadeout {
            from {right: 2.5%; opacity: 1;} 
            to {right: 0; opacity: 0;}
        }
        
        @keyframes  fadeout {
            from {right: 2.5%; opacity: 1;}
            to {right: 0; opacity: 0;}
        }
        
        #mitoast.cerrar {
            /* visibility: visible; */
            -webkit-animation: fadeout 0.5s 4.8s;
            animation: fadeout 0.5s 4.8s;
        }
        
        @-webkit-keyframes fadeout {
            from {right: 2.5%; opacity: 1;} 
            to {right: 0; opacity: 0;}
        }
        
        @keyframes  fadeout {
            from {right: 2.5%; opacity: 1;}
            to {right: 0; opacity: 0;}
        }
    </style>

    <button type="button" id="boton" class="btn btn-primary mostrar" onclick="mostrarToast()">
        <?php if(count(auth()->user()->unreadNotifications)): ?>
            <span class="badge badge-danger"><?php echo e(count(auth()->user()->unreadNotifications)); ?></span>
        <?php else: ?>
            <br>
        <?php endif; ?>
        <img src="/imagenes/mundo001.png">
    </button>
    
    <div role="alert" id="mitoast" aria-live="assertive" aria-atomic="true" class="toast">
 
        <div class="toast-header">
            
            <strong class="mr-auto"><?php echo e(count(auth()->user()->unreadNotifications)); ?> Notificaciones</strong>

            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Cerrar" onclick="cerrarToast()">
                <span aria-hidden="true">×</span>
            </button>
    
        </div>

        <div class="toast-body" style="overflow: scroll;height: 450px;">
            <?php $__currentLoopData = auth()->user()->unreadNotifications; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $notificacion): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php $url=$notificacion->data['url']; ?>
                <div class="row" style="cursor:pointer" wire:click="leer('<?php echo e($url); ?>','<?php echo e($notificacion->id); ?>')">
                    <div class="col-6" class="">
                        <p style="color:black; font-size:12px;"><strong><?php echo e($notificacion->data['titulo']); ?></strong></p>
                    </div>
                    <div class="col-6 blockquote-footer" align="right">
                        <?php echo e($notificacion->created_at->diffForHumans()); ?>

                    </div>
                    <div class="col-12">
                        <p><small><?php echo e($notificacion->data['descripcion']); ?></small></p><hr>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    
    </div>

    <script>
        // Con esta función se muestra el Toast 
        function mostrarToast() {
            var toast = document.getElementById("mitoast");
            if(toast.className == "mostrar"){
                toast.className = "cerrar";
                toast.className = toast.className.replace("cerrar", "");
            }else{
                toast.className = "mostrar";
            }
            //setTimeout(function(){ toast.className = toast.className.replace("mostrar", ""); }, 5000);
        }
        
        // Con esta función se cierra el Toast 
        function cerrarToast() {
            var toast = document.getElementById("mitoast");
            toast.className = "cerrar";
            toast.className = toast.className.replace("cerrar", "");
        }
    </script>
</div>
<?php /**PATH /var/www/html/eva.sumar.com.py/resources/views/livewire/notificaciones.blade.php ENDPATH**/ ?>