{% extends 'layout.html' %}

{% block title %}Utilization Dashboard{% endblock %}

{% block content %}
<div class="container my-4">
    <h2 class="text-center text-primary">Device Dashboard</h2>
    <div class="row">
        {% if devices %}
            {% for device in devices %}
                <div class="card p-3 mb-4 shadow">
                    <h3 class="text-dark">Device: <strong>{{ device.mac_address }}</strong></h3>
                    <h3><strong>MCU type :</strong> {{ device.mcu_type }}</h3>
                    <h3><strong>Location :</strong> {{ device.location }}</h3>
                    <h3><strong>Cycle Count :</strong> {{ device.latest_cycle_count }}</h3>
                    <h3><strong>Total device Run Hours :</strong> {{ device.total_run_time }}</h3>
                    
                    <hr>
                    <p><strong>Today : </strong> <span class="display-value">{{ device.today_utilization }}</span></p>
                    <p><strong>Yesterday : </strong> <span class="display-value">{{ device.yesterday_utilization }}</span></p>
                    <p><strong>This Week : </strong> <span class="display-value">{{ device.weekly_utilization }}</span></p>
                    <p><strong>This Month : </strong> <span class="display-value">{{ device.this_month_utilization }}</span></p>
                    <p><strong>Last Month : </strong> <span class="display-value">{{ device.last_month_utilization }}</span></p>
                    <p><strong>Year-to-Date : </strong> <span class="display-value">{{ device.ytd_utilization }}</span></p>
                    <p><strong>Last Year : </strong> <span class="display-value">{{ device.last_year_utilization }}</span></p>
                </div>
            {% endfor %}
        {% else %}
            <p class="text-center text-danger">No data available.</p>
        {% endif %}
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function fetchDashboardData() {
        fetch('/utilDashboard.utilDashboard')  // Fetch the updated dashboard content
            .then(response => response.text())  // Get response as HTML
            .then(html => {
                let parser = new DOMParser();
                let doc = parser.parseFromString(html, 'text/html');
                let newContent = doc.querySelector('.container').innerHTML;
                document.querySelector('.container').innerHTML = newContent;
            })
            .catch(error => console.error('Error fetching dashboard data:', error));
    }

    setInterval(fetchDashboardData, 20000);  // Auto-refresh every 20 seconds
</script>

{% endblock %}