<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Page: Dashboard
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="row">
    <div class="col-md-6 col-xl-3" v-for="(total, tid) in dashboard.totals" :key="tid">
        <div class="widget-rounded-circle card">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle border" :class="getColorClass(tid)">
                            <i class="material-icons material-symbols-outlined font-22 avatar-title d-flex" :class="getColorClass(tid, 'text')">{{ getIcon(tid) }}</i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-end">
                            <h3 class="text-dark mt-1">{{ total }}</h3>
                            <p class="text-muted mb-1 text-truncate">{{ langs.dashboard["total_"+ tid] }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" v-if="chart.show">
    <div class="card-body">
        <div class="float-end d-none d-md-inline-block">
            <div class="btn-group">
                <button type="button" class="btn btn-xs" :class="chart.type == 'month' ? 'btn-secondary' : 'btn-light'" @click="showChart('month')" :disabled="chart.loading == 'month'">{{ langs.dashboard.monthly }}</button>
                <button type="button" class="btn btn-xs" :class="chart.type == 'year' ? 'btn-secondary' : 'btn-light'" @click="showChart('year')" :disabled="chart.loading == 'year'">{{ langs.dashboard.yearly }}</button>
            </div>
        </div>
        <h4 class="header-title mb-1">{{ langs.dashboard.orders_chart }}</h4>
        <canvas id="pdapp-chart-orders" class="w-100" style="max-height: 350px;"></canvas>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h4 class="header-title mb-1">{{ langs.dashboard.system_requirements }}</h4>
        <table class="table table-borderless table-centered mb-0">
            <thead class="table-light">
                <tr>
                    <th>{{ langs.dashboard.status }}</th>
                    <th>{{ langs.dashboard.name }}</th>
                    <th>{{ langs.dashboard.requirement }}</th>
                    <th>{{ langs.dashboard.current }}</th>
                    <th>{{ langs.dashboard.guide }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(require, rid) in dashboard.require" :key="rid">
                    <td><i class="material-icons material-symbols-outlined" :class="'text-'+ require.status">{{ require.icon }}</i></td>
                    <td>{{ langs.dashboard[require.key] }}</td>
                    <td>{{ require.require }}</td>
                    <td>{{ require.current }}</td>
                    <td>
                        <template v-if="require.status != 'success'">
                            <span v-if="require.key == 'php_version' || require.key == 'wp_version' || require.key == 'woo_version'">{{ langs.dashboard[require.key +'_desc'] }} {{ require.require }}+</span>
                            <span v-else-if="require.key == 'upload_folder' || require.key == 'cache_folder'">{{ langs.dashboard.permission_desc }}</span>
                            <span v-else-if="require.key == 'purchased'">{{ langs.dashboard.purchased_desc }}</span>
                            <span v-else>{{ langs.dashboard.phpini_desc }}</span>
                            <a v-if="listGuide[require.key] != undefined" target="_blank" :href="listGuide[require.key]" class="ms-1">{{ langs.dashboard.read_more }}</a>
                        </template>
                        <button type="button" v-if="require.key == 'purchased'" class="btn btn-sm btn-primary ms-1" @click="showVerifyModal">
                            <span v-if="require.status == 'success' && pdappPurchasedCode != ''">{{ langs.dashboard.change_purchased_code }}</span>
                            <span v-else>{{ langs.dashboard.purchased_desc }}</span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>