@extends('layouts.app')

@php use App\Services\Translator; @endphp

@section('title', Translator::league($league['name'] ?? '', $country['name'] ?? null) . ' - ' . __('messages.app_name'))
@section('description', (Translator::league($league['name'] ?? '', $country['name'] ?? null)) . ' - ' . __('messages.league_meta_description'))
@section('og_image', $league['logo'] ?? asset('images/logosportirak.png'))

@section('content')
@php
    $lang = app()->getLocale();
    $leagueName = Translator::league($league['name'] ?? '', $country['name'] ?? null);

    /**
     * Format round name to short form like Flutter does (e.g. "Regular Season - 15" → "الجولة 15" or "Journée 15")
     */
    $formatRound = function(?string $round) use ($lang) {
        if (!$round) return '';
        if (preg_match('/(\d+)/', $round, $m)) {
            $num = $m[1];
            if ($lang === 'ar') return "الجولة {$num}";
            if ($lang === 'fr') return "Journée {$num}";
            return "Round {$num}";
        }
        return $round;
    };

    /**
     * Get rank color based on position description (Champions League, Europa, Relegation, etc)
     */
    $getRankColor = function(?string $description): string {
        if (!$description) return 'transparent';
        $d = strtolower($description);
        if (str_contains($d, 'champions league') || str_contains($d, 'promotion')) return '#1A8D48';
        if (str_contains($d, 'europa league')) return '#E67E22';
        if (str_contains($d, 'conference league')) return '#3498DB';
        if (str_contains($d, 'relegation')) return '#E74C3C';
        return 'transparent';
    };

    /**
     * Translate rank description
     */
    $translateDescription = function(?string $desc) use ($lang) {
        if (!$desc) return '';
        $d = strtolower($desc);
        if ($lang === 'ar') {
            if (str_contains($d, 'champions league')) return 'دوري الأبطال';
            if (str_contains($d, 'europa league')) return 'الدوري الأوروبي';
            if (str_contains($d, 'conference league')) return 'دوري المؤتمر';
            if (str_contains($d, 'relegation')) return 'الهبوط';
            if (str_contains($d, 'promotion')) return 'الصعود';
        } elseif ($lang === 'fr') {
            if (str_contains($d, 'champions league')) return 'Ligue des Champions';
            if (str_contains($d, 'europa league')) return 'Ligue Europa';
            if (str_contains($d, 'conference league')) return 'Ligue Conférence';
            if (str_contains($d, 'relegation')) return 'Relégation';
            if (str_contains($d, 'promotion')) return 'Promotion';
        }
        return $desc;
    };

    // Prepare finished matches (most recent first — sort by fixture date desc)
    $finishedMatches = collect($lastFixtures)
        ->sortByDesc(fn($m) => $m['fixture']['date'] ?? '')
        ->values()
        ->all();

    // Build legend (unique descriptions with colors)
    $legend = [];
    foreach ($standings as $group) {
        foreach ($group as $row) {
            $desc = $row['description'] ?? '';
            if ($desc) {
                $color = $getRankColor($desc);
                if ($color !== 'transparent' && !isset($legend[$desc])) {
                    $legend[$desc] = $color;
                }
            }
        }
    }
@endphp

