@php
    $tawkPropertyId = \App\Models\Setting::get('tawk_property_id', '');
    $tawkWidgetId = \App\Models\Setting::get('tawk_widget_id', 'default');
    
    // Trim whitespace from values
    $tawkPropertyId = trim($tawkPropertyId ?? '');
    $tawkWidgetId = trim($tawkWidgetId ?? '');
    
    // Set default widget ID if empty
    if (empty($tawkWidgetId)) {
        $tawkWidgetId = 'default';
    }
@endphp

@if(!empty($tawkPropertyId))
<!--Start of Tawk.to Script-->
<script type="text/javascript">
console.log('Tawk.to: Loading widget with Property ID: {{ $tawkPropertyId }}, Widget ID: {{ $tawkWidgetId }}');
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();

// Configure widget to appear at bottom-right
Tawk_API.customStyle = {
    visibility : {
        desktop : {
            position : 'br',
            xOffset : 20,
            yOffset : 20
        },
        mobile : {
            position : 'br',
            xOffset : 10,
            yOffset : 20
        }
    },
    zIndex: 9998  // Below bottom nav (which is 200)
};

(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/{{ $tawkPropertyId }}/{{ $tawkWidgetId }}';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s1.onerror = function() {
    console.error('Tawk.to: Failed to load script from https://embed.tawk.to/{{ $tawkPropertyId }}/{{ $tawkWidgetId }}');
};
s1.onload = function() {
    console.log('Tawk.to: Script loaded successfully');
};
s0.parentNode.insertBefore(s1,s0);
})();

// Add event listeners to track widget status and reposition on mobile
if (typeof Tawk_API !== 'undefined') {
    Tawk_API.onLoad = function(){
        console.log('Tawk.to: Widget loaded and ready');
        
        // Reposition widget on mobile to avoid bottom navigation
        function repositionTawkWidget() {
            if (window.innerWidth <= 767) {
                // Find all Tawk widget elements
                const tawkWidget = document.querySelector('#tawk-bubble-container') || 
                                 document.querySelector('.tawk-button') ||
                                 document.querySelector('.tawk-min-container');
                
                if (tawkWidget) {
                    // Move it up by 80px on mobile
                    tawkWidget.style.bottom = '80px';
                    tawkWidget.style.zIndex = '9998';
                    console.log('Tawk.to: Repositioned for mobile');
                }
                
                // Also handle the iframe
                const tawkIframe = document.querySelector('iframe[title*="chat widget"]');
                if (tawkIframe && tawkIframe.parentElement) {
                    tawkIframe.parentElement.style.bottom = '80px';
                    tawkIframe.parentElement.style.zIndex = '9998';
                }
            }
        }
        
        // Initial positioning
        setTimeout(repositionTawkWidget, 500);
        
        // Reposition on window resize
        window.addEventListener('resize', repositionTawkWidget);
        
        // Watch for DOM changes (in case Tawk recreates elements)
        const observer = new MutationObserver(repositionTawkWidget);
        observer.observe(document.body, { childList: true, subtree: true });
    };
    
    Tawk_API.onStatusChange = function(status){
        console.log('Tawk.to: Status changed to', status);
    };
    
    // Handle fullscreen chat on mobile
    Tawk_API.onChatMaximized = function(){
        if (window.innerWidth <= 767) {
            const chatPanel = document.querySelector('.tawk-chat-panel') || 
                            document.querySelector('#tawk-chat-panel');
            if (chatPanel) {
                chatPanel.style.zIndex = '99999';
                chatPanel.style.position = 'fixed';
                chatPanel.style.top = '0';
                chatPanel.style.bottom = '0';
                chatPanel.style.left = '0';
                chatPanel.style.right = '0';
                chatPanel.style.width = '100%';
                chatPanel.style.height = '100%';
            }
        }
    };
}
</script>

<style>
/* Additional CSS for mobile positioning */
@media (max-width: 767px) {
    /* Ensure Tawk widget stays above content but below nav */
    #tawk-bubble-container,
    .tawk-button,
    .tawk-min-container,
    iframe[title*="chat widget"] {
        bottom: 80px !important;
        z-index: 9998 !important;
    }
    
    /* When chat is maximized on mobile */
    body.tawk-mobile,
    html.tawk-mobile {
        position: fixed !important;
        overflow: hidden !important;
    }
    
    .tawk-chat-panel,
    #tawk-chat-panel {
        z-index: 99999 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}
</style>
<!--End of Tawk.to Script-->
@else
<!-- Tawk.to not configured: Property ID is missing -->
<script type="text/javascript">
console.warn('Tawk.to: Widget not loaded - Property ID is not configured in admin settings');
</script>
@endif