@extends('theme::layouts.app')

@section('title', config('app.name'))
@section('page_title', 'Home')
@section('description', 'Electus Online - 100 CAP CHINESE SERVER')
@section('keywords', 'Electus,electusonline,Electus Online,Silkroad,Private Server')

@push('styles')
{{-- Additional styles for home page --}}
@endpush

@section('content')
<div class="video-container">
    <div class="logo-container text-center">
        <a href="{{ route('index') }}">
            <img src="{{ asset('themes/electus/images/logo.png') }}" class="logo" alt="{{ config('app.name') }}">
        </a>
    </div>
    <div class="row justify-content-center main-text">
        <div class="col-lg-8 col-sm-12">
            <p class="text-center main-text-p">
                100 CAP CHINESE
                <br>
                <span class="c-text-yellow">
                    THE FIRST DROP SYSTEM, OPENMARKET AND PVE SERVER <u>IN 10 YEARS</u> , NO ACTIVITY POINTS
                </span>
                LONG TERM, BATTLE PASS, NEW + OLD JOB SYSTEM , 2 YEARS OPEN GUARANTEE
            </p>
        </div>
    </div>
    <video autoplay loop muted playsinline>
        <source src="{{ asset('themes/electus/images/main-bg.mp4') }}" type="video/mp4">
    </video>
</div>

