{{-- @extends('admin.layouts.app')
@section('title', 'Admin - Profile')
@push('headerscript')


@endpush
@section('content')
<style>

    .toast {
      position: absolute;
      top: 25px;
      right: 30px;
      border-radius: 12px;
      background: #fff;
      padding: 20px 35px 20px 25px;
      box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transform: translateX(calc(100% + 30px));
      transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
    }
    
    .toast.active {
      transform: translateX(0%);
    }
    
    .toast .toast-content {
      display: flex;
      align-items: center;
    }
    
    .toast-content .check {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 35px;
      min-width: 35px;
      background-color: #4070f4;
      color: #fff;
      font-size: 20px;
      border-radius: 50%;
    }
    
    .toast-content .message {
      display: flex;
      flex-direction: column;
      margin: 0 20px;
    }
    
    .message .text {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
    }
    
    .message .text.text-1 {
      font-weight: 600;
      color: #333;
    }
    
    .toast .close {
      position: absolute;
      top: 10px;
      right: 15px;
      padding: 5px;
      cursor: pointer;
      opacity: 0.7;
    }
    
    .toast .close:hover {
      opacity: 1;
    }
    
    .toast .progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 100%;
    
    }
    
    .toast .progress:before {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      height: 100%;
      width: 100%;
      background-color: #4070f4;
    }
    
    .progress.active:before {
      animation: progress 5s linear forwards;
    }
    
    @keyframes progress {
      100% {
        right: 100%;
      }
    }
    
    .toast.active ~ button {
      pointer-events: none;
    }
    </style>
    
    <!-- Remove 'active' class, this is just to show in Codepen thumbnail -->
    <div class="toast active">
      
      <div class="toast-content">
        <i class="fas fa-solid fa-check check"></i>
    
        <div class="message">
          <span class="text text-1">Success</span>
          <span class="text text-2">Your changes has been saved</span>
        </div>
      </div>
      <i class="fa-solid fa-xmark close"></i>
    
      <!-- Remove 'active' class, this is just to show in Codepen thumbnail -->
      <div class="progress active"></div>
    </div>
    
    <button>Show Toast</button>
    
    <small style="position: absolute; bottom: 40px">Remove 'active' classes, this is just to show in Codepen thumbnail</small>
    
    <script>
    const button = document.querySelector("button"),
      toast = document.querySelector(".toast");
    (closeIcon = document.querySelector(".close")),
      (progress = document.querySelector(".progress"));
    
    let timer1, timer2;
    
    button.addEventListener("click", () => {
      toast.classList.add("active");
      progress.classList.add("active");
    
      timer1 = setTimeout(() => {
        toast.classList.remove("active");
      }, 5000); //1s = 1000 milliseconds
    
      timer2 = setTimeout(() => {
        progress.classList.remove("active");
      }, 5300);
    });
    
    closeIcon.addEventListener("click", () => {
      toast.classList.remove("active");
    
      setTimeout(() => {
        progress.classList.remove("active");
      }, 300);
    
      clearTimeout(timer1);
      clearTimeout(timer2);
    });
    
    </script>
    
    
    

    @endsection     --}}

    {{-- https://alvarotrigo.com/blog/css-alerts/ --}}
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    {{-- <div class="container">
                  <button class="btn btn-danger" onclick="createAlert('Opps!','Something went wrong','Here is a bunch of text about some stuff that happened.','danger',true,true,'pageMessages');">Add Danger Alert</button>
                  <button class="btn btn-success" onclick="createAlert('','Nice Work!','Here is a bunch of text about some stuff that happened.','success',true,true,'pageMessages');">Add Success Alert</button>
                  <button class="btn btn-info" onclick="createAlert('BTDubs','','Here is a bunch of text about some stuff that happened.','info',false,true,'pageMessages');">Add Info Alert</button>
                  <button class="btn btn-warning" onclick="createAlert('','','Here is a bunch of text about some stuff that happened.','warning',false,true,'pageMessages');">Add Warning Alert</button>
                </div> --}}
    <style>
 

#pageMessages {
      position: fixed;
      top: 5px;
      right: 15px;
      width: 30%;
      z-index: 9999999;
    }
    .alert {
      position: relative;
    }
    
    .alert .close {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 1em;
    }
    
    .alert .fa {
      margin-right:.3em;
    }
    </style>
    <script>
      @if(session()->has('error_msg'))
        createAlert('Opps!','Something went wrong',"{{session()->get('error_msg')}}",'danger',true,true,'pageMessages');
        @endif
        @if(session()->has('success_msg'))
        createAlert('','Successfully',"{{session()->get('success_msg')}}",'success',true,true,'pageMessages');
        @endif
    function createAlert(title, summary, details, severity, dismissible, autoDismiss, appendToId) {
      var iconMap = {
        info: "fa fa-info-circle",
        success: "fa fa-thumbs-up",
        warning: "fa fa-exclamation-triangle",
        danger: "fa ffa fa-exclamation-circle"
      };
    
      var iconAdded = false;
    
      var alertClasses = ["alert", "animated", "flipInX"];
      alertClasses.push("alert-" + severity.toLowerCase());
    
      if (dismissible) {
        alertClasses.push("alert-dismissible");
      }
    
      var msgIcon = $("<i />", {
        "class": iconMap[severity] // you need to quote "class" since it's a reserved keyword
      });
    
      var msg = $("<div />", {
        "class": alertClasses.join(" ") // you need to quote "class" since it's a reserved keyword
      });
    
      if (title) {
        var msgTitle = $("<h4 />", {
          html: title
        }).appendTo(msg);
        
        if(!iconAdded){
          msgTitle.prepend(msgIcon);
          iconAdded = true;
        }
      }
    
      if (summary) {
        var msgSummary = $("<strong />", {
          html: summary
        }).appendTo(msg);
        
        if(!iconAdded){
          msgSummary.prepend(msgIcon);
          iconAdded = true;
        }
      }
    
      if (details) {
        var msgDetails = $("<p />", {
          html: details
        }).appendTo(msg);
        
        if(!iconAdded){
          msgDetails.prepend(msgIcon);
          iconAdded = true;
        }
      }
      
    
      if (dismissible) {
        var msgClose = $("<span />", {
          "class": "close", // you need to quote "class" since it's a reserved keyword
          "data-dismiss": "alert",
          html: "<i class='fa fa-times-circle'></i>"
        }).appendTo(msg);
      }
      
      $('#' + appendToId).prepend(msg);
      
      if(autoDismiss){
        setTimeout(function(){
          msg.addClass("flipOutX");
          setTimeout(function(){
            msg.remove();
          },1000);
        }, 5000);
      }
    }
    </script>