@extends('layouts.app')
@section('content')
    <div class="col-12 col-md-6">
        <div class="row">
            <!-- register-header -->
            <div class="col-12 news-header px-5 text-primary text-opensans d-flex align-items-center">
                <span class="px-3">Ranking Details</span>
            </div>

            <!-- register-content -->
            <div class="col-12 news-content panel-content-h">
                <!-- register -->
                <div class="col-12 py-4">
                    <!-- register-title -->
                    <div class="px-4 notice-footer text-center mb-1">
                        <p class="text-white text-bold p-0 m-0">Ranking</p>
                        <p class="text-secondary login-options p-0 m-0">Haven’t see yourself in top 10? Use that one, surely
                            you will find your character.</p>
                    </div>

                    <div class="py-5 px-1">
                        <h5 class="text-primary text-center text-opensans text-bold mb-4">
                            TOP PLAYERS
                        </h5>
                        <div class="d-flex justify-content-center align-items-center flex-wrap">
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.player') }}">
                                <button class="btn-primary mx-2">PLAYERS</button>
                            </a>
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.guild') }}">
                                <button class="btn-primary mx-2">GUILDS</button>
                            </a>
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.trojan') }}">
                                <button class="btn-primary mx-2">Top Trojans</button>
                            </a>
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.monk') }}">
                                <button class="btn-primary mx-2">Top Monk</button>
                            </a>
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.water') }}">
                                <button class="btn-primary mx-2">Top Water</button>
                            </a>
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.fire') }}">
                                <button class="btn-primary mx-2">Top Fire</button>
                            </a>
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.ninja') }}">
                                <button class="btn-primary mx-2">Top Ninja</button>
                            </a>
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.pirate') }}">
                                <button class="btn-primary mx-2">Top KO</button>
                            </a>
                             <a class="w-30 mx-1 mb-3" href="{{ route('rank.archer') }}">
                                <button class="btn-alternative mx-2">Top Archer</button>
                            </a>
                            <a class="w-30 mx-1 mb-3" href="{{ route('rank.warrior') }}">
                                <button class="btn-primary mx-2">Top warrior</button>
                            </a>

                        </div>

                        <table class="table rank-table my-3 table-hovered">
                            <thead>
                                <tr class="text-opensans login-options text-center align-middle">
                                    <th>#</th>
                                    <th>Name</th>
                                    <th>Avatar</th>
                                    <th>VIP</th>
                                    <th>Battle Power.</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($rank as $x => $row)
                                    <tr class="text-opensans text-secondary text-center align-middle">
                                        <td>{{ $x + 1 }}.</td>
                                        <td>{{ $row['Name'] }}</td>
                                        <td><img src="{{ $row['Face'] }}" width="30" alt="avatar"></td>
                                        <td>{{ $row['VipLevel'] }}</td>
                                        <td>{{ $row['PlayerBattlePower'] }}</td>
                                    </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection