@include('layout.dashboard_chart')

<div class="dashboard-charts">
    <div class="row">
        @can('dashboard-counter')
            <div class="col-md-4 mb-3 @if (checkSettings('show-dshboard-graph') == 'disable') d-none @endif">
                <div class="chart-card">
                    <div class="chart-card-header">
                        <h3 class="chart-title">Customer Status</h3>
                    </div>
                    <div class="chart-card-body">
                        <div id="customer_info" class="chart-container"></div>
                    </div>
                </div>
            </div>
        @endcan

        @can('dashboard-billing-info')
            <div class="col-md-4 mb-3 text-center @if (checkSettings('show-dshboard-graph') == 'disable') d-none @endif">
                <div class="chart-card">
                    <div class="chart-card-header">
                        <h3 class="chart-title">Billing Snapshot</h3>
                    </div>
                    <div class="chart-card-body">
                        <div id="accounts_info" class="chart-container"></div>
                    </div>
                </div>
            </div>
        @endcan

        @if (checkSettings('show-dashboard-customer-summary') == 'enable')
            @can('dashboard-customer-summery')
                <div class="col-md-4 mb-3 text-center @if (checkSettings('show-dshboard-graph') == 'disable') d-none @endif">
                    <div class="chart-card">
                        <div class="chart-card-header">
                            <h3 class="chart-title">Client Growth</h3>
                        </div>
                        <div class="chart-card-body">
                            <div id="client_summery" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            @endcan
        @endif
    </div>

    <div class="row mt-2">
        <div class="col-sm-12 col-md-6 d-flex align-items-stretch">
            <a href="{{ route('onlineCustomer') }}" class="online-user-box w-100 mr-md-2">
                <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 mb-0">Online Users</p>
                    </div>
                    <div class="detail-icon">
                        <i class="fa-solid fa-users-line"></i>
                    </div>
                </div>
            </a>
        </div>

        @can('pop_allows')
            <div class="col-sm-12 col-md-6 d-flex align-items-stretch mt-2 mt-md-0">
                <a href="{{ route('pop.exception') }}" class="online-user-box w-100 pop-allowed-box">
                    <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 mb-0">{{ $popException }}</p>
                            <p class="text-white mb-0">Pops allowed</p>
                        </div>
                        <div class="detail-icon">
                            <i class="fa-solid fa-users-line"></i>
                        </div>
                    </div>
                </a>
            </div>
        @endcan
    </div>
</div>