<?php
/*
 * @author: CloudZA(云之安) <2922619853@qq.com>
 * @hitokoto: 一场秋雨一场凉，秋心酌满泪为霜。
 * Copyright (c) 2022 by CloudZA, All Rights Reserved.
 */

include_once 'common.php';
include_once 'partials/head.php';
if ( !isset($islogin)) header("Location: /");//非法访问

$user1        = Db::table('app_user')
                  ->where(['plans' => 1])
                  ->count(); // TODO: 已支付订单
$user2        = Db::table('app_user')
                  ->count(); // TODO: 未支付订单
$total_orders = Db::table('app_order')
                  ->count(); // TODO: 总订单
$key_count    = Db::table('app_keys')
                  ->count(); // TODO: Key数量统计

?>

<div id="pjax-container">
    <div class="content animated fadeIn">
        <div class="d-flex flex-column flex-md-row justify-content-md-between align-items-md-center py-2 text-center text-md-start">
            <div class="flex-grow-1 mb-1 mb-md-0">
                <h1 class="h3 fw-bold mb-2">
                    <?php echo WEB_NAME ?>
                </h1>
                <h2 class="h6 fw-medium fw-medium text-muted mb-0">
                    Welcome <a class="fw-semibold" href="javascript:void(0)"><?php echo ADMNICK ?></a>, everything looks great.
                </h2>
            </div>
            <div class="mt-3 mt-md-0 ms-md-3 space-x-1">
                <a class="btn btn-sm btn-alt-secondary space-x-1" data-pjax href="set.php">
                    <i class="fa fa-cogs opacity-50"></i>
                    <span>设置</span>
                </a>
                <a class="btn btn-sm btn-alt-secondary space-x-1" data-pjax href="order.php">
                    <i class="fa fa-chart-column opacity-50"></i>
                    <span>订单</span>
                </a>
            </div>
        </div>
    </div>
    <div class="content animated fadeIn">
        <div class="row items-push">
            <div class="col-sm-6 col-xxl-3">
                <div class="block block-rounded d-flex flex-column h-100 mb-0">
                    <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
                        <dl class="mb-0">
                            <dt class="fs-3 fw-bold"><?php echo $user1; ?></dt>
                            <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">会员统计</dd>
                        </dl>
                        <div class="item item-rounded-lg bg-body-light">
                            <i class="far fa-gem fs-3 text-primary"></i>
                        </div>
                    </div>
                    <div class="bg-body-light rounded-bottom">
                        <a class="block-content block-content-full block-content-sm fs-sm fw-medium d-flex align-items-center justify-content-between" data-pjax href="order_map.php">
                            <span>支付地图</span>
                            <i class="fa fa-arrow-alt-circle-right ms-1 opacity-25 fs-base"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xxl-3">
                <div class="block block-rounded d-flex flex-column h-100 mb-0">
                    <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
                        <dl class="mb-0">
                            <dt class="fs-3 fw-bold"><?php echo $user2; ?></dt>
                            <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">用户统计</dd>
                        </dl>
                        <div class="item item-rounded-lg bg-body-light">
                            <i class="far fa-user-circle fs-3 text-primary"></i>
                        </div>
                    </div>
                    <div class="bg-body-light rounded-bottom">
                        <a class="block-content block-content-full block-content-sm fs-sm fw-medium d-flex align-items-center justify-content-between" data-pjax href="user.php">
                            <span>用户列表</span>
                            <i class="fa fa-arrow-alt-circle-right ms-1 opacity-25 fs-base"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xxl-3">
                <div class="block block-rounded d-flex flex-column h-100 mb-0">
                    <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
                        <dl class="mb-0">
                            <dt class="fs-3 fw-bold"><?php echo $total_orders; ?></dt>
                            <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">订单统计</dd>
                        </dl>
                        <div class="item item-rounded-lg bg-body-light">
                            <i class="far fa-paper-plane fs-3 text-primary"></i>
                        </div>
                    </div>
                    <div class="bg-body-light rounded-bottom">
                        <a class="block-content block-content-full block-content-sm fs-sm fw-medium d-flex align-items-center justify-content-between" data-pjax href="order.php">
                            <span>订单列表</span>
                            <i class="fa fa-arrow-alt-circle-right ms-1 opacity-25 fs-base"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-xxl-3">
                <div class="block block-rounded d-flex flex-column h-100 mb-0">
                    <div class="block-content block-content-full flex-grow-1 d-flex justify-content-between align-items-center">
                        <dl class="mb-0">
                            <dt class="fs-3 fw-bold"><?php echo $key_count; ?></dt>
                            <dd class="fs-sm fw-medium fs-sm fw-medium text-muted mb-0">KEY统计</dd>
                        </dl>
                        <div class="item item-rounded-lg bg-body-light">
                            <i class="fa fa-chart-bar fs-3 text-primary"></i>
                        </div>
                    </div>
                    <div class="bg-body-light rounded-bottom">
                        <a class="block-content block-content-full block-content-sm fs-sm fw-medium d-flex align-items-center justify-content-between" data-pjax href="keylist.php">
                            <span>KEY列表</span>
                            <i class="fa fa-arrow-alt-circle-right ms-1 opacity-25 fs-base"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content animated fadeIn">
        <div class="row">
            <div class="col-xl-8">
                <div class="block block-bordered block-rounded">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">
                            统计<small>数据</small>
                        </h3>
                        <div class="block-options">
                            <button type="button" onclick="" class="btn-block-option" data-toggle="block-option" data-action="state_toggle" data-action-mode="demo">
                                <i class="si si-refresh"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content">
                        <div class="row">
                            <div class="col-xxl-4">
                                <ul class="list-group push">
                                    <li class="list-group-item justify-content-between align-items-center">
                                        <div class="text-muted">
                                            <div class="fs-3 fw-semibold mb-2"><span id="today_money"></span>
                                                <small class="currenct currency-usd">RMB</small></div>
                                            <div class="fs-sm">累计收入：<strong><span id="total_money" class="fs-xs">0.00</span> <span class="fs-xs">RMB</span></strong></div>
                                            <div class="fs-sm"><em class="si si-wallet"></em> 今日收入</div>
                                        </div>
                                    </li>
                                </ul>

                                <ul class="list-group push">
                                    <li class="list-group-item justify-content-between align-items-center">
                                        <div class="text-muted">
                                            <div class="fs-3 fw-semibold mb-2"><span id="order_paid">0</span> <small class="currenct currency-usd">笔</small></div>
                                            <div class="fs-sm">未成功订单：<strong><span id="order_unpaid" class="fs-xs">0</span> <span class="fs-xs">笔</span></strong></div>
                                            <div class="fs-sm"><em class="si si-speedometer"></em> 积累交易成功订单</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-xxl-8">
                                <div class="block-content border list-group mb-2">
                                    <canvas id="bars" height="220"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="block block-bordered block-rounded">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">订单<small>统计</small></h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="state_toggle" data-action-mode="demo">
                                <i class="si si-refresh"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content block-content-full text-center">
                        <div class="block-content border list-group mb-2">
                                <canvas id="lines" height="215"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        app.ajax('ajax.php?act=orderView', null, res => {
            if (res.code === 200) {
                app.getval('#today_money', (res.data.today_revenue) ?? '0')
                app.getval('#total_money', (res.data.total_revenue) ?? '0')
                app.getval('#order_paid', res.data.order_paid)
                app.getval('#order_unpaid', res.data.order_unpaid)
                app.charts('bars', 'bar', res.data.date, [
                    {
                        label                    : "已支付数量",
                        fill                     : !0,
                        backgroundColor          : "rgba(171, 227, 125, .5)",
                        borderColor              : "rgba(171, 227, 125, 1)",
                        pointBackgroundColor     : "rgba(171, 227, 125, 1)",
                        pointBorderColor         : "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor    : "rgba(171, 227, 125, 1)",
                        data                     : res.data.paid_orders
                    }, {
                        label                    : "未支付数量",
                        fill                     : !0,
                        backgroundColor          : "rgba(0, 0, 0, .1)",
                        borderColor              : "rgba(0, 0, 0, .3)",
                        pointBackgroundColor     : "rgba(0, 0, 0, .3)",
                        pointBorderColor         : "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor    : "rgba(0, 0, 0, .3)",
                        data                     : res.data.unpaid_orders
                    }
                ]);
                app.charts('lines', 'line', res.data.date, [
                    {
                        label                    : "支付率",
                        fill                     : !0,
                        backgroundColor          : "rgba(171, 227, 125, .5)",
                        borderColor              : "rgba(171, 227, 125, 1)",
                        pointBackgroundColor     : "rgba(171, 227, 125, 1)",
                        pointBorderColor         : "#fff",
                        pointHoverBackgroundColor: "#fff",
                        pointHoverBorderColor    : "rgba(171, 227, 125, 1)",
                        data                     : res.data.payment_rate
                    },
                    // {
                    //     label                    : "升降率",
                    //     fill                     : !0,
                    //     backgroundColor          : "rgba(0, 0, 0, .1)",
                    //     borderColor              : "rgba(0, 0, 0, .3)",
                    //     pointBackgroundColor     : "rgba(0, 0, 0, .3)",
                    //     pointBorderColor         : "#fff",
                    //     pointHoverBackgroundColor: "#fff",
                    //     pointHoverBorderColor    : "rgba(0, 0, 0, .3)",
                    //     data                     : res.data.rate_change
                    // }
                ]);
            }
            else {
                app.notify(res.msg, 'warning')
            }
        })



</script>
</div>
<? include_once 'partials/foot.php'; ?>


