@extends('layouts.master')
@section('title', 'Event Tracking | Buddy Boost')
@section('background-image', '/assets/images/bg-5.png')
@section('bg-y', '-100px')
@section('content')
    <div class="nk-gap-5"></div>
    <div class="container">
        <div class="nk-box-2 ranking-table bg-dark-1 rounded">
            <div class="text-center">
                <h2 class="nk-title">Buddy Boost</h2>
                <div class="nk-title-sep-icon" style="margin: 5px auto;">
                    <span class="icon"><span class="ion-ios-game-controller-a text-warning"></span></span>
                </div>
            </div>
            <div class="nk-gap-1"></div>
            
            <div class="panel panel-default bg-dark-2 block-border block-shadow p-10 mb-10 rounded" dir="ltr">
                <div class="panel-heading" role="tab" id="accordion-weapons-won">
                    <h4 style="margin: 1em 0em;" class="text-center">Event information</h4>
                </div>
                <p>
                    Buddy Boost is an event made by friends for friends! Your friends have 1 month to finish this event for you. All they need to do is play! If your friends have completed the event, all you have to do is stay friends with them until the end of the event (if you remove or get removed, the points each of you accumulated will be reset to 0, so don't lose friends during the event!)
                </p>
                <div class="panel-heading" role="tab" id="accordion-weapons-won">
                    <h4 style="margin: 1em 0;" class="text-center">Requirements</h4>
                </div>
                <p>
                    Sewers does not count towards the event
                    Backstreet does not count towards the event
                    You/Your friends need to be online within the past 10 days to receive points, if you are offline longer than that, you do not receive points!
                </p>
            </div>

            <div class="nk-accordion" id="accordion-events" role="tablist" aria-multiselectable="true">
                <div class="panel-heading" role="tab" id="accordion-weapons-won">
                    @foreach ($totalpoints as $totalpoint)
                        <h4 style="margin-top: 1em;" class="text-center">Total Friend Points: <span class="{{ $totalpoint->TOTAL > 0 ? 'text-success' : 'text-danger' }}">{{ $totalpoint->TOTAL ?? 0 }}</span></h4>
                        <div class="nk-progress nk-count mb-5" data-progress="{{ floor(($totalpoint->TOTAL / 18000) * 100) }}" data-progress-mask="{$}%" data-nk-mask="{$}%">
                            <div class="d-flex flex-row">
                                <div class="nk-progress-line bg-main-1" style="margin: auto; max-width: 50%;">
                                    <div class="bg-main-2">
                                        <div class="nk-progress-percent"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center">
                                {{ $totalpoint->TOTAL > 0 ? $totalpoint->TOTAL : '0' }} / 18000
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="panel panel-default bg-dark-2 block-border block-shadow p-10 mb-10 rounded" dir="ltr">
                    <div class="panel-heading" role="tab" id="accordion-weapons-won">
                        <h4 style="margin: 1em 0em;" class="text-center">Friends activity</h4>
                    </div>
                    @if(!$friends->isEmpty())
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="thead-default">
                            <tr>
                                <th style="max-width: 30px;" class="text-center">Level</th>
                                <th class="text-center">Nickname</th>
                                <th class="text-center">Points</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($friends as $friend)
                                <tr>
                                    <td class="text-center">
                                        <img src="/assets/images/ranks/BIGCLASS_{{ $friend->LEV + 1 }}.png" style="height: 50px;" class="img-fluid" alt="rank">
                                    </td>
                                    <td class="text-center" style="vertical-align: middle;">
                                        <a href="{{ route('profile', $friend->FRIEND_USN) }}">{{ $friend->NICK }}</a>
                                    </td>
                                    <td class="text-center" style="vertical-align: middle;">
                                        {{ $friend->FRIEND_POINT }}/300
                                        <div class="nk-progress nk-count mb-5" data-progress="{{ floor(($friend->FRIEND_POINT / 300) * 100) }}" data-progress-mask="{$}%" data-nk-mask="{$}%">
                                            <div class="d-flex flex-row">
                                                <div class="nk-progress-line bg-main-1" style="margin: auto;">
                                                    <div class="bg-main-2">
                                                        <div class="nk-progress-percent"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        {{ $friends->links("pagination.cf-pagination", ["paginator" => $friends]) }}
                    </div>
                    @else
                        <p class="text-center">You have no friends that have participated in this event, yet!</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="nk-gap-5"></div>
@endsection