@extends('layouts.manager')

@section('title','Тімліди')
@section('page_title','Тімліди')

@section('page_actions')
    <a href="{{ route('manager.teamleads.create') }}" class="btn btn-primary">
        <i class="fa-solid fa-user-plus mr-1"></i>
        Додати тімліда
    </a>
@endsection

@push('head')
    <link rel="stylesheet" href="{{ mix('css/manager/teamleads-index.css') }}">
@endpush

@section('content')
    @php
        $tz = config('app.timezone', 'Europe/Kyiv');

        $selectedMonth    = $selectedMonth   ?? \Carbon\Carbon::now($tz)->format('Y-m');
        $currentMonthKey  = $currentMonthKey ?? \Carbon\Carbon::now($tz)->format('Y-m');
        $prevMonthKey     = $prevMonthKey    ?? \Carbon\Carbon::now($tz)->subMonthNoOverflow()->format('Y-m');

        $totalTL = $teamLeads->count();

        // ✔ Скільки тімлідів виконали норму по балансах (умовно: balance_score >= 90)
        $completedNorms = $teamLeads->filter(function ($u) use ($teamLeadRatings) {
            $rating = $teamLeadRatings[$u->id] ?? null;
            if (!$rating) return false;

            $balanceScore = $rating['balance_score'] ?? null;
            return $balanceScore !== null && $balanceScore >= 90;
        })->count();

        // ✔ Скільки мають високий рейтинг по статистиці (умовно: stats_score >= 70)
        $highStats = $teamLeads->filter(function ($u) use ($teamLeadRatings) {
            $rating = $teamLeadRatings[$u->id] ?? null;
            if (!$rating) return false;

            $statsScore = $rating['stats_score'] ?? null;
            return $statsScore !== null && $statsScore >= 70;
        })->count();

        $enriched = $teamLeads->map(function ($u) use ($teamLeadRatings) {
            $rating            = $teamLeadRatings[$u->id] ?? null;
            $balanceRank       = $rating['balance_rank']  ?? null;
            $statsRank         = $rating['stats_rank']    ?? null;
            $balanceScore      = $rating['balance_score'] ?? null;
            $statsScore        = $rating['stats_score']   ?? null;
            $avgBalanceAmount  = $rating['avg_balance_amount'] ?? null;

            $bestRank = null;
            if ($balanceRank) $bestRank = $balanceRank;
            if ($statsRank && ($bestRank === null || $statsRank < $bestRank)) $bestRank = $statsRank;

            // ✅ Комбінований рейтинг: 40% баланс + 60% статистика
            $combined = null;
            if ($balanceScore !== null && $statsScore !== null) {
                $combined = round(($balanceScore * 0.4) + ($statsScore * 0.6), 2);
            }

            return [
                'model'            => $u,
                'balance_rank'     => $balanceRank,
                'stats_rank'       => $statsRank,
                'balance_score'    => $balanceScore,
                'stats_score'      => $statsScore,
                'avg_balance'      => $avgBalanceAmount,
                'best_rank'        => $bestRank,
                'combined_score'   => $combined,
            ];
        });

        // ✅ ТОП-3 "по всьому разом" (тільки ті, у кого є і баланс, і статистика)
        $topThree = $enriched
            ->filter(fn($row) => $row['combined_score'] !== null)
            ->sortByDesc('combined_score')
            ->take(3)
            ->values();

        $ratedCount = $enriched->filter(fn($r) => $r['balance_score'] !== null || $r['stats_score'] !== null)->count();
    @endphp

    {{-- Full width wrapper --}}
    <div class="container-fluid px-0">
        <div class="tl-wrap">

            {{-- HERO --}}
            <div class="tl-hero mb-3">
                <div class="tl-hero-inner">
                    <div class="tl-hero-left">
                        <div class="tl-hero-kicker">Рейтинг тімлідів</div>
                        <div class="tl-hero-title">Хто тягне зміну вгору</div>
                        <div class="tl-hero-text">
                            Порівнюємо тімлідів по середніх балансах і статистиці за обраний місяць.
                            Загальний рейтинг: <strong>40%</strong> баланс + <strong>60%</strong> статистика.
                        </div>

                        {{-- KPI --}}
                        <div class="tl-kpi-grid">
                            <div class="tl-kpi">
                                <div class="tl-kpi-body">
                                    <div class="tl-kpi-label">
                                        <i class="fa-solid fa-users tl-kpi-mini-ic"></i>
                                        Всього тімлідів
                                    </div>
                                    <div class="tl-kpi-value">{{ $totalTL }}</div>
                                    <div class="tl-kpi-sub">У списку за період</div>
                                </div>
                            </div>

                            <div class="tl-kpi">
                                <div class="tl-kpi-body">
                                    <div class="tl-kpi-label">
                                        <i class="fa-solid fa-coins tl-kpi-mini-ic"></i>
                                        Норма по балансах
                                    </div>
                                    <div class="tl-kpi-value">
                                        {{ $completedNorms }}
                                        <span class="tl-kpi-suffix">/ {{ $totalTL }}</span>
                                    </div>
                                    <div class="tl-kpi-sub">Balance score ≥ 90</div>
                                </div>
                            </div>

                            <div class="tl-kpi">
                                <div class="tl-kpi-body">
                                    <div class="tl-kpi-label">
                                        <i class="fa-solid fa-chart-line tl-kpi-mini-ic"></i>
                                        Висока статистика
                                    </div>
                                    <div class="tl-kpi-value">
                                        {{ $highStats }}
                                        <span class="tl-kpi-suffix">/ {{ $totalTL }}</span>
                                    </div>
                                    <div class="tl-kpi-sub">Stats score ≥ 70</div>
                                </div>
                            </div>

                            <div class="tl-kpi">
                                <div class="tl-kpi-body">
                                    <div class="tl-kpi-label">
                                        <i class="fa-solid fa-bolt tl-kpi-mini-ic"></i>
                                        Є рейтинги
                                    </div>
                                    <div class="tl-kpi-value">{{ $ratedCount }}</div>
                                    <div class="tl-kpi-sub">З будь-яким score</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tl-hero-right">
                        @if(isset($monthStart, $monthEnd))
                            <div class="tl-chip">
                                <i class="fa-regular fa-calendar"></i>
                                <span>{{ $monthStart }} — {{ $monthEnd }}</span>
                            </div>
                        @endif

                        <div class="tl-month-box">
                            <div class="tl-month-box-label">Місяць</div>
                            <form method="GET" action="{{ route('manager.teamleads.index') }}">
                                <div class="tl-month-row">
                                    <input type="month"
                                           name="month"
                                           class="form-control tl-month-input"
                                           value="{{ $selectedMonth }}">
                                    <button type="submit" class="btn btn-primary btn-sm tl-month-submit">
                                        Показати
                                    </button>
                                </div>

                                <div class="tl-month-pills">
                                    <a href="{{ route('manager.teamleads.index', ['month' => $currentMonthKey]) }}"
                                       class="tl-pill {{ $selectedMonth === $currentMonthKey ? 'tl-pill--active' : '' }}">
                                        <i class="fa-regular fa-circle-dot"></i>
                                        Цей місяць
                                    </a>

                                    <a href="{{ route('manager.teamleads.index', ['month' => $prevMonthKey]) }}"
                                       class="tl-pill {{ $selectedMonth === $prevMonthKey ? 'tl-pill--active' : '' }}">
                                        <i class="fa-regular fa-clock"></i>
                                        Минулий
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            {{-- TOP 3 --}}
            @if($topThree->count())
                <div class="tl-section-title">Топ-3 за загальним рейтингом (40% баланс + 60% статистика)</div>

                <div class="tl-podium mb-3">
                    @foreach($topThree as $index => $row)
                        @php
                            /** @var \App\Models\User $uModel */
                            $uModel       = $row['model'];
                            $rank         = $index + 1;

                            $balanceScore = $row['balance_score'];
                            $statsScore   = $row['stats_score'];
                            $combined     = $row['combined_score'] ?? null;

                            $initial = mb_substr($uModel->name, 0, 1, 'UTF-8');

                            $badgeClass = 'tl-rank-badge';
                            if ($index === 0) $badgeClass .= ' tl-rank-badge--gold';
                            if ($index === 1) $badgeClass .= ' tl-rank-badge--silver';
                            if ($index === 2) $badgeClass .= ' tl-rank-badge--bronze';
                        @endphp

                        <div class="tl-podium-card">
                            <div class="tl-podium-top">
                                <div class="{{ $badgeClass }}">
                                    <i class="fa-solid fa-trophy"></i>
                                    #{{ $rank }}
                                </div>

                                <a href="{{ route('manager.impersonate.start', ['user' => $uModel->id]) }}"
                                   class="btn btn-outline-primary btn-sm tl-btn-xs">
                                    <i class="fa-solid fa-eye mr-1"></i>
                                    Очима
                                </a>
                            </div>

                            <div class="tl-podium-user">
                                <div class="tl-avatar">{{ $initial }}</div>
                                <div class="tl-user-lines">
                                    <div class="tl-user-name">{{ $uModel->name }}</div>
                                    <div class="tl-user-email">{{ $uModel->email }}</div>
                                </div>
                            </div>

                            <div class="tl-podium-metrics">
                                <div class="tl-metric">
                                    <div class="tl-metric-label">Загальний</div>
                                    <div class="tl-metric-value">
                                        {{ $combined !== null ? ($combined.'/100') : '—' }}
                                    </div>
                                </div>

                                <div class="tl-metric">
                                    <div class="tl-metric-label">Баланс</div>
                                    <div class="tl-metric-value">
                                        {{ $balanceScore !== null ? ($balanceScore.'/100') : '—' }}
                                    </div>
                                </div>

                                <div class="tl-metric">
                                    <div class="tl-metric-label">Статистика</div>
                                    <div class="tl-metric-value">
                                        {{ $statsScore !== null ? ($statsScore.'/100') : '—' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            {{-- DESKTOP TABLE --}}
            <div class="tl-desktop">
                <div class="tl-card">
                    <div class="tl-toolbar">
                        <div>
                            <div class="tl-toolbar-title">Повний список тімлідів</div>
                            <div class="tl-toolbar-hint">
                                Пороги: &gt;70 зелений, &gt;50 жовтий, ≤50 червоний.
                                <span class="d-inline-block ml-2" style="opacity:.85;">
                                    <i class="fa-solid fa-arrows-left-right"></i>
                                    На вузьких екранах таблиця скролиться по горизонталі
                                </span>
                            </div>
                        </div>

                        <div class="tl-sort">
                            <div class="tl-sort-label">Сортувати</div>
                            <select id="tlSort" class="form-control form-control-sm tl-sort-select">
                                <option value="combined_desc">За загальним рейтингом (40/60) — від більшого</option>
                                <option value="stats_rank_asc">За місцем статистики — від #1</option>
                                <option value="balance_rank_asc">За місцем балансів — від #1</option>
                            </select>
                        </div>
                    </div>

                    <div class="tl-table-wrap">
                        <table class="table table-hover table-sm tl-table">
                            <thead>
                            <tr>
                                <th>Тімлід</th>
                                <th>Email / Очима тімліда</th>
                                <th>Кабінети</th>
                                <th style="width:260px;">Рейтинг (баланси)</th>
                                <th style="width:260px;">Рейтинг (статистика)</th>
                                <th style="width:150px;">Дії</th>
                            </tr>
                            </thead>

                            <tbody>
                            @forelse($teamLeads as $u)
                                @php
                                    /** @var \App\Models\User $u */
                                    $cabCount          = $u->cabinets->count();

                                    $rating            = $teamLeadRatings[$u->id] ?? null;
                                    $balanceScore      = $rating['balance_score'] ?? null;
                                    $statsScore        = $rating['stats_score']   ?? null;
                                    $balanceRank       = $rating['balance_rank']  ?? null;
                                    $statsRank         = $rating['stats_rank']    ?? null;
                                    $avgBalanceAmount  = $rating['avg_balance_amount'] ?? null;

                                    $combinedScore = null;
                                    if ($balanceScore !== null && $statsScore !== null) {
                                        $combinedScore = round(($balanceScore * 0.4) + ($statsScore * 0.6), 2);
                                    }

                                    $balanceClass = 'tl-b-empty';
                                    if ($balanceScore !== null) {
                                        if ($balanceScore >= 90) $balanceClass = 'tl-b-good';
                                        elseif ($balanceScore < 60) $balanceClass = 'tl-b-bad';
                                        else $balanceClass = 'tl-b-mid';
                                    }

                                    $statsClass = 'tl-b-empty';
                                    if ($statsScore !== null) {
                                        if ($statsScore >= 90) $statsClass = 'tl-b-good';
                                        elseif ($statsScore < 60) $statsClass = 'tl-b-bad';
                                        else $statsClass = 'tl-b-mid';
                                    }

                                    $bestRank = null;
                                    if ($balanceRank) $bestRank = $balanceRank;
                                    if ($statsRank && ($bestRank === null || $statsRank < $bestRank)) $bestRank = $statsRank;

                                    $topLabel = null;
                                    if ($bestRank === 1) $topLabel = 'Топ-1';
                                    elseif ($bestRank === 2) $topLabel = 'Топ-2';
                                    elseif ($bestRank === 3) $topLabel = 'Топ-3';

                                    $initial = mb_substr($u->name, 0, 1, 'UTF-8');

                                    $balancePct = ($balanceScore !== null) ? max(0, min(100, (int)$balanceScore)) : 0;
                                    $statsPct   = ($statsScore !== null)   ? max(0, min(100, (int)$statsScore))   : 0;

                                    $balanceProgClass = 'tl-progress--empty';
                                    $balanceHint = 'немає даних';
                                    if ($balanceScore !== null) {
                                        if ($balanceScore > 70) { $balanceProgClass = 'tl-progress--good'; $balanceHint = 'високий'; }
                                        elseif ($balanceScore > 50) { $balanceProgClass = 'tl-progress--mid'; $balanceHint = 'середній'; }
                                        else { $balanceProgClass = 'tl-progress--bad'; $balanceHint = 'низький'; }
                                    }

                                    $statsProgClass = 'tl-progress--empty';
                                    $statsHint = 'немає даних';
                                    if ($statsScore !== null) {
                                        if ($statsScore > 70) { $statsProgClass = 'tl-progress--good'; $statsHint = 'високий'; }
                                        elseif ($statsScore > 50) { $statsProgClass = 'tl-progress--mid'; $statsHint = 'середній'; }
                                        else { $statsProgClass = 'tl-progress--bad'; $statsHint = 'низький'; }
                                    }
                                @endphp

                                <tr class="tl-row"
                                    data-combined-score="{{ $combinedScore ?? -1 }}"
                                    data-best-rank="{{ $bestRank ?? 999999 }}"
                                    data-stats-rank="{{ $statsRank ?? 999999 }}"
                                    data-balance-rank="{{ $balanceRank ?? 999999 }}"
                                    data-stats-score="{{ $statsScore ?? -1 }}"
                                    data-balance-score="{{ $balanceScore ?? -1 }}">
                                    <td>
                                        <div class="tl-name">
                                            <div class="tl-avatar tl-avatar-sm">{{ $initial }}</div>

                                            <div class="tl-name-main">
                                                <div class="tl-name-row">
                                                    <strong style="font-weight:900; color:#0f172a;">{{ $u->name }}</strong>
                                                </div>

                                                <div class="tl-subline">
                                                    @php
                                                        $parts = [];
                                                        if ($balanceRank) $parts[] = "Баланси: <strong>#{$balanceRank}</strong> із {$totalTL}";
                                                        if ($statsRank)   $parts[] = "Статистика: <strong>#{$statsRank}</strong> із {$totalTL}";
                                                    @endphp
                                                    {!! implode(' <span class="mx-1">•</span> ', $parts) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="tl-email">
                                            <div class="tl-email-text">{{ $u->email }}</div>
                                            <a href="{{ route('manager.impersonate.start', ['user' => $u->id]) }}"
                                               class="btn btn-outline-primary tl-btn-xs">
                                                <i class="fa-solid fa-eye mr-1"></i>
                                                Очима тімліда
                                            </a>
                                        </div>
                                    </td>

                                    <td>
                                        @if($cabCount)
                                            <div class="tl-cabs mb-1">
                                                @foreach($u->cabinets as $c)
                                                    <span class="badge badge-info">{{ $c->slug }}</span>
                                                @endforeach
                                            </div>
                                            <div class="tl-subline">Всього: <strong>{{ $cabCount }}</strong></div>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>

                                    <td>
                                        <div class="tl-score">
                                            <div class="tl-score-top">
                                                @if($balanceScore !== null)
                                                    <span class="tl-score-badge {{ $balanceClass }}">
                                                        <i class="fa-solid fa-coins"></i>
                                                        {{ $balanceScore }} / 100
                                                    </span>
                                                @else
                                                    <span class="tl-score-badge tl-b-empty">
                                                        <i class="fa-solid fa-coins"></i>
                                                        немає даних
                                                    </span>
                                                @endif

                                                @if($avgBalanceAmount !== null)
                                                    <span class="tl-subline">
                                                        <strong>{{ number_format($avgBalanceAmount, 2) }}</strong> $
                                                    </span>
                                                @endif
                                            </div>

                                            <div class="tl-progress {{ $balanceProgClass }}"
                                                 title="Баланс: {{ $balanceHint }}">
                                                <span style="width: {{ $balancePct }}%"></span>
                                            </div>

                                            <div class="tl-score-foot">
                                                Середній рейтинг по всіх кабінетах (баланси змін).
                                                @if($balanceRank)
                                                    &nbsp;Місце: <strong>#{{ $balanceRank }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="tl-score">
                                            <div class="tl-score-top">
                                                @if($statsScore !== null)
                                                    <span class="tl-score-badge {{ $statsClass }}">
                                                        <i class="fa-solid fa-chart-line"></i>
                                                        {{ $statsScore }} / 100
                                                    </span>
                                                @else
                                                    <span class="tl-score-badge tl-b-empty">
                                                        <i class="fa-solid fa-chart-line"></i>
                                                        немає даних
                                                    </span>
                                                @endif
                                            </div>

                                            <div class="tl-progress {{ $statsProgClass }}"
                                                 title="Статистика: {{ $statsHint }}">
                                                <span style="width: {{ $statsPct }}%"></span>
                                            </div>

                                            <div class="tl-score-foot">
                                                New / Young / Old / Spend (середній рейтинг).
                                                @if($statsRank)
                                                    &nbsp;Місце: <strong>#{{ $statsRank }}</strong>
                                                @endif
                                            </div>
                                        </div>
                                    </td>

                                    <td class="tl-action-col">
                                        <a href="{{ route('manager.teamleads.edit', ['user' => $u->id]) }}"
                                           class="btn btn-outline-secondary btn-sm btn-block">
                                            Редагувати
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted p-3">
                                        Поки немає тімлідів
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- MOBILE CARDS --}}
            <div class="tl-mobile">
                <div class="tl-section-title">Список тімлідів</div>

                @forelse($enriched as $row)
                    @php
                        /** @var \App\Models\User $uModel */
                        $uModel        = $row['model'];
                        $balanceRank   = $row['balance_rank'];
                        $statsRank     = $row['stats_rank'];
                        $balanceScore  = $row['balance_score'];
                        $statsScore    = $row['stats_score'];
                        $avgBalance    = $row['avg_balance'];
                        $bestRank      = $row['best_rank'];
                        $combinedScore = $row['combined_score'];

                        $cabCount      = $uModel->cabinets->count();

                        $balanceClass = 'tl-b-empty';
                        if ($balanceScore !== null) {
                            if ($balanceScore >= 90) $balanceClass = 'tl-b-good';
                            elseif ($balanceScore < 60) $balanceClass = 'tl-b-bad';
                            else $balanceClass = 'tl-b-mid';
                        }

                        $statsClass = 'tl-b-empty';
                        if ($statsScore !== null) {
                            if ($statsScore >= 90) $statsClass = 'tl-b-good';
                            elseif ($statsScore < 60) $statsClass = 'tl-b-bad';
                            else $statsClass = 'tl-b-mid';
                        }

                        $initial = mb_substr($uModel->name, 0, 1, 'UTF-8');

                        $balancePct = ($balanceScore !== null) ? max(0, min(100, (int)$balanceScore)) : 0;
                        $statsPct   = ($statsScore !== null)   ? max(0, min(100, (int)$statsScore))   : 0;

                        $balanceProgClass = 'tl-progress--empty';
                        if ($balanceScore !== null) {
                            if ($balanceScore > 70) $balanceProgClass = 'tl-progress--good';
                            elseif ($balanceScore > 50) $balanceProgClass = 'tl-progress--mid';
                            else $balanceProgClass = 'tl-progress--bad';
                        }

                        $statsProgClass = 'tl-progress--empty';
                        if ($statsScore !== null) {
                            if ($statsScore > 70) $statsProgClass = 'tl-progress--good';
                            elseif ($statsScore > 50) $statsProgClass = 'tl-progress--mid';
                            else $statsProgClass = 'tl-progress--bad';
                        }
                    @endphp

                    <div class="tl-mcard tl-card-item"
                         data-combined-score="{{ $combinedScore ?? -1 }}"
                         data-best-rank="{{ $bestRank ?? 999999 }}"
                         data-stats-rank="{{ $statsRank ?? 999999 }}"
                         data-balance-rank="{{ $balanceRank ?? 999999 }}"
                         data-stats-score="{{ $statsScore ?? -1 }}"
                         data-balance-score="{{ $balanceScore ?? -1 }}">
                        <div class="tl-mhead">
                            <div class="tl-muser">
                                <div class="tl-avatar tl-avatar-sm">{{ $initial }}</div>
                                <div style="min-width:0;">
                                    <div class="tl-mname">
                                        {{ $uModel->name }}
                                        @if($topLabel)
                                            <span class="tl-chip-rank" style="margin-left:6px;">
                                                <i class="fa-solid fa-crown"></i> {{ $topLabel }}
                                            </span>
                                        @endif
                                    </div>
                                    <div class="tl-memail">{{ $uModel->email }}</div>

                                    <div class="tl-mmeta">
                                        @php
                                            $parts = [];
                                            if ($balanceRank) $parts[] = "Баланси: #{$balanceRank}/{$totalTL}";
                                            if ($statsRank)   $parts[] = "Статистика: #{$statsRank}/{$totalTL}";
                                        @endphp
                                        @if(count($parts))
                                            <div>{!! implode(' <span class="mx-1">•</span> ', $parts) !!}</div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div>
                                <a href="{{ route('manager.impersonate.start', ['user' => $uModel->id]) }}"
                                   class="btn btn-outline-primary tl-btn-xs">
                                    <i class="fa-solid fa-eye mr-1"></i> Очима
                                </a>
                            </div>
                        </div>

                        <div class="tl-mbody">
                            <div class="tl-mrow">
                                <div class="tl-mlabel">Баланси</div>
                                <div class="tl-mvalue">
                                    @if($balanceScore !== null)
                                        <div class="d-flex align-items-center justify-content-between"
                                             style="gap:10px;">
                                            <span class="tl-score-badge {{ $balanceClass }}">
                                                <i class="fa-solid fa-coins"></i> {{ $balanceScore }}/100
                                            </span>
                                            @if($avgBalance !== null)
                                                <span class="tl-subline"><strong>{{ number_format($avgBalance, 2) }}</strong> $</span>
                                            @endif
                                        </div>
                                        <div class="tl-progress mt-2 {{ $balanceProgClass }}">
                                            <span style="width: {{ $balancePct }}%"></span>
                                        </div>
                                    @else
                                        <span class="tl-score-badge tl-b-empty">
                                            <i class="fa-solid fa-coins"></i> немає даних
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="tl-mrow">
                                <div class="tl-mlabel">Статистика</div>
                                <div class="tl-mvalue">
                                    @if($statsScore !== null)
                                        <span class="tl-score-badge {{ $statsClass }}">
                                            <i class="fa-solid fa-chart-line"></i> {{ $statsScore }}/100
                                        </span>
                                        <div class="tl-progress mt-2 {{ $statsProgClass }}">
                                            <span style="width: {{ $statsPct }}%"></span>
                                        </div>
                                    @else
                                        <span class="tl-score-badge tl-b-empty">
                                            <i class="fa-solid fa-chart-line"></i> немає даних
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="tl-mrow">
                                <div class="tl-mlabel">Кабінети</div>
                                <div class="tl-mvalue">
                                    @if($cabCount)
                                        <div class="tl-cabs mb-1">
                                            @foreach($uModel->cabinets as $c)
                                                <span class="badge badge-info">{{ $c->slug }}</span>
                                            @endforeach
                                        </div>
                                        <div class="tl-subline">Всього: <strong>{{ $cabCount }}</strong></div>
                                    @else
                                        <span class="text-muted tl-subline">Тімлід ще не привʼязаний до кабінетів</span>
                                    @endif
                                </div>
                            </div>

                            <div class="tl-mfooter">
                                <a href="{{ route('manager.teamleads.edit', ['user' => $uModel->id]) }}"
                                   class="btn btn-outline-secondary btn-sm btn-block"
                                   style="border-radius: 12px;">
                                    Редагувати
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted p-3">
                        Поки немає тімлідів
                    </div>
                @endforelse
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const sortSelect = document.getElementById('tlSort');
            if (!sortSelect) return;

            function getNumeric(el, key, fallback) {
                const v = el.getAttribute(key);
                const n = Number(v);
                return Number.isFinite(n) ? n : fallback;
            }

            function sortInContainer(container, itemsSelector, cfg) {
                if (!container) return;
                const items = Array.from(container.querySelectorAll(itemsSelector));

                items.sort((a, b) => {
                    const av = getNumeric(a, cfg.key, cfg.fallback);
                    const bv = getNumeric(b, cfg.key, cfg.fallback);
                    if (av === bv) return 0;
                    return cfg.dir === 'asc' ? (av - bv) : (bv - av);
                });

                items.forEach(el => container.appendChild(el));
            }

            function applySort() {
                const mode = sortSelect.value;

                const map = {
                    combined_desc: {key: 'data-combined-score', dir: 'desc', fallback: -1},
                    stats_rank_asc: {key: 'data-stats-rank', dir: 'asc', fallback: 999999},
                    balance_rank_asc: {key: 'data-balance-rank', dir: 'asc', fallback: 999999},
                };
                const cfg = map[mode] || map.combined_desc;

                const tbody = document.querySelector('.tl-table tbody');
                sortInContainer(tbody, 'tr.tl-row', cfg);

                const mobileContainer = document.querySelector('.tl-mobile');
                sortInContainer(mobileContainer, '.tl-mcard.tl-card-item', cfg);
            }

            sortSelect.addEventListener('change', applySort);
            applySort();
        })();
    </script>
@endpush