@extends('panel.layouts.base')

@section('title', __('panel/auth/luckyWheel.title'))
@section('seo_description', __('panel/auth/luckyWheel.description'))

@push('css')
    <link rel="stylesheet" href="{{ asset('wheel/wheel.css') }}?v={{ config('app.version') }}"/>
@endpush
<style>
    .item-list__item {
        background: #fff!important;
        box-shadow: 0 1px 4px -2px;
        max-width: 300px;
        margin-bottom: 0!important;
    }
    .wheel-result__brogress{
        background: #ffffff!important;
        border: 1px solid rgba(0, 0, 0, 0.32);
    }
    .wheel-result__brogress-bar{
        background: #2c6554!important;
    }
    .wheel{
        background: #ffffff!important;
        border: 4px solid #ebebeb!important;
        box-shadow: 0 0 15px #464646;
    }
    .dark .wheel{
        background: #3e4d70 !important;
        border: 4px solid #31487e !important;
    }
    .FFFF{
        background: #ffffff!important;
        border: 2px solid #ebebeb!important;
        box-shadow: 0px 0px 15px #464646;
        border-radius: 3px!important;
    }
    .dark .FFFF{
        background: #3e4d70 !important;
        border: 2px solid #31487e !important;
        color: rgba(255, 255, 255, 0.76) !important;
    }
    .item-list__items {
        justify-content: center!important;
        gap: 10px!important;
    }
    .dark .item-list__item{
        background: #2c3754 !important;
        box-shadow: 0 1px 1px -1px;
    }
