wip chart in tab

resources/views/filament/pages/statistic.blade.php

@@ -1,2 +1,51 @@
 <x-filament-panels::page>
+    {{ $this->filtersForm }}
+
+    @livewire(\App\Filament\Widgets\StatsMedianAverage::class, ['filters' => $this->filters])
+
+    <div x-data="{ activeTab: 'tab1' }">
+        <!-- Tab Navigation -->
+        <x-filament::tabs label="Statistics" class="mb-6 justify-center gap-8">
+            <x-filament::tabs.item x-on:click="activeTab = 'tab1'" :alpine-active="'activeTab === \'' . 'tab1' . '\''" icon="phosphor-trophy">
+                Events
+            </x-filament::tabs.item>
+
+            <x-filament::tabs.item x-on:click="activeTab = 'tab2'" :alpine-active="'activeTab === \'' . 'tab2' . '\''" icon="phosphor-trophy">
+                Events Performance
+            </x-filament::tabs.item>
+
+            <x-filament::tabs.item x-on:click="activeTab = 'tab3'" :alpine-active="'activeTab === \'' . 'tab3' . '\''" icon="icon-player">
+                Player
+            </x-filament::tabs.item>
+
+            <x-filament::tabs.item x-on:click="activeTab = 'tab4'" :alpine-active="'activeTab === \'' . 'tab4' . '\''" icon="icon-player">
+                Player Performance
+            </x-filament::tabs.item>
+        </x-filament::tabs>
+
+        <!-- Tab Content -->
+        <div class="mt-6">
+            <!-- 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>
+
+            <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>
+        </div>
+    </div>
 </x-filament-panels::page>