@extends('panel.layouts.base')

@section('seo_description', __('panel/auth/inventory.description'))
@section('title',__('panel/auth/inventory.title',['userName' => $user->name]))
<style>
    .inventories {
        box-shadow: 0 0 5px 1px #000;
    }

    :is(.dark .inventories) {
        background: #272d45;
        padding: 0 10px;
    }
</style>
@section('content.main')
    @if($items->isNotEmpty())
        <x-moonshine::box icon="heroicons.shopping-bag" title="{{ __('panel/auth/inventory.main.21') }}">
            <x-moonshine::table class="rounded-lg inventories">
                @slot('thead')
                    <th>№</th>
                    <th>{{ __('panel/auth/inventory.main.17') }}</th>
                    <th>{{ __('panel/auth/inventory.main.18') }}</th>
                    <th>{{ __('panel/auth/inventory.main.19') }}</th>
                    <th>{{ __('panel/auth/inventory.main.20') }}</th>
                    <th></th>
                @endslot
                @slot('tbody')
                    @foreach($items as $item)
                        @php($itemName = $item->{"item_name_{$currentLang}"})
                        <tr style="    box-shadow: 0 0 8px -5px #000;">
                            <td>{{ $loop->iteration }}</td>
                            <td class="flex items-center gap-2">
                                <img class="w-6 h-6" style="box-shadow: 0 0 7px -2px #353030;"
                                     src="{{ !empty($item->item_icon) ? asset($item->item_icon) : (asset("assets/panel/images/items/none.jpg")) }}"
                                     alt="{{ $itemName }}"/>
                                {{ $itemName }}
                            </td>
                            <td>{{ $item->item_ench }}</td>
                            <td>{{ $item->item_count }}</td>
                            <td style="padding: 5px">
                                <x-moonshine.modal id="f-transf-item" async
                                                    :asyncUrl="route('async-inventory-transfer', ['item' => $item->id ] )" auto
                                                    :title="$itemName">

                                    <x-slot name="outerHtml">
                                        <x-moonshine::link-button icon="heroicons.arrows-up-down"
                                                                  @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')">
                                            {{ __('panel/auth/inventory.main.22') }}
                                        </x-moonshine::link-button>
                                    </x-slot>

                                </x-moonshine.modal>
                            </td>
                            <td>
                                <x-moonshine.modal auto :title="__('panel/auth/inventory.main.23')">
                                    <div class="mb-4"  style="min-width: 300px;">
                                        <span class="font-bold text-center">{{ __('panel/auth/inventory.main.24') }}</span>
                                        <hr class="my-1">
                                         {{ __('panel/auth/inventory.main.25') }} <span class="font-bold">{{ $itemName }}</span>
                                        <hr class="my-1">
                                          {{ __('panel/auth/inventory.main.26') }}<span class="font-bold">{{ $item->item_count }}</span>
                                        <hr class="my-1">
                                    </div>
                                    <div class="w-full flex items-center justify-between gap-2">
                                        <x-moonshine::link-button href="{{ route('inventory.delete', $item->id) }}" class="btn-error opacity-50" style="width: 50%;">{{ __('panel/auth/inventory.main.27') }}</x-moonshine::link-button>
                                        <x-moonshine::link-button @click.stop="open=false; document.body.classList.remove('overflow-hidden')" aria-label="Close" style="width: 50%;">{{ __('panel/auth/inventory.main.28') }}</x-moonshine::link-button>
                                    </div>

                                    <x-slot name="outerHtml">
                                        <button type="button" @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')"
                                                class="contents text-red-700 hover:text-primary opacity-40" >
                                            <x-moonshine::icon icon="heroicons.x-mark" />
                                        </button>
                                    </x-slot>

                                </x-moonshine.modal>
                            </td>
                        </tr>
                    @endforeach
                @endslot
            </x-moonshine::table>
        </x-moonshine::box>
    @else
        <x-moonshine.error title="{{ __('panel/auth/inventory.main.29') }}" text="{{ __('panel/auth/inventory.main.30') }}"/>
    @endif
@endsection