@foreach ($list as $r)
    <div class="row mb-2">
        <div class="mr-2 mt-1 mb-1">
            @if (checkSettings('show-traffice') == 'enable' && $r->client_approval != 'pending')
                <a class="btn btn-primary speedshow" id="speedshow">Show Speed</a>
            @endif
        </div>
    </div>


    <div class="card">
        <div class="card-body">
            @if (checkSettings('show-traffice') == 'enable' && $r->client_approval != 'pending')
                <input type="hidden" id="user_Id" name="user_id" value="{{ $r->id }}">
                <input type="hidden" id="admin_user_Id" name="admin_user_Id" value="{{ $user_id }}">
                <div class='row'>
                    <div class="col-md-6 mb-3 mb-md-0" id="addcsnvaus">
                        <div class="bg-white rounded-lg p-3" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                            <canvas id="myChart" style="max-height: 1000px;"></canvas>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                                style="width: 38px; height: 38px; margin-right: 10px;">
                                <i class="fas fa-network-wired" style="font-size: 1rem;"></i>
                            </div>
                            <h5 class="font-weight-bold mb-0" style="color: #2c3e50; font-size: 1.2rem;">Session
                                Details</h5>
                        </div>

                        <div class="session-info-container">
                            <div class="info-item mb-2 bg-light rounded"
                                style="border-left: 3px solid #3498db; transition: all 0.3s ease; padding: 0.75rem;">
                                <div class="d-flex align-items-center mb-1">
                                    <i class="fas fa-clock text-primary mr-2" style="font-size: 0.9rem;"></i>
                                    <span class="text-muted small font-weight-bold text-uppercase"
                                        style="font-size: 0.72rem; letter-spacing: 0.3px;">Last Link Up Time</span>
                                </div>
                                <div class="mt-1">
                                    <span class="text-dark font-weight-semibold" style="font-size: 0.95rem;">
                                        {{ $bandwidthUsage ? parseDate($bandwidthUsage['last-link-up-time']) : '-1' }}
                                    </span>
                                </div>
                            </div>

                            <div class="info-item mb-2 bg-light rounded"
                                style="border-left: 3px solid #e74c3c; transition: all 0.3s ease; padding: 0.75rem;">
                                <div class="d-flex align-items-center mb-1">
                                    <i class="fas fa-sign-out-alt text-danger mr-2" style="font-size: 0.9rem;"></i>
                                    <span class="text-muted small font-weight-bold text-uppercase"
                                        style="font-size: 0.72rem; letter-spacing: 0.3px;">Last Logout Time</span>
                                </div>
                                <div class="mt-1">
                                    <span class="text-dark font-weight-semibold" style="font-size: 0.95rem;">
                                        {{ $lastLogoutTime ? parseDate($lastLogoutTime) : '-1' }}
                                    </span>
                                </div>
                            </div>

                            <div class="info-item mb-2 bg-light rounded"
                                style="border-left: 3px solid #9b59b6; transition: all 0.3s ease; padding: 0.75rem;">
                                <div class="d-flex align-items-center mb-1">
                                    <i class="fas fa-fingerprint mr-2" style="color: #9b59b6; font-size: 0.9rem;"></i>
                                    <span class="text-muted small font-weight-bold text-uppercase"
                                        style="font-size: 0.72rem; letter-spacing: 0.3px;">Client Mac Address</span>
                                </div>
                                <div class="mt-1">
                                    <span class="text-dark font-weight-semibold font-monospace"
                                        style="font-size: 0.95rem;">
                                        {{ isset($activeClientInfo) && $activeClientInfo ? $activeClientInfo['caller-id'] : '-1' }}
                                    </span>
                                </div>
                            </div>

                            <div class="info-item mb-2 bg-light rounded"
                                style="border-left: 3px solid #27ae60; transition: all 0.3s ease; padding: 0.75rem;">
                                <div class="d-flex align-items-center mb-1">
                                    <i class="fas fa-industry text-success mr-2" style="font-size: 0.9rem;"></i>
                                    <span class="text-muted small font-weight-bold text-uppercase"
                                        style="font-size: 0.72rem; letter-spacing: 0.3px;">Vendor Name</span>
                                </div>
                                <div class="mt-1">
                                    <span class="text-dark font-weight-semibold" style="font-size: 0.95rem;">
                                        {{ $vendorName ?? '-1' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3 mb-2">
                            <div class="col-6 pr-2">
                                <div class="stat-card p-3 rounded text-center"
                                    style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);">
                                    <div class="d-flex align-items-center justify-content-center mb-2">
                                        <i class="fas fa-download text-white mr-2" style="font-size: 0.9rem;"></i>
                                        <span class="text-white-50 small font-weight-bold text-uppercase"
                                            style="font-size: 0.7rem;">Download</span>
                                    </div>
                                    <div class="text-white" style="font-size: 1.4rem; font-weight: 700;">
                                        {{ number_format(($bandwidthUsage ? $bandwidthUsage['tx-byte'] : 0) / 1073741824, 2, '.', '') }}
                                        <span class="text-white-50"
                                            style="font-size: 0.85rem; font-weight: 500;">GB</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 pl-2">
                                <div class="stat-card p-3 rounded text-center"
                                    style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);">
                                    <div class="d-flex align-items-center justify-content-center mb-2">
                                        <i class="fas fa-upload text-white mr-2" style="font-size: 0.9rem;"></i>
                                        <span class="text-white-50 small font-weight-bold text-uppercase"
                                            style="font-size: 0.7rem;">Upload</span>
                                    </div>
                                    <div class="text-white" style="font-size: 1.4rem; font-weight: 700;">
                                        {{ number_format(($bandwidthUsage ? $bandwidthUsage['rx-byte'] : 0) / 1073741824, 2, '.', '') }}
                                        <span class="text-white-50"
                                            style="font-size: 0.85rem; font-weight: 500;">GB</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="bg-white rounded-lg p-3 mt-3" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                            <canvas id="pieChart" style="max-height: 200px;"></canvas>
                        </div> --}}
                    </div>
                </div>
            @endif
        </div>
    </div>
@endforeach