@php
  $flashMessages = [];

  if (session()->has('success')) {
      $flashMessages[] = [
          'type' => 'success',
          'title' => 'BERHASIL',
          'message' => session('success'),
      ];
  }

  if (session()->has('info')) {
      $flashMessages[] = [
          'type' => 'info',
          'title' => 'INFORMASI',
          'message' => session('info'),
      ];
  }

  if (session()->has('warning')) {
      $flashMessages[] = [
          'type' => 'warning',
          'title' => 'PERINGATAN',
          'message' => session('warning'),
      ];
  }

  if (session()->has('error')) {
      $flashMessages[] = [
          'type' => 'error',
          'title' => 'GAGAL',
          'message' => session('error'),
      ];
  }
@endphp

@if (count($flashMessages))
  <style>
    .flash-toast-wrap {
      position: fixed;
      right: 1rem;
      bottom: 1rem;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: .75rem;
      width: min(22rem, calc(100vw - 2rem));
      pointer-events: none;
    }

    .flash-toast {
      pointer-events: auto;
      display: flex;
      align-items: flex-start;
      gap: .75rem;
      border-radius: 1rem;
      padding: .875rem 1rem;
      box-shadow: 0 18px 40px rgba(15, 23, 42, .15);
      border: 1px solid transparent;
      background: #fff;
      position: relative;
      overflow: hidden;
      transform: translate3d(0, 12px, 0) scale(.98);
      opacity: 0;
      animation: flashToastIn .26s cubic-bezier(.16, 1, .3, 1) forwards;
    }

    .flash-toast__icon {
      flex: 0 0 auto;
      width: 2rem;
      height: 2rem;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: .1rem;
    }

    .flash-toast__body {
      flex: 1 1 auto;
      min-width: 0;
    }

    .flash-toast__title {
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin: 0;
    }

    .flash-toast__message {
      margin: .2rem 0 0;
      font-size: .78rem;
      line-height: 1.35rem;
      color: inherit;
      word-break: break-word;
    }

    .flash-toast__close {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      padding: 0;
      line-height: 1;
      opacity: .75;
      cursor: pointer;
      margin-top: -.05rem;
    }

    .flash-toast__close:hover {
      opacity: 1;
    }

    .flash-toast__progress {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      transform-origin: left center;
      animation: flashToastProgress 2s linear forwards;
    }

    .flash-toast--success {
      border-color: #bbf7d0;
      background: #f0fdf4;
      color: #166534;
    }

    .flash-toast--success .flash-toast__icon {
      background: #dcfce7;
      color: #16a34a;
    }

    .flash-toast--success .flash-toast__progress {
      background: linear-gradient(90deg, #22c55e, #86efac);
    }

    .flash-toast--info {
      border-color: #bae6fd;
      background: #eff6ff;
      color: #1d4ed8;
    }

    .flash-toast--info .flash-toast__icon {
      background: #dbeafe;
      color: #2563eb;
    }

    .flash-toast--info .flash-toast__progress {
      background: linear-gradient(90deg, #3b82f6, #93c5fd);
    }

    .flash-toast--warning {
      border-color: #fde68a;
      background: #fffbeb;
      color: #92400e;
    }

    .flash-toast--warning .flash-toast__icon {
      background: #fef3c7;
      color: #d97706;
    }

    .flash-toast--warning .flash-toast__progress {
      background: linear-gradient(90deg, #f59e0b, #fcd34d);
    }

    .flash-toast--error {
      border-color: #fecaca;
      background: #fef2f2;
      color: #b91c1c;
    }

    .flash-toast--error .flash-toast__icon {
      background: #fee2e2;
      color: #dc2626;
    }

    .flash-toast--error .flash-toast__progress {
      background: linear-gradient(90deg, #ef4444, #fca5a5);
    }

    @keyframes flashToastIn {
      from {
        transform: translate3d(0, 12px, 0) scale(.98);
        opacity: 0;
      }

      to {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
      }
    }

    .flash-toast.is-hiding {
      animation: flashToastOut .18s ease-in forwards;
    }

    @keyframes flashToastOut {
      to {
        transform: translate3d(0, 12px, 0) scale(.98);
        opacity: 0;
      }
    }

    @keyframes flashToastProgress {
      from {
        transform: scaleX(1);
      }

      to {
        transform: scaleX(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .flash-toast,
      .flash-toast.is-hiding,
      .flash-toast__progress {
        animation: none !important;
      }

      .flash-toast {
        transform: none;
        opacity: 1;
      }
    }
  </style>

  <div class="flash-toast-wrap" id="flashToastWrap" aria-live="polite" aria-atomic="true"></div>

  <script>
    (function() {
      const messages = @json($flashMessages);
      const container = document.getElementById('flashToastWrap');
      if (!container || !Array.isArray(messages) || messages.length === 0) return;

      const iconMap = {
        success: 'fa-circle-check',
        info: 'fa-circle-info',
        warning: 'fa-triangle-exclamation',
        error: 'fa-circle-xmark',
      };

      const createToast = (item) => {
        const toast = document.createElement('div');
        toast.className = `flash-toast flash-toast--${item.type || 'info'}`;
        toast.innerHTML = `
          <div class="flash-toast__icon">
            <i class="fas ${iconMap[item.type] || iconMap.info} text-[13px]"></i>
          </div>
          <div class="flash-toast__body">
            <p class="flash-toast__title">${item.title || 'INFORMASI'}</p>
            <p class="flash-toast__message">${item.message || ''}</p>
          </div>
          <button type="button" class="flash-toast__close" aria-label="Tutup notifikasi">
            <i class="fas fa-xmark text-[13px]"></i>
          </button>
          <span class="flash-toast__progress" aria-hidden="true"></span>
        `;

        const index = container.children.length;
        toast.style.animationDelay = `${Math.min(index * 70, 210)}ms`;

        const close = () => {
          if (toast.classList.contains('is-hiding')) return;
          toast.classList.add('is-hiding');
          window.setTimeout(() => toast.remove(), 220);
        };

        toast.querySelector('.flash-toast__close').addEventListener('click', close);
        container.appendChild(toast);

        window.setTimeout(close, 2000);
      };

      messages.forEach(createToast);
    })();
  </script>
@endif