@extends('panel.layouts.base')
@section('title',__('panel/general/rating.index.title'))
@section('seo_description', __('panel/general/rating.index.description'))
{{--<style>--}}
{{--    tr {--}}
{{--        transform: translateY(-20px);--}}
{{--        opacity: 0;--}}
{{--    }--}}

{{--</style>--}}

@section('content.main')
    @php
        $svg = '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'currentColor\' aria-hidden=\'true\' class=\'fill-current w-6 h-6\'><path fill-rule=\'evenodd\' d=\'M15.22 6.268a.75.75 0 01.968-.432l5.942 2.28a.75.75 0 01.431.97l-2.28 5.941a.75.75 0 11-1.4-.537l1.63-4.251-1.086.483a11.2 11.2 0 00-5.45 5.174.75.75 0 01-1.199.19L9 12.31l-6.22 6.22a.75.75 0 11-1.06-1.06l6.75-6.75a.75.75 0 011.06 0l3.606 3.605a12.694 12.694 0 015.68-4.973l1.086-.484-4.251-1.631a.75.75 0 01-.432-.97z\' clip-rule=\'evenodd\'></path></svg>';
    @endphp
    <hr style="margin-bottom: 3px;margin-top: 30px;">
    <x-moonshine.tabs :tabs="[
    ... (config('game.statistic.showRating_pvp.enable') == '1' ?
        ['pvp' => ['icon' => $svg, 'label' => __('panel/general/rating.tab.0')]] : []),

    ... (config('game.statistic.showRating_pk.enable') == '1' ?
        ['pk' => ['icon' => $svg, 'label' => __('panel/general/rating.tab.1')]] : []),

    ... (config('game.statistic.showRating_level.enable') == '1' ?
        ['level' => ['icon' => $svg, 'label' => __('panel/general/rating.tab.2')]] : []),

    ... (config('game.statistic.showRating_clan.enable') == '1' ?
        ['clan' => ['icon' => $svg, 'label' => __('panel/general/rating.tab.3')]] : []),

    ... (config('game.statistic.showRating_castle.enable') == '1' ?
        ['castle' => ['icon' => $svg, 'label' => __('panel/general/rating.tab.4')]] : []),

    ... (config('game.statistic.showRating_wedding.enable') == '1' ?
        ['wedding' => ['icon' => $svg, 'label' => __('panel/general/rating.tab.5')]] : []),

    ... (config('game.statistic.showRating_bosses.enable', 0) == '1' ?
        ['bosses' => ['icon' => $svg, 'label' => __('panel/general/rating.tab.6')]] : []),
]">


        @slot('pvp')
            @include('panel.general.rating.pvp')
        @endslot
        @slot('pk')
            @include('panel.general.rating.pk')
        @endslot
        @slot('level')
            @include('panel.general.rating.level')
        @endslot
        @slot('clan')
            @include('panel.general.rating.clan')
        @endslot
        @slot('castle')
            @include('panel.general.rating.castle')
        @endslot
        @slot('wedding')
            @include('panel.general.rating.wedding')
        @endslot
        @slot('bosses')
            @include('panel.general.rating.bosses')
        @endslot
    </x-moonshine.tabs>
@endsection



@section('content.top')
    <x-moonshine::grid>
        @if($topPvp->isNotEmpty())
            <x-moonshine::column col-span="4" class="top-block">
                <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700"
                     style="background: url({{ asset('assets/panel/images/rating1.webp') }}) no-repeat center;background-size: cover;"
                >
                    <div class="flex items-center gap-2 justify-center w-full ratting-block-top">
                        <x-moonshine.rating-avatar :box_shadow="true" :sex="$topPvp['sex']"
                                                   :class_id="$topPvp['class_id']" class="rounded-lg"/>
                        <div class="p-5">
                            <h3 class="text-xl font-bold tracking-tight text-gray-300 dark:text-white">
                                {{ __('panel/general/rating.index.0') }}
                            </h3>
                            <span class="text-gray-200 dark:text-gray-200">{{ $topPvp['name'] }}</span>
                        </div>
                        <span class="text-gray-500 dark:text-gray-400">
                        <x-moonshine::badge class="flex items-center gap-2 ratting-badge">
                            <span>{{ formatNumber($topPvp['pvp']) }}</span>
                            <img src="{{ asset('assets/panel/images/cap.svg') }}" class="w-4 h-4" alt="cup">
                        </x-moonshine::badge>
                    </span>
                    </div>
                </div>
            </x-moonshine::column>
        @endif
        @if($topPk->isNotEmpty())
            <x-moonshine::column col-span="4" class="top-block">
                <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700"
                     style="background: url({{ asset('assets/panel/images/rating2.webp') }}) no-repeat center;background-size: cover;">
                    <div class="flex items-center gap-2 justify-center w-full ratting-block-top">
                        <x-moonshine.rating-avatar :box_shadow="true" :sex="$topPk['sex']"
                                                   :class_id="$topPk['class_id']" class="rounded-lg"/>
                        <div class="p-5">
                            <h3 class="text-xl font-bold tracking-tight text-gray-300 dark:text-white">
                                {{ __('panel/general/rating.index.1') }}
                            </h3>
                            <span class="text-gray-200 dark:text-gray-200">{{ $topPk['name'] }}</span>
                        </div>
                        <span class="text-gray-500 dark:text-gray-400">
                        <x-moonshine::badge color="primary" class="flex items-center gap-2 ratting-badge">
                            <span>{{ formatNumber($topPk['pk']) }}</span>
                            <img src="{{ asset('assets/panel/images/cap.svg') }}" class="w-4 h-4" alt="cup">
                        </x-moonshine::badge>
                    </span>
                    </div>
                </div>
            </x-moonshine::column>
        @endif
        @if(count($topClan))
            <x-moonshine::column col-span="4" class="top-block">
                <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700"
                     style="background: url({{ asset('assets/panel/images/rating3.webp') }}) no-repeat center;background-size: cover;">
                    <div class="flex items-center gap-2 justify-center w-full ratting-block-top">
                        <x-moonshine.rating-avatar :box_shadow="true" :sex="$topClan['sex']"
                                                   :class_id="$topClan['class_id']" class="rounded-lg"/>
                        <div class="p-5">
                            <h3 class="text-xl font-bold tracking-tight text-gray-300 dark:text-white">
                                {{ __('panel/general/rating.index.2') }}
                            </h3>
                            <span class="text-gray-200 dark:text-gray-200">{{ $topClan['name'] }}</span>
                        </div>
                        <span class="text-gray-500 dark:text-gray-400">
                        <x-moonshine::badge color="primary" class="flex items-center gap-2 ratting-badge">
                            <span>{{ formatNumber($topClan['reputation_score']) }}</span>
                            <img src="{{ asset('assets/panel/images/cap.svg') }}" class="w-4 h-4" alt="cup">
                        </x-moonshine::badge>
                    </span>
                    </div>
                </div>
            </x-moonshine::column>
        @endif
    </x-moonshine::grid>
@endsection