<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;
        }
        
        #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()">
        @if(count(auth()->user()->unreadNotifications))
            <span class="badge badge-danger">{{count(auth()->user()->unreadNotifications)}}</span>
        @else
            <br>
        @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">{{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">
            @foreach(auth()->user()->unreadNotifications as $notificacion)
                @php $url=$notificacion->data['url']; @endphp
                <div class="row" style="cursor:pointer" wire:click="leer('{{$url}}','{{$notificacion->id}}')">
                    <div class="col-6" class="">
                        <p style="color:black; font-size:12px;"><strong>{{ $notificacion->data['titulo'] }}</strong></p>
                    </div>
                    <div class="col-6 blockquote-footer" align="right">
                        {{ $notificacion->created_at->diffForHumans() }}
                    </div>
                    <div class="col-12">
                        <p><small>{{ $notificacion->data['descripcion'] }}</small></p><hr>
                    </div>
                </div>
            @endforeach
        </div>
    
    </div>

    <script>
        // Con esta función se muestra el Toast 
        function mostrarToast() {
            var toast = document.getElementById("mitoast");
            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>