@extends('panel.layouts.base')

@section('title',__('panel/general/donate.title'))
@section('seo_description', __('panel/general/donate.description'))
@push('css')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet"
          href="{{ asset('assets/panel/libs/ion-slider/css/ion.rangeSlider.css')}}?v={{ config('app.version') }}">
    <link rel="stylesheet"
          href="{{ asset('assets/panel/css/donate.css')}}?v={{ config('app.version') }}">
    <script
        src="{{ asset('assets/panel/libs/ion-slider/js/ion.rangeSlider.min.js')}}?v={{ config('app.version') }}"></script>
@endpush
<style>
    @media (max-width: 800px) {
        .irs-single{
            display: none!important;
        }
    }
</style>
@php
    $discountConfig = config('game.donate.config.discount');
    $bonusFrom = count($discountConfig) ? $discountConfig[0]['from'] : null;
    $percentage = count($discountConfig) ? $discountConfig[0]['percentage'] : null;
@endphp
@section('content.main')
    <x-moonshine::box title="{{ __('panel/general/donate.main.7') }}">
        <x-moonshine::grid>
            <x-moonshine::column col-span="6">
                <x-moonshine::box icon="heroicons.currency-dollar"
                                  title="{{ __('panel/general/donate.main.8') }}"
                                  class="box-donate">
                    <x-moonshine::form action="{{ route('donate.pay') }}">
                        <input type="hidden" name="discount" value="123">
                        @guest
                            <x-moonshine::form.input-wrapper label="{{ __('panel/general/donate.main.9') }}">
                                <x-moonshine::form.input id="recipient" name="char_name"
                                                         placeholder="{{ __('panel/general/donate.main.10') }}"/>
                            </x-moonshine::form.input-wrapper>
                        @endguest
                        <x-moonshine::form.input-wrapper label="{{ __('panel/general/donate.main.11') }}"
                                                         class="relative">
                            @if(config('cabinet.donate.config.discount_enabled'))
                                <div class="absolute" style="right: 0;top: -16px">
                                    <style>
                                        @media (max-width: 1023px) {
                                            .btn-discount {
                                                margin-top: 8px !important;
                                            }
                                        }
                                    </style>
                                    <x-moonshine.modal name="discountForm" async :asyncUrl="route('async-discount')"
                                                       auto
                                                       title="Купоны">
                                        <x-slot name="outerHtml">
                                            <button
                                                @click.prevent="toggleModal; document.body.classList.add('overflow-hidden')"
                                                class="btn btn-discount"
                                                style="margin-top: 4px;padding: 5px 10px!important;height: 34px;min-height: 34px">
                                                У меня есть купон
                                            </button>
                                        </x-slot>

                                    </x-moonshine.modal>
                                </div>
                            @endif
                            <x-moonshine::form.input type="number" name="count"
                                                     value="{{ config('game.donate.config.item.min') }}"
                                                     id="coin"
                                                     placeholder="{{ __('panel/general/donate.main.12') }}"/>
                            <x-moonshine::badge id="bonus_sum"
                                                style="top:38px; {{ $bonusSystemEnabled || $discountsSystemEnable ? '' : 'opacity: 0' }};"
                                                class="absolute end-2"></x-moonshine::badge>
                            <x-moonshine::form.input id="sum_slider"/>
                        </x-moonshine::form.input-wrapper>
                        <hr class="my-2">
                        <div id="bonus_items_container">

                        </div>
                        <div style="margin-bottom: 20px;">
                            @if($prices->isNotEmpty())
                                @foreach($prices as $currency => $price)
                                    <div class="flex items-center justify-between gap-2">
                                        <span style="font-size: 14px;width: 100px;font-weight: 600"
                                              class="text-gray-500">{{ __('panel/general/donate.main.13') }} {{ $currency }}</span>
                                        <span style="font-size: 14px;width: 210px;"
                                              class="text-gray-500 dark:text-gray-50">
                                {{ formatNumber($minSum) }} {{ $donateItemName }} = {{ number_format((float)($itemPrice * $price) * $minSum,2) }} {{ $currency }}
                                        </span>
                                        <span class="text-gray-500" style="width: 180px;text-align: end">
                                            {{ __('panel/general/donate.main.14') }}
                                            <span style="font-size: 14px;" id="sum_{{ $currency }}"> </span>
                                            {{ $currency }}
                                        </span>
                                    </div>
                                    <hr class="my-2">
                                @endforeach
                            @endif
                        </div>
                        <x-moonshine::box icon="heroicons.hand-raised" class="box-method"
                                          title="{{ __('panel/general/donate.main.15') }}">
                            @if(count($payment_methods))
                                <x-moonshine::grid class="grid-container flex-wrap">
                                    @php $countEnable = false @endphp
                                    @foreach($payment_methods as $method => $param)
                                        @if($param['enable'])
                                            @php $countEnable = true; @endphp
                                            <x-moonshine::column col-span="4" class="text-center grid-item">
                                                <x-moonshine::popover placement="bottom">
                                                    <x-slot:trigger>
                                                        @if($method == "betatransfer")
                                                            <x-moonshine.modal id="c_ddd" name="c_ddd" auto
                                                                               title="{{ __('panel/general/donate.main.58') }}">
                                                                <div class="flex flex-col gap-2">
                                                                    <x-moonshine::form.button
                                                                        @click.stop="selectCurrency('rub');open=false; document.body.classList.remove('overflow-hidden')"
                                                                        class="w-full currency-button"
                                                                        data-currency="rub">РУБ
                                                                    </x-moonshine::form.button>
                                                                    <x-moonshine::form.button
                                                                        @click.stop="selectCurrency('uah');open=false; document.body.classList.remove('overflow-hidden')"
                                                                        class="w-full currency-button"
                                                                        data-currency="uah">ГРН
                                                                    </x-moonshine::form.button>
                                                                    <x-moonshine::form.button
                                                                        @click.stop="selectCurrency('usd');open=false; document.body.classList.remove('overflow-hidden')"
                                                                        class="w-full currency-button"
                                                                        data-currency="usd">USD
                                                                    </x-moonshine::form.button>
                                                                </div>
                                                                <x-slot name="outerHtml">
                                                                    <input type="hidden" name="currency" id="currency">
                                                                    <label @click.prevent="toggleModal"
                                                                           for="payment_{{ $method }}">
                                                                        <x-moonshine::form.input
                                                                            id="payment_{{ $method }}"
                                                                            name="payment_method"
                                                                            type="radio" value="{{ $method }}"
                                                                            :checked="config('game.donate.config.default_pay') == $method"
                                                                            style="display: none;"/>
                                                                        <img
                                                                            src="{{ asset("assets/panel/images/payments/{$method}.png") }}"
                                                                            alt="{{ $method }}"
                                                                            class="payment-img"/>
                                                                    </label>
                                                                </x-slot>
                                                            </x-moonshine.modal>
                                                            <script>
                                                                document.addEventListener('DOMContentLoaded', () => {
                                                                    window.selectCurrency = (currency) => {
                                                                        const modal = document.getElementById('c_ddd');
                                                                        if (modal) {
                                                                            modal.classList.remove('open');
                                                                            document.body.classList.remove('overflow-hidden');
                                                                        }
                                                                        const currencyInput = document.getElementById('currency');
                                                                        if (currencyInput) {
                                                                            currencyInput.value = currency;
                                                                        }
                                                                        const radioInput = document.querySelector(`input[type="radio"][value="{{ $method }}"]`);
                                                                        if (radioInput) {
                                                                            radioInput.checked = true;
                                                                        }
                                                                    };
                                                                });
                                                            </script>
                                                        @else
                                                            <label for="payment_{{ $method }}">
                                                                <x-moonshine::form.input id="payment_{{ $method }}"
                                                                                         name="payment_method"
                                                                                         type="radio"
                                                                                         value="{{ $method }}"
                                                                                         :checked="config('game.donate.config.default_pay') == $method"
                                                                                         style="display: none;"/>
                                                                <img
                                                                    src="{{ asset("assets/panel/images/payments/{$method}.png") }}"
                                                                    alt="{{ $method }}"
                                                                    class="payment-img"/>
                                                            </label>
                                                        @endif
                                                    </x-slot:trigger>
                                                    {{ $param["description_{$currentLang}"] }}
                                                </x-moonshine::popover>
                                            </x-moonshine::column>
                                        @endif
                                    @endforeach
                                </x-moonshine::grid>
                                @if(!$countEnable)
                                    <div class="w-full text-center">
                                        <p>{{ __('panel/general/donate.main.36') }}</p>
                                    </div>
                                @endif
                            @else
                                <div class="w-full text-center">
                                    <p>{{ __('panel/general/donate.main.36') }}</p>
                                </div>
                            @endif
                        </x-moonshine::box>
                        <x-recaptcha.recaptcha class="mt-3"/>
                        <x-slot:buttons>
                            <x-moonshine::form.button type="submit" class="w-full">
                                {{ __('panel/general/donate.main.16') }}
                            </x-moonshine::form.button>
                        </x-slot:buttons>
                    </x-moonshine::form>
                    @if(config("game.donate.donate_icon.message_{$currentLang}"))
                        <hr>
                        <div style="margin-bottom: -5px;">
                            {!! config("game.donate.donate_icon.message_{$currentLang}") !!}
                        </div>
                    @endif
                </x-moonshine::box>
            </x-moonshine::column>

            <x-moonshine::column col-span="6">
                <x-moonshine::box icon="heroicons.gift"
                                  title="{{ __('panel/general/donate.main.17') }}"
                                  class="box-donate">
                    <div class="flex justify-center">
                        <div>
                           <span class="flex items-center gap-2">{{ __('panel/general/donate.main.18') }} <img
                                   class="w-6 h-6" style="box-shadow: 0 0 5px 0 #fff"
                                   src="{{ $donateIcon }}"
                                   alt="{{ $donateItemName }}">
                               {{ $donateItemName }} = {{ $currencyForLocation }}
                           </span>
                        </div>
                    </div>
                    <hr>
                    @if($bonusSystemEnabled)
                        <x-moonshine::collapse title="{{ __('panel/general/donate.main.19') }}"
                                               icon="heroicons.gift-top">
                            <div class="block-content" style="padding: 0 10px 0 20px; line-height: 23px;">
                                <hr class="my-1">
                                <b class="text-success">{{ __('panel/general/donate.main.20') }}</b>
                                <hr class="my-1">
                                <ul class="main_li_donate">
                                    <li>{{ __('panel/general/donate.main.21') }}{{ $bonusFrom }}
                                        {{ $donateItemName }} {{ __('panel/general/donate.main.22') }}
                                        +{{ $percentage }}
                                        % {{ __('panel/general/donate.main.23') }}</li>
                                    <li>{{ __('panel/general/donate.main.24') }}</li>
                                    <li>{{ __('panel/general/donate.main.25') }} {{ $bonusFrom }} {{ $donateItemName }}</li>
                                    <li><span
                                            style="color:#d23118;">{{ __('panel/general/donate.main.26') }}{{ $percentage }}%</span>{{ __('panel/general/donate.main.27') }}{{ $bonusFrom }} {{ $donateItemName }}
                                        * {{ $percentage }}% = <span
                                            style="color:#d23118;">{{ floor($bonusFrom * $percentage / 100) }} {{ $donateItemName }}</span>
                                    </li>
                                    <li><b>{{ __('panel/general/donate.main.28') }}<span
                                                style="color:#d23118;">{{ floor($bonusFrom + ($bonusFrom * $percentage / 100)) }} {{ $donateItemName }}</span></b>
                                    </li>
                                </ul>
                            </div>
                        </x-moonshine::collapse>
                        <hr>
                    @endif
                    @if(config('cabinet.donate.discountSystem.discount_system_enabled') && auth()->user())

                        <x-moonshine::collapse title="{{ __('panel/general/donate.main.29') }}"
                                               icon="heroicons.face-smile">

                            @if($myBonus)
                                <span class="text-xs uppercase text-center block text-secondary">
                                {{ __('panel/general/donate.main.45') }} +{{ $myBonus }}%
                            </span>
                                <hr class="my-1">
                            @else
                                <span class="text-xs uppercase text-center block text-secondary">
                                {{ __('panel/general/donate.main.46') }}
                            </span>
                                <hr class="my-1">
                            @endif
                            <ul class="main_li_donate px-4">
                                <li>{{ __('panel/general/donate.main.47') }}</li>
                                <li>{{ __('panel/general/donate.main.48') }}</li>
                                <li>
                                    {{ __('panel/general/donate.main.49') }}
                                </li>
                                <hr class="my-1">
                                <span class="font-bold">{{ __('panel/general/donate.main.50') }}</span>
                                <hr class="my-1">
                                <li>{{ __('panel/general/donate.main.51') }}</li>
                                <li>{{ __('panel/general/donate.main.52', ['from' => config('cabinet.donate.discountSystem.discount.0.from'), 'name' => $donateItemName]) }}</li>
                                <li>{{ __('panel/general/donate.main.53', ['count' => config('cabinet.donate.discountSystem.discount.0.percentage')]) }}%</li>
                                <li>
                                    {{ __('panel/general/donate.main.54', ['count' => config('cabinet.donate.discountSystem.discount.0.percentage')]) }}
                                </li>
                            </ul>
                            @if($discountsSystemEnable)
                                <hr class="my-1">
                                <x-moonshine::table>
                                    @slot('thead')
                                        <th>{{ __('panel/general/donate.main.55') }}</th>
                                        <th>{{ __('panel/general/donate.main.56') }}</th>
                                    @endslot
                                    @slot('tbody')
                                        @if($discountsSystem)
                                            @foreach($discountsSystem as $discount)
                                                <tr>
                                                    <td class="flex items-center gap-2">
                                                        {{ __('panel/general/donate.main.32') }}
                                                        <span class="flex items-center gap-2" style="width: 110px">
                                            <img class="w-6 h-6" style="box-shadow: 0 0 5px 0 #fff"
                                                 src="{{ $donateIcon }}"
                                                 alt="{{ $donateItemName }}">
                                            {{ formatNumber($discount['from']) }}
                                        </span>
                                                        <x-moonshine::badge>{{ $donateItemName }}</x-moonshine::badge>
                                                    </td>
                                                    <td>+{{ $discount['percentage'] }}%</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    @endslot
                                </x-moonshine::table>
                                    <hr class="my-1">
                                    <span class="text-xs uppercase text-center block text-secondary">
                                    {{ __('panel/general/donate.main.57') }} {{ $user?->general_count_donate ?? 0 }}
                                </span>
                                    <hr class="my-1">
                            @endif

                        </x-moonshine::collapse>
                        <hr>
                    @endif
                    @if($bonusSystemEnabled)
                        <x-moonshine::table>
                            @slot('thead')
                                <th>{{ __('panel/general/donate.main.30') }}</th>
                                <th>{{ __('panel/general/donate.main.31') }}</th>
                            @endslot
                            @slot('tbody')
                                @if($discounts)
                                    @foreach($discounts as $discount)
                                        <tr>
                                            <td class="flex items-center gap-2">
                                                {{ __('panel/general/donate.main.32') }}
                                                <span class="flex items-center gap-2" style="width: 110px">
                                            <img class="w-6 h-6" style="box-shadow: 0 0 5px 0 #fff"
                                                 src="{{ $donateIcon }}"
                                                 alt="{{ $donateItemName }}">
                                            {{ formatNumber($discount['from']) }}
                                        </span>
                                                <span class="donate-bns px-2">{{ $donateItemName }}</span>
                                            </td>
                                            <td>+{{ $discount['percentage'] }}%</td>
                                        </tr>
                                    @endforeach
                                @endif
                            @endslot
                        </x-moonshine::table>
                        <hr>
                    @endif
                    @auth()
                        <x-moonshine::collapse title="{{ __('panel/general/donate.main.42') }}"
                                               icon="heroicons.pencil-square">
                            <div class="block-content">
                                @if($payment_histories->isNotEmpty())
                                    <x-moonshine::table>
                                        @slot('thead')
                                            <th>{{ __('panel/general/donate.main.37') }}</th>
                                            <th>{{ __('panel/general/donate.main.38') }}</th>
                                            <th>{{ __('panel/general/donate.main.39') }}</th>
                                            <th>{{ __('panel/general/donate.main.40') }}</th>
                                            <th>{{ __('panel/general/donate.main.41') }}</th>
                                            <th>{{ __('panel/general/donate.main.44') }}</th>
                                        @endslot
                                        @slot('tbody')
                                            @foreach($payment_histories as $payment)
                                                <tr>
                                                    <td style="padding: 3px 5px">{{ $payment->server->rate }}</td>
                                                    <td style="padding: 3px 5px">{{ formatNumber($payment->sum)}} <span style="font-size: 10px;text-transform:uppercase;">{{ $payment->currency }}</span></td>
                                                    <td style="padding: 3px 5px">{{ formatNumber($payment->count) }}</td>
                                                    <td style="padding: 3px 5px">{{ $payment->bonus }}</td>
                                                    <td style="padding: 3px 5px">{{ $payment->method }}</td>
                                                    <td style="padding: 3px 5px">{{ $payment->created_at->format('Y-m-d H:i') }}</td>
                                                </tr>
                                            @endforeach
                                        @endslot
                                    </x-moonshine::table>
                                @else
                                    <p class="text-center">{{ __('panel/general/donate.main.43') }}</p>
                                @endif
                            </div>
                        </x-moonshine::collapse>
                        <hr class="my-1">
                    @endauth
                </x-moonshine::box>
            </x-moonshine::column>
        </x-moonshine::grid>
    </x-moonshine::box>
    @include('panel.general.donate.scripts', [
    'bonusItems' => $bonusItems,
    'myBonus' => $myBonus,
    'discountsSystem' => $discountsSystem,
    'discountsSystemEnable' => $discountsSystemEnable
    ])

@endsection