@extends('panel.layouts.base')
@section('seo_description', __('panel/auth/dashboard.description'))

@section('title',__('panel/auth/dashboard.title',['userName' => $user->name]))
@push('css')
    <link rel="stylesheet" href="{{ asset('assets/panel/css/dashboard.css')}}?v={{ config('app.version') }}">
@endpush
@if ($errors->register_modal->any())
    @foreach ($errors->register_modal->all() as $error)
        <x-moonshine::toast type="error" :content="$error"/>
    @endforeach
@endif

@section('content.top')
    <x-moonshine::grid>
        <x-moonshine::column class="column-dashboard" col-span="4">
            <x-moonshine::box class="text-center box-dashboard1">
                <div class="flex items-center gap-2 justify-center mb-2">
                    <div class="flex items-center gap-1 font-bold uppercase">
                        <x-moonshine::icon :icon="'heroicons.user-circle'"/>
                        <span>{{ __('panel/auth/dashboard.top.0') }}</span>
                    </div>
                    <span>{{ $accounts_count ?? 0 }}</span>
                </div>
                <x-dashboard.modal-register :prefix="config('website.register.settings.prefix')">
                    <div class="flex justify-center">
                        <div
                            @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')"
                            class="btn-start text-gray-500 dark:text-gray-300 cursor-pointer w-full justify-center" style="max-width: 200px">
                            <x-moonshine::icon icon="heroicons.user-plus"/>
                            <span>{{ __('panel/auth/dashboard.top.5') }}</span>
                        </div>
                    </div>
                </x-dashboard.modal-register>
            </x-moonshine::box>
        </x-moonshine::column>

        <x-moonshine::column class="column-dashboard" col-span="4">
            <x-moonshine::box class="text-center box-dashboard2">
                <div class="flex items-center gap-2 justify-center mb-2">
                    <div class="flex items-center gap-1 font-bold uppercase">
                        <x-moonshine::icon :icon="'heroicons.users'"/>
                        <span>{{ __('panel/auth/dashboard.top.1') }}</span>
                    </div>
                    <span>{{ $characters_count ?? 0 }}</span>
                </div>
                <x-moonshine.modal async name="transfer-donate" id="transfer-donate" :asyncUrl="route('async-send-donate')" auto
                                    :title="__(config('game.donate.config.item.name_' . $currentLang))">

                    <x-slot name="outerHtml">
                        <div class="flex justify-center">
                            <div
                                @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')"
                                class="btn-start text-gray-500 dark:text-gray-300 cursor-pointer w-full justify-center" style="max-width: 200px">
                                <x-moonshine::icon icon="heroicons.arrow-up-tray"/>
                                <span>{{ __('panel/auth/dashboard.top.2') }}</span>
                            </div>
                        </div>
                    </x-slot>

                </x-moonshine.modal>
            </x-moonshine::box>
        </x-moonshine::column>
        <x-moonshine::column class="column-dashboard" col-span="4">
            <x-moonshine::box class="text-center box-dashboard3">
                <div class="flex items-center gap-2 justify-center mb-2">
                    <div class="flex items-center gap-1 font-bold uppercase">
                        <x-moonshine::icon :icon="'heroicons.currency-dollar'"/>
                        <span>{{ __('panel/auth/dashboard.top.3') }}</span>
                    </div>
                    <span>{{ formatNumber($user->balance) }}</span>
                </div>
                <div class="flex justify-center">
                    <div
                        class="btn-start text-gray-500 dark:text-gray-300 cursor-pointer w-full justify-center" style="max-width: 200px">
                        <x-moonshine::icon icon="heroicons.banknotes"/>
                        <a class="hvr" href="{{ route('donate.create') }}">{{ __('panel/auth/dashboard.top.4') }}</a>
                    </div>
                </div>
            </x-moonshine::box>
        </x-moonshine::column>
    </x-moonshine::grid>
    <hr>
@endsection

