{% extends 'base.html' %}
{% load static %}

{% block title %}Sync Status{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header bg-info text-white">
            <h3><i class="fas fa-sync"></i> Offline Sales Sync Status</h3>
        </div>
        <div class="card-body">
            <div id="syncStatus"></div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const offlineSales = JSON.parse(localStorage.getItem('offline_sales') || '[]');
    const unsynced = offlineSales.filter(s => !s.synced);
    
    let html = `
        <h5>Offline Sales</h5>
        <p>Total offline sales: ${offlineSales.length}</p>
        <p>Pending sync: ${unsynced.length}</p>
    `;
    
    if (unsynced.length > 0) {
        html += '<h6 class="mt-3">Pending Sales:</h6><ul class="list-group">';
        unsynced.forEach(sale => {
            html += `
                <li class="list-group-item">
                    Invoice: ${sale.invoice_number}<br>
                    Date: ${new Date(sale.created_at).toLocaleString()}<br>
                    Amount: GH₵ ${sale.total_amount.toFixed(2)}
                </li>
            `;
        });
        html += '</ul>';
    }
    
    document.getElementById('syncStatus').innerHTML = html;
});
</script>
{% endblock %}