@extends('administrative.layouts.master')

@section('title', 'Application Traffic Count')

@section('content')
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('administrative.dashboard') }}">Dashboard</a></li>
            @php
                $link = url('/');
            @endphp

            @foreach (request()->segments() as $segment)
                @php
                    $link .= '/' . request()->segment($loop->iteration);
                @endphp
                @if (rtrim(request()->route()->getPrefix(), '/') != $segment && !preg_match('/[0-9]/', $segment))
                    @if ($loop->last)
                        <li class="breadcrumb-item {{ $loop->last ? 'active' : '' }}"
                            {{ $loop->last ? 'aria-current="page"' : '' }}>
                            @if ($loop->last)
                                {{-- {{ $segment}} --}}{{ 'Application Traffic' }}
                            @else
                                <a href="{{ $link }}">{{ 'Application Traffic' }}</a>
                            @endif
                        </li>
                    @endif
                @endif
            @endforeach

        </ol>
    </nav>
    <div class="row mb-4">
        <div class="col-12 col-md-8 mb-4">
            <div>
                <canvas id="myChart"></canvas>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-12">
                    <div class="card text-white bg-primary mb-3">
                        <div class="card-body">
                            <h5 class="card-title">Web Users</h5>
                            <p class="card-text" id="webUsersCount">{{ $webUsersCount }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card text-white bg-success mb-3">
                        <div class="card-body">
                            <h5 class="card-title">App Users</h5>
                            <p class="card-text" id="appUsersCount">{{ $appUsersCount }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Application Traffic</h6>

                    <div class="table-responsive">
                        <table id="usersTable" class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Customer Name</th>
                                    <th>Email</th>
                                    <th>Role</th>
                                    <th>Last Seen</th>
                                    <th>User Type</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($allUsers as $index => $user)
                                    <tr>
                                        <td>{{ $index + 1 }}</td> <!-- Serial Number -->
                                        <td>{{ $user->customer_name ? $user->customer_name : $user->username }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->role_name }}</td>
                                        <td>{{ $user->last_used_at }}</td>
                                        <td>{{ $user->user_type }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


        <script>
            $(document).ready(function() {
                const table = $('#usersTable').DataTable({
                    responsive: true,
                    "order": [[4, "desc"]],
                    "paging": false,
                    "info": false
                });

                const canvas = document.getElementById('myChart');
                canvas.height = 75;

                const labels = [];

                const data = {
                    labels: labels,
                    datasets: [{
                        label: 'CPU Load',
                        backgroundColor: 'rgb(46, 49, 146)',
                        borderColor: 'rgb(46, 49, 146)',
                        data: [],
                    }]
                };

                const config = {
                    type: 'line',
                    data: data,
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return value + '%';
                                    }
                                }
                            }
                        },
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        return context.parsed.y + '%';
                                    }
                                }
                            }
                        }
                    }
                };

                const myChart = new Chart(canvas, config);

                function updateData() {
                    $.ajax({
                        url: '{{ route('administrative.application-traffic.update') }}',
                        method: 'get',
                        success: (response) => {
                            // Update chart
                            addData(myChart, response.time, response.cpu);

                            // Update table
                            table.clear();
                            if (Array.isArray(response.allUsers)) {
                                response.allUsers.forEach((user, index) => {
                                    table.row.add([
                                        index + 1,
                                        user.customer_name ? user.customer_name : user.username,
                                        user.email,
                                        user.role_name,
                                        user.last_used_at,
                                        user.user_type
                                    ]);
                                });
                            } else {
                                console.error('response.allUsers is not an array:', response.allUsers);
                            }
                            table.draw();

                            // Update user counts
                            $('#webUsersCount').text(response.webUsersCount);
                            $('#appUsersCount').text(response.appUsersCount);
                        },
                        error: (xhr, status, error) => {
                            console.error("AJAX request failed:", status, error);
                        }
                    });
                }

                function addData(chart, label, data) {
                    chart.data.labels.push(label);
                    chart.data.datasets.forEach((dataset) => {
                        dataset.data.push(parseFloat(data));
                    });

                    if (chart.data.labels.length > 100) {
                        removeOldestData(chart);
                    }

                    chart.update();
                }

                function removeOldestData(chart) {
                    chart.data.labels.shift();
                    chart.data.datasets.forEach((dataset) => {
                        dataset.data.shift();
                    });
                }

                // Initial load
                updateData();

                // Refresh every 5 seconds
                setInterval(updateData, 10000);
            });
        </script>

    @endsection