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

{% block page_title %}Multi-Store Master Dashboard{% endblock %}
{% block admin_content %}
<div id="multi-store-dashboard"
    data-domain="{{ domain_name }}"
    data-currency-symbol="{{ currency_symbol | default(value='₹') }}">
    {{ mh::management_header_simple(
        title="Multi-Store Master Dashboard",
        subtitle="Monitor and manage your entire retail network and aggregated performance.",
        actions_html='<button onclick="openCreateModal()" class="blocks-button blocks-button-primary"><i class="fas fa-plus"></i> Provision New Branch</button>'
    ) }}

    <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">Active branches</p>
            <p class="mb-0 mt-2 text-2xl font-bold text-foreground" id="ms-branch-count">—</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">Orders today</p>
            <p class="mb-0 mt-2 text-2xl font-bold text-foreground" id="ms-orders-today">—</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">Revenue today</p>
            <p class="mb-0 mt-2 text-2xl font-bold text-foreground" id="ms-revenue-today">—</p>
        </article>
    </div>

    <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-divider px-4 py-4 sm:px-6">
            <h2 class="m-0 text-lg font-semibold text-foreground">Store network</h2>
            <a href="/plugins/multi-store/branches" class="blocks-button blocks-button-secondary">View All <i class="fas fa-arrow-right"></i></a>
        </div>

        <div class="blocks-responsive-table overflow-x-auto">
            <table class="blocks-admin-table w-full">
                <thead>
                    <tr>
                        <th>Branch Name</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody id="ms-dashboard-branches-body">
                    <tr>
                        <td colspan="4" class="p-10 text-center text-muted">
                            Loading branches…
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
</div>

{% include "multi-store/provision_modal.html" %}
{% endblock %}

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