@section('content.main')
    <x-moonshine.box style="text-align: center;margin: 0" icon="heroicons.user-group" class="text-center"
                     title="{{ __('panel/auth/dashboard.main.0') }}  | {{ $accounts_count }} / {{ $limit_accounts }} |">
        <div class="menu-heading-mode absolute" style="right: 20px; top: 20px">
            <x-dashboard.theme-switcher :top="false"/>
        </div>
        @if($accounts->isNotEmpty())
            <x-moonshine::table>
                @slot('thead')
                    <th>№</th>
                    <th>{{ __('panel/auth/dashboard.main.1') }}</th>
                    <th>{{ __('panel/auth/dashboard.main.2') }}</th>
                    <th>{{ __('panel/auth/dashboard.main.3') }}</th>
                    <th>{{ __('panel/auth/dashboard.main.4') }}</th>
                    <th></th>
                @endslot
                @slot('tbody')
                    @foreach($accounts as $account)

                        <tr class="account-table">
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $account->login }}</td>
                            <td>{{ $account->accountsDateStart ? \Illuminate\Support\Carbon::parse($account->accountsDateStart->created_at)->translatedFormat('d F | H:i') : '-' }}</td>
                            <td>
                                <x-moonshine.modal id="f-acc-inf" async
                                                    :asyncUrl="route('async-account-info.index', $account->login)" auto
                                                    title="{{ __('panel/auth/dashboard.main.5') }} {{ $account->login }}">

                                    <x-slot name="outerHtml">
                                        <div
                                            @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')"
                                            class="btn-start text-gray-500 dark:text-gray-300 cursor-pointer justify-center" style="max-width: 200px">
                                            <x-moonshine::icon icon="heroicons.user-group"/>
                                            <span>{{ __('panel/auth/dashboard.main.13') }}</span>
                                        </div>
                                    </x-slot>

                                </x-moonshine.modal>
                            </td>
                            <td>
                                <x-moonshine.modal id="f-acc-act" async
                                                    :asyncUrl="route('async-last_access', $account->login)" auto
                                                    title="{{ __('panel/auth/dashboard.main.5') }} {{ $account->login }}">

                                    <x-slot name="outerHtml">
                                        <div
                                            @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')"
                                            class="btn-start text-gray-500 dark:text-gray-300 cursor-pointer justify-center" style="max-width: 200px">
                                            <x-moonshine::icon icon="heroicons.pencil-square"/>
                                            <span>{{ __('panel/auth/dashboard.main.14') }}</span>
                                        </div>
                                    </x-slot>

                                </x-moonshine.modal>
                            </td>
                            <td style="padding: 0">
                                <x-moonshine::dropdown placement="left">
                                    <div class="bg-btn-pass">
                                        <x-moonshine.modal id="f-pass-c" async
                                                            :asyncUrl="route('async-change-account-game-password',['account' => $account->login])"
                                                            auto
                                                            title="{{ __('panel/auth/dashboard.main.5') }} {{ $account->login }}">

                                            <x-slot name="outerHtml">
                                                <button class="btn-pass"
                                                        @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')">
                                                    {{ __('panel/auth/dashboard.main.6') }}
                                                </button>
                                            </x-slot>
                                        </x-moonshine.modal>
                                        <hr style="margin: 2px 0">
                                        <x-moonshine.modal id="f-pass-r" async
                                                            :asyncUrl="route('async-restore-account-game-password',['account' => $account->login])"
                                                            auto
                                                            title="{{ __('panel/auth/dashboard.main.5') }} {{ $account->login }}">

                                            <x-slot name="outerHtml">
                                                <button class="btn-pass"
                                                        @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')">
                                                    {{ __('panel/auth/dashboard.main.7') }}
                                                </button>
                                            </x-slot>

                                        </x-moonshine.modal>
                                    </div>
                                    <x-slot:toggler>
                                        <div class="btn-start">
                                            <x-moonshine::icon icon="heroicons.lock-closed" class="text-gray-500"/>
                                            <span class="text-gray-500 dark:text-gray-300">{{ __('panel/auth/dashboard.main.8') }}</span>
                                        </div>
                                    </x-slot:toggler>
                                </x-moonshine::dropdown>
                            </td>
                        </tr>
                    @endforeach
                @endslot
            </x-moonshine::table>

        @else
            <x-moonshine.error title="{{ __('panel/auth/dashboard.main.9') }}" :btn="true">
                <x-dashboard.modal-register :prefix="config('website.register.settings.prefix')">
                    <x-moonshine::link-button
                        style="font-size: 11px;background: url({{ asset('assets/panel/images/btn-download.png') }});width: 261px;height: 47px;border:none"
                        class="uppercase font-bold text-white hover:text-secondary"
                        @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')">
                        {{ __('panel/auth/dashboard.top.5') }}
                    </x-moonshine::link-button>
                </x-dashboard.modal-register>
            </x-moonshine.error>
        @endif
    </x-moonshine.box>

@endsection

@if(config("game.download.enableDownloadMenu", '0'))
    @include('panel.auth.dashboard.txt')
@endif