@extends('panel.layouts.base')

@section('title',__('panel/general/store.title'))
@section('seo_description', __('panel/general/store.description'))
@push('css')
    <link rel="stylesheet"
          href="{{ asset('assets/panel/css/shop.css')}}?v={{ config('app.version') }}">
@endpush
@section('content.main')
    @if($products->isNotEmpty())
        <x-moonshine::box icon="heroicons.gift" title="{{ __('panel/general/store.main.0') }}">
            <x-moonshine::grid>
                @foreach($products as $product)
                    @php($title = $product->{"title_{$currentLang}"})
                    @php($price = $product->price)

                    <x-moonshine::column col-span="4" class="sm:col-span-12 md:col-span-6 xl:col-span-6 2xl:col-span-4">
                        <x-moonshine::box icon="heroicons.gift-top"
                                          :title="$title"
                                          class="box-donate">
                            <div class="table_cards" id="table_cards">
                                <div class="flip_card">
                                    <div class="flip_card_face">
                                        <div class="card_pic card_pic1">
                                            <img src="{{ asset('assets/panel/images/cardframe.png') }}"
                                                 class="card_frame">
                                            <img src="{{ asset('assets/panel/images/dots.png') }}" class="dotslinel">
                                            <img src="{{ asset('assets/panel/images/dots.png') }}" class="dotsliner">
                                            <div class="relative">
                                                <img style="width: 380px;height: 257px;"
                                                     src="{{ asset( $product->image ) }}" alt="">
                                                <h3 class="flip_card_title text-gray-50 absolute"
                                                    style="
                                                 transform: translateX(-50%);
                                                 top: 50%;
                                                 left: 50%;
                                                 font-size: 18px;
                                                 line-height: 1;
                                                 width: 100%;
                                                 padding: 10px;
                                                 background: rgba(0,0,0,0.41);
                                                 ">
                                                    {{ $title }}
                                                    <hr class="my-2" style="color: #ffff">
                                                    <span style="font-size: 15px;"
                                                          class="text-gray-200">{!! $product->{"description_{$currentLang}"} !!}</span>
                                                </h3>
                                                <x-moonshine::link-button icon="heroicons.book-open"
                                                                          style="position: absolute;top: 235px;"
                                                                          class="w-full btn-primary mb-2">
                                                    {{ __('panel/general/store.main.1') }}
                                                </x-moonshine::link-button>
                                            </div>
                                            <x-moonshine::badge color="primary" class="absolute z-4 top-8 end-8">
                                                {{ $price }} {{ config("game.donate.config.item.name_{$currentLang}") }}
                                            </x-moonshine::badge>
                                        </div>

                                    </div>

                                    <div class="flip_card_back">
                                        <img src="{{ asset('assets/panel/images/cardframew.png') }}"
                                             class="card_frame">
                                        <img src="{{ asset('assets/panel/images/dotsw.png') }}" class="dotslinel">
                                        <img src="{{ asset('assets/panel/images/dotsw.png') }}" class="dotsliner">
                                        <div class="flip_card_text text-gray-50">
                                            <p class="mt-2">
                                            <div class="w-full" style="width: 380px;">
                                                <div class="p-3 rounded-lg scroll-container"

                                                     id="scrollContainer"
                                                     style="border: 1px dashed rgba(255,255,255,0.2);margin-top: 10px;">
                                                    <div class="row border-bottom text-center">
                                                        <div>{{ __('panel/general/store.main.2') }} '{{ $title }}'</div>
                                                    </div>
                                                    <hr class="my-2">
                                                    <div class="relative" style="height: 170px;overflow-x: auto">
                                                        @if($product->items->isNotEmpty())
                                                            @foreach($product->items as $item)
                                                                @if($item->item_info)
                                                                    <div
                                                                        class="flex items-center gap-2 justify-between mx-2">
                                                                        <div class="flex items-center gap-2"
                                                                             style="font-size: 16px;font-family: farCry;">
                                                                            <img class="rounded-lg"
                                                                                 src="{{ $item->item_info?->icon ? asset($item->item_info->icon) : asset("assets/panel/images/items/{$item->item_info->id}.jpg") }}"
                                                                                 alt="{{ $item->item_info->{"name_{$currentLang}"} ?? $item->item_info->name }}"
                                                                                 width="25px">
                                                                            {{ $item->item_info->{"name_{$currentLang}"} ?? $item->item_info->name }}
                                                                        </div>
                                                                        <div style="font-size: 16px;">
                                                                            <span class="pull-right">
                                                                                <span
                                                                                    style="font-size: 12px;text-transform:uppercase;color: #a36f11;font-weight: 600;font-family: farCry;">
                                                                                    {{ __('panel/general/store.main.3') }}
                                                                                </span>
                                                                                <span style="color: #fff">{{ $item->count }}</span>
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                @else
                                                                    <p>Добавьте предметы с ID:{{ $item->item_info_id }} в 'Игровые Предметы'</p>
                                                                @endif

                                                                @if(!$loop->last)
                                                                    <hr class="my-2 opacity-50">
                                                                @endif
                                                            @endforeach
                                                        @else
                                                            <div class="w-full mx-auto text-center mt-14">
                                                                <span>{{ __('panel/general/store.main.4') }}</span>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            <x-moonshine.modal auto title="{{$title}}">
                                                <div>
                                                    <div class="my-4">
                                                        <p style="text-align: center">{{ __('panel/general/store.main.5') }}
                                                            <br> "{{$title}}" ?</p>
                                                        <span
                                                            class="text-gray-400 text-center text-xs">{{ __('panel/general/store.main.6') }} {{ $price }} {{ config("game.donate.config.item.name_{$currentLang}") }}</span>
                                                    </div>
                                                    <hr>
                                                    <div class="flex items-center gap-2">
                                                        <x-moonshine::link-button
                                                            class="relative btn-secondary mb-2 w-full"
                                                            href="{{ route('donate.store',$product->id) }}">
                                                            {{ __('panel/general/store.main.7') }}
                                                        </x-moonshine::link-button>
                                                        <x-moonshine::link-button class="relative btn-close mb-2 w-full"
                                                                                  @click.prevent="toggleModal">
                                                            {{ __('panel/general/store.main.8') }}
                                                        </x-moonshine::link-button>
                                                    </div>
                                                </div>
                                                <x-slot name="outerHtml">
                                                    @if($product->items->isNotEmpty())
                                                        @auth()
                                                            <x-moonshine::link-button
                                                                class="relative btn-secondary mb-2 w-full"
                                                                href="{{ route('donate.store',$product->id) }}"
                                                                @click.prevent="toggleModal">
                                                                {{ __('panel/general/store.main.7') }}
                                                            </x-moonshine::link-button>
                                                        @elseguest()
                                                            <x-moonshine::link-button href="{{ route('login') }}"
                                                                class="relative btn-secondary mb-2 w-full">
                                                                {{ __('panel/general/store.main.11') }}
                                                            </x-moonshine::link-button>
                                                        @endguest
                                                    @endif
                                                </x-slot>
                                            </x-moonshine.modal>
                                        </div>

                                    </div>
                                </div>
                                <svg class="svg_clip">
                                    <clipPath id="clip-polygon" clipPathUnits="objectBoundingBox">
                                        <path
                                            d="M0.001,0.076 L0.001,0.924 C0.03,0.927,0.053,0.96,0.055,1 H0.947 C0.949,0.96,0.972,0.927,1,0.924 V0.076 C0.972,0.073,0.949,0.04,0.947,0 L0.055,0 C0.053,0.04,0.03,0.073,0.001,0.076">
                                        </path>
                                    </clipPath>
                                </svg>
                            </div>
                        </x-moonshine::box>
                    </x-moonshine::column>

                @endforeach

            </x-moonshine::grid>
        </x-moonshine::box>
    @else
        <x-moonshine.error title="{{ __('panel/general/store.main.9') }}"
                           text="{{ __('panel/general/store.main.10') }}"/>
    @endif
@endsection