{% extends 'admin.html.twig' %}

{% block title %}Home{% endblock %}
{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="content" id="content">
        <!-- PAGE HEADING -->
        <div class="page-heading">
            <div class="page-heading__container"><h1 class="title">The Right Way - Admin Template</h1>
                <p class="caption">Explore the perfection of our admin template</p></div>
            <div class="page-heading__container float-right d-none d-sm-block"><a
                        href="https://themeforest.net/item/the-right-way-bootstrap-4-admin-template/21916885?ref=aqvatarius&amp;license=regular&amp;open_purchase_for_item_id=21916885"
                        target="_blank"
                        class="btn btn-primary btn--icon btn--icon-stacked btn--anon d-none d-lg-block"><span
                            class="text">$24</span> Get template now</a> <a
                        href="https://themeforest.net/item/the-right-way-bootstrap-4-admin-template/21916885?ref=aqvatarius&amp;license=regular&amp;open_purchase_for_item_id=21916885"
                        target="_blank"
                        class="btn btn-primary btn--icon btn--icon-stacked btn--anon d-none d-sm-block d-lg-none"><span
                            class="text">$24</span> Buy</a></div>
            <nav aria-label="breadcrumb" role="navigation">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Dashboards</a></li>
                    <li class="breadcrumb-item active">Dashboard #1</li>
                </ol>
            </nav>
        </div>
        <!-- //END PAGE HEADING -->
        <div class="container-fluid">
            <div class="form-row">
                <div class="col-12 col-xl-8">
                    <div class="card card-inner-container--up margin-bottom-20" id="dashboard-orders-card">
                        <div class="card-body">
                            <div class="card-inner-container card-inner-container card-inner-container--light">
                                <div class="form-row">
                                    <div class="col-8 col-md-6"><h4>Order statistics</h4>
                                        <p class="subtitle">Monthly by orders</p></div>
                                    <div class="col-4 col-md-6">
                                        <div class="dropdown float-right">
                                            <div class="rw-btn rw-btn--card rw-btn--lg" data-toggle="dropdown">
                                                <div></div>
                                            </div>
                                            <div class="dropdown-menu dropdown-menu-right"><a href="#"
                                                                                              class="dropdown-item"
                                                                                              data-demo-action="update">Update</a>
                                                <a href="#" class="dropdown-item"
                                                   data-demo-action="expand">Expand</a> <a href="#"
                                                                                           class="dropdown-item"
                                                                                           data-demo-action="invert">Invert
                                                    style</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="#" class="dropdown-item" data-demo-action="remove">Remove
                                                    card</a></div>
                                        </div>
                                        <button class="btn btn-light d-none d-md-block float-right margin-right-5"
                                                id="dashboard-rp-customrange">Custom range
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div id="dashboard-ec-line"
                                 style="width: 100%; height: 350px; overflow-x: hidden"></div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="card card-inner-container--up margin-bottom-20" id="dashboard-budget-card">
                        <div class="card-body">
                            <div class="card-inner-container card-inner-container card-inner-container--light">
                                <div class="form-row">
                                    <div class="col-9"><h4>Budget allocation</h4>
                                        <p class="subtitle">Actual for 01/18 - 05/18</p></div>
                                    <div class="col-3">
                                        <div class="dropdown float-right">
                                            <div class="rw-btn rw-btn--card rw-btn--lg" data-toggle="dropdown">
                                                <div></div>
                                            </div>
                                            <div class="dropdown-menu dropdown-menu-right"><a href="#"
                                                                                              class="dropdown-item"
                                                                                              data-demo-action="update">Update</a>
                                                <a href="#" class="dropdown-item"
                                                   data-demo-action="expand">Expand</a> <a href="#"
                                                                                           class="dropdown-item"
                                                                                           data-demo-action="invert">Invert
                                                    style</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="#" class="dropdown-item" data-demo-action="remove">Remove
                                                    card</a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="dashboard-ec-radar"
                                 style="width: 100%; height: 350px; overflow-x: hidden"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row margin-bottom-20">
                <div class="col-12 col-lg-3">
                    <div class="widget widget--invert-by-parent">
                        <div class="widget__icon_layer widget__icon_layer--right"><span class="li-bag"></span></div>
                        <div class="widget__container">
                            <div class="widget__line">
                                <div class="widget__icon"><span class="li-bag"></span></div>
                                <div class="widget__title">Todays orders</div>
                                <div class="widget__subtitle">Approved only</div>
                            </div>
                            <div class="widget__box widget__box--left">
                                <div class="widget__informer"><span class="text-bold">51</span>/927</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3">
                    <div class="widget widget--invert-by-parent">
                        <div class="widget__icon_layer widget__icon_layer--right"><span class="li-receipt"></span>
                        </div>
                        <div class="widget__container">
                            <div class="widget__line">
                                <div class="widget__icon"><span class="li-receipt"></span></div>
                                <div class="widget__title">Opened payments</div>
                                <div class="widget__subtitle">Summary amount</div>
                            </div>
                            <div class="widget__box widget__box--left">
                                <div class="widget__informer"><span class="text-bold">$1,723.50</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3">
                    <div class="widget widget--invert-by-parent">
                        <div class="widget__icon_layer widget__icon_layer--right"><span class="li-users2"></span>
                        </div>
                        <div class="widget__container">
                            <div class="widget__line">
                                <div class="widget__icon"><span class="li-users2"></span></div>
                                <div class="widget__title">Visitors</div>
                                <div class="widget__subtitle">Todays total</div>
                            </div>
                            <div class="widget__box widget__box--left">
                                <div class="widget__informer"><span class="text-bold">14,355</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-3">
                    <div class="widget widget--invert-by-parent">
                        <div class="widget__icon_layer widget__icon_layer--right"><span class="li-pencil5"></span>
                        </div>
                        <div class="widget__container">
                            <div class="widget__line">
                                <div class="widget__icon"><span class="li-pencil5"></span></div>
                                <div class="widget__title">Reviews</div>
                                <div class="widget__subtitle">Writen on products</div>
                            </div>
                            <div class="widget__box widget__box--left">
                                <div class="widget__informer"><span class="text-bold">147</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card margin-bottom-0">
                <div class="card-body">
                    <div class="row">
                        <div class="col-9"><h4>Latest orders</h4>
                            <p class="subtitle margin-bottom-0">List of recent orders 01/05/2018 - 02/05/2018</p>
                        </div>
                        <div class="col-3">
                            <div class="dropdown float-right">
                                <div class="rw-btn rw-btn--card rw-btn--lg" data-toggle="dropdown">
                                    <div></div>
                                </div>
                                <div class="dropdown-menu dropdown-menu-right"><a href="#" class="dropdown-item"
                                                                                  data-demo-action="update">Update</a>
                                    <a href="#" class="dropdown-item" data-demo-action="expand">Expand</a> <a
                                            href="#" class="dropdown-item" data-demo-action="invert">Invert
                                        style</a>
                                    <div class="dropdown-divider"></div>
                                    <a href="#" class="dropdown-item" data-demo-action="remove">Remove card</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="divider-text divider-text--xs">Recent</div>
                <div class="card-body padding-top-10 padding-bottom-10">
                    <div class="table-responsive">
                        <table class="table table-indent-rows margin-bottom-0">
                            <tbody>
                            <tr>
                                <td width="40">
                                    <div class="custom-control custom-checkbox"><input type="checkbox"
                                                                                       class="custom-control-input"
                                                                                       id="t1_checkbox_0"><label
                                                class="custom-control-label" for="t1_checkbox_0"></label></div>
                                </td>
                                <td width="200">
                                    <div class="user user--rounded user--bordered user--lg margin-bottom-0">
                                        <img src="{{ asset('assets/img/users/user_2.jpg') }}">
                                        <div class="user__name"><strong>Tracey Newman</strong><br>
                                            <div class="dashboard_rating" data-score="4"></div>
                                        </div>
                                    </div>
                                </td>
                                <td></td>
                                <td width="180"><strong>25 March 2018</strong> <span
                                            class="text-muted">12:23PM</span></td>
                                <td width="150">
                                    <div class="btn btn-outline-success btn-block disabled btn-sm">Paid</div>
                                </td>
                                <td width="150">
                                    <div class="btn btn-outline-success btn-block disabled btn-sm">Approved</div>
                                </td>
                                <td width="100" class="text-center"><strong>$403.22</strong></td>
                                <td width="40">
                                    <button class="btn btn-light btn-sm btn-icon"><span class="fa fa-pencil"></span>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td width="40">
                                    <div class="custom-control custom-checkbox"><input type="checkbox"
                                                                                       class="custom-control-input"
                                                                                       id="t1_checkbox_1"><label
                                                class="custom-control-label" for="t1_checkbox_1"></label></div>
                                </td>
                                <td width="200">
                                    <div class="user user--rounded user--bordered user--lg margin-bottom-0">
                                        <img src="{{ asset('assets/img/users/user_3.jpg') }}">
                                        <div class="user__name"><strong>Jonathan Foster</strong><br>
                                            <div class="dashboard_rating" data-score="5"></div>
                                        </div>
                                    </div>
                                </td>
                                <td></td>
                                <td width="180"><strong>25 March 2018</strong> <span
                                            class="text-muted">10:11PM</span></td>
                                <td width="150">
                                    <div class="btn btn-outline-danger btn-block disabled btn-sm">Unpaid</div>
                                </td>
                                <td width="150">
                                    <div class="btn btn-outline-info btn-block disabled btn-sm">Waiting</div>
                                </td>
                                <td width="100" class="text-center"><strong>$504.15</strong></td>
                                <td width="40">
                                    <button class="btn btn-light btn-sm btn-icon"><span class="fa fa-pencil"></span>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td width="40">
                                    <div class="custom-control custom-checkbox"><input type="checkbox"
                                                                                       class="custom-control-input"
                                                                                       id="t1_checkbox_2"><label
                                                class="custom-control-label" for="t1_checkbox_2"></label></div>
                                </td>
                                <td width="200">
                                    <div class="user user--rounded user--bordered user--lg margin-bottom-0">
                                        <img src="{{ asset('assets/img/users/user_1.jpg') }}">
                                        <div class="user__name"><strong>Dmitry Ivaniuk</strong><br>
                                            <div class="dashboard_rating" data-score="3"></div>
                                        </div>
                                    </div>
                                </td>
                                <td></td>
                                <td width="180"><strong>25 March 2018</strong> <span
                                            class="text-muted">10:12AM</span></td>
                                <td width="150">
                                    <div class="btn btn-outline-success btn-block disabled btn-sm">Paid</div>
                                </td>
                                <td width="150">
                                    <div class="btn btn-outline-primary btn-block disabled btn-sm">Pending</div>
                                </td>
                                <td width="100" class="text-center"><strong>$750.00</strong></td>
                                <td width="40">
                                    <button class="btn btn-light btn-sm btn-icon"><span class="fa fa-pencil"></span>
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="divider-text divider-text--xs">Canceled</div>
                <div class="card-body padding-top-10">
                    <div class="table-responsive">
                        <table class="table table-indent-rows margin-bottom-0">
                            <tbody>
                            <tr>
                                <td width="40">
                                    <div class="custom-control custom-checkbox"><input type="checkbox"
                                                                                       class="custom-control-input"
                                                                                       id="t1_checkbox_3"><label
                                                class="custom-control-label" for="t1_checkbox_3"></label></div>
                                </td>
                                <td width="200">
                                    <div class="user user--rounded user--bordered user--lg margin-bottom-0"><img
                                                src="{{ asset('assets/img/users/user_5.jpg') }}">
                                        <div class="user__name"><strong>Gary Coldman</strong><br>
                                            <div class="dashboard_rating" data-score="5"></div>
                                        </div>
                                    </div>
                                </td>
                                <td></td>
                                <td width="180"><strong>23 March 2018</strong> <span
                                            class="text-muted">12:23PM</span></td>
                                <td width="150"></td>
                                <td width="150">
                                    <div class="btn btn-outline-danger btn-block disabled btn-sm">Canceled</div>
                                </td>
                                <td width="100" class="text-center"><strong>$1,522.95</strong></td>
                                <td width="40">
                                    <button class="btn btn-light btn-sm btn-icon"><span class="fa fa-times"></span>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td width="40">
                                    <div class="custom-control custom-checkbox"><input type="checkbox"
                                                                                       class="custom-control-input"
                                                                                       id="t1_checkbox_4"><label
                                                class="custom-control-label" for="t1_checkbox_4"></label></div>
                                </td>
                                <td width="200">
                                    <div class="user user--rounded user--bordered user--lg margin-bottom-0"><img
                                                src="{{ asset('assets/img/users/user_8.jpg') }}">
                                        <div class="user__name"><strong>Julia Tornovsky</strong><br>
                                            <div class="dashboard_rating" data-score="2"></div>
                                        </div>
                                    </div>
                                </td>
                                <td></td>
                                <td width="180"><strong>25 March 2018</strong> <span
                                            class="text-muted">10:11PM</span></td>
                                <td width="150"></td>
                                <td width="150">
                                    <div class="btn btn-outline-danger btn-block disabled btn-sm">Canceled</div>
                                </td>
                                <td width="100" class="text-center"><strong>$125.25</strong></td>
                                <td width="40">
                                    <button class="btn btn-light btn-sm btn-icon"><span class="fa fa-times"></span>
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="form-row margin-top-20">
                        <div class="col-6 col-lg-3"><select class="form-control select-simple">
                                <option>Action with selected</option>
                                <option>Status: Canceled</option>
                                <option>Delete</option>
                            </select></div>
                        <div class="col-6 col-lg-2">
                            <button class="btn btn-light btn-block">Confirm</button>
                        </div>
                        <div class="col-12 col-lg-5">&nbsp;</div>
                        <div class="col-12 col-lg-2">
                            <button class="btn btn-outline-secondary btn-block">Preview all orders</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <!-- THIS PAGE SCRIPTS ONLY -->
    <script type="text/javascript" src="{{ asset('js/vendors/moment/moment-with-locales.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/vendors/echarts/echarts.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/vendors/select2/select2.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/vendors/daterangepicker/daterangepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/vendors/raty/jquery.raty.js') }}"></script>
    <!-- //END THIS PAGE SCRIPTS ONLY -->
    <script type="text/javascript" src="{{ asset('js/demo_dashboard.js') }}"></script>
{% endblock %}