@extends('layouts.app')

@section('title', 'Cycle Leaderboard — {{ $rewardCycle->name }}')

@push('styles')
<style>
    .cycle-banner { background:linear-gradient(135deg,#0d3d26,#00a651);border-radius:14px;padding:1.25rem 1.75rem;color:#fff;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem; }
    .cycle-banner h2 { font-size:1.1rem;font-weight:800; }
    .cycle-banner-meta { font-size:.8rem;opacity:.8;margin-top:.2rem; }
    .status-pill { display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:20px;font-size:.72rem;font-weight:700;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3); }
    .active-dot { width:6px;height:6px;border-radius:50%;background:#4ade80;animation:pulse 1.5s infinite; }
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

    .page-card { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden; }
    .page-card-header { padding:1.1rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between; }

    table.lb-table { width:100%;border-collapse:collapse; }
    .lb-table th { padding:.65rem 1.25rem;font-size:.72rem;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;background:var(--gray-50);border-bottom:1px solid var(--gray-200);text-align:left; }
    .lb-table th.text-right { text-align:right; }
    .lb-table td { padding:.85rem 1.25rem;font-size:.875rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100);vertical-align:middle; }
    .lb-table td.text-right { text-align:right; }
    .lb-table tr:last-child td { border-bottom:none; }
    .lb-table tr:hover td { background:var(--gray-50); }

    .rank-num { width:32px;height:32px;border-radius:8px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--gray-600); }
    .rank-num.gold   { background:#fef3c7;color:#d97706; }
    .rank-num.silver { background:#f1f5f9;color:#475569; }
    .rank-num.bronze { background:#fde8c7;color:#b45309; }

    .user-cell { display:flex;align-items:center;gap:.75rem; }
    .u-avatar { width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--green),var(--green-dark));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#fff;flex-shrink:0; }
    .pts-cell { font-size:1rem;font-weight:800;color:var(--green);text-align:right; }
    .sub-cell { text-align:right;color:var(--gray-600); }

    .empty-state { text-align:center;padding:3rem;color:var(--gray-400); }
    .empty-state i { font-size:2.5rem;margin-bottom:.75rem;display:block; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Cycle Leaderboard</h1>
        <p class="page-subtitle">Rankings for <strong>{{ $rewardCycle->name }}</strong></p>
    </div>
    <a href="{{ route('admin.rewards.show', $rewardCycle) }}" class="btn-secondary">
        <i class="fas fa-arrow-left"></i> Back to Cycle
    </a>
</div>

{{-- Cycle banner --}}
<div class="cycle-banner">
    <div>
        <h2>{{ $rewardCycle->name }}</h2>
        <div class="cycle-banner-meta">
            <i class="fas fa-calendar-day"></i> {{ $rewardCycle->start_date->format('d M Y') }}
            &mdash;
            <i class="fas fa-flag-checkered"></i> {{ $rewardCycle->end_date->format('d M Y') }}
        </div>
    </div>
    @if($rewardCycle->status === 'active')
    <span class="status-pill"><span class="active-dot"></span> Active &bull; {{ $rewardCycle->end_date->diffForHumans() }} remaining</span>
    @else
    <span class="status-pill"><i class="fas fa-lock" style="font-size:.7rem;"></i> Closed</span>
    @endif
</div>

<div class="page-card">
    <div class="page-card-header">
        <span style="font-weight:700;color:var(--gray-900);">Contributor Rankings</span>
        <span style="font-size:.78rem;color:var(--gray-500);">{{ $leaderboard->count() }} employee{{ $leaderboard->count() !== 1 ? 's' : '' }}</span>
    </div>

    @if($leaderboard->count())
    <table class="lb-table">
        <thead>
            <tr>
                <th style="width:52px;">#</th>
                <th>Employee</th>
                <th>Department</th>
                <th class="text-right">Cycle Points</th>
                <th class="text-right">Submissions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($leaderboard as $i => $user)
            <tr>
                <td>
                    <div class="rank-num {{ $i===0?'gold':($i===1?'silver':($i===2?'bronze':'')) }}">
                        @if($i===0) 🥇 @elseif($i===1) 🥈 @elseif($i===2) 🥉 @else {{ $i+1 }} @endif
                    </div>
                </td>
                <td>
                    <div class="user-cell">
                        <div class="u-avatar">{{ strtoupper(substr($user->name,0,1)) }}</div>
                        <div>
                            <div style="font-weight:600;color:var(--gray-900);">{{ $user->name }}</div>
                            <div style="font-size:.72rem;color:var(--gray-400);">{{ $user->employee_id ?? '—' }}</div>
                        </div>
                    </div>
                </td>
                <td style="font-size:.85rem;">{{ $user->department ?? '—' }}</td>
                <td class="pts-cell">{{ $user->cycle_points }}</td>
                <td class="sub-cell">{{ $user->cycle_submissions }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @else
    <div class="empty-state">
        <i class="fas fa-trophy"></i>
        <p>No submissions recorded during this cycle period.</p>
    </div>
    @endif
</div>

@endsection