@if(checkSettings('enforce-download-permission') != 'enable' || auth()->user()->can('online-customer-download'))
    <button id="downloadCsv" class=" btn btn-primary">
        Download CSV
    </button>
@endif
@if (checkAPI() || checkSettings('radiusClientOnlineCheckThroughApi') == 'enable')
    <h5>Total Online: {{ $count }}</h5>
    <div class="table-responsive">

        <table id="dataTable" class="table table-bordered table-striped">
            <thead class="custom-table-head">
                <tr>
                    <th scope="col"> User ID </th>
                    <th scope="col">Name</th>
                    <th scope="col"> Client IP </th>
                    <th scope="col"> NAS IP </th>
                    <th scope="col"> MAC Address </th>
                    <th scope="col"> Uptime </th>

                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @php
                    $clientCount = 0;

                    $viewLivetrafic = checkAPI();
                    $disconnectPermission = auth()->user()->can('onlineUserDisconnection');
                @endphp
                @foreach ($allMikrotikAndActiveUsers as $mikrotikAndActiveUsers)
                    @foreach ($mikrotikAndActiveUsers['activeUsers'] as $client)
                        <tr>
                            <td>
                                {{ $client['name'] }}
                            </td>
                            <td>{{ $client['client_name'] }}</td>
                            <td>
                                {{ $client['address'] }}
                            </td>

                            <td>
                                {{ $mikrotikAndActiveUsers['nasIp'] }}
                            </td>

                            <td>
                                {{ $client['caller-id'] }}
                            </td>


                            <td>
                                <span class="uptime-counter" data-uptime="{{ $client['uptime'] }}"></span>
                            </td>

                            <td class="px-6 text-center text-sm font-medium">
                                @if ($viewLivetrafic)
                                    <a href="{{ route('clients.show', $clients[$client['name']]) }}"
                                        class="noprint btn btn-primary btn-xs btn-block mb-1">View live Traffice</a>
                                @endif
                                @if ($disconnectPermission)
                                    <a href="{{ route('userDisconnect', $client['name']) }}"
                                        class="btn btn-danger">Disconnect</a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                @endforeach

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

        <div class="p-5">
            {{-- {{ $list->links() }} --}}
        </div>
    </div>
@else
    <h5>Total Online: {{ $list->count() }}</h5>
    {{-- @can('discount-online-all')
        @if ($list->count() > 0)
            <a onclick="return confirm('Are you sure you want disconnect ?');" href="{{ route('disconnectAll') }}"
                class="btn btn-danger float-right">Disconnect All</a>
        @endif
    @endcan --}}
    <div class="table-responsive">
        <table id="dataTable" class="table table-bordered">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col"> User ID </th>

                    <th scope="col">Name</th>
                    <th scope="col">Contact No</th>

                    <th scope="col"> Client IP </th>
                    <th scope="col"> NAS IP </th>
                    <th scope="col"> MAC Address </th>
                    <th scope="col"> Last Update </th>
                    <th scope="col"> Uptime </th>
                    <th>Date</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">


                @foreach ($list as $r)
                    <tr>
                        <td> {{ $r->username }} </td>

                        <td> {{ $r->clients_name ?? '' }} </td>
                        <td> {{ $r->clients_contact_no ?? '' }} </td>
                        <td> {{ $r->framedipaddress }} </td>
                        <td> {{ $r->nasipaddress }} </td>
                        <td> {{ $r->callingstationid }} </td>
                        <td> {{ $r->acctupdatetime }}</td>
                        <td> {{ \Carbon\Carbon::parse($r->acctstarttime)->diffForHumans() }} </td>
                        <td> {{ $r->acctstarttime }} </td>

                        <td class="px-6 text-center text-sm font-medium">
                            @if (checkSettings('show-traffice') == 'enable')
                                <a href="{{ route('clients-with-userName', $r->username) }}"
                                    class="noprint btn btn-primary btn-xs btn-block  mb-1">View live Traffice</a>
                            @endif
                            @can('onlineUserDisconnection')
                                <a href="{{ route('onlineUserDisconnect') }}?id={{ $r->username }}"
                                    class="btn btn-danger">Disconnect</a>
                            @endcan


                        </td>
                    </tr>
                @endforeach


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

        <div class="p-5">
            @can('discount-online-all')
                @if ($list->count() > 0)
                    <a onclick="return confirm('Are you sure you want disconnect ?');" href="{{ route('disconnectAll') }}"
                        class="btn btn-danger float-right">Disconnect All</a>
                @endif
            @endcan
            {{-- {{ $list->links() }} --}}
        </div>
    </div>
@endif

<script>
    (function() {
        if (window._uptimeCounterInterval) {
            clearInterval(window._uptimeCounterInterval);
        }

        function parseUptimeToSeconds(uptime) {
            if (!uptime) return 0;
            var total = 0;
            var multipliers = {
                w: 604800,
                d: 86400,
                h: 3600,
                m: 60,
                s: 1
            };
            var re = /(\d+)([wdhms])/g;
            var m;
            while ((m = re.exec(uptime)) !== null) {
                total += parseInt(m[1], 10) * (multipliers[m[2]] || 0);
            }
            return total;
        }

        function pad(n) {
            n = String(n);
            return n.length < 2 ? '0' + n : n;
        }

        function formatSeconds(s) {
            var h = Math.floor(s / 3600);
            var m = Math.floor((s % 3600) / 60);
            var sec = s % 60;
            return pad(h) + ':' + pad(m) + ':' + pad(sec);
        }

        var counters = [];
        document.querySelectorAll('.uptime-counter').forEach(function(el) {
            var seconds = parseUptimeToSeconds(el.getAttribute('data-uptime'));
            counters.push({
                el: el,
                seconds: seconds
            });
            el.textContent = formatSeconds(seconds);
        });

        if (counters.length) {
            window._uptimeCounterInterval = setInterval(function() {
                counters.forEach(function(c) {
                    c.seconds += 1;
                    c.el.textContent = formatSeconds(c.seconds);
                });
            }, 1000);
        }
    })();
</script>