@auth
<div class="notification-subscribe-section mb-3">
    <div class="card shadow-sm">
        <div class="card-body p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div class="flex-grow-1">
                    <h6 class="mb-1 d-flex align-items-center">
                        <i class="fas fa-bell me-2 text-primary"></i>
                        <span>Notifikasi Material</span>
                    </h6>
                    <div class="d-flex align-items-center gap-2">
                        <small class="text-muted">Status:</small>
                        <span id="notification-status-badge" class="badge bg-secondary">
                            <i class="fas fa-circle-notch fa-spin me-1"></i> Loading...
                        </span>
                    </div>
                </div>
                <div>
                    {{-- Button Subscribe --}}
                    <button 
                        id="subscribe-notification-btn" 
                        class="btn btn-primary btn-sm shadow-sm" 
                        onclick="subscribeToNotifications()"
                        style="display: none;">
                        <i class="fas fa-bell me-1"></i> Aktifkan
                    </button>
                    
                    {{-- Button Unsubscribe --}}
                    <button 
                        id="unsubscribe-notification-btn" 
                        class="btn btn-outline-secondary btn-sm" 
                        onclick="unsubscribeFromNotifications()"
                        style="display: none;">
                        <i class="fas fa-bell-slash me-1"></i> Nonaktifkan
                    </button>
                </div>
            </div>
            
            <div class="mt-2 pt-2 border-top">
                <small class="text-muted d-flex align-items-start">
                    <i class="fas fa-info-circle me-2 mt-1 text-info"></i>
                    <span>
                        @if(session('user')->idroles === 'msjits')
                            Anda akan menerima notifikasi saat ada material baru yang perlu di-upload ke SAP.
                        @else
                            Anda akan menerima notifikasi saat material Anda sudah di-upload dan tersedia di SAP.
                        @endif
                    </span>
                </small>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    let timeoutCheckCount = 0;
    const maxTimeoutChecks = 60;
    
    // Check setiap 1 detik
    const timeoutCheckInterval = setInterval(function() {
        timeoutCheckCount++;

        if (window.oneSignalLoadingComplete === true) {
            clearInterval(timeoutCheckInterval);
            console.log('✅ Timeout check stopped - OneSignal loading complete');
            return;
        }

        if (timeoutCheckCount >= maxTimeoutChecks) {
            clearInterval(timeoutCheckInterval);
            
            const badge = document.getElementById('notification-status-badge');
            
            // Double check: apakah badge sudah berubah dari loading?
            if (badge && (badge.innerHTML.includes('Loading...') || badge.innerHTML.includes('Menunggu...'))) {
                console.warn('⚠️ OneSignal timeout (60s) - showing error state');
                badge.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i> Timeout';
                badge.className = 'badge bg-warning';
                badge.title = 'OneSignal gagal dimuat dalam 60 detik. Server terlalu lambat. Coba refresh halaman.';
                
                // Show refresh button
                const subscribeBtn = document.getElementById('subscribe-notification-btn');
                if (subscribeBtn) {
                    subscribeBtn.style.display = 'inline-block';
                    subscribeBtn.className = 'btn btn-warning btn-sm shadow-sm';
                    subscribeBtn.innerHTML = '<i class="fas fa-redo me-1"></i> Refresh';
                    subscribeBtn.onclick = function() { location.reload(); };
                }
            } else {
                console.log('✅ Badge already updated, no timeout needed');
            }
        }
    }, 1000);
})();
</script>
@endauth