{% extends "client/base_site.html" %}
{% load i18n static %}
{% block title %}Client - Dashboard{% endblock %}
{% block topbar %}
    {% include "client/topbar.html" %}
{% endblock %}

{% block content %}

    <div class="page-content">
        <div class="page-container">

            {% block breadcrumbs %}
                {% include "client/breadcrumbs.html" with title="Dashboard" %}
            {% endblock %}

            <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">
                
                <div class="col">
                    <div class="card overflow-hidden">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Savings</h5>
                            <div class="d-flex align-items-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-success rounded-circle fs-22">
                                        <i class="ti ti-businessplan"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">70,000,000,000 <small class="text-muted">UGX</small></h3>
                            </div>
                            <p class="mb-0 text-muted">
                                <span class="text-success me-2"><i class="ti ti-caret-up-filled"></i> 3.51%</span>
                                <span class="text-nowrap">Since last month</span>
                            </p>
                        </div>
                    </div>
                </div><!-- end col -->

                <div class="col">
                    <div class="card overflow-hidden">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Loans</h5>
                            <div class="d-flex align-items-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-danger rounded-circle fs-22">
                                        <i class="ti ti-credit-card"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">30,000,000,000 <small class="text-muted">UGX</small></h3>
                            </div>
                            <p class="mb-0 text-muted">
                                <span class="text-success me-2"><i class="ti ti-caret-up-filled"></i> 26.87%</span>
                                <span class="text-nowrap">Since last month</span>
                            </p>
                        </div>
                    </div>
                </div><!-- end col -->

                <div class="col">
                    <div class="card overflow-hidden">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Transfers</h5>
                            <div class="d-flex align-items-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-secondary rounded-circle fs-22">
                                        <i class="ti ti-transfer"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">962k</h3>
                            </div>
                            <p class="mb-0 text-muted">
                                <span class="text-success me-2"><i class="ti ti-caret-up-filled"></i> 26.87%</span>
                                <span class="text-nowrap">Since last month</span>
                            </p>
                        </div>
                    </div>
                </div><!-- end col -->

                <div class="col">
                    <div class="card overflow-hidden">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Clients</h5>
                            <div class="d-flex align-items-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-primary rounded-circle fs-22">
                                        <i class="ti ti-friends"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">68758k</h3>
                            </div>
                            <p class="mb-0 text-muted">
                                <span class="text-danger me-2"><i class="ti ti-caret-down-filled"></i> 9.19%</span>
                                <span class="text-nowrap">Since last month</span>
                            </p>
                        </div>
                    </div>
                </div><!-- end col -->

            </div><!-- end row -->

            <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">

                <div class="col">
                    <div class="card overflow-hidden">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Agents</h5>
                            <div class="d-flex align-items-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-warning rounded-circle fs-22">
                                        <i class="ti ti-user-star"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">3M</h3>
                            </div>
                            <p class="mb-0 text-muted">
                                <span class="text-danger me-2"><i class="ti ti-caret-down-filled"></i> 1.05%</span>
                                <span class="text-nowrap">Since last month</span>
                            </p>
                        </div>
                    </div>
                </div><!-- end col -->

                <div class="col">
                    <div class="card overflow-hidden">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Users</h5>
                            <div class="d-flex align-items-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-info rounded-circle fs-22">
                                        <i class="ti ti-users"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">76k</h3>
                            </div>
                            <p class="mb-0 text-muted">
                                <span class="text-success me-2"><i class="ti ti-caret-up-filled"></i> 3.51%</span>
                                <span class="text-nowrap">Since last month</span>
                            </p>
                        </div>
                    </div>
                </div><!-- end col -->

                <div class="col">
                    <div class="card overflow-hidden">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Braches</h5>
                            <div class="d-flex align-items-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-dark rounded-circle fs-22">
                                        <i class="ti ti-hierarchy"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">4</h3>
                            </div>
                            <p class="mb-0 text-muted">
                                <span class="text-danger me-2"><!--<i class="ti ti-caret-down-filled"></i> 1.05%-->&nbsp;</span>
                                <span class="text-nowrap"><!--Since last month-->&nbsp;</span>
                            </p>
                        </div>
                    </div>
                </div><!-- end col -->

                

                

                <div class="col">
                    <div class="card overflow-hidden">
                        <div class="card-body">
                            <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Settings</h5>
                            <div class="d-flex align-items-center gap-2 my-2 py-1">
                                <div class="user-img fs-42 flex-shrink-0">
                                    <span class="avatar-title text-bg-dark rounded-circle fs-22">
                                        <i class="ti ti-settings"></i>
                                    </span>
                                </div>
                                <h3 class="mb-0 fw-bold">87.94M</h3>
                            </div>
                            <p class="mb-0 text-muted">
                                <span class="text-danger me-2"><!--<i class="ti ti-caret-down-filled"></i> 1.05%-->&nbsp;</span>
                                <span class="text-nowrap"><!--Since last month-->&nbsp;</span>
                            </p>
                        </div>
                    </div>
                </div><!-- end col -->
            </div><!-- end row -->

            <div class="row">
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4 class="header-title mb-1">Active Accounts</h4>
                                        <p class="text-muted">March 26 - April 01</p>
                                    </div>
                                    <div class="dropdown">
                                        <a href="#" class="dropdown-toggle drop-arrow-none card-drop"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ti ti-dots-vertical"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">Active</a>
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">In-active</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="my-2 d-flex align-items-center justify-content-between">
                                    <h2 class="fw-normal">600000</h2>
                                    
                                </div>

                                <div dir="ltr">
                                    <div id="daily-sales" class="apex-charts" data-colors="#198754,#dc3545"></div>
                                </div>

                            </div>
                        </div> <!-- end card-->
                    </div> <!-- end col-->

                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4 class="header-title mb-1">Statistics</h4>
                                    </div>
                                    <div class="dropdown">
                                        <a href="#" class="dropdown-toggle drop-arrow-none card-drop"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ti ti-dots-vertical"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">Loans</a>
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">Savings</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="row text-center">
                                    <div class="col-sm-4 mt-3">
                                        <h3 class="fw-normal">4,335</h3>
                                        <p class="text-muted text-overflow">Loans</p>
                                    </div>
                                    <div class="col-sm-4 mt-3">
                                        <h3 class="fw-normal">&nbsp;</h3>
                                        <p class="text-muted text-overflow">&nbsp;</p>
                                    </div>
                                    <div class="col-sm-4 mt-3">
                                        <h3 class="fw-normal">874</h3>
                                        <p class="text-muted text-overflow">Savings</p>
                                    </div>
                                </div>

                                <div dir="ltr">
                                    <div id="statistics-chart" class="apex-charts" data-colors="#ffc107,#198754"></div>
                                </div>

                            </div>
                        </div> <!-- end card-->
                    </div> <!-- end col-->

                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h4 class="header-title mb-1">Total Revenue</h4>
                                        <p class="text-muted">March 26 - April 01</p>
                                    </div>
                                    <div class="dropdown">
                                        <a href="#" class="dropdown-toggle drop-arrow-none card-drop"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ti ti-dots-vertical"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">Total Income</a>
                                            <!-- item-->
                                            <a href="javascript:void(0);" class="dropdown-item">Total Expenses</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="my-2 d-flex align-items-center justify-content-between">
                                    <h2 class="fw-normal">$96.56k</h2>
                                    <div class="">
                                        <img src="assets/images/cards/american-express.svg" alt="user-card"
                                            height="36" />
                                        <img src="assets/images/cards/discover-card.svg" alt="user-card" height="36" />
                                        <img src="assets/images/cards/mastercard.svg" alt="user-card" height="36" />
                                    </div>
                                </div>

                                <div dir="ltr">
                                    <div id="revenue-chart" class="apex-charts" data-colors="#31ce77,#188ae2"></div>
                                </div>

                            </div>
                        </div> <!-- end card-->
                    </div> <!-- end col-->
                </div> <!-- end row-->


    
                          
        </div> <!-- container -->

        {% block footer %}{% include "client/footer.html" %}{% endblock %}


</div>
    
{% endblock %}