{% extends "admin_base.html" %}
{% import "macros/admin_management_header.html" as mh %}

{% block page_title %}Network Analytics{% endblock %}
{% block admin_content %}
<div id="multi-store-analytics-config" class="hidden" data-currency-symbol="{{ currency_symbol | default(value='₹') }}"></div>
<div>
    {{ mh::management_header_open(title="Network Analytics", subtitle="Aggregated performance metrics and distribution across all active branches.", back_href="/plugins/multi-store", back_label="Dashboard") }}
            <div class="flex flex-wrap items-center gap-2">
                <span class="blocks-status-pill is-neutral">Today · UTC</span>
                <button class="blocks-button blocks-button-secondary" onclick="window.print()">
                    <i class="fas fa-download"></i> Export
                </button>
            </div>
    {{ mh::management_header_close() }}

    <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
        <article class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
            <p class="m-0 text-sm font-medium text-muted">Network revenue · UTC today</p>
            <p class="mb-0 mt-2 text-2xl font-bold text-foreground" id="ms-analytics-revenue">—</p>
        </article>
        <article class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
            <p class="m-0 text-sm font-medium text-muted">Network orders · UTC today</p>
            <p class="mb-0 mt-2 text-2xl font-bold text-foreground" id="ms-analytics-orders">—</p>
        </article>
        <article class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
            <p class="m-0 text-sm font-medium text-muted">Branches included</p>
            <p class="mb-0 mt-2 text-2xl font-bold text-foreground" id="ms-analytics-branches">—</p>
        </article>
    </div>

    <div class="mb-6 grid grid-cols-1 gap-4 lg:grid-cols-5">
        <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6 lg:col-span-3">
            <h2 class="mb-4 mt-0 text-lg font-semibold text-foreground">Revenue by branch today</h2>
            <canvas id="revenueChart" role="img" aria-label="Bar chart showing today's revenue by branch"></canvas>
            <p class="sr-only">Chart values are also listed in the comparative branch performance table.</p>
        </section>
        <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6 lg:col-span-2">
            <h2 class="mb-4 mt-0 text-lg font-semibold text-foreground">Orders by branch today</h2>
            <canvas id="orderChart" role="img" aria-label="Chart showing today's order volume by branch"></canvas>
            <p class="sr-only">Chart values are also listed in the comparative branch performance table.</p>
        </section>
    </div>

    <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm">
        <div class="border-b border-divider px-4 py-4 sm:px-6">
            <h2 class="m-0 text-lg font-semibold text-foreground">Comparative branch performance today</h2>
        </div>
        <div class="blocks-responsive-table overflow-x-auto">
            <table class="blocks-admin-table w-full">
                <thead>
                    <tr>
                        <th>Branch</th>
                        <th>Revenue Contribution</th>
                        <th>Order Count</th>
                        <th>Average order value</th>
                    </tr>
                </thead>
                <tbody id="ms-analytics-perf-body">
                    <tr>
                        <td colspan="4" class="p-8 text-center text-muted">Loading analytics…</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="analytics-data" class="hidden"
     data-labels="[]"
     data-revenue="[]"
     data-orders="[]"></div>

{% include "partials/admin_vendor_chartjs.html" %}
{% endblock %}

{% block scripts %}
<script src="/plugins/multi-store/assets/js/analytics.js"></script>
<script src="/plugins/multi-store/assets/multi-store.js"></script>
{% endblock %}