@include('layout.dashboard_chart')
<div class="col shadow-sm  rounded">
    <div class="p-2">
        <h2 class="text-center">Customer Information</h2>
        <div class="row ">

            @can('dashboard-counter')
                <div class="col-sm-12 col-md-4  @if (checkSettings('show-dshboard-graph') == 'disable') d-none @endif ">
                    <div id="customer_info"></div>
                </div>
            @endcan

            @can('dashboard-billing-info')
                <div class="col-sm-12 col-md-3 text-center   @if (checkSettings('show-dshboard-graph') == 'disable') d-none @endif  ">
                    <div id="accounts_info"></div>
                </div>
            @endcan

            @if (checkSettings('show-dashboard-customer-summary') == 'enable')
            
                @can('dashboard-customer-summery')
                    <div class="col-sm-12 col-md-5 text-center   @if (checkSettings('show-dshboard-graph') == 'disable') d-none @endif  ">
                        <div id="client_summery"></div>
                    </div>
                @endcan
            @endif


            <div class="c0l-sm-12 col-md-1"></div>

            <div class="col-sm-12 col-md-3  d-flex flex-column justify-content-center align-items-center"
                style="align-self: flex-center;">
                <a href="{{ route('onlineCustomer') }}" class="online-user-box w-100">
                    <div class=" d-flex detail-card justify-content-between align-items-center value-container"
                        style="padding: 13px;">
                        <div class="d-flex flex-column justify-content-center">
                            <p class=" text-white h4" id="onlineUser">Loading ....</p>
                            <p class=" text-white  ">
                                Online Users</p>
                        </div>
                        <div class="detail-icon">
                            <i class="fa-solid fa-users-line"></i>
                        </div>
                    </div>
                </a>
            </div>

        </div>
    </div>

</div>


<style>
    .online-user-box {
        background: linear-gradient(to right, rgb(34, 197, 94), rgb(21, 128, 61));
        /*linear-gradient(to right, #990099, #3366CC, #FF9900);*/

        border-radius: 0.375rem;
        display: block;
    }

    .online-user-box i {
        color: #fff;
        font-size: 32px;
        transition: font-size 0.3s ease;
    }

    .online-user-box:hover i {
        font-size: 36px;
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: 250ms;
    }
</style>