@if(session('success') || session('status') || session('error') || $errors->any())
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index:1080">

    {{-- ✅ Status Toast --}}
    @if (session('status'))
    <div class="toast bg-success text-white border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
      <div class="d-flex justify-content-between align-items-center">
        <div class="toast-body">
          {{ session('status') }}
        </div>
        <button type="button" class="btn-close btn-close-white ms-2 me-1 toast-close" data-bs-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
    </div>
    @endif

    {{-- ✅ Success Toast --}}
    @if(session('success'))
    <div class="toast bg-success text-white border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
      <div class="d-flex justify-content-between align-items-center">
        <div class="toast-body">
          {{ session('success') }}
        </div>
        <button type="button" class="btn-close btn-close-white ms-2 me-1 toast-close" data-bs-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
    </div>
    @endif

    @if(session('message'))
    <div class="toast bg-danger text-white border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
      <div class="d-flex justify-content-between align-items-center">
        <div class="toast-body">
          {{ session('message') }}
        </div>
        <button type="button" class="btn-close btn-close-white ms-2 me-1 toast-close" data-bs-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
    </div>
    @endif
    {{-- ❌ Error Toast --}}
    @if(session('error'))
    <div class="toast bg-danger text-white border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
      <div class="d-flex justify-content-between align-items-center">
        <div class="toast-body">
          {{ session('error') }}
        </div>
        <button type="button" class="btn-close btn-close-white ms-2 me-1 toast-close" data-bs-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
    </div>
    @endif

    {{-- ⚠ Validation Errors --}}
    @if($errors->any())
    <div class="toast bg-danger text-white border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="7000">
      <div class="d-flex justify-content-between align-items-center">
        <div class="toast-body">
          <ul class="mb-0">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
        <button type="button" class="btn-close btn-close-white ms-2 me-1 toast-close" data-bs-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
    </div>
    @endif

  </div>
</div>
@endif

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function () {
  const toastElList = [].slice.call(document.querySelectorAll('.toast'));

  toastElList.forEach(function (toastEl) {
    // Bootstrap toast instance
    const toast = new bootstrap.Toast(toastEl, { delay: 5000 });

    // Entry animation
    setTimeout(() => toastEl.classList.add('toast-enter'), 50);
    toast.show();

    // Exit animation before hiding
    toastEl.addEventListener('hide.bs.toast', () => {
      toastEl.classList.remove('toast-enter');
      toastEl.classList.add('toast-exit');
    });

    // Remove from DOM after animation
    toastEl.addEventListener('hidden.bs.toast', () => {
      toastEl.remove();
    });
  });
});
</script>
@endpush