@php $kinds = ['ok' => 'bg-secondary-container text-on-secondary-container', 'warn' => 'bg-accent-container text-on-accent-container', 'err' => 'bg-error-container text-on-error-container']; @endphp
@foreach ($kinds as $key => $cls)
    @if (session($key))
        <div data-flash role="{{ $key === 'err' ? 'alert' : 'status' }}" class="mb-4 flex items-start justify-between gap-3 rounded-2xl px-5 py-3 text-sm font-semibold transition-opacity duration-500 {{ $cls }}">
            <span>{{ session($key) }}</span>
            <button type="button" data-flash-close class="-mr-2 -mt-1 grid h-8 w-8 flex-none place-items-center rounded-full text-lg leading-none hover:bg-black/10" aria-label="{{ __('Close') }}">×</button>
        </div>
    @endif
@endforeach
<script>
(() => {
  if (window.__flashReady) return; window.__flashReady = true;
  const SECONDS = 5; // how long an alert stays on screen
  const hide = (el) => { el.style.opacity = '0'; setTimeout(() => el.remove(), 500); };
  const arm = (el) => { setTimeout(() => hide(el), SECONDS * 1000); };
  document.addEventListener('click', (e) => { const b = e.target.closest('[data-flash-close]'); if (b) hide(b.closest('[data-flash]')); });
  document.addEventListener('DOMContentLoaded', () => document.querySelectorAll('[data-flash]').forEach(arm));
  // window.flash('Saved', 'ok' | 'warn' | 'err') shows a pop-up alert that also goes away after 5 seconds.
  const colors = { ok: 'bg-secondary-container text-on-secondary-container', warn: 'bg-accent-container text-on-accent-container', err: 'bg-error-container text-on-error-container' };
  window.flash = (message, kind = 'ok') => {
    let box = document.getElementById('flash-box');
    if (!box) { box = document.createElement('div'); box.id = 'flash-box'; box.className = 'pointer-events-none fixed right-4 top-24 z-50 flex w-[min(92vw,360px)] flex-col gap-2'; document.body.appendChild(box); }
    const el = document.createElement('div');
    el.setAttribute('data-flash', ''); el.setAttribute('role', kind === 'err' ? 'alert' : 'status');
    el.className = 'pointer-events-auto flex items-start justify-between gap-3 rounded-2xl px-5 py-3 text-sm font-semibold shadow-soft transition-opacity duration-500 ' + (colors[kind] || colors.ok);
    const span = document.createElement('span'); span.textContent = message;
    const x = document.createElement('button'); x.type = 'button'; x.setAttribute('data-flash-close', ''); x.className = '-mr-2 -mt-1 grid h-8 w-8 flex-none place-items-center rounded-full text-lg leading-none hover:bg-black/10'; x.textContent = '×'; x.setAttribute('aria-label', 'Close');
    el.append(span, x); box.appendChild(el); arm(el);
  };
})();
</script>