<div class="row">
    {if in_array($_admin['user_type'],['SuperAdmin','Admin', 'Report'])}
        <div class="col-sm-6 col-xl-3 d-flex">
            <div class="card overflow-hidden z-1 flex-fill">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between border-bottom mb-2 pb-2">
                        <div>
                            <p class="mb-1">{Lang::T('Income Today')}</p>
                            <h6 class="fs-16 fw-semibold"><sup>{$_c['currency_code']}</sup>
                                <span class="privacy-sensitive" data-type="financial">{number_format($iday,0,$_c['dec_point'],$_c['thousands_sep'])}</span>
                            </h6>
                        </div>
                        <span class="avatar avatar-lg bg-primary text-white avatar-rounded">
                            <i class="isax isax-wallet-1 fs-24"></i>
                        </span>
                    </div>
<p class="fs-13">
    <span class="{$income_change_class} d-inline-flex align-items-center">
        <i class="isax {$income_change_icon} me-1"></i>
        {$income_change_sign}{$income_change_percent}%
    </span> 
    from last month
</p>
                </div>
                <div class="position-absolute end-0 bottom-0 z-n1">
                    <img src="{$app_url}/ui/ui/assets/img/bg/card-bg-04.svg" alt="img">
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-3 d-flex">
            <div class="card overflow-hidden z-1 flex-fill">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between border-bottom mb-2 pb-2">
                        <div>
                            <p class="mb-1">{Lang::T('Income This Month')}</p>
                            <h6 class="fs-16 fw-semibold"><sup>{$_c['currency_code']}</sup>
                                <span class="privacy-sensitive" data-type="financial">{number_format($imonth,0,$_c['dec_point'],$_c['thousands_sep'])}</span>
                            </h6>
                        </div>
                        <span class="avatar avatar-lg bg-warning text-white avatar-rounded">
                            <i class="ion isax isax-wallet-1 fs-24"></i>
                        </span>
                    </div>
                    <p class="fs-13"><a href="{Text::url('reports/by-period')}" class="text-decoration-none">{Lang::T('View Report')}</a></p>
                </div>
                <div class="position-absolute end-0 bottom-0 z-n1">
                    <img src="{$app_url}/ui/ui/assets/img/bg/card-bg-02.svg" alt="img">
                </div>
            </div>
        </div>
    {/if}

    <div class="col-sm-6 col-xl-3 d-flex">
        <div class="card overflow-hidden z-1 flex-fill">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between border-bottom mb-2 pb-2">
                    <div>
                        <p class="mb-1">{Lang::T('Active/Expired')}</p>
                        <h6 class="fs-16 fw-semibold">
                            <span class="privacy-sensitive" data-type="customers">{$u_act}</span>/<span class="privacy-sensitive" data-type="customers">{$u_all-$u_act}</span>
                        </h6>
                    </div>
                    <span class="avatar avatar-lg bg-success text-white avatar-rounded">
                        <i class="isax isax-profile-add fs-24"></i>
                    </span>
                </div>
                <p class="fs-13"><a href="{Text::url('plan/list')}" class="text-decoration-none">{Lang::T('View Plans')}</a></p>
            </div>
            <div class="position-absolute end-0 bottom-0 z-n1">
                <img src="{$app_url}/ui/ui/assets/img/bg/card-bg-03.svg" alt="img">
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3 d-flex">
        <div class="card overflow-hidden z-1 flex-fill">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between border-bottom mb-2 pb-2">
                    <div>
                        <p class="mb-1">{Lang::T('Customers')}</p>
                        <h6 class="fs-16 fw-semibold"><span class="privacy-sensitive" data-type="customers">{$c_all}</span></h6>
                    </div>
                    <span class="avatar avatar-lg bg-info text-white avatar-rounded">
                        <i class="isax isax-people fs-24"></i>
                    </span>
                </div>
                <p class="fs-13"><a href="{Text::url('customers/list')}" class="text-decoration-none">{Lang::T('View Customers')}</a></p>
            </div>
            <div class="position-absolute end-0 bottom-0 z-n1">
                <img src="{$app_url}/ui/ui/assets/img/bg/card-bg-01.svg" alt="img">
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6 col-xl-3 d-flex">
        <div class="card overflow-hidden z-1 flex-fill">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between border-bottom mb-2 pb-2">
                    <div>
                        <p class="mb-1">{Lang::T('Hotspot Online Users')}</p>
                        <h6 class="fs-16 fw-semibold"><span class="privacy-sensitive" data-type="customers">{$hotspot_online}</span></h6>
                    </div>
                    <span class="avatar avatar-lg bg-danger text-white avatar-rounded">
                        <i class="isax isax-wifi fs-24"></i>
                    </span>
                </div>
                <p class="fs-13"><span class="text-danger d-inline-flex align-items-center"><i class="isax isax-flash-circle me-1"></i>Live Status</span> - Active Hotspot</p>
            </div>
            <div class="position-absolute end-0 bottom-0 z-n1">
                <img src="{$app_url}/ui/ui/assets/img/bg/card-bg-04.svg" alt="img">
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3 d-flex">
        <div class="card overflow-hidden z-1 flex-fill">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between border-bottom mb-2 pb-2">
                    <div>
                        <p class="mb-1">{Lang::T('PPPoE Online Users')}</p>
                        <h6 class="fs-16 fw-semibold"><span class="privacy-sensitive" data-type="customers">{$pppoe_online}</span></h6>
                    </div>
                    <span class="avatar avatar-lg bg-secondary text-white avatar-rounded">
                        <i class="isax isax-user fs-24"></i>
                    </span>
                </div>
                <p class="fs-13"><span class="text-secondary d-inline-flex align-items-center"><i class="isax isax-flash-circle me-1"></i>Live Status</span> - Active PPPoE</p>
            </div>
            <div class="position-absolute end-0 bottom-0 z-n1">
                <img src="{$app_url}/ui/ui/assets/img/bg/card-bg-02.svg" alt="img">
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3 d-flex">
        <div class="card overflow-hidden z-1 flex-fill">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between border-bottom mb-2 pb-2">
                    <div>
                        <p class="mb-1">{Lang::T('Static Online Users')}</p>
                        <h6 class="fs-16 fw-semibold"><span class="privacy-sensitive" data-type="customers">{$static_online}</span></h6>
                    </div>
                    <span class="avatar avatar-lg bg-warning text-white avatar-rounded">
                        <i class="isax isax-link fs-24"></i>
                    </span>
                </div>
                <p class="fs-13"><span class="text-warning d-inline-flex align-items-center"><i class="isax isax-flash-circle me-1"></i>Live Status</span> - Static IPs</p>
            </div>
            <div class="position-absolute end-0 bottom-0 z-n1">
                <img src="{$app_url}/ui/ui/assets/img/bg/card-bg-03.svg" alt="img">
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-xl-3 d-flex">
        <div class="card overflow-hidden z-1 flex-fill">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between border-bottom mb-2 pb-2">
                    <div>
                        <p class="mb-1">{Lang::T('Total Online Users')}</p>
                        <h6 class="fs-16 fw-semibold"><span class="privacy-sensitive" data-type="customers">{$total_online}</span></h6>
                    </div>
                    <span class="avatar avatar-lg bg-success text-white avatar-rounded">
                        <i class="isax isax-user-search fs-24"></i>
                    </span>
                </div>
                <p class="fs-13"><span class="text-success d-inline-flex align-items-center"><i class="isax isax-flash-circle me-1"></i>Live Status</span> - All Connections</p>
            </div>
            <div class="position-absolute end-0 bottom-0 z-n1">
                <img src="{$app_url}/ui/ui/assets/img/bg/card-bg-01.svg" alt="img">
            </div>
        </div>
    </div>
</div>

<!-- Expected Pay Card - MOVED TO LEFT and integrated with breadcrumb -->
<div class="row mb-3">
    <div class="col-md-6">
        <div class="d-flex">
            <div class="flex-shrink-0" style="width: 200px;">
                <a href="{$_url}customers/list" class="text-decoration-none">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body p-2 d-flex align-items-center gap-3">
                            <span class="text-purple fs-4 fw-bold" style="min-width: 45px;">KSH</span>
                            <div class="d-flex flex-column">
                                <div class="d-flex align-items-baseline gap-1">
                                    <span class="fs-3 fw-bold privacy-sensitive" data-type="financial">{$expected_pay}</span>
                                </div>
                                <small class="text-muted">{Lang::T('Expected Pay')}</small>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

</div>