{{-- Common JS: cover toggle, music, fade-in observer, countdown --}}
@php $targetDateField = $targetDateField ?? 'resepsi_datetime'; @endphp
<script>
function openInvitation(){document.getElementById('cover').classList.add('opened');document.body.style.overflow='auto';const m=document.getElementById('bgMusic');if(m){m.play().catch(()=>{});document.getElementById('musicBtn')?.classList.add('playing');}}
function toggleMusic(){const m=document.getElementById('bgMusic'),b=document.getElementById('musicBtn');if(!m)return;if(m.paused){m.play();b.classList.add('playing');}else{m.pause();b.classList.remove('playing');}}
document.body.style.overflow='hidden';
const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target);}}),{threshold:.1,rootMargin:'0px 0px -40px 0px'});
document.querySelectorAll('.fade-in').forEach(e=>io.observe(e));
const target=new Date(@json($invitation->{$targetDateField}->toIso8601String())).getTime();
setInterval(()=>{const d=target-Date.now();if(d<=0){['cd-d','cd-h','cd-m','cd-s'].forEach(i=>{const el=document.getElementById(i);if(el)el.textContent='0';});return;}const els={d:Math.floor(d/86400000),h:Math.floor((d%86400000)/3600000),m:Math.floor((d%3600000)/60000),s:Math.floor((d%60000)/1000)};Object.entries(els).forEach(([k,v])=>{const el=document.getElementById('cd-'+k);if(el)el.textContent=String(v).padStart(2,'0');});},1000);
</script>