<!DOCTYPE html>
<html dir="ltr" lang="en">

<?php
include 'partial/head.php';
include 'partial/status.php';
?>

<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
    <div class="lds-ripple">
        <div class="lds-pos"></div>
        <div class="lds-pos"></div>
    </div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
     data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
    <!-- ============================================================== -->
    <!-- Topbar header - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <?php
    include 'partial/topbar.php';
    ?>
    <!-- ============================================================== -->
    <!-- End Topbar header -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <?php
    include 'partial/sidebar.php';
    ?>
    <!-- ============================================================== -->
    <!-- End Left Sidebar - style you can find in sidebar.scss  -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- Page wrapper  -->
    <!-- ============================================================== -->
    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="page-breadcrumb">
            <div class="row">
                <div class="col-7 align-self-center">
                    <h2 class="page-title text-truncate text-dark font-weight-medium mb-1">Dashboard</h2>
                    <div class="d-flex align-items-center">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb m-0 p-0">
                                <li class="breadcrumb-item"><a href="<?= base_url() ?>" class="text-muted">Home</a></li>
                                <li class="breadcrumb-item text-muted active" aria-current="page">Dashboard</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->

        <div class="container-fluid">
            <!-- ============================================================== -->
            <!-- Start Page Content -->
            <!-- ============================================================== -->
            <!-- Start First Cards -->
            <!-- *************************************************************** -->
            <div class="row">
                <div class="col-sm-6 col-lg-3">
                    <div class="card border-end">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <div class="d-inline-flex align-items-center">
                                        <h2 class="text-dark mb-1 font-weight-medium" id="activeStudents"><?= $activeStudentCount ?></h2>
                                    </div>
                                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate">Active Students
                                    </h6>
                                </div>
                                <div class="ms-auto mt-md-3 mt-lg-0">
                                    <span class="opacity-7 text-muted"><i data-feather="user-plus"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card border-end">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <div class="d-inline-flex align-items-center">
                                        <h2 class="text-dark mb-1 font-weight-medium" id="activeStudents"><?= $activeClassCount ?></h2>
                                        </div>
                                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate">Active Classes
                                    </h6>
                                </div>
                                <div class="ms-auto mt-md-3 mt-lg-0">
                                    <span class="opacity-7 text-muted"><i data-feather="user-plus"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="card border-end ">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <h2 class="text-dark mb-1 w-100 text-truncate font-weight-medium"><sup
                                                class="set-doller">LKR</sup><?= number_format($currentMonthTotal, 0) ?></h2>
                                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate">Earnings of
                                        Month
                                    </h6>
                                </div>
                                <div class="ms-auto mt-md-3 mt-lg-0">
                                    <span class="opacity-7 text-muted"><i data-feather="dollar-sign"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
<!--                <div class="col-sm-6 col-lg-3">-->
<!--                    <div class="card border-end ">-->
<!--                        <div class="card-body">-->
<!--                            <div class="d-flex align-items-center">-->
<!--                                <div>-->
<!--                                    <div class="d-inline-flex align-items-center">-->
<!--                                        <h2 class="text-dark mb-1 font-weight-medium">1538</h2>-->
<!--                                        <span-->
<!--                                                class="badge bg-danger font-12 text-white font-weight-medium rounded-pill ms-2 d-md-none d-lg-block">-18.33%</span>-->
<!--                                    </div>-->
<!--                                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate">New Projects-->
<!--                                    </h6>-->
<!--                                </div>-->
<!--                                <div class="ms-auto mt-md-3 mt-lg-0">-->
<!--                                    <span class="opacity-7 text-muted"><i data-feather="file-plus"></i></span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-sm-6 col-lg-3">-->
<!--                    <div class="card ">-->
<!--                        <div class="card-body">-->
<!--                            <div class="d-flex align-items-center">-->
<!--                                <div>-->
<!--                                    <h2 class="text-dark mb-1 font-weight-medium">864</h2>-->
<!--                                    <h6 class="text-muted font-weight-normal mb-0 w-100 text-truncate">Projects</h6>-->
<!--                                </div>-->
<!--                                <div class="ms-auto mt-md-3 mt-lg-0">-->
<!--                                    <span class="opacity-7 text-muted"><i data-feather="globe"></i></span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <!-- *************************************************************** -->
            <!-- End First Cards -->
            <!-- *************************************************************** -->
            <!-- *************************************************************** -->
            <!-- Start Sales Charts Section -->
            <!-- *************************************************************** -->
            <div class="row">
