@if($raidBosses->isNotEmpty())
    <div class="flex max-w-xs relative">
        <x-moonshine::form.input-wrapper>
            <x-moonshine::form.input id="bossId" placeholder="Введите имя или уровень босса"/>
        </x-moonshine::form.input-wrapper>
        <x-moonshine::link-button class="mt-2 absolute" style="right: 0;top:-8px" type="button" id="searchButton"> Поиск </x-moonshine::link-button>
    </div>
    <x-moonshine::table>
        @slot('thead')
            <th>№</th>
            <th>Имя</th>
            <th>Убийца</th>
            <th>Время</th>
        @endslot
        @slot('tbody')
            @foreach($raidBosses as $boss)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ $boss['boss_name'] }}</td>
                    <td class="flex items-center gap-2">
                        @if($boss['killer_name'])
                            <img class="rounded-full w-10 h-10"
                                 src="{{ $boss['killer_image'] }}"
                                 alt="{{ $boss['killer_name'] }}">

                            <div class="flex items-center gap-1">
                                <div class="flex items-center">
                                    {!! showCrest($boss['alliance_crest']) !!}
                                    {!! showCrest($boss['clan_crest']) !!}
                                </div>
                                {{ $boss['killer_name'] }}
                            </div>
                        @else
                            -
                        @endif
                    </td>
                    <td>{{ $boss['kill_time'] }}</td>
                </tr>
            @endforeach
        @endslot
    </x-moonshine::table>

    <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>

    <script>
        $(document).ready(function() {
            // Обработчик клика по кнопке
            $('#searchButton').click(function() {
                sendRequest();
            });

            // Обработчик нажатия клавиши Enter
            $('#bossId').keypress(function(e) {
                if (e.which == 13) { // Код клавиши Enter
                    e.preventDefault(); // Предотвращаем стандартное действие
                    sendRequest();
                }
            });

            function sendRequest() {
                var bossId = $('#bossId').val(); // Получаем ID, введенный пользователем

                // Показываем лоадер
                $('#loader').show();  // Убедитесь, что у вашего лоадера есть id="loader"

                $.ajax({
                    url: '{{ route('async-bosss') }}',  // Убедитесь, что здесь правильный маршрут
                    method: 'GET',
                    data: { name: bossId },  // Передаем ID в запросе
                    success: function(response) {
                        // Прячем лоадер
                        $('#loader').hide();

                        // Если в ответе есть данные, обновляем таблицу
                        if (response.length > 0) {
                            var tbodyHtml = '';
                            response.forEach(function(boss, index) {
                                tbodyHtml += '<tr>';
                                tbodyHtml += '<td>' + (index + 1) + '</td>';
                                tbodyHtml += '<td>' + boss.boss_name + '</td>';
                                tbodyHtml += '<td class="flex items-center gap-2">';

                                if (boss.killer_name) {
                                    tbodyHtml += '<img class="rounded-full w-10 h-10" src="' + boss.killer_image + '" alt="' + boss.killer_name + '">';
                                    tbodyHtml += '<div class="flex items-center gap-1">';
                                    tbodyHtml += '<div class="flex items-center">';

                                    // Исправленный синтаксис для изображений клана и альянса
                                    tbodyHtml += boss.clan_crest ? '<img src="data:image/png;base64,' + boss.clan_crest + '" alt="Clan Crest">' : '';
                                    tbodyHtml += boss.alliance_crest ? '<img src="data:image/png;base64,' + boss.alliance_crest + '" alt="Alliance Crest">' : '';

                                    tbodyHtml += '</div>';
                                    tbodyHtml += boss.killer_name + '</div>';
                                } else {
                                    tbodyHtml += '-';
                                }

                                tbodyHtml += '</td>';
                                tbodyHtml += '<td>' + boss.kill_time + '</td>';
                                tbodyHtml += '</tr>';
                            });

                            // Обновляем тело таблицы
                            $('table tbody').html(tbodyHtml);
                        } else {
                            $('table tbody').html('<tr><td colspan="5">Босс не найден!</td></tr>');
                        }
                    },
                    error: function() {
                        // Прячем лоадер
                        $('#loader').hide();

                        $('table tbody').html('<tr><td colspan="5">Ошибка при получении данных!</td></tr>');
                    }
                });
            }
        });
    </script>


@else
        <x-moonshine.error title="{{ __('panel/general/rating.rating_disable_title') }}" text="{{ __('panel/general/rating.rating_disable_text') }}"/>
@endif