@if($employees->isEmpty())
    <h4>No Employees Record to Show</h4>
@else
    @php
        $emp1 = $employees->get(0);
        $emp2 = $employees->get(1);
        $emp3 = $employees->get(2);
        $placeholderImg = asset('assets/img/placeholder-img-2.png');
        $leaderboardImageUrl = function($emp) use ($placeholderImg) {
            if (!$emp) return $placeholderImg;
            $img = $emp->image ?? null;
            if ($img === null || $img === '' || trim((string)$img) === '') return $placeholderImg;
            $path = trim((string)$img);
            if (preg_match('#^https?://#i', $path)) return $path;
            $path = ltrim($path, '/');
            return $path ? asset($path) : $placeholderImg;
        };
        $tooltipLine = function($prizes, $pos) {
            if (!isset($prizes) || !is_object($prizes)) return 'Prize: Not mentioned';
            $col = $prizes->get($pos) ?? $prizes->get((string)$pos);
            if (!$col || !$col->isNotEmpty()) return 'Prize: Not mentioned';
            $p = $col->first();
            $posLabel = $pos === 1 ? '1st' : ($pos === 2 ? '2nd' : '3rd');
            $t = $posLabel . ' Place Prize' . "\n" . '─────────────────' . "\n" . ($p->title ?? 'Not mentioned');
            if (!empty($p->prize_type)) {
                $types = ['money' => 'Cash Prize', 'gift' => 'Gift', 'recognition' => 'Recognition', 'bonus' => 'Bonus', 'voucher' => 'Voucher', 'trophy' => 'Trophy'];
                $t .= "\n" . 'Type: ' . ($types[$p->prize_type] ?? ucfirst($p->prize_type));
            }
            if (isset($p->prize_amount) && $p->prize_amount !== null && $p->prize_amount !== '') {
                $t .= "\n" . 'Amount: ' . ($p->currency ?? '') . ' ' . number_format((float)$p->prize_amount, 2);
            }
            if (!empty($p->description)) {
                $t .= "\n" . '─────────────────' . "\n" . $p->description;
            }
            return $t;
        };
        $tip1 = $tooltipLine($prizes ?? null, 1);
        $tip2 = $tooltipLine($prizes ?? null, 2);
        $tip3 = $tooltipLine($prizes ?? null, 3);
        $tip1Html = str_replace(["\r","\n"], '<br>', e($tip1));
        $tip2Html = str_replace(["\r","\n"], '<br>', e($tip2));
        $tip3Html = str_replace(["\r","\n"], '<br>', e($tip3));
    @endphp
    <div class="col-lg-4">
        <div class="border rounded-3 p-3">
            <div class="text-center">
                <h4>Top 3 Employees</h4>
                <p class="p-small">Rank changes with respect to points.</p>
            </div>
            <div class="d-flex align-items-end pt-6">
                <!-- 2nd -->
                <div class="leader-box-left position-relative leaderboard-item leaderboard-prize-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="{{ $tip2Html }}" style="cursor: help;">
                    <div class="position-absolute text-center">
                        <div class="img-circle-area">
                            <img src="{{ $leaderboardImageUrl($emp2) }}" alt="" class="rounded-circle img-fluid leaderboard-avatar" style="width:100%;height:100%;object-fit:cover;" onerror="this.onerror=null;this.src='{{ $placeholderImg }}';">
                        </div>
                        <span>2</span>
                    </div>
                    <div class="text-center employee-info">
                        <h6>{{ $emp2 ? ($emp2->category ?: '—') : '—' }}</h6>
                        <div class="count">{{ $emp2 ? (isset($emp2->earned_points) ? $emp2->earned_points . ' pts' : '—') : '—' }}</div>
                        <div class="u-name">{{ $emp2 ? ($emp2->employee ?? '—') : '—' }}</div>
                    </div>
                </div>
                <!-- 1st -->
                <div class="leader-box-middle position-relative leaderboard-item leaderboard-prize-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="{{ $tip1Html }}" style="cursor: help;">
                    <div class="position-absolute text-center">
                        <img src="{{ asset('assets/img/crown.png') }}" alt="" class="img-fluid mb-1">
                        <div class="img-circle-area">
                            <img src="{{ $leaderboardImageUrl($emp1) }}" alt="" class="rounded-circle img-fluid leaderboard-avatar" style="width:100%;height:100%;object-fit:cover;" onerror="this.onerror=null;this.src='{{ $placeholderImg }}';">
                        </div>
                        <span>1</span>
                    </div>
                    <div class="text-center employee-info">
                        <h6>{{ $emp1 ? ($emp1->category ?: '—') : '—' }}</h6>
                        <div class="count my-2">{{ $emp1 ? (isset($emp1->earned_points) ? $emp1->earned_points . ' pts' : '—') : '—' }}</div>
                        <div class="u-name">{{ $emp1 ? ($emp1->employee ?? '—') : '—' }}</div>
                    </div>
                </div>
                <!-- 3rd -->
                <div class="leader-box-right position-relative leaderboard-item leaderboard-prize-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="{{ $tip3Html }}" style="cursor: help;">
                    <div class="position-absolute text-center">
                        <div class="img-circle-area">
                            <img src="{{ $leaderboardImageUrl($emp3) }}" alt="" class="rounded-circle img-fluid leaderboard-avatar" style="width:100%;height:100%;object-fit:cover;" onerror="this.onerror=null;this.src='{{ $placeholderImg }}';">
                        </div>
                        <span>3</span>
                    </div>
                    <div class="text-center employee-info">
                        <h6>{{ $emp3 ? ($emp3->category ?: '—') : '—' }}</h6>
                        <div class="count">{{ $emp3 ? (isset($emp3->earned_points) ? $emp3->earned_points . ' pts' : '—') : '—' }}</div>
                        <div class="u-name">{{ $emp3 ? ($emp3->employee ?? '—') : '—' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="border p-3 rounded-3">
            <div class="table-responsive">
                <table class="table leader-table">
                    <thead>
                        <tr>
                            <th scope="col" class="text-nowrap">Rank</th>
                            <th scope="col">Employee</th>
                            <th scope="col">Category</th>
                            <th scope="col" class="text-end text-nowrap">Points</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($employees as $employee)
                            <tr>
                                <td class="align-middle">
                                    <div class="table-circle-no">{{ $loop->iteration }}</div>
                                </td>
                                <td class="align-middle">{{ $employee->employee ?? '—' }}</td>
                                <td class="align-middle">{{ $employee->category ?? '—' }}</td>
                                <td class="align-middle text-end">{{ $employee->earned_points ?? 0 }} pts</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endif