@php
    $player_name = App\Models\StatistikoDetail::where('ss_player_id', (int) $this->filters['ss_player_id'])->value(
        'player_name',
    );
@endphp
<x-filament-panels::page class="gap-0">

    <script>
        window.addEventListener('reset-tab', () => {
            if (Alpine.$data(document.querySelector('#charttabs')).activeTab == 'tab3' ||
                Alpine.$data(document.querySelector('#charttabs')).activeTab == 'tab4') {
                Alpine.$data(document.querySelector('#charttabs')).activeTab = 'tab1';
            }
        });
    </script>

    {{ $this->filtersForm }}

    @livewire(\App\Filament\Widgets\BoxesBettypeAll::class, ['filters' => $this->filters])

    <div x-data="{ activeTab: 'tab1' }" id="charttabs">
        <!-- Tab Navigation -->
        <x-filament::tabs label="Statistics" class="mb-4 justify-center rounded-lg grid grid-cols-2 md:grid-cols-4">
            <x-filament::tabs.item x-on:click="activeTab = 'tab1'" :alpine-active="'activeTab === \'' . 'tab1' . '\''">
                Events
            </x-filament::tabs.item>

            <x-filament::tabs.item x-on:click="activeTab = 'tab2'" :alpine-active="'activeTab === \'' . 'tab2' . '\''">
                Events Performance
            </x-filament::tabs.item>

            @if ($player_name)
                <x-filament::tabs.item x-on:click="activeTab = 'tab3'" :alpine-active="'activeTab === \'' . 'tab3' . '\''">
                    {{ $player_name }}
                </x-filament::tabs.item>

                <x-filament::tabs.item x-on:click="activeTab = 'tab4'" :alpine-active="'activeTab === \'' . 'tab4' . '\''">
                    {{ $player_name }} Performance
                </x-filament::tabs.item>
            @endif

        </x-filament::tabs>


        <!-- Tab Content -->
        <div class="mt-2">
            <!-- Content for Tab 1 -->
            <div x-show="activeTab === 'tab1'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @livewire(\App\Filament\Widgets\ChartEvent::class, ['filters' => $this->filters])
                @livewire(\App\Filament\Widgets\ChartEventMoAv::class, ['filters' => $this->filters])
            </div>

            <!-- Content for Tab 2 -->
            <div x-show="activeTab === 'tab2'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @livewire(\App\Filament\Widgets\ChartEventPerf::class, ['filters' => $this->filters])
                @livewire(\App\Filament\Widgets\ChartEventPerfMoAv::class, ['filters' => $this->filters])
            </div>

            @if ($player_name)
                <div x-show="activeTab === 'tab3'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @livewire(\App\Filament\Widgets\ChartPlayer::class, ['filters' => $this->filters])
                    @livewire(\App\Filament\Widgets\ChartPlayerMoAv::class, ['filters' => $this->filters])
                </div>

                <div x-show="activeTab === 'tab4'" x-cloak class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @livewire(\App\Filament\Widgets\ChartPlayerPerf::class, ['filters' => $this->filters])
                    @livewire(\App\Filament\Widgets\ChartPlayerPerfMoAv::class, ['filters' => $this->filters])
                </div>
            @endif
        </div>
    </div>
</x-filament-panels::page>