Fix destroyed when element visibility changes

  Problem:
  When the Turnstile field becomes hidden and then visible again (e.g., switching tabs, collapsing panels, or dynamic content changes),
  the Cloudflare Turnstile widget is destroyed and doesn't re-initialize, leaving users unable to complete the captcha.

  Solution:
  Added an IntersectionObserver to detect when the Turnstile container enters the viewport and automatically re-renders the widget if
  it's missing. Includes a safety check to ensure the Turnstile API is loaded before attempting to render.

  Changes:
  - Added IntersectionObserver in the Alpine.js x-init to monitor element visibility
  - Added window.turnstile check to prevent rendering before API loads
  - Added element existence check before observing

  Testing:
  - Place Turnstile field in collapsible content or tabs
  - Hide and show the container multiple times
  - Verify captcha re-appears and functions correctly

Author: tanthammar

resources/views/components/turnstile.blade.php

@@ -34,6 +34,20 @@
             }
 
             $wire.on('reset-captcha', () => resetCaptcha())
+
+            const observer = new IntersectionObserver((entries) => {
+                  entries.forEach(entry => {
+                      if (entry.isIntersecting && 
+                          window.turnstile && 
+                          !$refs.turnstile.querySelector('.cf-turnstile')) {
+                          turnstile.render($refs.turnstile, options);
+                      }
+                  });
+              }, { threshold: 0.1 })
+
+            if ($refs.turnstile) {
+                observer.observe($refs.turnstile);
+            }
         })()"
     >
         <div data-sitekey="{{config('turnstile.turnstile_site_key')}}"