<section class="news container-fluid">
    <div class="row">
        {{-- Left Sidebar - Rankings --}}
        <div class="col-lg-3 col-12 d-none d-lg-block">
            {{-- Player Ranking Widget --}}
            <div class="widget rank-widget">
                <div class="widget-header">
                    <h3 class="header">
                        <a href="{{ route('ranking.char') }}" class="c-text-yellow-2">Player rank</a>
                    </h3>
                </div>
                <div class="widget-content">
                    @if(isset($topPlayers) && count($topPlayers) > 0)
                        @foreach($topPlayers->take(3) as $index => $player)
                            <div class="{{ $index == 0 ? 'first' : ($index == 1 ? 'second' : 'third') }}-rank row justify-content-between">
                                <div class="col {{ $index == 0 ? 'first' : ($index == 1 ? 'second' : 'third') }}-rank-content">
                                    <div class="row justify-content-between">
                                        <div class="col-7 py-1">
                                            <h4 class="rank-name">
                                                <a href="{{ route('information-player', $player->CharName16) }}">{{ $player->CharName16 }}</a>
                                            </h4>
                                            <span class="rank-lvl">Lvl. {{ $player->CurLevel }}</span>
                                        </div>
                                        <div class="col-xxl-5 col-lg-12 col-5 text-end">
                                            <img src="{{ asset('themes/electus/images/rank/' . ($index + 1) . '.png') }}" class="img-fluid" alt="">
                                            <div class="row rank-points text-center">
                                                <p class="lh-1">
                                                    <span class="points">{{ number_format($player->ItemPoints ?? 0) }}</span>
                                                    <br>
                                                    Item points
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-center">No players data available</p>
                    @endif
                </div>
            </div>

            {{-- Guild Ranking Widget --}}
            <div class="widget rank-widget">
                <div class="widget-header">
                    <h3 class="header">
                        <a href="{{ route('ranking.guild') }}" class="c-text-yellow-2">Guild rank</a>
                    </h3>
                </div>
                <div class="widget-content">
                    @if(isset($topGuilds) && count($topGuilds) > 0)
                        @foreach($topGuilds->take(3) as $index => $guild)
                            <div class="{{ $index == 0 ? 'first' : ($index == 1 ? 'second' : 'third') }}-rank row justify-content-between">
                                <div class="col {{ $index == 0 ? 'first' : ($index == 1 ? 'second' : 'third') }}-rank-content">
                                    <div class="row justify-content-between">
                                        <div class="col-7 py-1">
                                            <h4 class="rank-name">
                                                <a href="{{ route('information-guild', $guild->Name) }}">{{ $guild->Name }}</a>
                                            </h4>
                                            <span class="rank-lvl">Members: {{ $guild->MemberClass ?? 0 }}</span>
                                        </div>
                                        <div class="col-xxl-5 col-lg-12 col-5 text-end">
                                            <img src="{{ asset('themes/electus/images/rank/' . ($index + 1) . '.png') }}" class="img-fluid" alt="">
                                            <div class="row rank-points text-center">
                                                <p class="lh-1">
                                                    <span class="points">{{ number_format($guild->Lvl ?? 0) }}</span>
                                                    <br>
                                                    Guild Level
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-center">No guilds data available</p>
                    @endif
                </div>
            </div>
        </div>

        {{-- Main Content - News --}}
        <div class="col-lg-6 col-12">
            @if(isset($news) && count($news) > 0)
                @foreach($news as $newsItem)
                    <div class="widget">
                        <div class="widget-header wide">
                            <h3 class="header justify-content-start">{{ strtoupper($newsItem->type ?? 'ANNOUNCEMENT') }}</h3>
                        </div>
                        <div class="widget-content">
                            <div class="main-wrapper">
                                <div class="news-content">
                                    <h2>{{ $newsItem->title }}</h2>
                                    <div class="news-excerpt">
                                        {!! Str::limit(strip_tags($newsItem->content), 300) !!}
                                    </div>
                                    @if(isset($newsItem->slug))
                                        <a href="{{ route('news-slug', $newsItem->slug) }}" class="btn btn-primary">Read More</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="widget">
                    <div class="widget-header wide">
                        <h3 class="header justify-content-start">WELCOME</h3>
                    </div>
                    <div class="widget-content">
                        <div class="main-wrapper">
                            <div class="news-content">
                                <h2>Welcome to {{ config('app.name') }}</h2>
                                <p>Welcome to our Silkroad Online private server! Experience the classic gameplay with modern improvements.</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- Right Sidebar - Server Info --}}
        <div class="col-lg-3 col-12 d-none d-lg-block">
            {{-- Server Info Widget --}}
            <div class="widget">
                <div class="widget-header">
                    <h3 class="header">General info</h3>
                </div>
                <div class="widget-content">
                    <div class="widget-content-text">
                        <p class="left">Players online</p>
                        <p class="right text-end player-count">
                            <span id="online-players">{{ $serverStats->online_players ?? 0 }}</span>/{{ $serverStats->max_players ?? 4500 }}
                        </p>
                    </div>
                    <div class="widget-content-text">
                        <p class="left">Last Restart:</p>
                        <p class="right text-end">
                            {{ isset($serverStats->last_restart) ? \Carbon\Carbon::parse($serverStats->last_restart)->format('d/m/Y H:i') : 'N/A' }}
                        </p>
                    </div>
                    <div class="widget-content-text">
                        <p class="left">Server Time:</p>
                        <p class="right text-end">
                            <span class="server_time" id="server-time">{{ now()->format('H:i:s') }}</span>
                        </p>
                    </div>
                    <div class="widget-content-text">
                        <p class="left">CAP:</p>
                        <p class="right text-end">{{ $serverStats->cap_level ?? 100 }}</p>
                    </div>
                    <div class="widget-content-text">
                        <p class="left">Race:</p>
                        <p class="right text-end">{{ $serverStats->race_type ?? 'Chinese Only' }}</p>
                    </div>
                    <div class="widget-content-text">
                        <p class="left">PC Limit:</p>
                        <p class="right text-end">{{ $serverStats->pc_limit ?? 2 }} (+1 Staller)</p>
                    </div>
                    <div class="widget-content-text">
                        <p class="left">IP Limit:</p>
                        <p class="right text-end">{{ $serverStats->ip_limit ?? 2 }} (+1 Staller)</p>
                    </div>
                    <div class="widget-content-text">
                        <p class="left">Guild Limit:</p>
                        <p class="right text-end">{{ $serverStats->guild_limit ?? 16 }}</p>
                    </div>
                    <div class="widget-content-text">
                        <p class="left">Union Limit:</p>
                        <p class="right text-end">{{ $serverStats->union_limit ?? 2 }}</p>
                    </div>
                </div>
            </div>

            {{-- Job Kills Widget --}}
            <div class="widget">
                <div class="widget-header">
                    <h3 class="header">Recent Job Kills</h3>
                </div>
                <div class="widget-content job-kills">
                    @if(isset($recentJobKills) && count($recentJobKills) > 0)
                        @foreach($recentJobKills->take(5) as $kill)
                            <div class="job-kills-items d-flex">
                                <div class="job-kills-item">
                                    <span class="killer">{{ $kill->killer_name }}</span>
                                    <span class="vs">killed</span>
                                    <span class="victim">{{ $kill->victim_name }}</span>
                                    <small class="time">{{ \Carbon\Carbon::parse($kill->kill_time)->diffForHumans() }}</small>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-center">No recent job kills</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
// Update server time every second
function updateServerTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString('en-GB', {hour12: false});
    document.getElementById('server-time').textContent = timeString;
}

// Update server time immediately and then every second
updateServerTime();
setInterval(updateServerTime, 1000);

// You can add AJAX calls here to update online players count periodically
// setInterval(function() {
//     fetch('/api/server-stats')
//         .then(response => response.json())
//         .then(data => {
//             document.getElementById('online-players').textContent = data.online_players;
//         });
// }, 30000); // Update every 30 seconds
</script>
@endpush