{{-- FLOATING BACKGROUND MUSIC CONTROLLER --}}
@if(!empty($invitation->audio_url))
<div id="jk-music-container" class="fixed bottom-6 right-6 z-40 select-none">
    <audio id="jkWeddingAudio" loop preload="auto">
        <source src="{{ $invitation->audio_url }}" type="audio/mpeg">
    </audio>

    <button type="button" id="jkBtnMusicToggle" onclick="jkToggleMusic()" 
            class="w-11 h-11 sm:w-12 sm:h-12 rounded-full bg-neutral-900/85 backdrop-blur text-white shadow-2xl flex items-center justify-center border-2 border-white/60 transition transform hover:scale-105 active:scale-95" 
            style="box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.4);"
            title="Putar / Jeda Musik Undangan">
        <i data-lucide="disc" id="jkIconMusic" class="w-5 h-5 text-amber-300"></i>
    </button>
</div>

<style>
    @keyframes jkSpinDisc {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .jk-disc-spinning {
        animation: jkSpinDisc 3.5s linear infinite;
    }
</style>

<script>
    function jkPlayMusic() {
        const audio = document.getElementById('jkWeddingAudio');
        const icon = document.getElementById('jkIconMusic');
        if (!audio) return;

        audio.play().then(() => {
            if (icon) icon.classList.add('jk-disc-spinning');
        }).catch(err => {
            console.log('Autoplay audio deferred:', err);
        });
    }

    function jkToggleMusic() {
        const audio = document.getElementById('jkWeddingAudio');
        const icon = document.getElementById('jkIconMusic');
        if (!audio) return;

        if (audio.paused) {
            audio.play().then(() => {
                if (icon) icon.classList.add('jk-disc-spinning');
            }).catch(e => console.log('Audio play blocked:', e));
        } else {
            audio.pause();
            if (icon) icon.classList.remove('jk-disc-spinning');
        }
    }

    // Hook into user openInvitation interaction
    document.addEventListener('DOMContentLoaded', function() {
        if (window.lucide && typeof lucide.createIcons === 'function') {
            lucide.createIcons();
        }

        // 1. Intercept window.openInvitation if defined
        if (typeof window.openInvitation === 'function') {
            const originalOpen = window.openInvitation;
            window.openInvitation = function() {
                jkPlayMusic();
                return originalOpen.apply(this, arguments);
            };
        }

        // 2. Add click listener to buttons that trigger open invitation
        document.querySelectorAll('[onclick*="openInvitation"], #btnOpenInvitation, .btn-open-invitation, [data-action="open-invitation"], #open-invitation-btn, #btn-open, .open-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                jkPlayMusic();
            }, { once: false });
        });

        // 3. Fallback: play music on any first user interaction (click / tap anywhere) if invitation is already open
        const startMusicOnFirstInteraction = function() {
            jkPlayMusic();
            document.removeEventListener('click', startMusicOnFirstInteraction);
            document.removeEventListener('touchstart', startMusicOnFirstInteraction);
        };
        document.addEventListener('click', startMusicOnFirstInteraction, { once: true });
        document.addEventListener('touchstart', startMusicOnFirstInteraction, { once: true });
    });
</script>
@endif