<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">

    <!-- Main Content -->
    <div id="content">

        <!-- Topbar -->
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
            <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                <i class="fa fa-bars"></i>
            </button>
            <img src="https://errandsservices.com/wp-content/uploads/2018/03/errands-services-logo-02.png" style="height: 45px;">
        </nav>
        <!-- End of Topbar -->

        <!-- Begin Page Content -->
        <div class="container-fluid">

            <!-- Page Heading -->
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
                <button href="#" class="d-none d-sm-inline-block btn btn-sm btn-outline-primary shadow-sm"><?=date("h:i A - d M, Y")?></button>
            </div>

            <!-- Content Row -->
            <div class="row">
                <?php //print_r($DashboardStats);
                $clients = array('m2' => 'M2-SVG', 'm34' => 'M3/M4-GH', 'm57' => 'M5/M7-SQ', 'justdata' => 'MH1/M1/M14');
                foreach ($clients as $clientK => $clientV) {
                    $TotalPer = 0;
                    if(!isset($DashboardStats[$clientK])){
                        $DashboardStats[$clientK]['total'] = 0;
                        $DashboardStats[$clientK]['final'] = 0;
                    }
                    if ($DashboardStats[$clientK]['total'] > 0)
                        $TotalPer = ($DashboardStats[$clientK]['final'] / $DashboardStats[$clientK]['total']) * 100; ?>
                    <div class="col-xl-3 col-md-6 mb-3">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xl font-weight-bold text-primary text-uppercase mb-1">
                                        <?= $clientV ?><br><small>(Today's <?= date("d M, Y") ?>)</small>
                                    </div>
                                    <div class="h5 float-left mb-0 font-weight-bold text-gray-800">
                                        <?= $DashboardStats[$clientK]['total'] ?> <small>Leads</small>
                                    </div>
                                    <div class="h6 float-right mb-0 font-weight-bold text-gray-800">
                                        <?= round($TotalPer, 2) ?>%
                                        <small>Submitted</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div><?php
                } ?>
            </div>

            <!-- Content Row -->
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                            <h6 class="m-0 font-weight-bold text-primary">Final Leads Per Month (after data entry)</h6>
                        </div>
                        <div class="card-body">
                            <div class="chart-area">
                                <canvas id="LeadPerDay"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.container-fluid -->

    </div>
    <!-- End of Main Content -->

    <!-- Footer -->
    <footer class="sticky-footer bg-white">
        <div class="container my-auto">
            <div class="copyright text-center my-auto">
                <span>Copyright &copy; Errands Services</span>
            </div>
        </div>
    </footer>
    <!-- End of Footer -->

</div>
<!-- End of Content Wrapper -->

<!-- Page level plugins -->
<script src="<?= TEMPLATE ?>vendor/chart.js/Chart.min.js"></script>

<script>
    // Area Chart Example

    var ctx = document.getElementById("LeadPerDay");
    var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: <?=json_encode($DashboardGraph['heads']) ?>,
            datasets: [{
                label: "Total Leads",
                lineTension: 0.3,
                backgroundColor: "rgba(78, 115, 223, 0.05)",
                borderColor: "rgba(78, 115, 223, 1)",
                pointRadius: 3,
                pointBackgroundColor: "rgba(78, 115, 223, 1)",
                pointBorderColor: "rgba(78, 115, 223, 1)",
                pointHoverRadius: 3,
                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                pointHitRadius: 10,
                pointBorderWidth: 2,
                data: <?=json_encode($DashboardGraph['stats']) ?>,
            }],
        },
        options: {
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 10,
                    right: 25,
                    top: 25,
                    bottom: 0
                }
            },
            legend: {
                display: false
            },
        }
    });
</script>