@hasrole('Reseller|Reseller Admin')
        <div class="row">
            <div class="col-sm-12">
                <div class="card p-2">

                    <h2 class="text-center">Customer Information</h2>

                    <div class="row">
                        <p style="margin-inline: 10px;">All Customer {{ $allClient ?? 0 }}</p>
                        <div class="col-sm-5" id="r_customer_info" style="width: 600px; height: 368px;"></div>

                        <div class="col-sm-5" style="width: 800px; height: 300px; margin-top:52px;">

                            <div class="row">
                                <div class="col-sm-2" style="max-width: 130%;"><a class="btn1 btn-app bg-info"
                                        href="{{ route('clients.index') }}"><span class="badge bg-purple"
                                            id="counter">{{ $allClient ?? 0 }}</span><i
                                            class="fa fa-users"></i> Clients</a></div>
                                <div class="col-sm-2" style="max-width: 130%;"><a class="btn1 btn-app bg-success"
                                        href="{{ route('activeCustomer') }}"><span class="badge bg-danger"
                                            id="counter">{{ $clientCount->where('clients_status', 'active')->first()->total ?? 0 }}</span><i
                                            class="fa fa-check"></i> Active Clients</a></div>
                            </div>
                            <div class="row">
                                <div class="col-sm-2" style="max-width: 130%;"><a class="btn1 btn-app bg-secondary"
                                        href="{{ route('deactivatedClients') }}"><span class="badge bg-success"
                                            id="counter">{{ $clientCount->where('clients_status', 'deactive')->first()->total ?? 0 }}</span><i
                                            class="fa fa-exclamation"></i> Deactive Clients</a></div>


                                <div class="col-sm-2" style="max-width: 130%;"><a class="btn1 btn-app bg-primary"
                                        href="{{ route('newJoin') }}"><span class="badge bg-secondary"
                                            id="counter">{{ $newClients ?? 0 }}</span><i
                                            class="fa fa-user"></i> New Clients</a></div>
                            </div>
                            <div class="row">
                                <div class="col-sm-2" style="max-width: 130%;"><a class="btn1 btn-app bg-purple"
                                        href="{{ route('expiredClients') }}"><span class="badge bg-warning"
                                            id="counter">{{ $clientCount->where('clients_status', 'expired')->first()->total ?? 0 }}</span><i
                                            class="fa fa-times"></i> Expire Clients</a></div>

                                <div class="col-sm-2" style="max-width: 130%;"><a class="btn1 btn-app bg-danger"
                                        href="{{ route('pendingCustomer') }}"><span class="badge bg-primary"
                                            id="counter">{{ $clientCount->where('client_approval', 'pending')->first()->total ?? 0 }}</span><i class="fa fa-pause-circle"></i>
                                        Pending Clients</a></div>
                            </div>


                        </div>





                    </div>


                </div>

                {{-- <div class="row">
                    <div id="customers_info1" style="width: 900px; height: 400px;"></div>
                </div> --}}
            </div>

        </div>



        <div class="col-sm-12">

            <div class="card p-2">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="bg-gray-50">
                            <tr>
                                <p>Balance sheet</p>

                                <th scope="col">
                                    Name
                                </th>
                                <th scope="col">
                                    Balance
                                </th>

                                <th style="text-align: center">
                                    POP
                                </th>





                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">


                            @foreach ($resellerDashboard as $r)
                                <tr>

                                    <td class="whitespace-nowrap">
                                        {{ $r->name }}
                                    </td>
                                    <td
                                        class="
                                                whitespace-nowrap">
                                        {{ $r->balance[0]['amount'] ?? 0 }}
                                    </td>

                                    <td class="whitespace-nowrap" style="padding: 0px; margin-top: 0px;">
                                        <table class="table" style="padding: 0; margin:0px;">



                                            @foreach ($r->pops as $pop)
                                                @if ($pop->reseller_id == $r->id)
                                                    <tr>
                                                        <td style="width: 50%">
                                                            {{ $pop->popname }}
                                                        </td>
                                                        <td style="width: 50%">

                                                            @if (!empty($pop->balance->first()))
                                                                {{ $pop->balance->first()->amount }}
                                                            @else
                                                                0
                                                            @endif


                                                        </td>


                                                    </tr>
                                                @endif
                                            @endforeach


                                        </table>



                                    </td>




                                </tr>
                            @endforeach



                            <!-- More items... -->
                        </tbody>
                    </table>
                </div>
            </div>


        </div>

        </div>
    @endhasrole