{% extends "admin/change_list.html" %}
{% load static i18n %}

{% block extrahead %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'django_logbox/css/style.css' %}">
    <script src="{% static 'django_logbox/js/chart.umd.min.js' %}" type="module"></script>
    <script src="{% static 'django_logbox/js/chartjs-plugin-datalabels.min.js' %}" type="module"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const requestCountChartLabels = {{ traffic_data.label_data | safe }};
            const requestCountChartData = {{ traffic_data.count_data | safe }};
            const ctx = document.getElementById('reqeustCountChart');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: requestCountChartLabels,
                    datasets: [{
                        label: 'Request Count',
                        data: requestCountChartData,
                        backgroundColor: '#2196F3'
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                min: 0,
                                stepSize: 100
                            }
                        }
                    },
                    layout: {
                        padding: {
                            left: 10,
                            right: 10,
                            top: 10,
                            bottom: 10
                        }
                    },
                    plugins: {
                        legend: {
                            display: false,
                        },
                    }
                },
            });
        });
    </script>
{% endblock %}

{% block search %}
    {{ block.super }}

    <div style="width: 100%;">
        <details style="font-size: 20px; margin-bottom: 20px;">
            <summary>{% trans "Daily Traffic" %}</summary>
            <canvas id="reqeustCountChart" style="height:30vh; width:80vw"></canvas>
        </details>
    </div>

    <div style="width: 100%;">
        <details style="font-size: 20px; margin-bottom: 20px;">
            <summary>{% trans "User-Agent Statistics" %}</summary>
            <div class="stats-container">
                <div class="stats-box">
                    {% trans "TOP 10 Access Device Statistics" %}
                    <table class="stats-table">
                        <thead>
                        <tr>
                            <th>{% trans "Device" %}</th>
                            <th>{% trans "Count" %}</th>
                            <th>{% trans "Percentage" %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for device, data in device_data.items %}
                            <tr>
                                <td>{{ device | default:"Unknown" }}</td>
                                <td>{{ data.count }}</td>
                                <td>{{ data.percentage | floatformat:2 }}%</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="stats-box">
                    {% trans "TOP 10 Access OS Statistics" %}
                    <table class="stats-table">
                        <thead>
                        <tr>
                            <th>{% trans "OS" %}</th>
                            <th>{% trans "Count" %}</th>
                            <th>{% trans "Percentage" %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for os, data in os_data.items %}
                            <tr>
                                <td>{{ os | default:"Unknown" }}</td>
                                <td>{{ data.count }}</td>
                                <td>{{ data.percentage | floatformat:2 }}%</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="stats-box">
                    {% trans "TOP 10 Access Browser Statistics" %}
                    <table class="stats-table">
                        <thead>
                        <tr>
                            <th>{% trans "Browser" %}</th>
                            <th>{% trans "Count" %}</th>
                            <th>{% trans "Percentage" %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for browser, data in browser_data.items %}
                            <tr>
                                <td>{{ browser | default:"Unknown" }}</td>
                                <td>{{ data.count }}</td>
                                <td>{{ data.percentage | floatformat:2 }}%</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </details>
    </div>
{% endblock %}