@extends('layouts.app')

@php
    $breadcrumbs = [
        ['title' => __('Главная'), 'url' => route('welcome')],
    ];
@endphp

@section('content')
    @include('pages.welcome.partials._content', ['jsTranslations' => $jsTranslations])
@endsection

@push('scripts')
<script>
    document.addEventListener('app:loaded', function() {
        const container = $('#welcome-page-container');
        const translations = JSON.parse(container.attr('data-translations'));
        const totalOnlinePlayersElement = $('#total-online-players');
        const realmStatusListElement = $('#realm-status-list');

        function updateRealmStatus() {
            $.getJSON('/api/welcome-status', function (data) {
                // Update total online players
                if (totalOnlinePlayersElement.length) {
                    totalOnlinePlayersElement.text(data.online);
                }

                // Update realm list
                if (realmStatusListElement.length) {
                    realmStatusListElement.empty(); // Clear existing list

                    if (data.realms && data.realms.length > 0) {
                        $.each(data.realms, function (index, realm) {
                            const isOnline = realm.status === 'Online';
                            const statusText = isOnline ? translations.online_status : translations.offline_status;
                            const statusClass = isOnline ? 'success' : 'danger';
                            const onlineBadge = isOnline ? `<span class="badge bg-secondary">${translations.online_badge} ${realm.onlinePlayersCount || 0}</span>` : '';

                            const listItem = `
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <span class="text-white">${realm.name}</span>
                                    <div>
                                        <span class="badge bg-${statusClass} me-2">${statusText}</span>
                                        ${onlineBadge}
                                    </div>
                                </li>
                            `;
                            realmStatusListElement.append(listItem);
                        });
                    } else {
                        const listItem = `<li class="list-group-item"><p class="text-light">${translations.failed_to_load}</p></li>`;
                        realmStatusListElement.append(listItem);
                    }
                }
            }).fail(function() {
                console.error(translations.failed_to_update);
            });
        }

        // Update on page load
        updateRealmStatus();

        // And then update every 60 seconds
        setInterval(updateRealmStatus, 60000);
    });
</script>
@endpush