@extends('backend.layouts.app')
@section('main')
@section('title', 'User Online')

<div class="row">
    <div class="col-lg-12">
        <div class="card card-header-actions h-100">
            <div class="card-header">
                <div class="h5 col-auto">USER HOTSPOT ONLINE</div>
            </div>
            <div class="card-body table-responsive">
                <table id="myTable" class="table table-hover display nowrap" width="100%">
                    <thead>
                        <tr>
                            <th style="text-align:left!important">NO</th>
                            <th>SESSION</th>
                            <th>USERNAME</th>
                            <th>IP</th>
                            <th>MAC</th>
                            <th>UPLOAD</th>
                            <th>DOWNLOAD</th>
                            <th>UPTIME</th>
                            <th>LAST LOGIN</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection
@push('scripts')
    <script type="text/javascript">
        let table = $('#myTable').DataTable({
            processing: true,
            serverSide: true,
            // scrollX: true,
            order : [[8,'desc']],
            ajax: '{{ url()->current() }}',
            columns: [{
                    data: null,
                    'sortable': false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'session_id',
                    name: 'session_id',
                    render: function(data) {
                        return '<span class="badge bg-success">' + data + '</span>'
                    },
                },
                {
                    data: 'username',
                    name: 'username'
                },
                {
                    data: 'ip',
                    name: 'ip'
                },
                {
                    data: 'mac',
                    name: 'mac',
                    render: function(data) {
                        return '<span class="badge bg-primary">' + data + '</span>'
                    },
                },
                {
                    data: 'input',
                    render: function bytesToSize(data) {
                        var sizes = ['Bytes', 'KB', 'MB', 'GB',
                            'TB'
                        ];
                        if (data == 0) return 'n/a';
                        var i = parseInt(Math.floor(Math.log(
                            data) / Math.log(1024)));
                        if (i == 0) return data + ' ' + sizes[i];
                        return (data / Math.pow(1024, i)).toFixed(
                            1) + ' ' + sizes[i];
                    }
                },
                {
                    data: 'output',
                    render: function bytesToSize(data) {
                        var sizes = ['Bytes', 'KB', 'MB', 'GB',
                            'TB'
                        ];
                        if (data == 0) return 'n/a';
                        var i = parseInt(Math.floor(Math.log(
                            data) / Math.log(1024)));
                        if (i == 0) return data + ' ' + sizes[i];
                        return (data / Math.pow(1024, i)).toFixed(
                            1) + ' ' + sizes[i];
                    }
                },
                {
                    data: 'uptime',
                    render: function convertSecondsToReadableString(
                        seconds) {
                        seconds = seconds || 0;
                        seconds = Number(seconds);
                        seconds = Math.abs(seconds);

                        const d = Math.floor(seconds / (3600 * 24));
                        const h = Math.floor(seconds % (3600 * 24) /
                            3600);
                        const m = Math.floor(seconds % 3600 / 60);
                        const s = Math.floor(seconds % 60);
                        const parts = [];

                        if (d > 0) {
                            parts.push(d + 'd');
                        }

                        if (h > 0) {
                            parts.push(h + 'h');
                        }

                        if (m > 0) {
                            parts.push(m + 'm');
                        }

                        // if (s > 0) {
                        //     parts.push(s + ' second' + (s > 1 ? 's' :
                        //         ''));
                        // }

                        return parts.join(' ');
                    }
                },
                {
                    data: 'start',
                    name: 'start'
                },
            ]
        });

    </script>
@endpush