@if(isset($messages[0]['message']))
    @foreach($messages as $message)
        <div class="p-6 w3-fade forceable w3-pale-{{ $message['status'] == 'error' ? 'red' : ($message['status'] == 'success' ? 'green' : 'yellow') }} w3-left-bar w3-text-{{ $message['status'] == 'error' ? 'red' : ($message['status'] == 'success' ? 'green' : 'yellow') }} border-b border-gray-200" onclick="timedClosure(this)">
            <span class="w3-left-align"><b>{{ $message['message'] ?? '' }}</b></span>
            <span class="w3-right-align" onclick="this.parentNode.style.display='none'; ">
                close
            </span>
        </div>
    @endforeach
@endif
<script>
   function forceAction() {
        var elements = document.getElementsByClassName('forceable');
        for (var i = 0; i < elements.length; i++) {
                elements[i].click(); //sets and unsets the check box back to default value, so as to force the compile function from the elements
                elements[i].click();
        }
    }
    window.onload = function() {
        forceAction();
        console.log('forceAction')
    };
    function timedClosure($e) {
        const closuretiming = setTimeout(close, 3000);
        console.log($e)
        function close() {
            $e.style.display='none';
        }
    }
    
</script>