@page
@model Core6RazorPage.Pages.BootstrapToastModel
@{
}

<div class="container mt-3">
  <h3>Toast Example</h3>
  <p>In this example, we use a button to show the toast message.</p>

  <button type="button" class="btn btn-primary" id="toastbtn">Show Toast</button>
  
  <div class="toast">
    <div class="toast-header">
      <strong class="me-auto">Toast Header</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      <p>Some text inside the toast body</p>
    </div>
  </div>
</div>

@section Scripts{
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script> 
    $(function(){
        //show the toast via button click.
        $("#toastbtn").click(function() {
          var toastElList = [].slice.call(document.querySelectorAll('.toast'))
          var toastList = toastElList.map(function(toastEl) {
            return new bootstrap.Toast(toastEl)
          })
          toastList.forEach(toast => toast.show()) 
        }); 
        //after page load success
        //get the msg parameter from the query string.
        var paras = getUrlVars()["msg"]; 
        //if the msg parameter contains value, append the value to the toast body
        if( paras!= undefined && paras.length != 0){

            $(".toast-body").append("<span class='label label-important'>" + paras + "</span>");

            //show the toast
            var toastElList = [].slice.call(document.querySelectorAll('.toast'))
            var toastList = toastElList.map(function(toastEl) {
            return new bootstrap.Toast(toastEl)
            });
            toastList.forEach(toast => toast.show());
        }
    }); 
    //create a function to filter data from the query string.
    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    } 
    </script>
}