<!--                <div class="col-lg-4 col-md-12">-->
<!--                    <div class="card">-->
<!--                        <div class="card-body">-->
<!--                            <h4 class="card-title">Total Sales</h4>-->
<!--                            <div id="campaign-v2" class="mt-2" style="height:283px; width:100%;"></div>-->
<!--                            <ul class="list-style-none mb-0">-->
<!--                                <li>-->
<!--                                    <i class="fas fa-circle text-primary font-10 me-2"></i>-->
<!--                                    <span class="text-muted">Direct Sales</span>-->
<!--                                    <span class="text-dark float-end font-weight-medium">$2346</span>-->
<!--                                </li>-->
<!--                                <li class="mt-3">-->
<!--                                    <i class="fas fa-circle text-danger font-10 me-2"></i>-->
<!--                                    <span class="text-muted">Referral Sales</span>-->
<!--                                    <span class="text-dark float-end font-weight-medium">$2108</span>-->
<!--                                </li>-->
<!--                                <li class="mt-3">-->
<!--                                    <i class="fas fa-circle text-cyan font-10 me-2"></i>-->
<!--                                    <span class="text-muted">Affiliate Sales</span>-->
<!--                                    <span class="text-dark float-end font-weight-medium">$1204</span>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-lg-4 col-md-12">-->
<!--                    <div class="card">-->
<!--                        <div class="card-body">-->
<!--                            <h4 class="card-title">Net Income</h4>-->
<!--                            <div class="net-income mt-4 position-relative" style="height:294px;"></div>-->
<!--                            <ul class="list-inline text-center mt-5 mb-2">-->
<!--                                <li class="list-inline-item text-muted fst-italic">Sales for this month</li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="col-lg-4 col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Monthly Net Income</h4>
                            <div id="income-chart" class="net-income mt-4 position-relative" style="height:294px;"></div>
                            <ul class="list-inline text-center mt-5 mb-2">
