#{include file="../Header.html"}
#{js("/assets/static/echarts.min.js")}

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Toolbar-->
    #{include file="../Toolbar.html"}
    <!--end::Toolbar-->

    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <div class="row g-4">
                <!--begin::Announcements (left)-->
                <div class="col-12 col-lg-3 dashboard-announcements">
                    <div class="card h-100 dashboard-announcements__card" role="region" aria-labelledby="dashboard-announcements-title">
                        <div class="card-header border-0">
                            <div class="card-title">
                                <h3 id="dashboard-announcements-title" class="d-flex align-items-center gap-2">
                                    <i class="fa-duotone fa-regular fa-bullhorn text-primary"></i>#{t("官方公告")}
                                </h3>
                                <span class="dashboard-announcements__subtitle d-none">#{t("平台更新、活动与重要提醒")}</span>
                            </div>
                            <button type="button" class="dashboard-announcements__toggle d-none" aria-label="#{t('收起官方公告')}" aria-expanded="true" aria-controls="dashboard-announcements-content">
                                <span class="material-icons-outlined" aria-hidden="true">expand_less</span>
                            </button>
                        </div>
                        <div class="card-body ad-html pt-2" id="dashboard-announcements-content">
                            <div class="text-center text-muted py-5">
                                <i class="fa-duotone fa-regular fa-spinner fa-spin fs-2"></i>
                                <div class="mt-3">#{t("加载中...")}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Announcements-->

                <!--begin::Main-->
                <div class="col-12 col-lg-9 dashboard-main">
                    <!--begin::Profile card-->
                    <div class="card mb-4 dash-profile">
                        <div class="card-body dash-profile__body">
                            <div class="dash-profile__identity">
                                <div class="dash-profile__avatar-wrap">
                                    <img src="#{if $user.avatar}#{$user.avatar|escape:'html'}#{else}/favicon.ico#{/if}" alt="#{t('头像')}" class="dash-profile__avatar">
                                    <span class="dash-profile__status" aria-hidden="true"></span>
                                </div>
                                <div class="dash-profile__intro">
                                    <div class="dash-profile__eyebrow">
                                        <span class="material-icons-outlined" aria-hidden="true">admin_panel_settings</span>
                                        <span>#{t("管理员账户")}</span>
                                    </div>
                                    <div class="dash-profile__name-row">
                                        <strong class="dash-profile__name">#{$user.nickname|escape:'html'}</strong>
                                        <span class="dash-profile__online">#{t("在线")}</span>
                                    </div>
                                    <div class="dash-profile__email">
                                        <span class="material-icons-outlined" aria-hidden="true">mail_outline</span>
                                        <span>#{$user.email|escape:'html'}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="dash-profile__security" aria-label="#{t('登录信息')}">
                                <div class="dash-profile__meta dash-profile__meta--current">
                                    <span class="dash-profile__meta-icon material-icons-outlined" aria-hidden="true">my_location</span>
                                    <div class="dash-profile__meta-copy">
                                        <span class="dash-profile__meta-label">#{t("本次登录 IP")}</span>
                                        <strong class="dash-profile__meta-value">#{$user.login_ip|escape:'html'}</strong>
                                        <span class="dash-profile__meta-note dash-profile__meta-note--live">#{t("当前会话")}</span>
                                    </div>
                                </div>
                                <div class="dash-profile__meta">
                                    <span class="dash-profile__meta-icon material-icons-outlined" aria-hidden="true">history</span>
                                    <div class="dash-profile__meta-copy">
                                        <span class="dash-profile__meta-label">#{t("上次登录")}</span>
                                        #{if $user.last_login_ip}
                                            <strong class="dash-profile__meta-value">#{$user.last_login_ip|escape:'html'}</strong>
                                            <span class="dash-profile__meta-note">#{$user.last_login_time|escape:'html'}</span>
                                        #{else}
                                            <strong class="dash-profile__meta-value dash-profile__meta-value--muted">#{t("暂无记录")}</strong>
                                        #{/if}
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--end::Profile card-->

                    <!--begin::Section header + data filter-->
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                        <h2 class="md-section-title">#{t("数据概览")}</h2>
                        <select name="status" class="form-select form-select-sm dashboard-data-type" style="width: auto;">
                            <option value="0" selected="selected">#{t("今日数据")}</option>
                            <option value="1">#{t("昨日数据")}</option>
                            <option value="2">#{t("本周数据")}</option>
                            <option value="3">#{t("本月数据")}</option>
                            <option value="4">#{t("所有数据")}</option>
                        </select>
                    </div>
                    <!--end::Section header-->

                    <div class="dashboard-data-feedback" role="status" aria-live="polite" hidden></div>

                    <!--begin::Stat grid-->
                    <div class="md-stat-grid" data-admin-mobile-stats="mini" role="region" aria-label="#{t('经营数据概览')}">
                        #{include file="../Component/StatCard.html" accent="success" icon="fa-sack-dollar" label="盈利" vclass="order_profit" value="—" itemClass="md-stat-grid__item--wide"}
                        #{include file="../Component/StatCard.html" accent="primary" icon="fa-circle-dollar" label="交易金额" vclass="turnover" value="—" itemClass="md-stat-grid__item--wide"}
                        #{include file="../Component/StatCard.html" accent="success" icon="fa-receipt" label="订单" vclass="order_num" value="—"}
                        #{include file="../Component/StatCard.html" accent="secondary" icon="fa-store" label="子站" vclass="business" value="—"}
                        #{include file="../Component/StatCard.html" accent="danger" icon="fa-money-bill-wave" label="未处理提现" vclass="cash_status_0" value="—"}
                        #{include file="../Component/StatCard.html" accent="success" icon="fa-money-bill" label="成功提现" vclass="cash_money_status_1" value="—" itemClass="md-stat-grid__item--wide"}
                        #{include file="../Component/StatCard.html" accent="primary" icon="fa-user-plus" label="注册用户" vclass="user_register_num" value="—"}
                        #{include file="../Component/StatCard.html" accent="warning" icon="fa-file-invoice-dollar" label="充值金额" vclass="recharge_amount" value="—" itemClass="md-stat-grid__item--wide"}
                        #{include file="../Component/StatCard.html" accent="success" icon="fa-credit-card" label="第三方支付" vclass="online_amout" value="—" itemClass="md-stat-grid__item--wide"}
                        #{include file="../Component/StatCard.html" accent="danger" icon="fa-bullhorn" label="推广返利" vclass="divide_amount" value="—" itemClass="md-stat-grid__item--wide"}
                        #{include file="../Component/StatCard.html" accent="primary" icon="fa-hand-holding-dollar" label="子站佣金" vclass="rebate" value="—" itemClass="md-stat-grid__item--wide"}
                        #{include file="../Component/StatCard.html" accent="success" icon="fa-filter-circle-dollar" label="供货手续费" vclass="cost" value="—" itemClass="md-stat-grid__item--wide"}
                    </div>
                    <!--end::Stat grid-->

                    <!--begin::Chart-->
                    <div class="card">
                        <div class="card-header border-0">
                            <div class="card-title">
                                <h3 class="d-flex align-items-center gap-2">
                                    <i class="fa-duotone fa-regular fa-chart-line text-primary"></i>#{t("数据趋势")}
                                </h3>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="dashboard-chart-feedback" role="status" aria-live="polite" hidden></div>
                            <div id="statistics" style="height: 350px; width: 100%;"></div>
                        </div>
                    </div>
                    <!--end::Chart-->
                </div>
                <!--end::Main-->
            </div>
        </div>
        <!--end::Container-->
    </div>
    <!--end::Post-->
</div>
<!--end::Content-->

#{ready("/assets/admin/controller/dashboard/index.js")}
#{include file="../Footer.html"}