@php
    use Carbon\Carbon;
@endphp
<div>
    <div class="btn-toolbar pb-2 justify-content-center flex-wrap" role="toolbar"
        style="max-width: 100%; overflow: hidden;">
        <div class="btn-group p-2 d-flex flex-wrap justify-content-center">
            @foreach ($events as $event)
                <button
                    class="btn @if ($activeEvent === $event->ID) btn-warning text-dark @else btn-outline-warning @endif m-1 px-4 py-2 rounded-lg shadow-lg"
                    wire:click="setActiveEvent({{ $event->ID }})">
                    {{ $event->EventName }}
                </button>
            @endforeach
        </div>
    </div>

    <div class="mt-4 d-flex justify-content-center align-items-center" style="min-height: 300px;">
        @if ($selectedEvent)
            <div class="card border-warning shadow-lg w-75">
                <div class="card-header bg-warning text-dark text-center">
                    Event Details: {{ $selectedEvent->EventName }}
                </div>
                <div class="card-body text-center">
                    <p><strong>Bot Name:</strong> {{ $selectedEvent->BotName }}</p>
                    <p><strong>Discord:</strong> <a href="{{ $selectedEvent->Discord_Page }}"
                            target="_blank">{{ $selectedEvent->Discord_Page }}</a></p>

                    <h5 class="mt-4">Conditions:</h5>
                    <ul class="list-group">
                        @php
                            $curLevelStart = $selectedEvent->rules->Cur_Level_Start ?? null;
                            $curLevelEnd = $selectedEvent->rules->Cur_Level_End ?? null;
                            $strengthStart = $selectedEvent->rules->Strength_Start ?? null;
                            $strengthEnd = $selectedEvent->rules->Strength_End ?? null;
                            $intellectStart = $selectedEvent->rules->Intellect_Start ?? null;
                            $intellectEnd = $selectedEvent->rules->Intellect_End ?? null;
                        @endphp

                        <!-- عرض Max Level إذا كان موجوداً -->
                        @if ($curLevelStart !== null && $curLevelEnd !== null)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>Max Level:</strong>
                                <span class="badge bg-info">
                                    {{ $curLevelStart }} - {{ $curLevelEnd }}
                                </span>
                            </li>
                        @endif

                        <!-- عرض STR Yes إذا كانت هناك قيم لـ Strength -->
                        @if ($strengthStart !== null || $strengthEnd !== null)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>Strength:</strong>
                                <span class="badge bg-primary">
                                    STR Yes
                                </span>
                            </li>
                        @endif

                        <!-- عرض INT Yes إذا كانت هناك قيم لـ Intellect -->
                        @if ($intellectStart !== null || $intellectEnd !== null)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <strong>Intellect:</strong>
                                <span class="badge bg-secondary">
                                    INT Yes
                                </span>
                            </li>
                        @endif

                        <!-- عرض باقي الشروط العادية -->
                        @foreach ($selectedEvent->rules->getAttributes() as $key => $value)
                            @if (
                                $value !== null &&
                                    $value != 0 &&
                                    $key != 'EventID' &&
                                    $key != 'Reset' &&
                                    !in_array($key, [
                                        'Cur_Level_Start',
                                        'Cur_Level_End',
                                        'Strength_Start',
                                        'Strength_End',
                                        'Intellect_Start',
                                        'Intellect_End',
                                    ]))
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <strong>{{ ucwords(str_replace('_', ' ', $key)) }}:</strong>
                                    <span
                                        class="badge {{ is_bool($value) ? ($value ? 'bg-success' : 'bg-danger') : 'bg-info' }}">
                                        {{ is_bool($value) ? ($value ? 'Yes' : 'No') : $value }}
                                    </span>
                                </li>
                            @endif
                        @endforeach
                    </ul>


                    <!-- العد التنازلي -->
                    <div class="countdown-wrapper mt-5 p-4 text-center">
                        <h4 class="text-warning mb-3">Countdown to Event End</h4>
                        <div class="countdown-timer">
                            {{-- <div wire:loading wire:target="refreshPlayerData">
                                <p class="text-info">Refreshing player data...</p>
                            </div> --}}
                            Time :<span
                                class="countdown-text">{{ $events->first() && $events->first()->timers->first() ? '' : 'No End Time Available' }}</span>
                        </div>
                    </div>
                    @if ($selectedEvent && $selectedEvent->ID == 21)
                        @if (auth()->check())
                            @if ($playerExists)
                                <div class="mt-4">
                                    <h5 class="text-warning text-center">Event Voting</h5>
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-hover text-white">
                                            <thead class="bg-dark">
                                                <tr>
                                                    <th>#</th>
                                                    <th>Vote Logo</th>
                                                    <th>Site Name</th>
                                                    <th>Next Vote Time</th>
                                                    <th>Points</th> <!-- عمود النقاط -->
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($voteSites as $index => $site)
                                                    @php
                                                        // $userVote = $userVotes->firstWhere('vote_site_id', $site->id);
                                                        $userVote = $userVotes->where('vote_site_id', $site->id)->last();
                                                        $nextVoteTime = $userVote
                                                            ? Carbon::parse($userVote->next_vote_time)
                                                            : null;
                                                        $now = Carbon::now();
                                                        $isVoteAvailable =
                                                            !$nextVoteTime || $nextVoteTime->lessThanOrEqualTo($now);
                                                        $voteLink = str_replace(
                                                            ['!username', '!JID'],
                                                            [Auth::user()->username, Auth::user()->JID],
                                                            $site->vote_link,
                                                        );

                                                        // تحديد لون النقاط بناءً على القيمة
                                                        $pointsClass =
                                                            $site->Points >= 10
                                                                ? 'text-success'
                                                                : ($site->Points >= 5
                                                                    ? 'text-warning'
                                                                    : 'text-danger');
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>
                                                            <img src="{{ Str::startsWith($site->logo, ['http://', 'https://']) ? $site->logo : asset($site->logo) }}"
                                                                alt="Vote Logo" style="width: 110px; height: 50px;">
                                                        </td>
                                                        <td>{{ $site->site_name }}</td>
                                                        <td>
                                                            <span id="vote-time-{{ $site->id }}"
                                                                class="{{ $isVoteAvailable ? 'text-success' : 'text-danger' }}"
                                                                data-time="{{ $nextVoteTime ? $nextVoteTime->toIso8601String() : 'now' }}">
                                                                {{ $nextVoteTime ? $nextVoteTime->format('j/n/Y - h:i:s A') : 'Now' }}
                                                            </span>
                                                        </td>
                                                        <td class="{{ $pointsClass }}">
                                                            +{{ $site->Points }} <!-- عرض النقاط المكتسبة -->
                                                        </td>
                                                        <td>
                                                            <button class="btn btn-warning btn-sm"
                                                                onclick="openVoteWindow('{{ $voteLink }}')"
                                                                id="vote-btn-{{ $site->id }}"
                                                                {{ $isVoteAvailable ? '' : 'disabled' }}>
                                                                Vote Now
                                                            </button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-danger text-center mt-4">
                                    You need to <a href="#" class="text-warning">log in to the game</a> to
                                    participate in the voting event.
                                </div>
                            @endif
                        @else
                            <div class="alert alert-danger text-center mt-4">
                                You must <a href="#" data-toggle="modal" data-target="#loginModal">log in</a> to
                                see the voting list.
                            </div>
                        @endif
                    @endif






                    <div wire:poll.5s="refreshPlayerData">
                        <h5 class="mt-4">Player Rankings and Rewards:</h5>
                        <div class="top-3-container d-flex justify-content-center flex-wrap mt-5 gap-4">
                            @foreach ($players->take(3) as $index => $player)
                                <div class="card top3-card rank-{{ $index + 1 }} text-center shadow-lg"
                                    data-player-id="{{ $player->ID }}">
                                    <div class="card-body">
                                        <img src="{{ $player->avatarPath }}" alt="Avatar"
                                            class="rounded-circle mb-3 avatar-img">
                                        @if ($player->Charname)
                                            <a href="{{ $player->charLink }}" style="color: black"
                                                class="text-warning">
                                                <h5 class="card-title">
                                                    {{ $player->Charname }}
                                                </h5>
                                            </a>
                                        @else
                                            Unknown
                                        @endif
                                        <p class="card-text player-points">
                                            Points: {{ $player->Points }}<br>
                                        <p class="{{ $player->rankClass }}">
                                            Reward :<br> {{ $player->fullReward }}
                                        </p>
                                        </p>
                                        <span class="badge rank-badge">
                                            Rank {{ $index + 1 }}
                                        </span>
                                    </div>
                                </div>
                            @endforeach
                        </div>


                        <div class="table-responsive mt-3">
                            <table class="table table-dark table-bordered table-hover text-white">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Player Name</th>
                                        <th>Points</th>
                                        <th>Start Event</th>
                                        <th>Last Point</th>
                                        <th>Reward</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($players->slice(3) as $index => $player)
                                        <tr data-player-id="{{ $player->ID }}">
                                            <td>{{ $index + 1 }}</td>
                                            <td>
                                                @if ($player->Charname)
                                                    <a href="{{ $player->charLink }}" class="text-warning">
                                                        {{ $player->Charname }}
                                                    </a>
                                                @else
                                                    <span class="text-muted">Unknown</span>
                                                @endif
                                            </td>
                                            <td class="player-points">{{ $player->Points }}</td>
                                            <td>{{ $player->StartEvent }}</td>
                                            <td>{{ $player->LastPoint }}</td>
                                            <td class="{{ $player->rankClass }}">
                                                {{ $player->fullReward }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            @else
                <div class="alert alert-warning text-center w-50">
                    No active events currently.
                </div>
        @endif
    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        const countdownText = document.querySelector('.countdown-text');
        let countdownInterval;

        // ابدأ العد التنازلي عند تحميل الصفحة إذا كان هناك وقت محدد
        @if ($events->first() && $events->first()->timers->first())
            startCountdown("{{ $events->first()->timers->first()->End_Time }}");
        @endif

        // استماع من Livewire عند تغيير الحدث
        window.addEventListener('updateCountdown', event => {
            const endTime = event.detail;
            if (countdownInterval) clearInterval(countdownInterval);

            if (endTime) {
                startCountdown(endTime);
            } else {
                countdownText.innerHTML = `<span class="text-danger">No End Time Available</span>`;
            }
        });

        function startCountdown(endTime) {
            const endDate = new Date(endTime).getTime();

            countdownInterval = setInterval(() => {
                const now = new Date().getTime();
                const distance = endDate - now;

                if (distance > 0) {
                    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 *
                        60)); // تصحيح الدقائق
                    const seconds = Math.floor((distance % (1000 * 60)) / 1000); // تصحيح الثواني


                    countdownText.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;

                    // إزالة أي ألوان سابقة
                    countdownText.classList.remove('countdown-yellow', 'countdown-orange',
                        'countdown-red');

                    // تغيير اللون حسب الوقت المتبقي
                    if (distance < 60000) { // أقل من دقيقة
                        countdownText.classList.add('countdown-red');
                    } else if (distance < 3600000) { // أقل من ساعة
                        countdownText.classList.add('countdown-orange');
                    } else if (distance < 86400000) { // أقل من 24 ساعة
                        countdownText.classList.add('countdown-yellow');
                    }

                } else {
                    countdownText.innerHTML = `<span class="text-danger">Event Ended</span>`;
                    clearInterval(countdownInterval);
                }
            }, 1000);
        }


        window.addEventListener('pointsUpdated', event => {
            const playerElements = document.querySelectorAll(`[data-player-id="${event.detail.id}"]`);

            playerElements.forEach(playerElement => {
                const pointsCell = playerElement.querySelector('.player-points');

                if (pointsCell) {
                    // تحديث النقاط مباشرة
                    pointsCell.textContent = `Points: ${event.detail.points}`;

                    // إضافة أنيميشن الوميض
                    pointsCell.classList.add('point-change');

                    // إزالة الأنيميشن بعد انتهاءه
                    setTimeout(() => {
                        pointsCell.classList.remove('point-change');
                    }, 1500);
                }
            });
        });


    });





    function openVoteWindow(voteUrl) {
        const width = 800;
        const height = 600;
        const left = (screen.width - width) / 2;
        const top = (screen.height - height) / 2;

        window.open(voteUrl, 'VoteWindow',
            `width=${width},height=${height},top=${top},left=${left},resizable=yes,scrollbars=yes`);
    }
</script>