<!--                                <li class="list-inline-item text-muted fst-italic">Sales for this month</li>-->
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"></h4>
                        <h6 class="card-subtitle"></h6>
                        <div class="table-responsive">
                            <table id="pendingPaymentTable" class="table border table-striped table-bordered text-nowrap">
                                <thead>
                                <tr>
                                    <th>Student</th>
                                    <th>Class</th>
                                    <th>Class Dates</th>
                                    <th>Pending</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Earning by Location</h4>
                            <div class="" style="height:180px">
                                <div id="visitbylocate" style="height:100%"></div>
                            </div>
                            <div class="row mb-3 align-items-center mt-1 mt-5">
                                <div class="col-4 text-end">
                                    <span class="text-muted font-14">India</span>
                                </div>
                                <div class="col-5">
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: 100%"
                                             aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <span class="mb-0 font-14 text-dark font-weight-medium">28%</span>
                                </div>
                            </div>
                            <div class="row mb-3 align-items-center">
                                <div class="col-4 text-end">
                                    <span class="text-muted font-14">UK</span>
                                </div>
                                <div class="col-5">
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 74%"
                                             aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <span class="mb-0 font-14 text-dark font-weight-medium">21%</span>
                                </div>
                            </div>
                            <div class="row mb-3 align-items-center">
                                <div class="col-4 text-end">
                                    <span class="text-muted font-14">USA</span>
                                </div>
                                <div class="col-5">
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar bg-cyan" role="progressbar" style="width: 60%"
                                             aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <span class="mb-0 font-14 text-dark font-weight-medium">18%</span>
                                </div>
                            </div>
                            <div class="row align-items-center">
                                <div class="col-4 text-end">
                                    <span class="text-muted font-14">China</span>
                                </div>
                                <div class="col-5">
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 50%"
                                             aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="col-3 text-end">
                                    <span class="mb-0 font-14 text-dark font-weight-medium">12%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- *************************************************************** -->
            <!-- End Sales Charts Section -->
            <!-- *************************************************************** -->
            <!-- *************************************************************** -->
            <!-- Start Location and Earnings Charts Section -->
            <!-- *************************************************************** -->
            <div class="row">
                <div class="col-md-6 col-lg-8">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-start">
                                <h4 class="card-title mb-0">Earning Statistics</h4>
                                <div class="ms-auto">
                                    <div class="dropdown sub-dropdown">
                                        <button class="btn btn-link text-muted dropdown-toggle" type="button"
                                                id="dd1" data-bs-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">
                                            <i data-feather="more-vertical"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dd1">
                                            <a class="dropdown-item" href="#">Insert</a>
                                            <a class="dropdown-item" href="#">Update</a>
                                            <a class="dropdown-item" href="#">Delete</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="pl-4 mb-5">
                                <div class="stats ct-charts position-relative" style="height: 315px;"></div>
                            </div>
                            <ul class="list-inline text-center mt-4 mb-0">
                                <li class="list-inline-item text-muted fst-italic">Earnings for this month</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Recent Activity</h4>
                            <div class="mt-4 activity">
                                <div class="d-flex align-items-start border-left-line pb-3">
                                    <div>
                                        <a href="javascript:void(0)" class="btn btn-info btn-circle mb-2 btn-item">
                                            <i data-feather="shopping-cart"></i>
                                        </a>
                                    </div>
                                    <div class="ms-3 mt-2">
                                        <h5 class="text-dark font-weight-medium mb-2">New Product Sold!</h5>
                                        <p class="font-14 mb-2 text-muted">John Musa just purchased <br> Cannon 5M
                                            Camera.
                                        </p>
                                        <span class="font-weight-light font-14 text-muted">10 Minutes Ago</span>
                                    </div>
                                </div>
                                <div class="d-flex align-items-start border-left-line pb-3">
                                    <div>
                                        <a href="javascript:void(0)"
                                           class="btn btn-danger btn-circle mb-2 btn-item">
                                            <i data-feather="message-square"></i>
                                        </a>
                                    </div>
                                    <div class="ms-3 mt-2">
                                        <h5 class="text-dark font-weight-medium mb-2">New Support Ticket</h5>
                                        <p class="font-14 mb-2 text-muted">Richardson just create support <br>
                                            ticket</p>
                                        <span class="font-weight-light font-14 text-muted">25 Minutes Ago</span>
                                    </div>
                                </div>
                                <div class="d-flex align-items-start border-left-line">
                                    <div>
                                        <a href="javascript:void(0)" class="btn btn-cyan btn-circle mb-2 btn-item">
                                            <i data-feather="bell"></i>
                                        </a>
                                    </div>
                                    <div class="ms-3 mt-2">
                                        <h5 class="text-dark font-weight-medium mb-2">Notification Pending Order!
                                        </h5>
                                        <p class="font-14 mb-2 text-muted">One Pending order from Ryne <br> Doe</p>
                                        <span class="font-weight-light font-14 mb-1 d-block text-muted">2 Hours
                                                Ago</span>
                                        <a href="javascript:void(0)"
                                           class="font-14 border-bottom pb-1 border-info">Load More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- *************************************************************** -->
            <!-- End Location and Earnings Charts Section -->
            <!-- *************************************************************** -->
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Page wrapper  -->
    <!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->

</body>

<?php
include 'partial/footer.php';
?>


<script>
    var base_url = "<?= base_url() ?>";
</script>

<script src="<?= base_url('dist/js/custom_v1.js') ?>"></script>
<script src="<?= base_url('dist/js/dashboard.js') ?>"></script>

</html>
