@php
    // Collect possible flash toasts (your original code — keep as-is)
    $toasts = [];

    $map = [
        'success' => 'Success',
        'error'   => 'Error',
        'warning' => 'Warning',
        'info'    => 'Info',
    ];

    foreach ($map as $key => $title) {
        if (session()->has($key)) {
            $payload = session($key);
            $message = is_bool($payload) ? null : $payload;
            $toasts[] = [
                'type' => $key,
                'title' => $title,
                'message' => $message,
            ];
        }
    }

    if ($errors && $errors->any()) {
        $toasts[] = [
            'type' => 'error',
            'title' => 'Validation failed',
            'message' => $errors->all(),
        ];
    }

    if (session()->has('toast')) {
        $t = session('toast');
        $toasts[] = [
            'type' => $t['type'] ?? 'info',
            'title' => ucfirst($t['type'] ?? 'Info'),
            'message' => $t['message'] ?? null,
        ];
    }
@endphp

@if(count($toasts))
  <div class="toast-container position-fixed start-50 translate-middle-x p-3" style="top:45px !important" id="globalToastContainer" aria-live="polite" aria-atomic="true">
    @foreach($toasts as $i => $t)
      @php
        $hasMessage = !empty($t['message']);
        $autohide = $hasMessage && !is_array($t['message']) ? 'true' : 'false';
        $bgClass = in_array($t['type'], ['success','info','warning']) ? 'bg-success' : 'bg-danger';
        $defaultText = $t['type'] === 'success' ? 'Operation completed successfully.' : 'Something went wrong.';
      @endphp

      <div class="toast fade" id="global-toast-{{ $i }}" role="alert" aria-live="assertive" aria-atomic="true"
           data-bs-autohide="{{ $autohide }}" data-bs-delay="5000">
        <div class="toast-header {{ $bgClass }} text-white py-2 px-3">
          <strong class="me-auto">{{ $t['title'] }}</strong>
          <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>

        @if(is_array($t['message']))
          <div class="toast-body">
            <ul class="mb-0">
              @foreach($t['message'] as $msg)
                <li>{{ $msg }}</li>
              @endforeach
            </ul>
          </div>
        @elseif($hasMessage)
          <div class="toast-body">
            {!! nl2br(e($t['message'])) !!}
          </div>
        @else
          <div class="toast-body">
            {{ $defaultText }}
          </div>
        @endif
      </div>
    @endforeach
  </div>

  @push('scripts')
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const container = document.getElementById('globalToastContainer');
      if (!container) return;

      // Show a toast element using only CSS + simple JS (no bootstrap.Tabler)
      function showNativeToast(el) {
        // Add 'show' class to display (Bootstrap/Tabler CSS controls the visibility/animation)
        el.classList.add('show');

        // Force reflow so CSS transition will run predictably
        // eslint-disable-next-line no-unused-expressions
        el.offsetHeight;

        // Setup autohide if requested
        const autohide = (el.dataset.bsAutohide === 'true');
        const delay = parseInt(el.dataset.bsDelay, 10) || 5000;

        // store timer ref so we can cancel when manually closed
        if (autohide) {
          el._hideTimer = setTimeout(() => {
            hideToast(el);
          }, delay);
        }

        // Ensure close button will hide toast
        const closeBtn = el.querySelector('[data-bs-dismiss="toast"]');
        if (closeBtn) {
          // remove existing handler to avoid duplicates if re-used
          if (closeBtn._bound) {
            closeBtn.removeEventListener('click', closeBtn._bound);
          }
          const bound = function (e) {
            e.preventDefault();
            clearTimeout(el._hideTimer);
            hideToast(el);
          };
          closeBtn.addEventListener('click', bound);
          closeBtn._bound = bound;
        }

        // When transition ends and element is hidden, remove from DOM
        const onTransitionEnd = function () {
          if (!el.classList.contains('show')) {
            el.removeEventListener('transitionend', onTransitionEnd);
            if (el.parentNode) el.parentNode.removeChild(el);
          }
        };
        el.addEventListener('transitionend', onTransitionEnd);
      }

      function hideToast(el) {
        el.classList.remove('show');
        // removal happens on transitionend handler
      }

      // Initialize existing server-rendered toasts
      const initialToasts = Array.from(container.querySelectorAll('.toast'));
      initialToasts.forEach(showNativeToast);

      // Delegate close clicks for any toasts appended after initialization
      container.addEventListener('click', function (e) {
        const btn = e.target.closest('[data-bs-dismiss="toast"]');
        if (!btn) return;
        const toast = btn.closest('.toast');
        if (!toast) return;
        clearTimeout(toast._hideTimer);
        hideToast(toast);
      });

      // Public helper to create and show a dynamic toast using data attributes only
      window.createToast = function (opts = {}) {
        const {
          title = 'Info',
          message = '',
          type = 'info',
          autohide = true,
          delay = 5000
        } = opts;

        const id = 'toast-' + Date.now() + '-' + Math.floor(Math.random() * 1000);
        const bgClass = ['success','info','warning'].includes(type) ? 'bg-success' : 'bg-danger';

        const wrapper = document.createElement('div');
        wrapper.className = 'toast fade';
        wrapper.id = id;
        wrapper.role = 'alert';
        wrapper.setAttribute('aria-live', 'assertive');
        wrapper.setAttribute('aria-atomic', 'true');
        wrapper.dataset.bsAutohide = autohide ? 'true' : 'false';
        wrapper.dataset.bsDelay = String(delay);

        // sanitize simple text (avoid injecting raw HTML)
        function escapeHtml(str) {
          return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
        }

        const bodyHtml = Array.isArray(message)
          ? '<ul class="mb-0">' + message.map(m => '<li>' + escapeHtml(m) + '</li>').join('') + '</ul>'
          : escapeHtml(message || (type === 'success' ? 'Operation completed successfully.' : 'Something went wrong.'));

        wrapper.innerHTML = `
          <div class="toast-header ${bgClass} text-white py-2 px-3">
            <strong class="me-auto">${escapeHtml(title)}</strong>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">${bodyHtml}</div>
        `;

        container.appendChild(wrapper);

        // ensure the element is in the document before showing to let CSS transitions work
        requestAnimationFrame(() => showNativeToast(wrapper));
        return wrapper;
      };
    });
  </script>
  @endpush
@endif