@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-alternative 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-primary 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