@if(!session('age_verified'))
<style>
  /* Full-page blur overlay */
  #age-verification-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }

  /* Centered modal popup */
  #age-verification-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 2em 3em;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    z-index: 9999;
  }

  #age-verification-modal h2 {
    margin-bottom: 0.5em;
  }

  #age-verification-modal p {
    margin-bottom: 1.5em;
  }

  #confirm-age-btn {
    padding: 0.6em 1.5em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
  }

  #confirm-age-btn:hover {
    background-color: #0056b3;
  }
</style>

<div id="age-verification-overlay"></div>

<div id="age-verification-modal">
  <h2>Adult Content Warning</h2>
  <p>You must be 18 years or older to enter this site. Please confirm your age to proceed.</p>
  <button id="confirm-age-btn">I am 18 or older</button>
</div>

<script>
document.getElementById('confirm-age-btn').addEventListener('click', function() {
  fetch('{{ route("age.verify") }}', {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
  })
  .then(response => {
    if(response.ok) {
      // Hide the modal and overlay
      document.getElementById('age-verification-modal').style.display = 'none';
      document.getElementById('age-verification-overlay').style.display = 'none';
      // Optionally reload to allow full access after session set
      location.reload();
    }
  });
});
</script>
@endif