<?php include 'partials/html.php' ?>

<head>
    <?php
    $title = "Dashboard";
    include 'partials/title-meta.php' ?>

    <?php include 'partials/head-css.php' ?>
</head>

<body>
    <!-- Top Bar Start -->
    <?php include 'partials/topbar.php' ?>
    <!-- Top Bar End -->
    <!-- leftbar-tab-menu -->
    <?php include 'partials/startbar.php' ?>
    <!-- end leftbar-tab-menu-->

    <div class="page-wrapper">
        <!-- Page Content-->
        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box d-md-flex justify-content-md-between align-items-center">
                            <h4 class="page-title">Sales</h4>
                            <div class="">
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="#">Dastone</a>
                                    </li><!--end nav-item-->
                                    <li class="breadcrumb-item active">Dashboard</li>
                                </ol>
                            </div>
                        </div><!--end page-title-box-->
                    </div><!--end col-->
                </div><!--end row-->
                <div class="row">
                    <div class="col-lg-9">
                        <div class="card">
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h4 class="card-title">Revenue Status</h4>
                                    </div><!--end col-->
                                    <div class="col-auto">
                                        <div class="dropdown">
                                            <a href="#" class="btn btn-sm btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                This Month<i class="las la-angle-down ms-1"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item" href="#">Today</a>
                                                <a class="dropdown-item" href="#">Last Week</a>
                                                <a class="dropdown-item" href="#">Last Month</a>
                                                <a class="dropdown-item" href="#">This Year</a>
                                            </div>
                                        </div>
                                    </div><!--end col-->
                                </div> <!--end row-->
                            </div><!--end card-header-->
                            <div class="card-body">
                                <div class="">
                                    <div id="Revenu_Status" class="apex-charts"></div>
                                </div>
                            </div><!--end card-body-->
                        </div><!--end card-->
                        <div class="row">
                            <div class="col-12 col-lg-6 col-xl">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col text-center">
                                                <span class="h4">$24,500</span>
                                                <h6 class="text-uppercase text-muted mt-2 m-0">Weekly Sales</h6>
                                            </div><!--end col-->
                                        </div> <!-- end row -->
                                    </div><!--end card-body-->
                                </div> <!--end card-body-->
                            </div><!--end col-->
                            <div class="col-12 col-lg-6 col-xl">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col text-center">
                                                <span class="h4">520</span>
                                                <h6 class="text-uppercase text-muted mt-2 m-0">Orders Placed</h6>
                                            </div><!--end col-->
                                        </div> <!-- end row -->
                                    </div><!--end card-body-->
                                </div> <!--end card-body-->
                            </div><!--end col-->
                            <div class="col-12 col-lg-6 col-xl">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col text-center">
                                                <span class="h4">82.8%</span>
                                                <h6 class="text-uppercase text-muted mt-2 m-0">Conversion Rate</h6>
                                            </div><!--end col-->
                                        </div> <!-- end row -->
                                    </div><!--end card-body-->
                                </div> <!--end card-body-->
                            </div><!--end col-->
                            <div class="col-12 col-lg-6 col-xl">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col text-center">
                                                <span class="h4">$80.5</span>
                                                <h6 class="text-uppercase text-muted mt-2 m-0">Avg. Value</h6>
                                            </div><!--end col-->
                                        </div> <!-- end row -->
                                    </div><!--end card-body-->
                                </div> <!--end card-->
                            </div><!--end col-->
                        </div><!--end row-->
                    </div><!-- end col-->

                    <div class="col-lg-3">
                        <div class="card overflow-hidden">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <img src="assets/images/extra/money-beg.png" height="40" class="me-2 align-self-center rounded" alt="...">
                                            </div>
                                            <div class="flex-grow-1 ms-2 text-truncate">
                                                <h6 class="m-0 fs-20">$1850.00</h6>
                                                <p class="text-muted mb-0">Total Revenue</p>
                                            </div><!--end /div-->
                                        </div><!--end /div-->
                                    </div><!--end col-->
                                    <div class="col-auto align-self-center">
                                        <p class="mb-0"><span class="text-success"><i class="mdi mdi-trending-up"></i>4.8%</span> Then Last Month</p>
                                    </div><!--end col-->
                                </div><!--end row-->
                            </div><!--end card-body-->
                            <div class="row">
                                <div class="col-12">
                                    <div class="apexchart-wrapper">
                                        <div id="dash_spark_1" class="chart-gutters"></div>
                                    </div>
                                </div><!--end col-->
                            </div>
                        </div> <!--end card-->
                        <div class="card">
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h4 class="card-title">Earning Reports</h4>
                                    </div><!--end col-->
                                    <div class="col-auto">
                                        <div class="dropdown">
                                            <a href="#" class="btn btn-sm btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                This Week<i class="las la-angle-down ms-1"></i>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item" href="#">Today</a>
                                                <a class="dropdown-item" href="#">Last Week</a>
                                                <a class="dropdown-item" href="#">Last Mont</a>
                                                <a class="dropdown-item" href="#">This Year</a>
                                            </div>
                                        </div>
                                    </div><!--end col-->
                                </div> <!--end row-->
                            </div><!--end card-header-->
                            <div class="card-body">
                                <div class="text-center">
                                    <div id="sessions_device" class="apex-charts"></div>
                                    <h6 class="bg-light py-3 px-2 mb-0 mt-2 rounded">
                                        <i class="las la-calendar align-self-center me-1"></i>
                                        01 January 2020 to 31 December 2020
                                    </h6>
                                </div>
                            </div><!--end card-body-->
                        </div><!--end card-->
                    </div><!-- end col-->
                </div><!--end row-->
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h4 class="card-title">Earnings Reports</h4>
                                    </div><!--end col-->
                                </div> <!--end row-->
                            </div><!--end card-header-->
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="border-top-0">Date</th>
                                                <th class="border-top-0">Item Count</th>
                                                <th class="border-top-0">Text</th>
                                                <th class="border-top-0">Earnings</th>
                                            </tr><!--end tr-->
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>01 January</td>
                                                <td>50</td>
                                                <td class="text-danger">-$70</td>
                                                <td>$15,000</td>
                                            </tr><!--end tr-->
                                            <tr>
                                                <td>02 January</td>
                                                <td>25</td>
                                                <td>-</td>
                                                <td>$9,500</td>

                                            </tr><!--end tr-->
                                            <tr>
                                                <td>03 January</td>
                                                <td>65</td>
                                                <td class="text-danger">-$115</td>
                                                <td>$35,000</td>

                                            </tr><!--end tr-->
                                            <tr>
                                                <td>04 January</td>
                                                <td>20</td>
                                                <td>-</td>
                                                <td>$8,500</td>
                                            </tr><!--end tr-->
                                            <tr>
                                                <td>05 January</td>
                                                <td>40</td>
                                                <td class="text-danger">-$60</td>
                                                <td>$12,000</td>
                                            </tr><!--end tr-->
                                            <tr>
                                                <td>06 January</td>
                                                <td>45</td>
                                                <td class="text-danger">-$65</td>
                                                <td>$13,500</td>
                                            </tr><!--end tr-->
                                        </tbody>
                                    </table> <!--end table-->
                                </div><!--end /div-->
                            </div><!--end card-body-->
                        </div><!--end card-->
                    </div> <!--end col-->
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h4 class="card-title">Most Populer Products</h4>
                                    </div><!--end col-->
                                </div> <!--end row-->
                            </div><!--end card-header-->
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="border-top-0">Product</th>
                                                <th class="border-top-0">Price</th>
                                                <th class="border-top-0">Sell</th>
                                                <th class="border-top-0">Status</th>
                                                <th class="border-top-0">Action</th>
                                            </tr><!--end tr-->
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0">
                                                            <img src="assets/images/products/01.png" height="30" class="me-2 align-self-center rounded" alt="...">
                                                        </div>
                                                        <div class="flex-grow-1 ms-2 text-truncate">
                                                            <h6 class="m-0">Dastone Cotten Toy (colorful)</h6>
                                                            <a href="#" class="fs-12 text-primary">ID: A3652</a>
                                                        </div><!--end /div-->
                                                    </div><!--end /div-->
                                                </td>
                                                <td>$50 <del class="text-muted fs-10">$70</del></td>
                                                <td>450 <small class="text-muted">(550)</small></td>
                                                <td><span class="badge bg-soft-success px-2">Stock</span></td>
                                                <td>
                                                    <a href="#"><i class="las la-pen text-secondary fs-16"></i></a>
                                                    <a href="#"><i class="las la-trash-alt text-secondary fs-16"></i></a>
                                                </td>
                                            </tr><!--end tr-->
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0">
                                                            <img src="assets/images/products/02.png" height="30" class="me-2 align-self-center rounded" alt="...">
                                                        </div>
                                                        <div class="flex-grow-1 ms-2 text-truncate">
                                                            <h6 class="m-0">Dastone Watch</h6>
                                                            <a href="#" class="fs-12 text-primary">ID: A4454</a>
                                                        </div><!--end /div-->
                                                    </div><!--end /div-->
                                                </td>
                                                <td>$99 <del class="text-muted fs-10">$150</del></td>
                                                <td>750 <small class="text-muted">(00)</small></td>
                                                <td><span class="badge bg-soft-danger px-2">Out of Stock</span></td>
                                                <td>
                                                    <a href="#"><i class="las la-pen text-secondary fs-16"></i></a>
                                                    <a href="#"><i class="las la-trash-alt text-secondary fs-16"></i></a>
                                                </td>
                                            </tr><!--end tr-->
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0">
                                                            <img src="assets/images/products/03.png" height="30" class="me-2 align-self-center rounded" alt="...">
                                                        </div>
                                                        <div class="flex-grow-1 ms-2 text-truncate">
                                                            <h6 class="m-0">Dastone Headphone (Gray)</h6>
                                                            <a href="#" class="fs-12 text-primary">ID: A5632</a>
                                                        </div><!--end /div-->
                                                    </div><!--end /div-->
                                                </td>
                                                <td>$199 <del class="text-muted fs-10">$250</del></td>
                                                <td>280 <small class="text-muted">(220)</small></td>
                                                <td><span class="badge bg-soft-success px-2">Stock</span></td>
                                                <td>
                                                    <a href="#"><i class="las la-pen text-secondary fs-16"></i></a>
                                                    <a href="#"><i class="las la-trash-alt text-secondary fs-16"></i></a>
                                                </td>
                                            </tr><!--end tr-->
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="flex-shrink-0">
                                                            <img src="assets/images/products/04.png" height="30" class="me-2 align-self-center rounded" alt="...">
                                                        </div>
                                                        <div class="flex-grow-1 ms-2 text-truncate">
                                                            <h6 class="m-0">Dastone Dark Coffee</h6>
                                                            <a href="#" class="fs-12 text-primary">ID: A9632</a>
                                                        </div><!--end /div-->
                                                    </div><!--end /div-->
                                                </td>
                                                <td>$40 <del class="text-muted fs-10">$49</del></td>
                                                <td>500 <small class="text-muted">(1000)</small></td>
                                                <td><span class="badge bg-soft-danger px-2">Out of Stock</span></td>
                                                <td>
                                                    <a href="#"><i class="las la-pen text-secondary fs-16"></i></a>
                                                    <a href="#"><i class="las la-trash-alt text-secondary fs-16"></i></a>
                                                </td>
                                            </tr><!--end tr-->

                                        </tbody>
                                    </table> <!--end table-->
                                </div><!--end /div-->
                            </div><!--end card-body-->
                        </div><!--end card-->
                    </div> <!--end col-->
                </div><!--end row-->
            </div><!-- container -->

            <!--Start Rightbar-->
            <?php include 'partials/endbar.php' ?>
            <!--end Rightbar-->
            <!--Start Footer-->
            <?php include 'partials/footer.php' ?>
            <!--end footer-->
        </div>
        <!-- end page content -->
    </div>
    <!-- end page-wrapper -->

    <!-- Javascript  -->
    <!-- vendor js -->
    <?php include 'partials/vendorjs.php' ?>

    <script src="assets/libs/apexcharts/apexcharts.min.js"></script>
    <script src="https://apexcharts.com/samples/assets/stock-prices.js"></script>
    <script src="assets/js/pages/sales-index.init.js"></script>
    <script src="assets/js/app.js"></script>
</body>
<!--end body-->

</html>