<div class="bg-[#F8F9FD] dark:bg-darkBg min-h-screen">

    {{-- ===== HEADER (Sliver style with background image) ===== --}}
    <div class="relative" style="height: 200px; background-image: url('{{ asset('images/background22.png') }}'); background-size: cover; background-position: center;">
        {{-- White overlay 15% --}}
        <div class="absolute inset-0 bg-white/15"></div>

        {{-- Top bar: back + favorite + share --}}
        <div class="absolute top-0 left-0 right-0 flex items-center justify-between px-2 pt-3 z-10">
            {{-- Back button --}}
            <button type="button" onclick="if(history.length>1){history.back()}else{location.href='{{ route('home') }}'}" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-black/10" aria-label="Back">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-black/70 {{ $lang === 'ar' ? 'rotate-180' : '' }}">
                    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                </svg>
            </button>

            {{-- Actions: favorite + share --}}
            <div class="flex items-center gap-1">
                <button type="button" id="league-fav-btn" data-league-id="{{ $league['id'] ?? '' }}" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-black/10" aria-label="Favorite">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-black/70" id="league-fav-icon">
                        <path class="star-outline" d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
                        <path class="star-filled hidden" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                    </svg>
                </button>
                <button type="button" onclick="shareThisPage()" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-black/10" aria-label="Share">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="text-black/70">
                        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
                    </svg>
                </button>
            </div>
        </div>

        {{-- Content --}}
        <div class="relative h-full flex flex-col items-center justify-end pb-6 pt-12 px-6">
            {{-- Logo 72x72 without background --}}
            <div class="w-[72px] h-[72px] flex items-center justify-center">
                @if(!empty($league['logo']))
                    <img src="{{ $league['logo'] }}" alt="{{ $leagueName }}" class="w-full h-full object-contain">
                @else
                    <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24" fill="#2e8b6b">
                        <path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5z"/>
                    </svg>
                @endif
            </div>
            <div class="h-1"></div>
            {{-- Name centered, bold, 14px (small!) --}}
            <h1 class="text-center font-bold text-black/70 line-clamp-2" style="font-size: 14px;">{{ $leagueName }}</h1>
        </div>
    </div>

    {{-- ===== TAB BAR ===== --}}
    <div class="bg-[#F8F9FD] border-b border-gray-200 sticky top-0 z-20">
        <div class="flex justify-center overflow-x-auto scrollbar-hide">
            <button type="button" onclick="showLeagueTab('matches')" id="lbtn-matches" class="px-4 py-3 font-bold border-b-[3px] border-black/70 text-black/70 whitespace-nowrap" style="font-size: 13px;">{{ __('messages.tab_matches') }}</button>
            <button type="button" onclick="showLeagueTab('standings')" id="lbtn-standings" class="px-4 py-3 border-b-[3px] border-transparent text-black/50 whitespace-nowrap" style="font-size: 12px;">{{ __('messages.tab_standings') }}</button>
            <button type="button" onclick="showLeagueTab('scorers')" id="lbtn-scorers" class="px-4 py-3 border-b-[3px] border-transparent text-black/50 whitespace-nowrap" style="font-size: 12px;">{{ __('messages.tab_scorers') }}</button>
            <button type="button" onclick="showLeagueTab('info')" id="lbtn-info" class="px-4 py-3 border-b-[3px] border-transparent text-black/50 whitespace-nowrap" style="font-size: 12px;">{{ __('messages.tab_info') }}</button>
            <button type="button" onclick="showLeagueTab('news')" id="lbtn-news" class="px-4 py-3 border-b-[3px] border-transparent text-black/50 whitespace-nowrap" style="font-size: 12px;">{{ __('messages.tab_news') }}</button>
        </div>
    </div>

    {{-- ===== MATCHES TAB ===== --}}
    <div id="ltab-matches" class="px-3 py-2">
        {{-- Sub-tabs upcoming/finished --}}
        <div class="bg-[#F0F2F5] rounded-xl p-1 flex mb-3">
            <button type="button" onclick="showMatchFilter('next')" id="mbtn-next" class="flex-1 py-2.5 rounded-[10px] bg-white font-semibold text-primary shadow-sm" style="font-size: 13px;">{{ __('messages.upcoming_matches') }}</button>
            <button type="button" onclick="showMatchFilter('last')" id="mbtn-last" class="flex-1 py-2.5 rounded-[10px] font-semibold text-gray-500" style="font-size: 13px;">{{ __('messages.previous_results') }}</button>
        </div>

        {{-- Upcoming --}}
        <div id="mtab-next">
            @if(empty($nextFixtures))
                <div class="flex flex-col items-center justify-center py-16">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#d1d5db"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>
                    <p class="text-gray-500 mt-3" style="font-size: 13px;">{{ __('messages.no_matches') }}</p>
                </div>
            @else
                @foreach($nextFixtures as $match)
                    @include('partials.league-match-card', ['match' => $match, 'formatRound' => $formatRound, 'isLeagueMode' => true])
                @endforeach
            @endif
        </div>

        {{-- Finished --}}
        <div id="mtab-last" class="hidden">
            @if(empty($lastFixtures))
                <div class="flex flex-col items-center justify-center py-16">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#d1d5db"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>
                    <p class="text-gray-500 mt-3" style="font-size: 13px;">{{ __('messages.no_matches') }}</p>
                </div>
            @else
                @foreach($finishedMatches as $match)
                    @include('partials.league-match-card', ['match' => $match, 'formatRound' => $formatRound, 'isLeagueMode' => true])
                @endforeach
            @endif
        </div>
    </div>

    {{-- ===== STANDINGS TAB ===== --}}
    <div id="ltab-standings" class="px-2.5 py-2.5 hidden">
        @if(empty($standings))
            <div class="flex flex-col items-center justify-center py-16">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#d1d5db"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
                <p class="text-gray-500 mt-3" style="font-size: 13px;">{{ __('messages.no_standings') }}</p>
            </div>
        @else
            @foreach($standings as $groupIdx => $group)
                @php
                    $groupName = $group[0]['group'] ?? '';
                    $displayGroupName = $groupName;
                    if (count($standings) > 1 && preg_match('/Groupe?\s*([A-Za-z0-9]+)/i', $groupName, $m)) {
                        $letter = $m[1];
                        $displayGroupName = $lang === 'ar' ? "المجموعة {$letter}" : ($lang === 'fr' ? "Groupe {$letter}" : "Group {$letter}");
                    }
                @endphp

                @if(count($standings) > 1)
                    <div class="mt-{{ $groupIdx > 0 ? '5' : '0' }} mb-1.5 font-bold text-[#1A1A2E]" style="font-size: 15px;">{{ $displayGroupName }}</div>
                @endif

                {{-- Standings table --}}
                <div class="bg-white rounded-[10px] shadow-sm mb-3 overflow-hidden">
                    {{-- Table header --}}
                    <div class="flex items-center bg-primary/20 px-2 py-2.5">
                        <div class="w-8 text-center font-bold text-primary" style="font-size: 12px;">#</div>
                        <div class="w-1.5"></div>
                        <div class="flex-1 font-bold text-primary" style="font-size: 12px;">{{ __('messages.team_col') }}</div>
                        <div class="w-7 text-center font-bold text-primary" style="font-size: 12px;">{{ __('messages.played_col') }}</div>
                        <div class="w-7 text-center font-bold text-primary" style="font-size: 12px;">{{ __('messages.won_col') }}</div>
                        <div class="w-7 text-center font-bold text-primary" style="font-size: 12px;">{{ __('messages.drawn_col') }}</div>
                        <div class="w-7 text-center font-bold text-primary" style="font-size: 12px;">{{ __('messages.lost_col') }}</div>
                        <div class="w-7 text-center font-bold text-primary" style="font-size: 12px;">{{ __('messages.diff_col') }}</div>
                        <div class="w-[34px] text-center font-bold text-primary" style="font-size: 12px;">{{ __('messages.points_col') }}</div>
                    </div>
                    {{-- Table rows --}}
                    @foreach($group as $index => $row)
                        @php
                            $rank = $row['rank'] ?? ($index + 1);
                            $teamInfo = $row['team'] ?? [];
                            $teamName = Translator::team($teamInfo['name'] ?? '');
                            $all = $row['all'] ?? [];
                            $played = $all['played'] ?? 0;
                            $win = $all['win'] ?? 0;
                            $draw = $all['draw'] ?? 0;
                            $lose = $all['lose'] ?? 0;
                            $goalsDiff = $row['goalsDiff'] ?? 0;
                            $points = $row['points'] ?? 0;
                            $rankColor = $getRankColor($row['description'] ?? '');
                            $isEven = $index % 2 === 0;
                        @endphp
                        <a href="{{ route('team.show', $teamInfo['id']) }}" class="flex items-center px-2 py-2 border-b border-[#F0F0F0] hover:bg-gray-50 {{ !$isEven ? 'bg-[#FAFAFA]' : '' }}">
                            {{-- Rank with colored box --}}
                            <div class="w-7 h-7 rounded-md flex items-center justify-center font-bold"
                                 style="font-size: 12px; {{ $rankColor !== 'transparent' ? "background-color: {$rankColor}; color: white;" : 'color: rgba(0,0,0,0.5);' }}">
                                {{ $rank }}
                            </div>
                            <div class="w-1.5"></div>
                            {{-- Team logo + name --}}
                            <div class="flex-1 flex items-center gap-1.5 min-w-0">
                                @if(!empty($teamInfo['logo']))
                                    <img src="{{ $teamInfo['logo'] }}" alt="" class="w-[22px] h-[22px] object-contain flex-shrink-0" loading="lazy">
                                @endif
                                <span class="font-medium text-black/70 truncate" style="font-size: 12px;">{{ $teamName }}</span>
                            </div>
                            {{-- Stats --}}
                            <div class="w-7 text-center text-black/70" style="font-size: 11px;">{{ $played }}</div>
                            <div class="w-7 text-center text-black/70" style="font-size: 11px;">{{ $win }}</div>
                            <div class="w-7 text-center text-black/70" style="font-size: 11px;">{{ $draw }}</div>
                            <div class="w-7 text-center text-black/70" style="font-size: 11px;">{{ $lose }}</div>
                            <div class="w-7 text-center font-bold" style="font-size: 11px; color: {{ $goalsDiff > 0 ? '#38A169' : ($goalsDiff < 0 ? '#E53E3E' : '#9CA3AF') }};">{{ $goalsDiff }}</div>
                            {{-- Points box --}}
                            <div class="w-[30px] h-6 rounded-md bg-primary/20 flex items-center justify-center font-bold text-primary" style="font-size: 12px;">{{ $points }}</div>
                        </a>
                    @endforeach
                </div>
            @endforeach

            {{-- Legend --}}
            @if(!empty($legend))
                <div class="flex flex-wrap gap-x-3 gap-y-1.5 mt-3 px-1">
                    @foreach($legend as $desc => $color)
                        <div class="flex items-center gap-1.5">
                            <span class="w-2.5 h-2.5 rounded-sm" style="background-color: {{ $color }};"></span>
                            <span class="text-gray-500" style="font-size: 10px;">{{ $translateDescription($desc) }}</span>
                        </div>
                    @endforeach
                </div>
            @endif
        @endif
    </div>

    {{-- ===== TOP SCORERS TAB ===== --}}
    <div id="ltab-scorers" class="px-3 py-2 hidden">
        @if(empty($topScorers))
            <div class="flex flex-col items-center justify-center py-16">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="#d1d5db"><path d="M12 2L4 5v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V5l-8-3z"/></svg>
                <p class="text-gray-500 mt-3" style="font-size: 13px;">{{ __('messages.no_scorers') }}</p>
            </div>
        @else
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                @foreach($topScorers as $idx => $scorer)
                    @php
                        $player = $scorer['player'] ?? [];
                        $stats = $scorer['statistics'][0] ?? [];
                        $goals = $stats['goals']['total'] ?? 0;
                        $assists = $stats['goals']['assists'] ?? 0;
                        $teamInfo = $stats['team'] ?? [];
                        $teamName = Translator::team($teamInfo['name'] ?? '');
                        $scorerPid = $player['id'] ?? null;
                        $scorerIsYs = $scorer['_is_ys'] ?? false;
                        $scorerUrl = $scorerPid ? (route('player.show', $scorerPid) . ($scorerIsYs ? '?ys=1' : '')) : '#';
                    @endphp
                    <a href="{{ $scorerUrl }}" class="flex items-center gap-3 px-3 py-2.5 {{ !$loop->last ? 'border-b border-[#F0F0F0]' : '' }} hover:bg-gray-50">
                        <div class="w-6 text-center font-bold text-gray-500" style="font-size: 12px;">{{ $idx + 1 }}</div>
                        <div class="w-10 h-10 rounded-full bg-gray-100 overflow-hidden flex-shrink-0">
                            @if(!empty($player['photo']))
                                <img src="{{ $player['photo'] }}" alt="" class="w-full h-full object-cover" loading="lazy">
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="font-semibold text-gray-900 truncate" style="font-size: 13px;">{{ Translator::player($player['name'] ?? '') }}</div>
                            <div class="flex items-center gap-1 text-gray-500" style="font-size: 11px;">
                                @if(!empty($teamInfo['logo']))
                                    <img src="{{ $teamInfo['logo'] }}" alt="" class="w-3.5 h-3.5 object-contain" loading="lazy">
                                @endif
                                <span class="truncate">{{ $teamName }}</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-1 text-primary font-bold" style="font-size: 16px;">
                            <span style="font-size: 16px; line-height: 1;">⚽</span>
                            <span>{{ $goals }}</span>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    </div>

    {{-- ===== INFO TAB ===== --}}
    <div id="ltab-info" class="px-3 py-4 hidden">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <dl class="space-y-2.5">
                <div class="flex" style="font-size: 13px;">
                    <dt class="text-gray-500 w-28 flex-shrink-0">{{ __('messages.league_name') }}</dt>
                    <dd class="text-gray-900 font-medium">{{ $leagueName }}</dd>
                </div>
                @if(!empty($country['name']))
                    <div class="flex items-center" style="font-size: 13px;">
                        <dt class="text-gray-500 w-28 flex-shrink-0">{{ __('messages.country') }}</dt>
                        <dd class="text-gray-900 font-medium flex items-center gap-2">
                            @if(!empty($country['flag']))
                                <img src="{{ $country['flag'] }}" alt="" class="w-5 h-4 object-cover rounded-sm">
                            @endif
                            {{ Translator::country($country['name']) }}
                        </dd>
                    </div>
                @endif
                @if(!empty($league['type']))
                    <div class="flex" style="font-size: 13px;">
                        <dt class="text-gray-500 w-28 flex-shrink-0">{{ __('messages.type') }}</dt>
                        <dd class="text-gray-900 font-medium">{{ $league['type'] }}</dd>
                    </div>
                @endif
                <div class="flex" style="font-size: 13px;">
                    <dt class="text-gray-500 w-28 flex-shrink-0">{{ __('messages.season') }}</dt>
                    <dd class="text-gray-900 font-medium">{{ $season }}/{{ $season+1 }}</dd>
                </div>
            </dl>
        </div>
    </div>

    {{-- ===== NEWS TAB ===== --}}
    <div id="ltab-news" class="px-3 py-3 hidden">
        @include('partials.detail-news-list', ['news' => $news ?? []])
    </div>

    <div class="h-24"></div>
