{% extends "admin/base_site.html" %}
{% load humanize %}
{% block content %}

<style>
.dashboard {
    padding: 20px;
}

/* Cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    padding: 20px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-weight: 500;
    line-height: 1.6;           
    font-size: 14px;
}

.card strong {
    display: block;
    font-size: 16px;
    margin-bottom: 10px;
}

.metric {
    margin-bottom: 6px;        /* ✅ spacing between lines */
    display: flex;
    justify-content: space-between;  /* 🔥 pushes value to the end */
    align-items: center;
}
.metric span:last-child {
    font-weight: 600;
}

.metric.total {
    margin-top: 10px;          /* ✅ separate Total slightly */
    font-weight: 600;
    font-size: 15px;
}

.metric:not(.total) {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 4px;
}

.green { background: #16a34a; }
.blue { background: #2563eb; }
.orange { background: #f59e0b; }
.red { background: #dc2626; }

/* Tabs */
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab {
    padding: 10px 15px;
    background: #e5e7eb;
    cursor: pointer;
    border-radius: 6px;
}

.tab.active {
    background: #2563eb;
    color: white;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.hidden {
    display: none;
}
</style>

<div class="dashboard">

    <!-- SUMMARY CARDS -->
    <div class="cards">
        <!-- TODAY -->
        <div class="card green">
            <strong>Today</strong><br>
            <div class="metric"> STK:<span id="today-stk"> {{ summary.today.stk_total|default:0|intcomma }}</span> </div>
            <div class="metric"> C2B:<span id="today-c2b"> {{ summary.today.c2b_total|default:0|intcomma }}</span> </div>
            <div class="metric total"> Total: <span id="today-total"> {{ summary.today.total|default:0|intcomma }}</span> </div>
        </div>

        <!-- MONTH -->
        <div class="card blue">
            <strong>This Month</strong><br>
            <div class="metric"> STK: <span id="month-stk"> {{ summary.month.stk_total|default:0|intcomma }}</span> </div>
            <div class="metric"> C2B: <span id="month-c2b"> {{ summary.month.c2b_total|default:0|intcomma }}</span> </div>
            <div class="metric total"> Total: <span id="month-total"> {{ summary.month.total|default:0|intcomma }}</span> </div>
        </div>

        <!-- YEAR -->
        <div class="card orange">
            <strong>This Year</strong><br>
            <div class="metric">  STK: <span id="year-stk">{{ summary.year.stk_total|default:0|intcomma }}</span> </div>
            <div class="metric">  C2B: <span id="year-c2b">{{ summary.year.c2b_total|default:0|intcomma }} </span></div>
           <div class="metric total">  Total:<span id="year-total"> {{ summary.year.total|default:0|intcomma }}</span> </div>
        </div>

        <!-- FAILED -->
        <div class="card red">
            <strong>Today</strong><br>
            <div class="metric"> FAILED: <span id="today-failed"> {{ summary.failed_today }} </span></div>
            <div class="metric"> PENDING: <span id="today-pending"> {{summary.pending_today}} </span></div>
            <div class="metric total">  TOTAL: <span id="today-pending-failed-total"> {{summary.failed_today|add:summary.pending_today}} </span> </div>
        </div>

    </div>

    <!-- TABS -->
    <div class="tabs">
        <div class="tab active" onclick="showTab('daily')">This Month</div>
        <div class="tab" onclick="showTab('hourly')">Real-time Hourly</div>
    </div>

    <!-- DAILY TABLE -->
    <div id="daily" class="tab-content">
        <table class="table">
            <tr>
                <th>Date</th>
                <th>Total Trans</th>
                <th>STK</th>
                <th>C2B</th>
                <th>Success</th>
                <th>Failed</th>
                <th>Pending</th>
                
            </tr>

            {% for row in daily_data %}
            <tr>
                <td>{{ row.date }}</td>
                <td>{{ row.total_amount|intcomma  }}</td>
                <td>{{ row.stk }}</td>
                <td>{{ row.c2b }}</td>
                <td>{{ row.success }}</td>
                <td>{{ row.failed }}</td>
                <td>{{ row.pending }}</td>
                
            </tr>
            {% endfor %}
        </table>
    </div>

    <!--  HOURLY TABLE -->
    <div id="hourly" class="tab-content hidden">
        <table class="table">
            <tr>
                <th>Hour</th>
                <th>Total</th>
                <th>Success</th>
                <th>Failed</th>
                <th>Pending</th>
            </tr>
        <tbody id="hourly-body"> 
            {% for row in hourly_data %}
            <tr>
                <td>{{ row.hour }}</td>
                <td>{{ row.total}}</td>
                <td>{{ row.success }}</td>
                <td>{{ row.failed }}</td>
                <td>{{ row.pending }}</td>
            </tr>
            {% endfor %}
        </tbody>
        </table>
    </div>

</div>

<script>
function showTab(tab) {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    document.getElementById(tab).classList.remove('hidden');

    document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
    event.target.classList.add('active');
}

// autoreferesh
//function formatNumber(num) {
//    return new Intl.NumberFormat().format(num);
//}
function formatNumber(num) {
    return new Intl.NumberFormat('en-KE', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }).format(num);
}

async function refreshDashboard() {
    try {
        const response = await fetch("/reports/dashboard-data/");
        const data = await response.json();

        // UPDATE TODAY CARD
        document.getElementById("today-stk").innerText = formatNumber(data.today.stk);
        document.getElementById("today-c2b").innerText = formatNumber(data.today.c2b);
        document.getElementById("today-total").innerText = formatNumber(data.today.total);
        document.getElementById("today-failed").innerText = data.today.failed;
        document.getElementById("today-pending").innerText = data.today.pending;
        document.getElementById("today-pending-failed-total").innerText = data.today.failed + data.today.pending;

        // UPDATE HOURLY TABLE
        const tbody = document.getElementById("hourly-body");
        tbody.innerHTML = "";

        data.hourly.forEach(row => {
            const tr = `
                <tr>
                    <td>${row.hour}</td>
                    <td>${row.total}</td>
                    <td>${row.success}</td>
                    <td>${row.failed}</td>
                    <td>${row.pending}</td>
                </tr>
            `;
            tbody.innerHTML += tr;
        });

        // Montly data

        document.getElementById("month-total").innerText = formatNumber(data.month.total);
        document.getElementById("month-stk").innerText = formatNumber(data.month.stk);
        document.getElementById("month-c2b").innerText = formatNumber(data.month.c2b);
        // Yearly data
        document.getElementById("year-total").innerText = formatNumber(data.year.total);
        document.getElementById("year-stk").innerText = formatNumber(data.year.stk);
        document.getElementById("year-c2b").innerText = formatNumber(data.year.c2b);

    } catch (error) {
        console.error("Refresh error:", error);
    }
}

// AUTO REFRESH EVERY 10 SECONDS
setInterval(refreshDashboard, 10000);
//end of autorefresh
</script>

{% endblock %}