@include('includes.header')
<meta name="viewport" content="width=device-width, initial-scale=.0">
<div class="container-fluid mt-3">
    <div class="row">
        <div class="col-md-8 col-sm-6 col-xs-12">
            <ul class="pull-right d-inline-flex" style="list-style: none;">
                <li class="btn-sm">
                    <a href="{{route('all-account')}}" class="btn btn-primary rounded-pill" style="width: 110px; text-align: center;">All Account</a>
                </li>
                <li class="btn-sm">
                    <a href="{{route('pending')}}" class="btn btn-warning rounded-pill" style="width: 110px; text-align: center; color: white;">Pending</a>
                </li>
                <li class="btn-sm">
                    <a href="{{route('all-history')}}" class="btn btn-success rounded-pill" style="width: 110px; text-align: center;">All History</a>
                </li>
            </ul><br>
            <b style="color: #009688;">Online User</b>
        </div>
    </div>
    <hr/>
    <!-- Request Statistic Starts -->
    <section>
        <table class="table table-striped account-table" id="online-users-table">
            <tr>
                <th>Username</th>
                <th>Sponsor</th>
                <th>IP</th>
                <th>Country</th>
                <th>Location</th>
                <th>Login Time</th>
                <th>Last Activity</th>
            </tr>
            
            <tr id="loading-message">
            <td colspan="7" style="text-align: center;">Loading data...</td>
        </tr>
        </table>
    </section>

@include('includes.footer')

<script>

    function fetchOnlineUsers() {
        console.log("Fetching online users..."); 
        
        const loadingMessage = document.querySelector('#loading-message');
    
        if (loadingMessage) {
            loadingMessage.style.display = 'table-row'; 
        }
        
        fetch('{{ url("/fetch-online-users") }}')
            .then(response => response.json())
            .then(users => {
                let tableBody = '';
                
                const flagMap = {
                    'Saudi Arabia': 'saudi.png',
                    'Bangladesh': 'bangladesh.png',
                    'Qatar': 'qatar.png',
                    'Oman': 'oman.png',
                    'UAE': 'dubai.png',
                    'Maldives': 'maldives.png',
                    'Italy': 'italy.png',
                    'Pakistan': 'pakistan.png',
                    'NL': 'netherlands.png',
                };
                
                users.forEach(user => {
                    
                    let flag = flagMap[user.country] || 'dubai.png';
                    tableBody += `
                        <tr>
                            <td>${user.user_username}</td>
                            <td style="color: rgb(170, 3, 3)">${user.sponsor_username ?? 'No Sponsor'}</td>
                            <td style="color:#009688">${user.ip}</td>
                            <td>
                            <img src="{{ url('assets/flag/') }}/${flag}" style="width: 25px; height: 30px;">
                                ${user.country}
                            </td>
                            <td>${user.location}</td>
                            <td>${user.last_login}</td>
                            <td>${user.last_activity}</td>
                        </tr>
                    `;
                });
                
                if (loadingMessage) {
                    loadingMessage.style.display = 'none';
                }

                document.querySelector('#online-users-table').innerHTML = `
                    <tr>
                        <th>Username</th>
                        <th>Sponsor</th>
                        <th>IP</th>
                        <th>Country</th>
                        <th>Location</th>
                        <th>Login Time</th>
                        <th>Last Activity</th>
                    </tr>
                    ${tableBody}
                `;
            })
            .catch(error => console.error('Error fetching users:', error));
    }

    setInterval(fetchOnlineUsers, 10000);

    window.onload = fetchOnlineUsers;
</script>