</div>

@push('scripts')
<script>
function shareThisPage() {
    const title = document.title;
    const url = location.href;
    if (navigator.share) {
        navigator.share({ title, url }).catch(() => {});
    } else {
        navigator.clipboard?.writeText(url);
        alert('{{ __('messages.link_copied') }}');
    }
}

// Favorite star toggle (localStorage, same as standings)
(function() {
    const STORAGE_KEY = 'favorite_leagues';
    const btn = document.getElementById('league-fav-btn');
    if (!btn) return;
    const id = parseInt(btn.dataset.leagueId, 10);
    if (!id) return;

    function loadFavs() {
        try { return new Set(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')); }
        catch (e) { return new Set(); }
    }
    function saveFavs(s) { localStorage.setItem(STORAGE_KEY, JSON.stringify([...s])); }
    function updateVisual() {
        const favs = loadFavs();
        const outline = btn.querySelector('.star-outline');
        const filled = btn.querySelector('.star-filled');
        const icon = document.getElementById('league-fav-icon');
        if (favs.has(id)) {
            outline.classList.add('hidden');
            filled.classList.remove('hidden');
            icon.classList.remove('text-black/70');
            icon.classList.add('text-amber-400');
        } else {
            outline.classList.remove('hidden');
            filled.classList.add('hidden');
            icon.classList.add('text-black/70');
            icon.classList.remove('text-amber-400');
        }
    }
    btn.addEventListener('click', function() {
        const favs = loadFavs();
        if (favs.has(id)) favs.delete(id); else favs.add(id);
        saveFavs(favs);
        updateVisual();
    });
    updateVisual();
})();

function showLeagueTab(name) {
    const tabs = ['matches', 'standings', 'scorers', 'info', 'news'];
    tabs.forEach(t => {
        const panel = document.getElementById('ltab-' + t);
        const btn = document.getElementById('lbtn-' + t);
        if (!panel || !btn) return;
        if (t === name) {
            panel.classList.remove('hidden');
            btn.classList.remove('border-transparent', 'text-black/50');
            btn.classList.add('border-black/70', 'text-black/70', 'font-bold');
            btn.style.fontSize = '13px';
        } else {
            panel.classList.add('hidden');
            btn.classList.add('border-transparent', 'text-black/50');
            btn.classList.remove('border-black/70', 'text-black/70', 'font-bold');
            btn.style.fontSize = '12px';
        }
    });
}

function showMatchFilter(name) {
    const panels = { next: 'mtab-next', last: 'mtab-last' };
    const btns = { next: 'mbtn-next', last: 'mbtn-last' };
    Object.keys(panels).forEach(k => {
        const panel = document.getElementById(panels[k]);
        const btn = document.getElementById(btns[k]);
        if (!panel || !btn) return;
        if (k === name) {
            panel.classList.remove('hidden');
            btn.classList.add('bg-white', 'text-primary', 'shadow-sm');
            btn.classList.remove('text-gray-500');
        } else {
            panel.classList.add('hidden');
            btn.classList.remove('bg-white', 'text-primary', 'shadow-sm');
            btn.classList.add('text-gray-500');
        }
    });
}
</script>
@endpush
@endsection