construprogress/resources/js/app.js

import './bootstrap';

import localforage from 'localforage';

// Generic function to queue any offline action
window.queueOfflineAction = function(action, payload) {
    const pendingAction = { action, payload };
    if (navigator.onLine) {
        // Send immediately
        fetch('/offline/pending', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
            body: JSON.stringify(pendingAction)
        })
        .then(res => res.json())
        .then(data => {
            if (data.queued) {
                console.log('Action queued:', action);
            } else {
                console.error('Failed to queue action:', data);
            }
        })
        .catch(err => {
            console.error('Error queuing action:', err);
        });
    } else {
        // Store in IndexedDB (via localforage)
        localforage.getItem('pendingOffline').then(pending => {
            const list = pending || [];
            list.push(pendingAction);
            localforage.setItem('pendingOffline', list);
            console.log('Action stored offline:', action);
        }).catch(err => {
            console.error('Error storing offline action:', err);
        });
    }
};

// Function to store offline progress update (for backward compatibility)
window.offlineProgressUpdate = function(phaseId, progress, comment, location) {
    const payload = { phase_id: phaseId, progress, comment, location };
    window.queueOfflineAction('progress_update', payload);
};

// Sync pending actions when online
window.addEventListener('online', () => {
    // Trigger a sync attempt
    fetch('/offline/sync', { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content } })
        .then(res => res.json())
        .then(data => {
            console.log('Synced:', data);
            // Optionally, clear the local pending list if the sync was successful
            // But note: the backend will mark them as synced, so we rely on the service worker to clean up?
            // We'll leave it to the service worker to handle the state.
        })
        .catch(err => {
            console.error('Error triggering sync:', err);
        });
});

// Also, we can listen for the service worker's message to update the UI if needed
// But for now, we'll rely on the service worker's notification and the online event.