@php
  if (!isset($session_name_arr)) {
      $session_name_arr = ['alert'];
  }
  if (isset($session_name)) {
      $session_name_arr[] = $session_name;
  }
@endphp

@foreach ($session_name_arr as $session_name)
  @if (Session::has($session_name))
    <div class="row" id="component-session-alert">
      <div class="col-md">
        <div class="alert alert-{{ Session::get($session_name)['type'] }} alert-dismissible" role="alert">
          {{ Session::get($session_name)['content'] }}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>
  @endif
@endforeach

@if ($errors->any())
  <div class="row" id="component-error-alert">
    @foreach ($errors->all() as $error)
      <div class="col-12">
        <div class="alert alert-danger alert-dismissible" role="alert">
          {{ $error }}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    @endforeach
  </div>
@endif

<div class="row" id="component-response-alert">
</div>

<script id="AlertTemplate" type="text/x-jquery-tmpl">
<div class="col-12">
<div class="alert alert-${type} alert-dismissible" role="alert">
  ${content}
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
</div>
</script>

<script>
  // 使用原生 JavaScript，不依賴 jQuery
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
      var alerts = document.querySelectorAll('.alert');
      alerts.forEach(function(alert) {
        alert.style.transition = 'opacity 0.5s';
        alert.style.opacity = '0';
        setTimeout(function() {
          alert.style.display = 'none';
        }, 500);
      });
    }, 3000);
  });
</script>