</style>
@section('content.main')
    @if($items->isNotEmpty())
        <x-moonshine::box title="{{ __('panel/auth/luckyWheel.main.0') }}" icon="heroicons.gift">
            @if($items->count() >= 4)
                <div class="wheel-box p-10">
                    <div class="wheel-box__col">
                        <div class="wheel" data-item-count="@php echo count($items); @endphp"
                             id="wheel">
                            <div class="wheel__container">
                                @if ($items->isNotEmpty())
                                    @foreach($items as $item)
                                        @if($item->item_info)
                                            <div class="wheel__sector" data-item-id="{{ $item->id }}"
                                                 data-item-name="{{ $item->item_info->{"name_{$currentLang}"} ?? $item->item_info->name }}">
                                                <div class="wheel__item-icon">
                                                    <img
                                                        src="{{ $item->item_info->icon ? asset($item->item_info->icon) : asset($item->image ?? 'assets/panel/images/items/'.$item->item_info_id.'.jpg' ) }}"
                                                        alt="{{ $item->item_info->{"name_{$currentLang}"} ?? $item->item_info->name }}">
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                            </div>
                            <div class="wheel__update text-gray-50" id="wheel-update">

                            </div>
                        </div>
                        <div class="wheel-result">
                            @if(!$userHasBalance)
                                <p style="font-size: 12px;color: #ff0080">{{ !$userHasBalance ? __('panel/auth/luckyWheel.main.1', ['price' => $price, 'name' => config("game.donate.config.item.name_{$currentLang}")]) : ''}}</p>
                            @else
                                <div class="flex flex-col">
                                     <span style="border: none" class="mb-2">
                                         {{ __('panel/auth/luckyWheel.main.3') }}: {{ $price }} {{ config("game.donate.config.item.name_{$currentLang}", 'COL') }}
                                     </span>
                                    <x-moonshine::link-button type="button"
                                                              class="wheel-result__button wheel-result__button--show"
                                                              id="wheel-button">
                                        {{ __('panel/auth/luckyWheel.main.2') }}
                                    </x-moonshine::link-button>
                                </div>
                            @endif
                            <div class="wheel-result__reward" id="wheel-reward">
                                <div
                                    class="wheel-result__reward-desc text-gray-600 dark:text-gray-300">{{ __('panel/auth/luckyWheel.main.4') }}
                                    :
                                </div>
                                <div class="wheel-result__reward-name text-gray-700 dark:text-gray-200"></div>
                                <div style="display: flex;justify-content: center">
                                    <span class="text-gray-500"
                                          style="text-align: center;">{{ __('panel/auth/luckyWheel.main.11') }}</span>
                                </div>
                            </div>

                            <div class="wheel-result__processing" id="wheel-processing">
                                <div
                                    class="wheel-result__processing-text">{{ __('panel/auth/luckyWheel.main.5') }}
                                    ...
                                </div>
                                <div class="wheel-result__brogress">
                                    <div class="wheel-result__brogress-bar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wheel-box__col">
                        <div class="item-list">
                            <div class="item-list__title">{{ __('') }}</div>
                            <div class="item-list__items">
                                @if ($items->isNotEmpty())
                                    @foreach($items as $item)
                                        @if($item->item_info)
                                            <div class="item-list__item">
                                                <div class="item-list__item-icon">

                                                    <img style="cursor: pointer"
                                                         data-popover-target="item_description_{{ $item->id }}"
                                                         src="{{ $item->item_info->icon ? asset($item->item_info->icon) : asset($item->image ?? 'assets/panel/images/items/'.$item->item_info_id.'.jpg' ) }}"
                                                         alt="{{ $item->item_info->{"name_{$currentLang}"} }}">

                                                </div>
                                                <div class="item-list__item-info">
                                                    <div
                                                        class="item-list__item-name">{{ $item->item_info->{"name_{$currentLang}"} ?? $item->item_info->name }} {{ $item->item_info->crystal_type ? '|' . ($item->item_info->crystal_type == 'NO GRADE' ? '' : $item->item_info->crystal_type . '|') : '' }}
                                                        <span
                                                            style="color: #bd2121">x{{ $item->count }}</span> @if($item->item_ench)
                                                            <span
                                                                style="color: #077807"> +{{ $item->item_ench  }}</span>
                                                        @endif
                                                    </div>
                                                    <div
                                                        class="item-list__item-desc">{{ __('panel/auth/luckyWheel.main.6') }}
                                                        :
                                                        <span>{{ $item->chance }}%</span>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <p>Вы должны добавить предмет с ID: {{ $item->item_info_id }} в "Игровые Предметы"</p>
                                        @endif
                                    @endforeach
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
                <script src="{{ asset('wheel/wheel.js') }}?v=1"></script>

            @else
                <hr class="opacity-20 my-2">
                <p class="text-center">{{ __('panel/auth/luckyWheel.main.8') }}</p>
                <p class="text-center">{{ __('panel/auth/luckyWheel.main.9', ['count' => $items->count() ]) }}</p>
                <hr class="opacity-20 my-2">
            @endif

            @foreach($items as $item)
                @if($item->item_info)
                    <div style="width: 100%;max-width: fit-content"
                        data-popover id="item_description_{{ $item->id  }}" role="tooltip"
                        class="absolute z-50 p-2 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 FFFF">
                        <div class="text-xs ">
                            <p style="font-size: 14px;font-family: f2;font-weight: bold;" class="text-xs text-center pb-0">{{ $item->item_info->{"name_{$currentLang}"} ?? $item->item_info->name }} @if($item->item_info->crystal_type != 'NO GRADE') <span style="font-size: 8px;font-weight: 800;text-transform:uppercase;"> {{ '|' . $item->item_info->crystal_type. '|' }}</span> @endif</p>
                            <hr style="margin: 5px 0;opacity: .5">
                            @if($item->item_info->{"description_{$currentLang}"})
                                <span  style="font-size: 12px;font-family: f2;text-align: center">{!! $item->item_info->{"description_{$currentLang}"} ?? $item->item_info->description !!}</span>
                            @else
                                <p class="p-0">{{ __('panel/auth/luckyWheel.main.10') }}</p>
                            @endif
                        </div>
                        <div data-popper-arrow></div>
                    </div>
                    @endif
            @endforeach
        </x-moonshine::box>
    @else
        <x-moonshine.error title="{{ __('panel/auth/luckyWheel.main.13') }}"
                           text="{{ __('panel/auth/luckyWheel.main.14') }}"/>
    @endif
@endsection