@extends('admin.layouts.layout')
@section('content')
<div class="app-main__inner">
    <div class="app-page-title mb-0">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon"><i class="pe-7s-monitor icon-gradient bg-mean-fruit"></i></div>
                <div>Analytics Dashboard<div class="page-title-subheading">Selamat datang di aplikasi pengajuan dana
                        apresiasi internal Politeknik LPP Yogyakarta.</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-xl-4">
            <div class="card mb-3 widget-content bg-midnight-bloom">
                <div class="widget-content-wrapper text-white">
                    <div class="widget-content-left">
                        <div class="widget-heading">Total Ajuan</div>
                        <div class="widget-subheading">Last year</div>
                    </div>
                    <div class="widget-content-right">
                        <div class="widget-numbers text-white"><span>{{$datas['total_issue']}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card mb-3 widget-content bg-arielle-smile">
                <div class="widget-content-wrapper text-white">
                    <div class="widget-content-left">
                        <div class="widget-heading">User Pengguna</div>
                        <div class="widget-subheading">Total Clients</div>
                    </div>
                    <div class="widget-content-right">
                        <div class="widget-numbers text-white"><span>{{$datas['total_user']}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card mb-3 widget-content bg-grow-early">
                <div class="widget-content-wrapper text-white">
                    <div class="widget-content-left">
                        <div class="widget-heading">Ajuan Diterima</div>
                        <div class="widget-subheading">Total Issue</div>
                    </div>
                    <div class="widget-content-right">
                        <div class="widget-numbers text-white"><span>{{$datas['issue_acc']}}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="d-xl-none d-lg-block col-md-6 col-xl-4">
            <div class="card mb-3 widget-content bg-premium-dark">
                <div class="widget-content-wrapper text-white">
                    <div class="widget-content-left">
                        <div class="widget-heading">Products Sold</div>
                        <div class="widget-subheading">Revenue streams</div>
                    </div>
                    <div class="widget-content-right">
                        <div class="widget-numbers text-warning"><span>$14M</span></div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    <!-- <div class="row">
        <div class="col-md-12 col-lg-6">
            <div class="mb-3 card">
                <div class="card-header-tab card-header-tab-animation card-header">
                    <div class="card-header-title"><i class="header-icon lnr-apartment icon-gradient bg-love-kiss"></i>
                        Sales
                        Report</div>
                    <ul class="nav" role="tablist">
                        <li class="nav-item"><a href="#tab-sales-last" class="active nav-link" data-bs-toggle="tab"
                                role="tab">Last</a></li>
                        <li class="nav-item"><a href="#tab-sales-current" class="nav-link" data-bs-toggle="tab"
                                role="tab">Current</a></li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="tab-sales-last" role="tabpanel">
                            <div class="card mb-3 widget-chart widget-chart2 text-start w-100">
                                <div class="widget-chat-wrapper-outer">
                                    <div class="widget-chart-wrapper widget-chart-wrapper-lg opacity-10 m-0">
                                        <div class="chart-container"><canvas id="chart-vert-bar"
                                                class="chart-container"></canvas></div>
                                    </div>
                                </div>
                            </div>
                            <h6 class="text-muted text-uppercase font-size-md opacity-5 fw-normal">Top
                                Authors</h6>
                            <div class="scroll-area-sm">
                                <div class="scrollbar-container">
                                    <ul class="rm-list-borders rm-list-borders-scroll list-group list-group-flush">
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/9.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Ella-Rose Henry
                                                        </div>
                                                        <div class="widget-subheading">Web Developer
                                                        </div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>129</span> <small class="text-danger ps-2"><i
                                                                    class="fa fa-angle-down"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/5.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Ruben Tillman</div>
                                                        <div class="widget-subheading">UI Designer</div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>54</span> <small class="text-success ps-2"><i
                                                                    class="fa fa-angle-up"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/4.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Vinnie Wagstaff
                                                        </div>
                                                        <div class="widget-subheading">Java Programmer
                                                        </div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>429</span> <small class="text-warning ps-2"><i
                                                                    class="fa fa-dot-circle"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/3.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Ella-Rose Henry
                                                        </div>
                                                        <div class="widget-subheading">Web Developer
                                                        </div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>129</span> <small class="text-danger ps-2"><i
                                                                    class="fa fa-angle-down"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/2.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Ruben Tillman</div>
                                                        <div class="widget-subheading">UI Designer</div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>54</span> <small class="text-success ps-2"><i
                                                                    class="fa fa-angle-up"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab-sales-current" role="tabpanel">
                            <div class="card mb-3 widget-chart widget-chart2 text-start w-100">
                                <div class="widget-chat-wrapper-outer">
                                    <div class="widget-chart-wrapper widget-chart-wrapper-lg opacity-10 m-0">
                                        <div class="chart-container"><canvas id="chart-horiz-bar"
                                                class="chart-container"></canvas></div>
                                    </div>
                                </div>
                            </div>
                            <h6 class="text-muted text-uppercase font-size-md opacity-5 fw-normal">Top
                                Categories</h6>
                            <div class="scroll-area-sm">
                                <div class="scrollbar-container">
                                    <ul class="rm-list-borders rm-list-borders-scroll list-group list-group-flush">
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/1.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Electronics</div>
                                                        <div class="widget-subheading">Tech Products
                                                        </div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>842</span> <small class="text-success ps-2"><i
                                                                    class="fa fa-angle-up"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/2.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Fashion</div>
                                                        <div class="widget-subheading">Clothing &
                                                            Accessories</div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>567</span> <small class="text-success ps-2"><i
                                                                    class="fa fa-angle-up"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/3.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Home & Garden</div>
                                                        <div class="widget-subheading">Interior Design
                                                        </div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>324</span> <small class="text-warning ps-2"><i
                                                                    class="fa fa-dot-circle"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/4.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Sports & Outdoors
                                                        </div>
                                                        <div class="widget-subheading">Fitness Equipment
                                                        </div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>289</span> <small class="text-danger ps-2"><i
                                                                    class="fa fa-angle-down"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3"><img width="42"
                                                            class="rounded-circle"
                                                            src="{{ asset('storage/template') }}/assets/images/avatars/5.jpg"
                                                            alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Books & Media</div>
                                                        <div class="widget-subheading">Digital Content
                                                        </div>
                                                    </div>
                                                    <div class="widget-content-right">
                                                        <div class="font-size-xlg text-muted"><small
                                                                class="opacity-5 pe-1">$</small>
                                                            <span>156</span> <small class="text-success ps-2"><i
                                                                    class="fa fa-angle-up"></i></small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-6">
            <div class="mb-3 card">
                <div class="card-header-tab card-header">
                    <div class="card-header-title"><i
                            class="header-icon lnr-rocket icon-gradient bg-tempting-azure"></i>
                        Bandwidth Reports</div>
                    <div class="btn-actions-pane-right">
                        <div class="nav" role="tablist"><a href="#tab-bandwidth-1"
                                class="border-0 btn-pill btn-wide btn-transition active btn btn-outline-alternate"
                                data-bs-toggle="tab" role="tab">Tab 1</a> <a href="#tab-bandwidth-2"
                                class="ms-1 btn-pill btn-wide border-0 btn-transition btn btn-outline-alternate"
                                data-bs-toggle="tab" role="tab">Tab 2</a></div>
                    </div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane fade active show" id="tab-bandwidth-1" role="tabpanel">
                        <div class="widget-chart p-3">
                            <div class="chart-container-lg"><canvas id="line-chart"></canvas></div>
                            <div class="widget-chart-content text-center mt-5">
                                <div class="widget-description mt-0 text-warning"><i class="fa fa-arrow-left"></i> <span
                                        class="ps-1">175.5%</span>
                                    <span class="text-muted opacity-8 ps-1">increased server
                                        resources</span>
                                </div>
                            </div>
                        </div>
                        <div class="pt-2 card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="widget-content">
                                        <div class="widget-content-outer">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left">
                                                    <div class="widget-numbers fsize-3 text-muted">63%
                                                    </div>
                                                </div>
                                                <div class="widget-content-right">
                                                    <div class="text-muted opacity-6">Generated Leads
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="widget-progress-wrapper mt-1">
                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                    <div class="progress-bar bg-danger" role="progressbar"
                                                        aria-valuenow="63" aria-valuemin="0" aria-valuemax="100"
                                                        style="width: 63%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="widget-content">
                                        <div class="widget-content-outer">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left">
                                                    <div class="widget-numbers fsize-3 text-muted">32%
                                                    </div>
                                                </div>
                                                <div class="widget-content-right">
                                                    <div class="text-muted opacity-6">Submitted Tickers
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="widget-progress-wrapper mt-1">
                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                    <div class="progress-bar bg-success" role="progressbar"
                                                        aria-valuenow="32" aria-valuemin="0" aria-valuemax="100"
                                                        style="width: 32%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="widget-content">
                                        <div class="widget-content-outer">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left">
                                                    <div class="widget-numbers fsize-3 text-muted">71%
                                                    </div>
                                                </div>
                                                <div class="widget-content-right">
                                                    <div class="text-muted opacity-6">Server Allocation
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="widget-progress-wrapper mt-1">
                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                    <div class="progress-bar bg-primary" role="progressbar"
                                                        aria-valuenow="71" aria-valuemin="0" aria-valuemax="100"
                                                        style="width: 71%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="widget-content">
                                        <div class="widget-content-outer">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left">
                                                    <div class="widget-numbers fsize-3 text-muted">41%
                                                    </div>
                                                </div>
                                                <div class="widget-content-right">
                                                    <div class="text-muted opacity-6">Generated Leads
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="widget-progress-wrapper mt-1">
                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                    <div class="progress-bar bg-warning" role="progressbar"
                                                        aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"
                                                        style="width: 41%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-bandwidth-2" role="tabpanel">
                        <div class="widget-chart p-3">
                            <div class="chart-container-lg"><canvas id="line-chart-2"></canvas></div>
                            <div class="widget-chart-content text-center mt-5">
                                <div class="widget-description mt-0 text-success"><i class="fa fa-arrow-up"></i> <span
                                        class="ps-1">12.4%</span>
                                    <span class="text-muted opacity-8 ps-1">improvement from last
                                        week</span>
                                </div>
                            </div>
                        </div>
                        <div class="pt-2 card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="widget-content">
                                        <div class="widget-content-outer">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left">
                                                    <div class="widget-numbers fsize-3 text-muted">89%
                                                    </div>
                                                </div>
                                                <div class="widget-content-right">
                                                    <div class="text-muted opacity-6">CPU Usage</div>
                                                </div>
                                            </div>
                                            <div class="widget-progress-wrapper mt-1">
                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                    <div class="progress-bar bg-info" role="progressbar"
                                                        aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"
                                                        style="width: 89%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="widget-content">
                                        <div class="widget-content-outer">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left">
                                                    <div class="widget-numbers fsize-3 text-muted">67%
                                                    </div>
                                                </div>
                                                <div class="widget-content-right">
                                                    <div class="text-muted opacity-6">Memory Usage</div>
                                                </div>
                                            </div>
                                            <div class="widget-progress-wrapper mt-1">
                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                    <div class="progress-bar bg-alternate" role="progressbar"
                                                        aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"
                                                        style="width: 67%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="widget-content">
                                        <div class="widget-content-outer">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left">
                                                    <div class="widget-numbers fsize-3 text-muted">54%
                                                    </div>
                                                </div>
                                                <div class="widget-content-right">
                                                    <div class="text-muted opacity-6">Disk I/O</div>
                                                </div>
                                            </div>
                                            <div class="widget-progress-wrapper mt-1">
                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                    <div class="progress-bar bg-success" role="progressbar"
                                                        aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"
                                                        style="width: 54%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="widget-content">
                                        <div class="widget-content-outer">
                                            <div class="widget-content-wrapper">
                                                <div class="widget-content-left">
                                                    <div class="widget-numbers fsize-3 text-muted">78%
                                                    </div>
                                                </div>
                                                <div class="widget-content-right">
                                                    <div class="text-muted opacity-6">Network Load</div>
                                                </div>
                                            </div>
                                            <div class="widget-progress-wrapper mt-1">
                                                <div class="progress-bar-sm progress-bar-animated-alt progress">
                                                    <div class="progress-bar bg-warning" role="progressbar"
                                                        aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"
                                                        style="width: 78%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-xl-4">
            <div class="card mb-3 widget-content">
                <div class="widget-content-outer">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left">
                            <div class="widget-heading">Total Orders</div>
                            <div class="widget-subheading">Last year expenses</div>
                        </div>
                        <div class="widget-content-right">
                            <div class="widget-numbers text-success">1896</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card mb-3 widget-content">
                <div class="widget-content-outer">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left">
                            <div class="widget-heading">Products Sold</div>
                            <div class="widget-subheading">Revenue streams</div>
                        </div>
                        <div class="widget-content-right">
                            <div class="widget-numbers text-warning">$3M</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xl-4">
            <div class="card mb-3 widget-content">
                <div class="widget-content-outer">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left">
                            <div class="widget-heading">Followers</div>
                            <div class="widget-subheading">People Interested</div>
                        </div>
                        <div class="widget-content-right">
                            <div class="widget-numbers text-danger">45,9%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-xl-none d-lg-block col-md-6 col-xl-4">
            <div class="card mb-3 widget-content">
                <div class="widget-content-outer">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left">
                            <div class="widget-heading">Income</div>
                            <div class="widget-subheading">Expected totals</div>
                        </div>
                        <div class="widget-content-right">
                            <div class="widget-numbers text-focus">$147</div>
                        </div>
                    </div>
                    <div class="widget-progress-wrapper">
                        <div class="progress-bar-sm progress-bar-animated-alt progress">
                            <div class="progress-bar bg-info" role="progressbar" aria-valuenow="54" aria-valuemin="0"
                                aria-valuemax="100" style="width: 54%;"></div>
                        </div>
                        <div class="progress-sub-label">
                            <div class="sub-label-left">Expenses</div>
                            <div class="sub-label-right">100%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="main-card mb-3 card">
                <div class="card-header">Active Users<div class="btn-actions-pane-right">
                        <div role="group" class="btn-group-sm btn-group"><button class="active btn btn-focus">Last
                                Week</button> <button class="btn btn-focus">All Month</button></div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="align-middle mb-0 table table-borderless table-striped table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">#</th>
                                <th>Name</th>
                                <th class="text-center">City</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center text-muted">#345</td>
                                <td>
                                    <div class="widget-content p-0">
                                        <div class="widget-content-wrapper">
                                            <div class="widget-content-left me-3">
                                                <div class="widget-content-left"><img width="40" class="rounded-circle"
                                                        src="{{ asset('storage/template') }}/assets/images/avatars/4.jpg"
                                                        alt=""></div>
                                            </div>
                                            <div class="widget-content-left flex2">
                                                <div class="widget-heading">John Doe</div>
                                                <div class="widget-subheading opacity-7">Web Developer
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">Madrid</td>
                                <td class="text-center">
                                    <div class="badge bg-warning">Pending</div>
                                </td>
                                <td class="text-center"><button type="button" id="PopoverCustomT-1"
                                        class="btn btn-primary btn-sm">Details</button></td>
                            </tr>
                            <tr>
                                <td class="text-center text-muted">#347</td>
                                <td>
                                    <div class="widget-content p-0">
                                        <div class="widget-content-wrapper">
                                            <div class="widget-content-left me-3">
                                                <div class="widget-content-left"><img width="40" class="rounded-circle"
                                                        src="{{ asset('storage/template') }}/assets/images/avatars/3.jpg"
                                                        alt=""></div>
                                            </div>
                                            <div class="widget-content-left flex2">
                                                <div class="widget-heading">Ruben Tillman</div>
                                                <div class="widget-subheading opacity-7">Etiam sit amet
                                                    orci eget</div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">Berlin</td>
                                <td class="text-center">
                                    <div class="badge bg-success">Completed</div>
                                </td>
                                <td class="text-center"><button type="button" id="PopoverCustomT-2"
                                        class="btn btn-primary btn-sm">Details</button></td>
                            </tr>
                            <tr>
                                <td class="text-center text-muted">#321</td>
                                <td>
                                    <div class="widget-content p-0">
                                        <div class="widget-content-wrapper">
                                            <div class="widget-content-left me-3">
                                                <div class="widget-content-left"><img width="40" class="rounded-circle"
                                                        src="{{ asset('storage/template') }}/assets/images/avatars/2.jpg"
                                                        alt=""></div>
                                            </div>
                                            <div class="widget-content-left flex2">
                                                <div class="widget-heading">Elliot Huber</div>
                                                <div class="widget-subheading opacity-7">Lorem ipsum
                                                    dolor sic</div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">London</td>
                                <td class="text-center">
                                    <div class="badge bg-danger">In Progress</div>
                                </td>
                                <td class="text-center"><button type="button" id="PopoverCustomT-3"
                                        class="btn btn-primary btn-sm">Details</button></td>
                            </tr>
                            <tr>
                                <td class="text-center text-muted">#55</td>
                                <td>
                                    <div class="widget-content p-0">
                                        <div class="widget-content-wrapper">
                                            <div class="widget-content-left me-3">
                                                <div class="widget-content-left"><img width="40" class="rounded-circle"
                                                        src="{{ asset('storage/template') }}/assets/images/avatars/1.jpg"
                                                        alt=""></div>
                                            </div>
                                            <div class="widget-content-left flex2">
                                                <div class="widget-heading">Vinnie Wagstaff</div>
                                                <div class="widget-subheading opacity-7">UI Designer
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">Amsterdam</td>
                                <td class="text-center">
                                    <div class="badge bg-info">On Hold</div>
                                </td>
                                <td class="text-center"><button type="button" id="PopoverCustomT-4"
                                        class="btn btn-primary btn-sm">Details</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="d-block text-center card-footer"><button
                        class="me-2 btn-icon btn-icon-only btn btn-outline-danger"><i
                            class="pe-7s-trash btn-icon-wrapper"></i></button> <button
                        class="btn-wide btn btn-success">Save</button></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="card-shadow-danger mb-3 widget-chart widget-chart2 text-start card">
                <div class="widget-content">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left pe-2 fsize-1">
                                <div class="widget-numbers mt-0 fsize-3 text-danger">71%</div>
                            </div>
                            <div class="widget-content-right w-100">
                                <div class="progress-bar-xs progress">
                                    <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="71"
                                        aria-valuemin="0" aria-valuemax="100" style="width: 71%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content-left fsize-1">
                            <div class="text-muted opacity-6">Income Target</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card-shadow-success mb-3 widget-chart widget-chart2 text-start card">
                <div class="widget-content">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left pe-2 fsize-1">
                                <div class="widget-numbers mt-0 fsize-3 text-success">54%</div>
                            </div>
                            <div class="widget-content-right w-100">
                                <div class="progress-bar-xs progress">
                                    <div class="progress-bar bg-success" role="progressbar" aria-valuenow="54"
                                        aria-valuemin="0" aria-valuemax="100" style="width: 54%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content-left fsize-1">
                            <div class="text-muted opacity-6">Expenses Target</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card-shadow-warning mb-3 widget-chart widget-chart2 text-start card">
                <div class="widget-content">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left pe-2 fsize-1">
                                <div class="widget-numbers mt-0 fsize-3 text-warning">32%</div>
                            </div>
                            <div class="widget-content-right w-100">
                                <div class="progress-bar-xs progress">
                                    <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="32"
                                        aria-valuemin="0" aria-valuemax="100" style="width: 32%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content-left fsize-1">
                            <div class="text-muted opacity-6">Spendings Target</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card-shadow-info mb-3 widget-chart widget-chart2 text-start card">
                <div class="widget-content">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left pe-2 fsize-1">
                                <div class="widget-numbers mt-0 fsize-3 text-info">89%</div>
                            </div>
                            <div class="widget-content-right w-100">
                                <div class="progress-bar-xs progress">
                                    <div class="progress-bar bg-info" role="progressbar" aria-valuenow="89"
                                        aria-valuemin="0" aria-valuemax="100" style="width: 89%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content-left fsize-1">
                            <div class="text-muted opacity-6">Totals Target</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
</div>
@endsection