@if($categories->isEmpty())
    <h4>No Categories Record to Show</h4>
@else
    @php
        $catTip = 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;
        };
        $catTip1Html = str_replace(["\r","\n"], '<br>', e($catTip($prizes ?? collect(), 1)));
        $catTip2Html = str_replace(["\r","\n"], '<br>', e($catTip($prizes ?? collect(), 2)));
        $catTip3Html = str_replace(["\r","\n"], '<br>', e($catTip($prizes ?? collect(), 3)));
    @endphp
    <div class="col-lg-4">
        <div class="border rounded-3 p-3">
            <div class="text-center">
                <h4>Top 3 Categories</h4>
                <p class="p-small">Rank changes with respect to points.</p>
            </div>
            <div class="d-flex align-items-end pt-6">
                @php $cat1 = $categories->get(0); $cat2 = $categories->get(1); $cat3 = $categories->get(2); @endphp
                {{-- Left: 2nd place --}}
                <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="{{ $catTip2Html }}" style="cursor: help;">
                    <div class="position-absolute text-center">
                        <div class="img-circle-area">
                            <img src="{{ asset('assets/img/placeholder-img-2.png') }}" alt="" style="height:100%" class="rounded-circle img-fluid">
                        </div>
                        <span>2</span>
                    </div>
                    <div class="text-center category-info">
                        <h6>{{ optional($cat2)->category ?? 'N/A' }}</h6>
                        <div class="count">{{ optional($cat2)->earned_points ?? 'N/A' }} pts</div>
                        <div class="u-name">{{ optional($cat2)->name ?? 'N/A' }}</div>
                    </div>
                </div>
                {{-- Middle: 1st place --}}
                <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="{{ $catTip1Html }}" 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="{{ asset('assets/img/placeholder-img-2.png') }}" alt="" style="height:100%" class="rounded-circle img-fluid">
                        </div>
                        <span>1</span>
                    </div>
                    <div class="text-center category-info">
                        <h6>{{ optional($cat1)->category ?? 'N/A' }}</h6>
                        <div class="count">{{ optional($cat1)->earned_points ?? 'N/A' }} pts</div>
                        <div class="u-name">{{ optional($cat1)->name ?? 'N/A' }}</div>
                    </div>
                </div>
                {{-- Right: 3rd place --}}
                <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="{{ $catTip3Html }}" style="cursor: help;">
                    <div class="position-absolute text-center">
                        <div class="img-circle-area">
                            <img src="{{ asset('assets/img/placeholder-img-2.png') }}" alt="" style="height:100%" class="rounded-circle img-fluid">
                        </div>
                        <span>3</span>
                    </div>
                    <div class="text-center category-info">
                        <h6>{{ optional($cat3)->category ?? 'N/A' }}</h6>
                        <div class="count">{{ optional($cat3)->earned_points ?? 'N/A' }} pts</div>
                        <div class="u-name">{{ optional($cat3)->name ?? 'N/A' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="row">
            <div class="col-12">
                <div class="border p-3 rounded-3">
                    <div class="table-responsive">
                        <table class="table leader-table">
                            <thead>
                            <tr>
                                <th scope="col">Rank</th>
                                <th scope="col">Category</th>
                                <th scope="col">Department</th>
                                <th scope="col">Points Earn</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($categories as $dep)
                                <tr>
                                    <td class="align-middle">
                                        <div class="table-circle-no">{{ $loop->iteration }}</div>
                                    </td>
                                    <td class="align-middle">{{$dep->category}}</td>
                                    <td class="align-middle">{{$dep->name}}</td>
                                    <td class="align-middle">{{$dep->earned_points}} pts</td>
                                </tr>
                            @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif