{% include 'main-nav.html' %}
{% block content %}
{% load static %}
   
        <!-- start body header -->
        <div id="page_top" class="section-body">
            <div class="container-fluid">
                <div class="page-header">
                    <div class="left">
                        <h1 class="page-title">Sales Analytics</h1>                                               
                    </div>
                    <div class="right">
                        <div class="notification d-flex">
                            <button type="button" class="btn btn-facebook"><i class="fa fa-info-circle mr-2"></i>Need Help</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-file-text mr-2"></i>Data export</button>
                            <button type="button" class="btn btn-facebook"><i class="fa fa-power-off mr-2"></i>Sign Out</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-body mt-3">
            <div class="container-fluid">
                <div class="row clearfix">
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div>Total revenue</div>
                                <div class="py-4 m-0 text-center h1 text-success">$9,452</div>
                                <div class="d-flex">
                                    <small class="text-muted">Income</small>
                                    <div class="ml-auto"><i class="fa fa-caret-up text-success"></i>4%</div>
                                </div>
                            </div>
                        </div>
                    </div>                
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div>Income status</div>
                                <div class="py-4 m-0 text-center h1 text-info">$2,258</div>
                                <div class="d-flex">
                                    <small class="text-muted">New income</small>
                                    <div class="ml-auto">0%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div>Customer status</div>
                                <div class="py-4 m-0 text-center h1 text-warning">232</div>
                                <div class="d-flex">
                                    <small class="text-muted">New users</small>
                                    <div class="ml-auto"><i class="fa fa-caret-up text-success"></i>3%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <div>Order status</div>
                                <div class="py-4 m-0 text-center h1 text-danger">428</div>
                                <div class="d-flex">
                                    <small class="text-muted">New order</small>
                                    <div class="ml-auto"><i class="fa fa-caret-down text-danger"></i>10%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row clearfix row-deck">
                    <div class="col-lg-12 col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Recurring Revenue Growth</h3>
                                <div class="card-options">
                                    <label class="custom-switch m-0">
                                        <input type="checkbox" value="1" class="custom-switch-input" checked="">
                                        <span class="custom-switch-indicator"></span>
                                    </label>
                                    <a href="javascript:void(0)" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                                    <div class="item-action dropdown ml-2">
                                        <a href="javascript:void(0)" data-toggle="dropdown"><i class="fe fe-more-vertical"></i></a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-eye"></i> View Details </a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-share-alt"></i> Share </a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-cloud-download"></i> Download</a>                                            
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-copy"></i> Copy to</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-folder"></i> Move to</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-edit"></i> Rename</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-trash"></i> Delete</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="d-md-flex justify-content-between">
                                    <div>
                                        <h5 class="mb-1">$<span class="counter">12,159.32</span></h5>
                                        <span class="text-muted">MRR GROWTH</span>
                                    </div>
                                    <div>
                                        <div class="card-options">
                                            <button class="btn btn-sm btn-outline-secondary mr-1" id="one_month">1M</button>
                                            <button class="btn btn-sm btn-outline-secondary mr-1" id="six_months">6M</button>
                                            <button class="btn btn-sm btn-outline-secondary mr-1" id="one_year" class="active">1Y</button>
                                            <button class="btn btn-sm btn-outline-secondary mr-1" id="ytd">YTD</button>
                                            <button class="btn btn-sm btn-outline-secondary" id="all">ALL</button>
                                        </div>
                                    </div>
                                </div>
                                <div id="apex-timeline-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row clearfix row-deck">
                    <div class="col-lg-4 col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title">statistics</h2>
                                <div class="card-options">
                                    <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
                                    <div class="item-action dropdown ml-2">
                                        <a href="javascript:void(0)" data-toggle="dropdown"><i class="fe fe-more-vertical"></i></a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-eye"></i> View Details </a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-share-alt"></i> Share </a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-cloud-download"></i> Download</a>                                            
                                            <div class="dropdown-divider"></div>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-copy"></i> Copy to</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-folder"></i> Move to</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-edit"></i> Rename</a>
                                            <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fa fa-trash"></i> Delete</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div id="chart-donut" style="height: 15rem"></div>
                            </div>
                            <div class="card-footer text-center">
                                <div class="row clearfix">
                                    <div class="col-6">
                                        <i class="fa fa-tag font-22"></i>
                                        <div><span class="text-muted">9 Badges</span></div>
                                    </div>
                                    <div class="col-6">
                                        <i class="fa fa-dollar font-22"></i>
                                        <div><span class="text-muted">$ 3.100</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Top Countries</h4>
                            </div>
                            <table class="table card-table">
                                <tbody>
                                    <tr>
                                        <td><i class="flag flag-us"></i></td>
                                        <td>
                                            USA
                                            <div class="progress progress-xs mt-2">
                                                <div class="progress-bar" style="width: 78%"></div>
                                            </div>
                                        </td>
                                        <td class="text-right"><span class="text-muted">$6425</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag flag-pl"></i></td>
                                        <td>
                                            Poland
                                            <div class="progress progress-xs mt-2">
                                                <div class="progress-bar" style="width: 62%"></div>
                                            </div>
                                        </td>
                                        <td class="text-right"><span class="text-muted">$5582</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag flag-de"></i></td>
                                        <td>
                                            Germany
                                            <div class="progress progress-xs mt-2">
                                                <div class="progress-bar" style="width: 48%"></div>
                                            </div>
                                        </td>
                                        <td class="text-right"><span class="text-muted">$4587</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag flag-ru"></i></td>
                                        <td>
                                            Russia
                                            <div class="progress progress-xs mt-2">
                                                <div class="progress-bar" style="width: 35%"></div>
                                            </div>
                                        </td>
                                        <td class="text-right"><span class="text-muted">$2520</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag flag-au"></i></td>
                                        <td>
                                            Australia
                                            <div class="progress progress-xs mt-2">
                                                <div class="progress-bar" style="width: 30%"></div>
                                            </div>
                                        </td>
                                        <td class="text-right"><span class="text-muted">$1899</span></td>
                                    </tr>
                                    <tr>
                                        <td><i class="flag flag-gb"></i></td>
                                        <td>
                                            Great Britain
                                            <div class="progress progress-xs mt-2">
                                                <div class="progress-bar" style="width: 22%"></div>
                                            </div>
                                        </td>
                                        <td class="text-right"><span class="text-muted">$1056</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h2 class="card-title">Customer Satisfaction</h2>
                            </div>

                            <div class="card-body">
                                <div class="d-flex align-items-baseline">
                                    <h2 class="">9.8</h2>
                                    <p class="mb-0"><span class="tx-medium tx-success">1.6% <i class="icon ion-md-arrow-up"></i></span></p>
                                </div>
                                <h6 class="text-uppercase font-12">Performance Score</h6>
        
                                <div class="progress progress-sm mb-3">
                                    <div class="progress-bar bg-danger" style="width: 45%"></div>
                                    <div class="progress-bar bg-warning" style="width: 30%"></div>
                                    <div class="progress-bar bg-success" style="width: 12%"></div>
                                </div>
                            </div>
                            <table class="table table-sm table-striped mb-0">
                                <tbody>
                                    <tr>
                                        <td><span class="status-icon bg-azure"></span></td>
                                        <td>Excellent</td>
                                        <td class="text-right">3,007</td>
                                        <td class="text-right">50%</td>
                                    </tr>
                                    <tr>
                                        <td><span class="status-icon bg-blue"></span></td>
                                        <td>Very Good</td>
                                        <td class="text-right">1,674</td>
                                        <td class="text-right">25%</td>
                                    </tr>
                                    <tr>
                                        <td><span class="status-icon bg-danger"></span></td>
                                        <td>Good</td>
                                        <td class="text-right">125</td>
                                        <td class="text-right">6%</td>
                                    </tr>
                                    <tr>
                                        <td><span class="status-icon bg-green"></span></td>
                                        <td>Fair</td>
                                        <td class="text-right">98</td>
                                        <td class="text-right">5%</td>
                                    </tr>
                                    <tr>
                                        <td><span class="status-icon bg-warning"></span></td>
                                        <td>Poor</td>
                                        <td class="text-right">512</td>
                                        <td class="text-right">10%</td>
                                    </tr>
                                    <tr>
                                        <td><span class="status-icon bg-info"></span></td>
                                        <td>Very Poor</td>
                                        <td class="text-right">81</td>
                                        <td class="text-right">4%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-12">
                        <div class="table-responsive card">
                            <table class="table header-border table-hover">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Product</th>
                                        <th>Popularity</th>
                                        <th>Sales</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th class="w60">1</th>
                                        <td>Home Decor Range</td>
                                        <td>
                                            <div class="progress progress-xxs progress-transparent custom-color-cyan mb-0 mt-0">
                                                <div class="progress-bar" data-transitiongoal="47" aria-valuenow="47" style="width: 47%;"></div>
                                            </div>
                                        </td>
                                        <td><span class="badge badge-primary">70%</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>2</th>
                                        <td>Bathroom Essentials</td>
                                        <td>
                                            <div class="progress progress-xxs progress-transparent custom-color-green mb-0 mt-0">
                                                <div class="progress-bar" data-transitiongoal="88" aria-valuenow="88" style="width: 88%;"></div>
                                            </div>
                                        </td>
                                        <td><span class="badge badge-success">70%</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>3</th>
                                        <td>Disney Princess Pink 18' School Bag</td>
                                        <td>
                                            <div class="progress progress-xxs progress-transparent custom-color-white mb-0 mt-0">
                                                <div class="progress-bar" data-transitiongoal="47" aria-valuenow="47" style="width: 47%;"></div>
                                            </div>
                                        </td>
                                        <td><span class="badge badge-dark">70%</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>4</th>
                                        <td>iPhone XS and XS Max</td>
                                        <td>
                                            <div class="progress progress-xxs progress-transparent custom-color-red mb-0 mt-0">
                                                <div class="progress-bar" data-transitiongoal="62" aria-valuenow="62" style="width: 62%;"></div>
                                            </div>
                                        </td>
                                        <td><span class="badge badge-danger">70%</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>5</th>
                                        <td>Apple Smartwatches</td>
                                        <td>
                                            <div class="progress progress-xxs progress-transparent custom-color-orange mb-0 mt-0">
                                                <div class="progress-bar" data-transitiongoal="21" aria-valuenow="21" style="width: 21%;"></div>
                                            </div>
                                        </td>
                                        <td><span class="badge badge-warning">70%</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>               
                </div>
            </div>            
        </div>

        <!-- Start page footer -->
        <div class="section-body">
            <footer class="footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            Copyright © 2019 <a href="https://themeforest.net/user/puffintheme">PuffinTheme</a>.
                        </div>
                        <div class="col-md-6 col-sm-12 text-md-right">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item"><a href="https://themeforest.net/user/puffintheme/portfolio">Portfolio</a></li>
                                <li class="list-inline-item"><a href="javascript:void(0)">FAQ</a></li>
                                <li class="list-inline-item"><a href="javascript:void(0)" class="btn btn-outline-primary btn-sm">Buy Now</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</div>


<!-- jQuery and bootstrtap js -->
<script src="{% static 'style_urls/assets/bundles/lib.vendor.bundle.js' %}"></script>

<!-- start plugin js file  -->
<script src="{% static 'style_urls/assets/bundles/counterup.bundle.js' %}"></script>
<script src="{% static 'style_urls/assets/bundles/apexcharts.bundle.js' %}"></script>
<script src="{% static 'style_urls/assets/bundles/c3.bundle.js' %}"></script>

<!-- Start core js and page js -->
<script src="{% static 'style_urls/assets/js/core.js' %}"></script>
<script src="{% static 'style_urls/assets/js/page/index4.js' %}"></script>
</body>
</html>
{% include 'footer.html' %}
        {%endblock%}