{% extends 'base.html' %}

{% block content %}
<style>
    .info-box {
        transition: transform 0.2s;
    }

    .info-box:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

</style>
<div class="row">
    <!-- Left Column for General Information -->
    <div class="col-lg-12">
        <!-- System Stats Card -->
        <div class="card card-primary card-outline">
            {% if page_title %}
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-tachometer-alt"></i> {{ page_title }}
                </h3>
            </div>
            {% endif %}
            <div class="card-body">
                <div class="row mb-4">
                    <!-- Used Storage -->
                    <div class="col-md-3">
                        <div class="info-box bg-info">
                            <span class="info-box-icon"><i class="fas fa-hdd"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Used Storage (binary and rsc backups)</span>
                                <span class="info-box-number">{{ media_root_stats.used }} used</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: {{ media_root_stats.usage_percentage }}%"></div>
                                </div>
                                <span class="progress-description">
                                    {{ media_root_stats.usage_percentage }}% of {{ media_root_stats.total }}
                                    {% if media_root_stats.storage_warning %}
                                        <span class="text-danger">{{ media_root_stats.storage_warning }}</span>
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Backup Queue -->
                    <div class="col-md-3">
                        <div class="info-box bg-warning">
                            <span class="info-box-icon"><i class="fas fa-tasks"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Backup Queue</span>
                                <span class="info-box-number">{{ queue }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Successful Backups -->
                    <div class="col-md-3">
                        <div class="info-box bg-success">
                            <span class="info-box-icon"><i class="fas fa-check-circle"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Successful Backups (24h)</span>
                                <span class="info-box-number">{{ success_backup_last_24h }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Failed Backups -->
                    <div class="col-md-3">
                        <div class="info-box bg-danger">
                            <span class="info-box-icon"><i class="fas fa-times-circle"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Failed Backups (24h)</span>
                                <span class="info-box-number">{{ error_backup_last_24h }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">

                    <!-- Total Routers -->
                    <div class="col-md-3">
                        <div class="info-box bg-primary">
                            <span class="info-box-icon"><i class="fas fa-network-wired"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Total Routers</span>
                                <span class="info-box-number">{{ total_router_count }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Online Routers -->
                    <div class="col-md-3">
                        <div class="info-box bg-success">
                            <span class="info-box-icon"><i class="fas fa-plug"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Online Routers</span>
                                <span class="info-box-number">{{ router_online_count }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Offline Routers -->
                    <div class="col-md-3">
                        <div class="info-box bg-danger">
                            <span class="info-box-icon"><i class="fas fa-plug"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Offline Routers</span>
                                <span class="info-box-number">{{ router_offline_count }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Disabled Routers -->
                    <div class="col-md-3">
                        <div class="info-box bg-danger">
                            <span class="info-box-icon"><i class="fas fa-times"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Disabled Routers</span>
                                <span class="info-box-number">{{ router_disabled_count }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <!-- Not Monitored Routers -->
                    <div class="col-md-3">
                        <div class="info-box bg-secondary">
                            <span class="info-box-icon"><i class="fas fa-question-circle"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Not Monitored Routers</span>
                                <span class="info-box-number">{{ router_not_monitored_count }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div> <!-- /.card-body -->
        </div> <!-- /.card -->
    </div> <!-- /.col-lg-12 -->
</div> <!-- /.row -->


<!-- Right Column for Charts -->
<div class="row">
    <div class="col-lg-6">
        <!-- Backup Status Chart -->
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-bar"></i> Backup Status Statistics</h3>
                <div class="card-tools">
                    <select id="days-select-backup" class="form-control">
                        <option value="7">Last 7 days</option>
                        <option value="3">Last 3 days</option>
                        <option value="5">Last 5 days</option>
                        <option value="10">Last 10 days</option>
                        <option value="15">Last 15 days</option>
                        <option value="30">Last 30 days</option>
                    </select>
                </div>
            </div>
            <div class="card-body">
                <canvas id="backupChart"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <!-- Router Status Chart -->
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-signal"></i> Router Status Statistics</h3>
                <div class="card-tools">
                    <select id="days-select-status" class="form-control">
                        <option value="7">Last 7 days</option>
                        <option value="3">Last 3 days</option>
                        <option value="5">Last 5 days</option>
                        <option value="10">Last 10 days</option>
                        <option value="15">Last 15 days</option>
                        <option value="30">Last 30 days</option>
                    </select>
                </div>
            </div>
            <div class="card-body">
                <canvas id="routerStatusChart"></canvas>
            </div>
        </div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    var backupChart;

    function createBackupChart(data) {
        var ctx = document.getElementById('backupChart').getContext('2d');
        if (backupChart) {
            backupChart.destroy();
        }
        backupChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.dates,
                datasets: [{
                    label: 'Successful Backups',
                    data: data.success_data,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    fill: true, // Fill the area under the line
                },
                {
                    label: 'Failed Backups',
                    data: data.error_data,
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2,
                    fill: true, // Fill the area under the line
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
    function updateBackupStatistics(days) {
        fetch(`/backup_statistics_data?days=${days}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Invalid days parameter');
            }
            return response.json();
        })
        .then(data => {
            createBackupChart(data);
        })
        .catch(error => {
            alert(error.message);
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        const daysSelectBackup = document.getElementById('days-select-backup');
        daysSelectBackup.addEventListener('change', (event) => {
            updateBackupStatistics(event.target.value);
        });

        updateBackupStatistics(7); // Initial load for the last 7 days
    });
</script>
<script>
    var routerStatusChart;
    function createRouterStatusChart(data) {
        var ctx2 = document.getElementById('routerStatusChart').getContext('2d');
        if (routerStatusChart) {
            routerStatusChart.destroy();
        }
        routerStatusChart = new Chart(ctx2, {
            type: 'line',
            data: {
                labels: data.dates,
                datasets: [{
                    label: 'Online Routers',
                    data: data.online_data,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                    fill: true, // Fill the area under the line
                },
                {
                    label: 'Offline Routers',
                    data: data.offline_data,
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 2,
                    fill: true, // Fill the area under the line
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

    function updateRouterStatus(days) {
        fetch(`/router_status_data?days=${days}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Invalid days parameter'+ " " + days);
            }
            return response.json();
        })
        .then(data => {
            createRouterStatusChart(data);
        })
        .catch(error => {
            alert(error.message);
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        const daysSelectStatus = document.getElementById('days-select-status');
        daysSelectStatus.addEventListener('change', (event) => {
            updateRouterStatus(event.target.value);
        });

        updateRouterStatus(7); // Initial load for the last 7 days
    });
</script>


{% endblock %}