{% extends 'base.html' %}

{% block body %}

        <div class="mdk-drawer-layout js-mdk-drawer-layout" data-fullbleed data-push data-has-scrolling-region>
            <div class="mdk-drawer-layout__content mdk-header-layout__content--scrollable">
                <!-- CONTENT BODY -->
                <div class="container-fluid">
                    <div class="card-deck">
                        <div class="card p-2 pl-3 pr-3">
                            <div class="media align-items-center">
                                <div class="doughnut-chart-wrapper mr-1">
                                    <div class="doughnut-chart-text">
                                        <div>
                                            <h3 class="text-danger">12%</h3>
                                            <small>TODAY</small>
                                        </div>
                                    </div>
                                    <canvas class="doughnut-chart" data-percent="12" width="100" height="100"></canvas>
                                </div>
                                <div class="media-body">
                                    <h3 class="mb-0">$1,020</h3>
                                    <span>Total Sales</span>
                                </div>
                            </div>
                        </div>
                        <div class="card p-2 pl-3 pr-3">
                            <div class="media align-items-center">
                                <div class="doughnut-chart-wrapper mr-1">
                                    <div class="doughnut-chart-text">
                                        <div>
                                            <h3 class="text-success">68%</h3>
                                            <small>MONTH</small>
                                        </div>
                                    </div>
                                    <canvas class="doughnut-chart" data-percent="68" width="100" height="100"></canvas>
                                </div>
                                <div class="media-body">
                                    <h3 class="mb-0">$6,670</h3>
                                    <span>Sales for June</span>
                                </div>
                            </div>
                        </div>
                        <div class="card p-2 pl-3 pr-3">

                            <div class="media justify-items-center align-items-center h-md-100">
                                <i class="material-icons md-48 text-link-color">account_circle</i>
                                <div class="media-body pl-2">
                                    <h3 class="mb-0 text">87%</h3>
                                    <span>Sign-Up Percentage</span>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="card p-2 pl-3 pr-3">
                            <div class="media justify-items-center align-items-center h-md-100">
                                <i class="material-icons text-success md-48">check_circle</i>
                                <div class="media-body pl-2">
                                    <h4 class="m-0">Network Stats</h4>
                                    <span>All systems working!</span>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card card-sales">
                                <div class="card-header bg-faded">
                                    <div class="row align-items-center">
                                        <div class="col-lg-2">
                                            <h4 class="card-title">Sales</h4>
                                        </div>
                                        <div class="col-lg-10">
                                            <form class="form-inline float-right">
                                                <div class="form-group mr-3">
                                                    <label class="control-label mr-1">From:</label>
                                                    <input type="text" class="datepicker form-control"
                                                        value="10/24/2017">
                                                </div>
                                                <div class="form-group mb-0">
                                                    <label class="control-label mr-1">To: </label>
                                                    <input type="text" class="datepicker form-control"
                                                        value="10/25/2017">
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="clearfix"></div>
                                    <div style="height: 250px; width: 100%;">
                                        <canvas id="dashboard-chart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">
                                        History
                                    </h4>
                                </div>
                                <div class="card-body">

                                    <div class="d-flex justify-content-between pb-1">
                                        <span>January</span>
                                        <div>
                                            <strong>$10,000</strong> <span>/ $20,000</span>
                                        </div>
                                    </div>
                                    <div class="progress mb-3">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 52%;"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                    <div class="d-flex justify-content-between pb-1">
                                        <span>February</span>
                                        <div>
                                            <strong>$8,250</strong> <span>/ $5,230</span>
                                        </div>
                                    </div>
                                    <div class="progress mb-3">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%;"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                    <div class="d-flex justify-content-between pb-1">
                                        <span>March</span>
                                        <div>
                                            <strong>$1,150</strong> <span>/ $8,120</span>
                                        </div>
                                    </div>
                                    <div class="progress mb-3">
                                        <div class="progress-bar bg-danger" role="progressbar" style="width: 22%;"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                    <div class="d-flex justify-content-between pb-1">
                                        <span>April</span>
                                        <div>
                                            <strong>$4,625</strong> <span>/ $11,450</span>
                                        </div>
                                    </div>
                                    <div class="progress mb-3">
                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 40%;"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                    <div class="d-flex justify-content-between pb-1">
                                        <span>May</span>
                                        <div>
                                            <strong>$5,875</strong> <span>/ $12,600</span>
                                        </div>
                                    </div>
                                    <div class="progress mb-3">
                                        <div class="progress-bar bg-warning" role="progressbar" style="width: 45%;"
                                            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <h4 class="card-title">Latest Orders</h4>
                            <button class="btn btn-faded btn-sm dropdown-toggle dropdown-no-caret" type="button"
                                id="ordersFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="material-icons align-bottom text-muted md-18">filter_list</i>
                                <span>Filter</span>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="ordersFilter">
                                <h6 class="dropdown-header">Sort By</h6>
                                <a class="dropdown-item" href="#">#</a>
                                <a class="dropdown-item" href="#">Date</a>
                                <a class="dropdown-item" href="#">Status</a>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th style="width:60px">#</th>
                                        <th style="width:150px" class="text-uppercase">Date</th>
                                        <th style="width:300px" class="text-uppercase">Description</th>
                                        <th class="text-uppercase">Client</th>
                                        <th class="text-right text-uppercase" style="width:80px">Status</th>
                                        <th class="text-center text-uppercase" style="width:80px">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="align-middle"><a href="#" class="font-weight-normal">4191</a></td>
                                        <td class="text-muted align-middle">May 24th, 2017</td>
                                        <td class="align-middle">2 Pack of Juicy UI Components</td>
                                        <td class="align-middle">
                                            <a href="#">
                                                <i class="material-icons align-bottom">business</i> <span>Ice
                                                    Rocks</span>
                                            </a>
                                        </td>
                                        <td class="text-right align-middle">
                                            <div class="badge badge-success">PAID</div>
                                        </td>
                                        <td class="text-center align-middle">
                                            <div class="d-flex">
                                                <button class="btn btn-white btn-sm mr-1">
                                                    <i class="material-icons md-14 align-middle">edit</i>
                                                </button>
                                                <button class="btn btn-danger btn-sm">
                                                    <i class="material-icons md-14 align-middle">delete</i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="align-middle"><a href="#">4190</a></td>
                                        <td class="text-muted align-middle">May 23th, 2017</td>
                                        <td class="align-middle">Monthly Subscription</td>
                                        <td class="align-middle">
                                            <a href="#">
                                                <i class="material-icons align-bottom">business</i> <span>Demo
                                                    LLC</span>
                                            </a>
                                        </td>
                                        <td class="text-right align-middle">
                                            <span class="badge badge-success">PAID</span>
                                        </td>
                                        <td class="text-center align-middle">
                                            <div class="d-flex">
                                                <button class="btn btn-white btn-sm mr-1">
                                                    <i class="material-icons md-14 align-middle">edit</i>
                                                </button>
                                                <button class="btn btn-danger btn-sm">
                                                    <i class="material-icons md-14 align-middle">delete</i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="align-middle"><a href="#">4189</a></td>
                                        <td class="text-muted align-middle">May 22th, 2017</td>
                                        <td class="align-middle">Flow Theme v.1</td>
                                        <td class="align-middle">
                                            <a href="#">
                                                <i class="material-icons align-bottom">business</i> <span>Creative
                                                    Themes</span>
                                            </a>
                                        </td>
                                        <td class="text-right align-middle">
                                            <span class="badge badge-success">PAID</span>
                                        </td>
                                        <td class="text-center align-middle">
                                            <div class="d-flex">
                                                <button class="btn btn-white btn-sm mr-1">
                                                    <i class="material-icons md-14 align-middle">edit</i>
                                                </button>
                                                <button class="btn btn-danger btn-sm">
                                                    <i class="material-icons md-14 align-middle">delete</i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="align-middle"><a href="#">4189</a></td>
                                        <td class="text-muted align-middle">May 22th, 2017</td>
                                        <td class="align-middle">Flow Theme v.1</td>
                                        <td class="align-middle">
                                            <a href="#">
                                                <i class="material-icons align-bottom">business</i> <span>Creative
                                                    Themes</span>
                                            </a>
                                        </td>
                                        <td class="text-right align-middle">
                                            <span class="badge badge-success">PAID</span>
                                        </td>
                                        <td class="text-center align-middle">
                                            <div class="d-flex">
                                                <button class="btn btn-white btn-sm mr-1">
                                                    <i class="material-icons md-14 align-middle">edit</i>
                                                </button>
                                                <button class="btn btn-danger btn-sm">
                                                    <i class="material-icons md-14 align-middle">delete</i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

            <!-- drawer -->
            <div class="mdk-drawer js-mdk-drawer" id="default-drawer">
                <div class="mdk-drawer__content">
                    <div class="mdk-drawer__inner" data-simplebar data-simplebar-force-enabled="true">

                        <nav class="drawer  drawer--dark">
                            <div class="drawer-spacer drawer-spacer-border">
                                <div class="media align-items-center">
                                    <img src="assets/images/avatars/andrew-robles-300868.jpg"
                                        class="img-fluid rounded-circle mr-2" width="40" alt="">
                                    <div class="media-body" style="line-height: 1.2">
                                        <a href="blue-profile.html"><strong>Francis Chege</strong></a>
                                        <div>Church Administrator</div>
                                    </div>
                                    <div class="dropdown">
                                        <a href="#" class="dropdown-toggle dropdown-clear-caret" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            <i class="material-icons">more_vert</i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="blue-profile.html" class="dropdown-item dropdown-item-action ">View
                                                Profile</a>
                                            <a href="blue-account.html" class="dropdown-item dropdown-item-action ">Edit
                                                Account</a>
                                            <a href="#" class="dropdown-item dropdown-item-action">Logout</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- DROPDOWN -->
                     
                            <!-- HEADING -->
                            <div class="drawer-heading">
                                Menu
                            </div>
                            <!-- MENU -->
                            <ul class="drawer-menu" id="mainMenu" data-children=".drawer-submenu">
                                <li class="drawer-menu-item ">
                                    <a href="blue-maps.html">
                                        <i class="material-icons">home</i>
                                        <span class="drawer-menu-text">Dashboard</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item drawer-submenu">
                                    <a data-toggle="collapse" data-parent="#mainMenu" href="#appsMenu"
                                        data-target="#appsMenu" aria-controls="appsMenu" aria-expanded="false"
                                        class="collapsed">
                                        <i class="material-icons">view_quilt</i>
                                        <span class="drawer-menu-text"> Apps</span>
                                    </a>
                                    <ul class="collapse " id="appsMenu">
                                        <li class="drawer-menu-item "><a href="blue-apps-email.html">Email</a></li>
                                        <li class="drawer-menu-item "><a href="blue-apps-chat.html">Chat</a></li>
                                        <li class="drawer-menu-item "><a href="blue-apps-clients.html">Clients</a></li>
                                    </ul>
                                </li>
                                <li class="drawer-menu-item drawer-submenu">
                                    <a data-toggle="collapse" data-parent="#mainMenu" href="#" data-target="#uiMenu"
                                        aria-controls="uiMenu" aria-expanded="false" class="collapsed">
                                        <i class="material-icons">library_books</i>
                                        <span class="drawer-menu-text">UI Components</span>
                                    </a>
                                    <ul class="collapse " id="uiMenu">
                                        <li class="drawer-menu-item "><a href="blue-ui-buttons.html">Buttons</a></li>
                                        <li class="drawer-menu-item "><a href="blue-ui-colors.html">Colors</a></li>
                                        <li class="drawer-menu-item "><a href="blue-ui-grid.html">Grid</a></li>
                                        <li class="drawer-menu-item "><a href="blue-ui-navs.html">Navs</a></li>
                                        <li class="drawer-menu-item "><a href="blue-ui-icons.html">Icons</a></li>
                                        <li class="drawer-menu-item "><a href="blue-ui-typography.html">Typography</a>
                                        </li>
                                        <li class="drawer-menu-item "><a href="blue-ui-drag-drop.html">Drag &amp;
                                                Drop</a></li>
                                        <li class="drawer-menu-item "><a href="blue-ui-tables.html">Tables</a></li>
                                        <li class="drawer-menu-item "><a
                                                href="blue-ui-notifications.html">Notifications</a></li>
                                        <li class="drawer-menu-item "><a href="blue-ui-loaders.html">Loaders</a></li>
                                    </ul>
                                </li>
                                <li class="drawer-menu-item drawer-submenu">
                                    <a data-toggle="collapse" data-parent="#mainMenu" href="#" data-target="#formsMenu"
                                        aria-controls="formsMenu" aria-expanded="false" class="collapsed">
                                        <i class="material-icons">text_format</i>
                                        <span class="drawer-menu-text">Forms</span>
                                    </a>
                                    <ul class="collapse " id="formsMenu">
                                        <li class="drawer-menu-item "><a href="blue-form-controls.html">Form
                                                controls</a></li>
                                        <li class="drawer-menu-item "><a href="blue-checkboxes-radios.html">Checkboxes
                                                and Radios</a></li>
                                        <li class="drawer-menu-item "><a href="blue-switches-toggles.html">Switches and
                                                Toggles</a></li>
                                        <li class="drawer-menu-item "><a href="blue-form-layout.html">Layout
                                                Variations</a></li>
                                        <li class="drawer-menu-item "><a href="blue-validation.html">Validation</a></li>
                                        <li class="drawer-menu-item "><a href="blue-custom-forms.html">Custom Forms</a>
                                        </li>
                                        <li class="drawer-menu-item "><a href="blue-text-editor.html">Text Editor</a>
                                        </li>
                                        <li class="drawer-menu-item "><a href="blue-datepicker.html">Datepicker</a></li>
                                    </ul>
                                </li>
                                <li class="drawer-menu-item ">
                                    <a href="blue-events-calendar.html">
                                        <i class="material-icons">event_note</i>
                                        <span class="drawer-menu-text">Events Calendar</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item ">
                                    <a href="blue-maps.html">
                                        <i class="material-icons">language</i>
                                        <span class="drawer-menu-text">Maps</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item ">
                                    <a href="blue-charts.html">
                                        <i class="material-icons">insert_chart</i>
                                        <span class="drawer-menu-text">Charts</span>
                                    </a>
                                </li>
                                <li class="drawer-menu-item drawer-submenu">
                                    <a data-toggle="collapse" data-parent="#mainMenu" href="#" data-target="#pageMenu"
                                        aria-controls="pageMenu" aria-expanded="false" class="collapsed">
                                        <i class="material-icons">layers</i>
                                        <span class="drawer-menu-text">Pages / Examples</span>
                                    </a>
                                    <ul class="collapse " id="pageMenu">
                                        <li class="drawer-menu-item "><a href="blue-tickets.html">Tickets</a></li>
                                        <li class="drawer-menu-item "><a href="blue-blog-post.html">Blog Post</a></li>
                                        <li class="drawer-menu-item "><a href="blue-profile.html">Profile</a></li>
                                        <li class="drawer-menu-item "><a href="blue-account.html">Account</a></li>
                                        <li class="drawer-menu-item "><a href="blue-emails-listing.html">Emails
                                                Listing</a></li>
                                        <li class="drawer-menu-item "><a href="blue-lessons.html">Lessons</a></li>
                                        <li class="drawer-menu-item "><a href="blue-lessons_second.html">Lessons 2</a>
                                        </li>
                                        <li class="drawer-menu-item "><a href="blue-learning.html">Learning</a></li>
                                        <li class="drawer-menu-item "><a href="blue-activity-timeline.html">Activity
                                                Timeline</a></li>
                                        <li class="drawer-menu-item "><a href="blue-error.html">Error Page</a></li>
                                        <li class="drawer-menu-item "><a href="blue-cart.html">Shopping cart</a></li>
                                        <li class="drawer-menu-item "><a href="blue-invoice.html">Invoice</a></li>
                                        <li class="drawer-menu-item "><a href="blue-pricing-2.html">Pricing (New)</a>
                                        </li>
                                        <li class="drawer-menu-item "><a href="blue-pricing.html">Pricing</a></li>
                                        <li class="drawer-menu-item"><a href="blue-signup.html">Sign Up</a></li>
                                        <li class="drawer-menu-item"><a href="blue-login.html">Login</a></li>
                                        <li class="drawer-menu-item"><a href="blue-forgot-password.html">Forgot
                                                Password</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <!-- HEADING -->
                            <div class="drawer-heading">
                                Activity
                            </div>
                            <!-- ACTIVITY -->
                            <div class="list-group list-group-flush drawer-activity">
                                <div class="list-group-item flex-column align-items-start active">
                                    <div class="media">
                                        <div class="list-dot d-flex align-self-center"></div>
                                        <div class="media-body">
                                            <a href="#"> <i class="material-icons align-middle">person</i> brian</a>
                                            left a comment on a ticket <a href="#">#1224</a> in milestone <a
                                                href="#">Initial Release</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-group-item flex-column align-items-start">
                                    <div class="media">
                                        <div class="list-dot d-flex align-self-center"></div>
                                        <div class="media-body">
                                            <a href="#"> <i class="material-icons align-middle">person</i> steven</a>
                                            left a comment on a ticket <a href="#">#1225</a> in milestone <a
                                                href="#">Initial Release</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-group-item flex-column align-items-start">
                                    <div class="media">
                                        <div class="list-dot d-flex align-self-center"></div>
                                        <div class="media-body">
                                            <a href="#"> <i class="material-icons align-middle">person</i> karen</a>
                                            left a comment on a ticket <a href="#">#283</a> in milestone <a
                                                href="#">Alpha Release</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-group-item flex-column align-items-start">
                                    <div class="media">
                                        <div class="list-dot d-flex align-self-center"></div>
                                        <div class="media-body">
                                            <a href="#"> <i class="material-icons align-middle">person</i> themefy</a>
                                            left a comment on a ticket <a href="#">#285</a> in milestone <a
                                                href="#">Alpha Release</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </nav>

                    </div>
                </div>
            </div>

        </div>
        <!-- // END drawer-layout -->
    </div>
    <!-- jQuery -->
    <script src="{{ url_for('static', filename='vendor/jquery.min.js') }}"></script>

    <!-- Bootstrap -->
    <script src="{{ url_for('static', filename='vendor/popper.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/bootstrap.min.js') }}"></script>

    <!-- Simplebar -->
    <!-- Used for adding a custom scrollbar to the drawer -->
    <script src="{{ url_for('static', filename='vendor/simplebar.js') }}"></script>


    <script src="{{ url_for('static', filename='vendor/Chart.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/moment.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/dateformat.js') }}"></script>

    <script>
        window.theme = "blue";
    </script>
    <script src="{{ url_for('static', filename='js/color_variables.js') }}"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>

    <script src="{{ url_for('static', filename='vendor/dom-factory.js') }}"></script>

    <!-- DOM Factory -->
    <script src="{{ url_for('static', filename='vendor/material-design-kit.js') }}"></script>

    <!-- MDK -->



    <script>
        (function () {
            'use strict';

            // Self Initialize DOM Factory Components
            domFactory.handler.autoInit()

            // Connect button(s) to drawer(s)
            var sidebarToggle = Array.prototype.slice.call(document.querySelectorAll('[data-toggle="sidebar"]'))

            sidebarToggle.forEach(function (toggle) {
                toggle.addEventListener('click', function (e) {
                    var selector = e.currentTarget.getAttribute('data-target') || '#default-drawer'
                    var drawer = document.querySelector(selector)
                    if (drawer) {
                        drawer.mdkDrawer.toggle()
                    }
                })
            })

            //////////////////////////////////////////
            // BREAK OUT OF ENVATO LIVE DEMO IFRAME //
            //////////////////////////////////////////

            window.top.location.hostname !== window.location.hostname && (window.top.location = window.location)

        })();
    </script>


    <script src="{{ url_for('static', filename='js/charts_index.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/fullcalendar.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/calendars.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/datepicker.js') }}"></script>


</body>

</html>
{% endblock %}