<?php
include('../include/db_conx.php');
isset($_SESSION['admin_login']);
if (!isset($_SESSION['admin_login'])) {
    header("location: auth-login.php");
    exit();
} else {
    include('../include/admin_head.php');


    $DeleteUserStatus = $_GET['DeleteUserStatus'];
    if ($DeleteUserStatus == 'true') {
        $msg = 'Client Successfully Deleted';
        $link = 'index.php';
        swal_success($msg, $link);
    }
?>




    <body>

        <!-- <body data-layout="horizontal"> -->

        <!-- Begin page -->
        <div id="layout-wrapper">

            <?php include('../include/admin_header.php'); ?>

            <!-- ========== Left Sidebar Start ========== -->

            <!-- Left Sidebar End -->
            <?php include('../include/admin_sidebar.php'); ?>



            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">

                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h4 class="mb-sm-0 font-size-18">Clients List</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="javascript: void(0);">Clients</a></li>
                                            <li class="breadcrumb-item active">Clients List</li>
                                        </ol>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- end page title -->

                        <div class="row">
                            <div class="col-xl-4 col-md-6">
                                <!-- card -->
                                <div class="card card-h-100">
                                    <!-- card body -->
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col-6">
                                                <span class="text-muted mb-3 lh-1 d-block text-truncate">No. of Clients</span>
                                                <h4 class="mb-3">
                                                    <span class="counter-value" data-target="<?php echo $num_of_total_number_of_users ?>"></span>
                                                </h4>
                                            </div>

                                            <div class="col-6">
                                                <div id="mini-chart1" data-colors="[&quot;#5156be&quot;]" class="apex-charts mb-2" style="min-height: 50px;">
                                                    <div id="apexcharts6gbgocfx" class="apexcharts-canvas apexcharts6gbgocfx apexcharts-theme-light" style="width: 105px; height: 50px;"><svg id="SvgjsSvg1437" width="105" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent none repeat scroll 0% 0%;">
                                                            <g id="SvgjsG1439" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)">
                                                                <defs id="SvgjsDefs1438">
                                                                    <clipPath id="gridRectMask6gbgocfx">
                                                                        <rect id="SvgjsRect1445" width="111" height="52" x="-3" y="-1" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
                                                                    </clipPath>
                                                                    <clipPath id="gridRectMarkerMask6gbgocfx">
                                                                        <rect id="SvgjsRect1446" width="109" height="54" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
                                                                    </clipPath>
                                                                </defs>
                                                                <line id="SvgjsLine1444" x1="0" y1="0" x2="0" y2="50" stroke="#b6b6b6" stroke-dasharray="3" class="apexcharts-xcrosshairs" x="0" y="0" width="1" height="50" fill="#b1b9c4" filter="none" fill-opacity="0.9" stroke-width="1"></line>
                                                                <g id="SvgjsG1452" class="apexcharts-xaxis" transform="translate(0, 0)">
                                                                    <g id="SvgjsG1453" class="apexcharts-xaxis-texts-g" transform="translate(0, 2.75)"></g>
                                                                </g>
                                                                <g id="SvgjsG1470" class="apexcharts-grid">
                                                                    <g id="SvgjsG1471" class="apexcharts-gridlines-horizontal" style="display: none;">
                                                                        <line id="SvgjsLine1473" x1="0" y1="0" x2="105" y2="0" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1474" x1="0" y1="12.5" x2="105" y2="12.5" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1475" x1="0" y1="25" x2="105" y2="25" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1476" x1="0" y1="37.5" x2="105" y2="37.5" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1477" x1="0" y1="50" x2="105" y2="50" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                    </g>
                                                                    <g id="SvgjsG1472" class="apexcharts-gridlines-vertical" style="display: none;"></g>
                                                                    <line id="SvgjsLine1479" x1="0" y1="50" x2="105" y2="50" stroke="transparent" stroke-dasharray="0"></line>
                                                                    <line id="SvgjsLine1478" x1="0" y1="1" x2="0" y2="50" stroke="transparent" stroke-dasharray="0"></line>
                                                                </g>
                                                                <g id="SvgjsG1447" class="apexcharts-line-series apexcharts-plot-series">
                                                                    <g id="SvgjsG1448" class="apexcharts-series" seriesName="seriesx1" data:longestSeries="true" rel="1" data:realIndex="0">
                                                                        <path id="SvgjsPath1451" d="M 0 48.75C 2.625 48.75 4.875 43.75 7.5 43.75C 10.125 43.75 12.375 38.75 15 38.75C 17.625 38.75 19.875 36.25 22.5 36.25C 25.125 36.25 27.375 27.5 30 27.5C 32.625 27.5 34.875 40.625 37.5 40.625C 40.125 40.625 42.375 20.625 45 20.625C 47.625 20.625 49.875 3.125 52.5 3.125C 55.125 3.125 57.375 9.375 60 9.375C 62.625 9.375 64.875 38.125 67.5 38.125C 70.125 38.125 72.375 41.25 75 41.25C 77.625 41.25 79.875 48.75 82.5 48.75C 85.125 48.75 87.375 20.625 90 20.625C 92.625 20.625 94.875 23.75 97.5 23.75C 100.125 23.75 102.375 40.625 105 40.625" fill="none" fill-opacity="1" stroke="rgba(81,86,190,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-line" index="0" clip-path="url(#gridRectMask6gbgocfx)" pathTo="M 0 48.75C 2.625 48.75 4.875 43.75 7.5 43.75C 10.125 43.75 12.375 38.75 15 38.75C 17.625 38.75 19.875 36.25 22.5 36.25C 25.125 36.25 27.375 27.5 30 27.5C 32.625 27.5 34.875 40.625 37.5 40.625C 40.125 40.625 42.375 20.625 45 20.625C 47.625 20.625 49.875 3.125 52.5 3.125C 55.125 3.125 57.375 9.375 60 9.375C 62.625 9.375 64.875 38.125 67.5 38.125C 70.125 38.125 72.375 41.25 75 41.25C 77.625 41.25 79.875 48.75 82.5 48.75C 85.125 48.75 87.375 20.625 90 20.625C 92.625 20.625 94.875 23.75 97.5 23.75C 100.125 23.75 102.375 40.625 105 40.625" pathFrom="M -1 50L -1 50L 7.5 50L 15 50L 22.5 50L 30 50L 37.5 50L 45 50L 52.5 50L 60 50L 67.5 50L 75 50L 82.5 50L 90 50L 97.5 50L 105 50"></path>
                                                                        <g id="SvgjsG1449" class="apexcharts-series-markers-wrap" data:realIndex="0">
                                                                            <g class="apexcharts-series-markers">
                                                                                <circle id="SvgjsCircle1485" r="0" cx="0" cy="0" class="apexcharts-marker w82ps0qxo no-pointer-events" stroke="#ffffff" fill="#5156be" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g id="SvgjsG1450" class="apexcharts-datalabels" data:realIndex="0"></g>
                                                                </g>
                                                                <line id="SvgjsLine1480" x1="0" y1="0" x2="105" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line>
                                                                <line id="SvgjsLine1481" x1="0" y1="0" x2="105" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line>
                                                                <g id="SvgjsG1482" class="apexcharts-yaxis-annotations"></g>
                                                                <g id="SvgjsG1483" class="apexcharts-xaxis-annotations"></g>
                                                                <g id="SvgjsG1484" class="apexcharts-point-annotations"></g>
                                                            </g>
                                                            <rect id="SvgjsRect1443" width="0" height="0" x="0" y="0" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fefefe"></rect>
                                                            <g id="SvgjsG1469" class="apexcharts-yaxis" rel="0" transform="translate(-18, 0)"></g>
                                                            <g id="SvgjsG1440" class="apexcharts-annotations"></g>
                                                        </svg>
                                                        <div class="apexcharts-legend" style="max-height: 25px;"></div>
                                                        <div class="apexcharts-tooltip apexcharts-theme-light">
                                                            <div class="apexcharts-tooltip-series-group" style="order: 1;"><span class="apexcharts-tooltip-marker" style="background-color: rgb(81, 86, 190);"></span>
                                                                <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                                                                    <div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div>
                                                                    <div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="apexcharts-yaxistooltip apexcharts-yaxistooltip-0 apexcharts-yaxistooltip-left apexcharts-theme-light">
                                                            <div class="apexcharts-yaxistooltip-text"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="resize-triggers">
                                                    <div class="expand-trigger">
                                                        <div style="width: 126px; height: 59px;"></div>
                                                    </div>
                                                    <div class="contract-trigger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-nowrap">
                                            <span class="badge bg-soft-success text-success">+<?php echo $num_of_total_number_of_users ?></span>
                                            <span class="ms-1 text-muted font-size-13">Since created</span>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->

                            <div class="col-xl-4 col-md-6">
                                <!-- card -->
                                <div class="card card-h-100">
                                    <!-- card body -->
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col-6">
                                                <span class="text-muted mb-3 lh-1 d-block text-truncate">No. of Users <br />Online</span>
                                                <h4 class="mb-3">
                                                    <span class="counter-value" data-target="<?php echo $num_of_total_number_of_users_online ?>"></span>
                                                </h4>
                                            </div>
                                            <div class="col-6">
                                                <div id="mini-chart2" data-colors="[&quot;#5156be&quot;]" class="apex-charts mb-2" style="min-height: 50px;">
                                                    <div id="apexchartsh4nv5won" class="apexcharts-canvas apexchartsh4nv5won apexcharts-theme-light" style="width: 105px; height: 50px;"><svg id="SvgjsSvg1487" width="105" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent none repeat scroll 0% 0%;">
                                                            <g id="SvgjsG1489" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)">
                                                                <defs id="SvgjsDefs1488">
                                                                    <clipPath id="gridRectMaskh4nv5won">
                                                                        <rect id="SvgjsRect1495" width="111" height="52" x="-3" y="-1" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
                                                                    </clipPath>
                                                                    <clipPath id="gridRectMarkerMaskh4nv5won">
                                                                        <rect id="SvgjsRect1496" width="109" height="54" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
                                                                    </clipPath>
                                                                </defs>
                                                                <line id="SvgjsLine1494" x1="0" y1="0" x2="0" y2="50" stroke="#b6b6b6" stroke-dasharray="3" class="apexcharts-xcrosshairs" x="0" y="0" width="1" height="50" fill="#b1b9c4" filter="none" fill-opacity="0.9" stroke-width="1"></line>
                                                                <g id="SvgjsG1502" class="apexcharts-xaxis" transform="translate(0, 0)">
                                                                    <g id="SvgjsG1503" class="apexcharts-xaxis-texts-g" transform="translate(0, 2.75)"></g>
                                                                </g>
                                                                <g id="SvgjsG1520" class="apexcharts-grid">
                                                                    <g id="SvgjsG1521" class="apexcharts-gridlines-horizontal" style="display: none;">
                                                                        <line id="SvgjsLine1523" x1="0" y1="0" x2="105" y2="0" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1524" x1="0" y1="12.5" x2="105" y2="12.5" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1525" x1="0" y1="25" x2="105" y2="25" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1526" x1="0" y1="37.5" x2="105" y2="37.5" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1527" x1="0" y1="50" x2="105" y2="50" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                    </g>
                                                                    <g id="SvgjsG1522" class="apexcharts-gridlines-vertical" style="display: none;"></g>
                                                                    <line id="SvgjsLine1529" x1="0" y1="50" x2="105" y2="50" stroke="transparent" stroke-dasharray="0"></line>
                                                                    <line id="SvgjsLine1528" x1="0" y1="1" x2="0" y2="50" stroke="transparent" stroke-dasharray="0"></line>
                                                                </g>
                                                                <g id="SvgjsG1497" class="apexcharts-line-series apexcharts-plot-series">
                                                                    <g id="SvgjsG1498" class="apexcharts-series" seriesName="seriesx1" data:longestSeries="true" rel="1" data:realIndex="0">
                                                                        <path id="SvgjsPath1501" d="M 0 40.625C 2.625 40.625 4.875 23.75 7.5 23.75C 10.125 23.75 12.375 20.625 15 20.625C 17.625 20.625 19.875 48.75 22.5 48.75C 25.125 48.75 27.375 41.25 30 41.25C 32.625 41.25 34.875 38.125 37.5 38.125C 40.125 38.125 42.375 9.375 45 9.375C 47.625 9.375 49.875 3.125 52.5 3.125C 55.125 3.125 57.375 20.625 60 20.625C 62.625 20.625 64.875 40.625 67.5 40.625C 70.125 40.625 72.375 23.75 75 23.75C 77.625 23.75 79.875 20.625 82.5 20.625C 85.125 20.625 87.375 48.75 90 48.75C 92.625 48.75 94.875 41.25 97.5 41.25C 100.125 41.25 102.375 42.5 105 42.5" fill="none" fill-opacity="1" stroke="rgba(81,86,190,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-line" index="0" clip-path="url(#gridRectMaskh4nv5won)" pathTo="M 0 40.625C 2.625 40.625 4.875 23.75 7.5 23.75C 10.125 23.75 12.375 20.625 15 20.625C 17.625 20.625 19.875 48.75 22.5 48.75C 25.125 48.75 27.375 41.25 30 41.25C 32.625 41.25 34.875 38.125 37.5 38.125C 40.125 38.125 42.375 9.375 45 9.375C 47.625 9.375 49.875 3.125 52.5 3.125C 55.125 3.125 57.375 20.625 60 20.625C 62.625 20.625 64.875 40.625 67.5 40.625C 70.125 40.625 72.375 23.75 75 23.75C 77.625 23.75 79.875 20.625 82.5 20.625C 85.125 20.625 87.375 48.75 90 48.75C 92.625 48.75 94.875 41.25 97.5 41.25C 100.125 41.25 102.375 42.5 105 42.5" pathFrom="M -1 50L -1 50L 7.5 50L 15 50L 22.5 50L 30 50L 37.5 50L 45 50L 52.5 50L 60 50L 67.5 50L 75 50L 82.5 50L 90 50L 97.5 50L 105 50"></path>
                                                                        <g id="SvgjsG1499" class="apexcharts-series-markers-wrap" data:realIndex="0">
                                                                            <g class="apexcharts-series-markers">
                                                                                <circle id="SvgjsCircle1535" r="0" cx="0" cy="0" class="apexcharts-marker wqnyxwuw4 no-pointer-events" stroke="#ffffff" fill="#5156be" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g id="SvgjsG1500" class="apexcharts-datalabels" data:realIndex="0"></g>
                                                                </g>
                                                                <line id="SvgjsLine1530" x1="0" y1="0" x2="105" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line>
                                                                <line id="SvgjsLine1531" x1="0" y1="0" x2="105" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line>
                                                                <g id="SvgjsG1532" class="apexcharts-yaxis-annotations"></g>
                                                                <g id="SvgjsG1533" class="apexcharts-xaxis-annotations"></g>
                                                                <g id="SvgjsG1534" class="apexcharts-point-annotations"></g>
                                                            </g>
                                                            <rect id="SvgjsRect1493" width="0" height="0" x="0" y="0" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fefefe"></rect>
                                                            <g id="SvgjsG1519" class="apexcharts-yaxis" rel="0" transform="translate(-18, 0)"></g>
                                                            <g id="SvgjsG1490" class="apexcharts-annotations"></g>
                                                        </svg>
                                                        <div class="apexcharts-legend" style="max-height: 25px;"></div>
                                                        <div class="apexcharts-tooltip apexcharts-theme-light">
                                                            <div class="apexcharts-tooltip-series-group" style="order: 1;"><span class="apexcharts-tooltip-marker" style="background-color: rgb(81, 86, 190);"></span>
                                                                <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                                                                    <div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div>
                                                                    <div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="apexcharts-yaxistooltip apexcharts-yaxistooltip-0 apexcharts-yaxistooltip-left apexcharts-theme-light">
                                                            <div class="apexcharts-yaxistooltip-text"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="resize-triggers">
                                                    <div class="expand-trigger">
                                                        <div style="width: 126px; height: 59px;"></div>
                                                    </div>
                                                    <div class="contract-trigger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-nowrap">
                                            <span class="badge bg-soft-success text-success"> + <?php echo $num_of_total_number_of_users_online ?> Online</span>
                                            <span class="ms-1 text-muted font-size-13">Since created</span>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col-->

                            <div class="col-xl-4 col-md-6">
                                <!-- card -->
                                <div class="card card-h-100">
                                    <!-- card body -->
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col-6">
                                                <span class="text-muted mb-3 lh-1 d-block text-truncate">No. of users <br />Offline</span>
                                                <h4 class="mb-3">
                                                    <span class="counter-value" data-target="<?php echo $num_of_total_number_of_users_offline ?>"><?php echo $num_of_total_number_of_users_offline ?></span>
                                                </h4>
                                            </div>
                                            <div class="col-6">
                                                <div id="mini-chart3" data-colors="[&quot;#5156be&quot;]" class="apex-charts mb-2" style="min-height: 50px;">
                                                    <div id="apexchartslntaf2qp" class="apexcharts-canvas apexchartslntaf2qp apexcharts-theme-light" style="width: 105px; height: 50px;"><svg id="SvgjsSvg1537" width="105" height="50" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent none repeat scroll 0% 0%;">
                                                            <g id="SvgjsG1539" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)">
                                                                <defs id="SvgjsDefs1538">
                                                                    <clipPath id="gridRectMasklntaf2qp">
                                                                        <rect id="SvgjsRect1545" width="111" height="52" x="-3" y="-1" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
                                                                    </clipPath>
                                                                    <clipPath id="gridRectMarkerMasklntaf2qp">
                                                                        <rect id="SvgjsRect1546" width="109" height="54" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
                                                                    </clipPath>
                                                                </defs>
                                                                <line id="SvgjsLine1544" x1="0" y1="0" x2="0" y2="50" stroke="#b6b6b6" stroke-dasharray="3" class="apexcharts-xcrosshairs" x="0" y="0" width="1" height="50" fill="#b1b9c4" filter="none" fill-opacity="0.9" stroke-width="1"></line>
                                                                <g id="SvgjsG1552" class="apexcharts-xaxis" transform="translate(0, 0)">
                                                                    <g id="SvgjsG1553" class="apexcharts-xaxis-texts-g" transform="translate(0, 2.75)"></g>
                                                                </g>
                                                                <g id="SvgjsG1570" class="apexcharts-grid">
                                                                    <g id="SvgjsG1571" class="apexcharts-gridlines-horizontal" style="display: none;">
                                                                        <line id="SvgjsLine1573" x1="0" y1="0" x2="105" y2="0" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1574" x1="0" y1="12.5" x2="105" y2="12.5" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1575" x1="0" y1="25" x2="105" y2="25" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1576" x1="0" y1="37.5" x2="105" y2="37.5" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                        <line id="SvgjsLine1577" x1="0" y1="50" x2="105" y2="50" stroke="#e0e0e0" stroke-dasharray="0" class="apexcharts-gridline"></line>
                                                                    </g>
                                                                    <g id="SvgjsG1572" class="apexcharts-gridlines-vertical" style="display: none;"></g>
                                                                    <line id="SvgjsLine1579" x1="0" y1="50" x2="105" y2="50" stroke="transparent" stroke-dasharray="0"></line>
                                                                    <line id="SvgjsLine1578" x1="0" y1="1" x2="0" y2="50" stroke="transparent" stroke-dasharray="0"></line>
                                                                </g>
                                                                <g id="SvgjsG1547" class="apexcharts-line-series apexcharts-plot-series">
                                                                    <g id="SvgjsG1548" class="apexcharts-series" seriesName="seriesx1" data:longestSeries="true" rel="1" data:realIndex="0">
                                                                        <path id="SvgjsPath1551" d="M 0 20.625C 2.625 20.625 4.875 40.625 7.5 40.625C 10.125 40.625 12.375 48.75 15 48.75C 17.625 48.75 19.875 8.125 22.5 8.125C 25.125 8.125 27.375 36.25 30 36.25C 32.625 36.25 34.875 37.5 37.5 37.5C 40.125 37.5 42.375 27.5 45 27.5C 47.625 27.5 49.875 12.5 52.5 12.5C 55.125 12.5 57.375 12.5 60 12.5C 62.625 12.5 64.875 31.25 67.5 31.25C 70.125 31.25 72.375 18.75 75 18.75C 77.625 18.75 79.875 43.125 82.5 43.125C 85.125 43.125 87.375 42.5 90 42.5C 92.625 42.5 94.875 48.125 97.5 48.125C 100.125 48.125 102.375 45 105 45" fill="none" fill-opacity="1" stroke="rgba(81,86,190,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2" stroke-dasharray="0" class="apexcharts-line" index="0" clip-path="url(#gridRectMasklntaf2qp)" pathTo="M 0 20.625C 2.625 20.625 4.875 40.625 7.5 40.625C 10.125 40.625 12.375 48.75 15 48.75C 17.625 48.75 19.875 8.125 22.5 8.125C 25.125 8.125 27.375 36.25 30 36.25C 32.625 36.25 34.875 37.5 37.5 37.5C 40.125 37.5 42.375 27.5 45 27.5C 47.625 27.5 49.875 12.5 52.5 12.5C 55.125 12.5 57.375 12.5 60 12.5C 62.625 12.5 64.875 31.25 67.5 31.25C 70.125 31.25 72.375 18.75 75 18.75C 77.625 18.75 79.875 43.125 82.5 43.125C 85.125 43.125 87.375 42.5 90 42.5C 92.625 42.5 94.875 48.125 97.5 48.125C 100.125 48.125 102.375 45 105 45" pathFrom="M -1 50L -1 50L 7.5 50L 15 50L 22.5 50L 30 50L 37.5 50L 45 50L 52.5 50L 60 50L 67.5 50L 75 50L 82.5 50L 90 50L 97.5 50L 105 50"></path>
                                                                        <g id="SvgjsG1549" class="apexcharts-series-markers-wrap" data:realIndex="0">
                                                                            <g class="apexcharts-series-markers">
                                                                                <circle id="SvgjsCircle1585" r="0" cx="0" cy="0" class="apexcharts-marker w29rzieaq no-pointer-events" stroke="#ffffff" fill="#5156be" fill-opacity="1" stroke-width="2" stroke-opacity="0.9" default-marker-size="0"></circle>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                    <g id="SvgjsG1550" class="apexcharts-datalabels" data:realIndex="0"></g>
                                                                </g>
                                                                <line id="SvgjsLine1580" x1="0" y1="0" x2="105" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line>
                                                                <line id="SvgjsLine1581" x1="0" y1="0" x2="105" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line>
                                                                <g id="SvgjsG1582" class="apexcharts-yaxis-annotations"></g>
                                                                <g id="SvgjsG1583" class="apexcharts-xaxis-annotations"></g>
                                                                <g id="SvgjsG1584" class="apexcharts-point-annotations"></g>
                                                            </g>
                                                            <rect id="SvgjsRect1543" width="0" height="0" x="0" y="0" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fefefe"></rect>
                                                            <g id="SvgjsG1569" class="apexcharts-yaxis" rel="0" transform="translate(-18, 0)"></g>
                                                            <g id="SvgjsG1540" class="apexcharts-annotations"></g>
                                                        </svg>
                                                        <div class="apexcharts-legend" style="max-height: 25px;"></div>
                                                        <div class="apexcharts-tooltip apexcharts-theme-light">
                                                            <div class="apexcharts-tooltip-series-group" style="order: 1;"><span class="apexcharts-tooltip-marker" style="background-color: rgb(81, 86, 190);"></span>
                                                                <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                                                                    <div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-label"></span><span class="apexcharts-tooltip-text-value"></span></div>
                                                                    <div class="apexcharts-tooltip-z-group"><span class="apexcharts-tooltip-text-z-label"></span><span class="apexcharts-tooltip-text-z-value"></span></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="apexcharts-yaxistooltip apexcharts-yaxistooltip-0 apexcharts-yaxistooltip-left apexcharts-theme-light">
                                                            <div class="apexcharts-yaxistooltip-text"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="resize-triggers">
                                                    <div class="expand-trigger">
                                                        <div style="width: 126px; height: 59px;"></div>
                                                    </div>
                                                    <div class="contract-trigger"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-nowrap">
                                            <span class="badge bg-soft-danger text-danger">- <?php echo $num_of_total_number_of_users_offline ?> Offline</span>
                                            <span class="ms-1 text-muted font-size-13">Since created</span>
                                        </div>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </div><!-- end col -->

                        </div>



                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm">
                                                <div class="mb-4">
                                                    <a href='../../register'>
                                                        <button type="button" class="btn btn-light waves-effect waves-light"><i class="bx bx-plus me-1"></i> Add New Client</button>

                                                    </a>

                                                </div>
                                            </div>
                                            <div class="col-sm-auto">
                                                <div class="d-flex align-items-center gap-1 mb-4">
                                                    <div class="input-group datepicker-range" style='line-height:2;'>
                                                        <?php echo $today ?>
                                                        &nbsp
                                                        <button class="input-group-text" id="date1" data-toggle><i class="bx bx-calendar-event"></i></button>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <!-- end row -->

                                        <div class="table-responsive">
                                            <table class="table align-middle datatable dt-responsive table-check nowrap" style="border-collapse: collapse; border-spacing: 0 8px; width: 100%;">
                                                <thead>
                                                    <tr class="bg-transparent">

                                                        <th> ID</th>
                                                        <th style="width: 120px;">Billing Name</th>
                                                        <th>Email</th>
                                                        <th>Phone </th>
                                                        <th>Account</th>
                                                        <th>Gender</th>
                                                        <th>Status</th>
                                                        <th style="width: 90px;">View Client</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                    <?php
                                                    while ($row_users = mysqli_fetch_assoc($query_total_number_of_users)) {
                                                        $id = $row_users['id'];
                                                        $first_name = $row_users['first_name'];
                                                        $last_name = $row_users['last_name'];
                                                        $online = $row_users['online'];
                                                        $email = $row_users['email'];
                                                        $gender = $row_users['gender'];
                                                        $phone_number = $row_users['phone_number'];
                                                        $account_type = $row_users['account_type'];



                                                    ?>

                                                        <tr>
                                                            <td> <?php echo $id ?> </td>
                                                            <td> <?php echo $first_name . ' ' . $last_name ?> </td>
                                                            <td> <?php echo $email ?> </td>
                                                            <td> <?php echo $phone_number ?> </td>
                                                            <td> <?= $account_type?> </td>
                                                            <td> <?php echo $gender ?> </td>
                                                            <td> <?php if ($online  == 1) {
                                                                        echo '<div class="badge badge-soft-success font-size-12">Online</div>';
                                                                    } else {
                                                                        echo '<div class="badge badge-soft-warning font-size-12">Offline</div>';
                                                                    } ?>
                                                            </td>
                                                            <td> <a class="dropdown-item" href="client_dashboard.php?userID=<?php echo $id ?>"><i class="fas fa-address-book"></i>&nbsp Details </a></td>

                                                        </tr>
                                                    <?php } ?>

                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- end table responsive -->
                                    </div>
                                    <!-- end card body -->
                                </div>
                                <!-- end card -->
                            </div>
                            <!-- end col -->
                        </div>
                        <!-- end row -->
                    </div> <!-- container-fluid -->
                </div>
                <!-- End Page-content -->
                <?php include('../include/admin_footer.php'); ?>
            </div>
            <!-- end main content-->

        </div>
        <!-- END layout-wrapper -->



        <!-- Right bar overlay-->
        <div class="rightbar-overlay"></div>

        <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="assets/libs/simplebar/simplebar.min.js"></script>
        <script src="assets/libs/node-waves/waves.min.js"></script>
        <script src="assets/libs/feather-icons/feather.min.js"></script>
        <!-- pace js -->
        <script src="assets/libs/pace-js/pace.min.js"></script>

        <!-- flatpickr js -->
        <script src="assets/libs/flatpickr/flatpickr.min.js"></script>

        <!-- Required datatable js -->
        <script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
        <script src="assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>

        <!-- Responsive examples -->
        <script src="assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
        <script src="assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>

        <!-- init js -->
        <script src="assets/js/pages/invoices-list.init.js"></script>

        <script src="assets/js/app.js"></script>
    </body>

    </html>

<?php  } ?>