@extends('layouts/contentNavbarLayout')

@section('title', 'Leaderboard - ' . $challenge->title)

@section('page-style')
<style>
.leaderboard-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.rank-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out;
    margin-bottom: 1rem;
}

.rank-card:hover {
    transform: translateY(-5px);
}

.rank-number {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
}

.progress-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#28a745 0deg var(--progress) 0deg, #e9ecef 0deg);
    position: relative;
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
}

.progress-text {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 0.875rem;
    font-weight: bold;
}

.winner-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.top-3-card {
    border: 3px solid;
}

.top-3-card:nth-child(1) {
    border-color: #ffd700;
    background: linear-gradient(135deg, #fff8dc 0%, #fffacd 100%);
}

.top-3-card:nth-child(2) {
    border-color: #c0c0c0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.top-3-card:nth-child(3) {
    border-color: #cd7f32;
    background: linear-gradient(135deg, #f4e4bc 0%, #e6d7a8 100%);
}
</style>
@endsection

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ route('globalChallenges.index') }}">Global Challenges</a></li>
        <li class="breadcrumb-item"><a href="{{ route('globalChallenges.show', $challenge->id) }}">{{ $challenge->title }}</a></li>
        <li class="breadcrumb-item active">Leaderboard</li>
    </ol>
</nav>
<div class="row">
    <div class="col-12">
        <!-- Leaderboard Header -->
        <div class="leaderboard-card">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="mb-2">{{ $challenge->title }} - Leaderboard</h2>
                    <p class="mb-3 opacity-75">Top performers in this global challenge</p>
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge bg-light text-dark fs-6">
                            <i class="mdi mdi-account-group me-1"></i>
                            {{ $topPerformers->count() }} Participants
                        </span>
                        <span class="text-white-50">
                            <i class="mdi mdi-target me-1"></i>
                            Goal: {{ number_format($challenge->required_steps) }} steps
                        </span>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    @if($challenge->image)
                    <img src="{{ $challenge->image }}" alt="{{ $challenge->title }}" 
                         class="img-fluid rounded" style="max-height: 120px;">
                    @endif
                </div>
            </div>
        </div>

        <!-- Top 3 Podium -->
        @if($topPerformers->count() >= 3)
        <div class="row mb-4">
            <div class="col-12">
                <h4 class="mb-3">
                    <i class="mdi mdi-trophy me-2"></i>Top 3 Winners
                </h4>
            </div>
            
            <!-- 2nd Place -->
            <div class="col-md-4">
                <div class="rank-card top-3-card text-center">
                    <div class="mb-3">
                        <i class="mdi mdi-trophy text-secondary fs-1"></i>
                    </div>
                    <div class="rank-number text-secondary">#2</div>
                    <div class="avatar-placeholder mx-auto mb-3">
                        {{ strtoupper(substr($topPerformers[1]->name, 0, 1)) }}
                    </div>
                    <h5 class="mb-1">{{ $topPerformers[1]->name }}</h5>
                    <p class="text-muted mb-2">{{ $topPerformers[1]->email }}</p>
                    <div class="mb-3">
                        <div class="fs-4 fw-bold text-secondary">{{ number_format($topPerformers[1]->pivot->steps) }}</div>
                        <div class="text-muted">steps</div>
                    </div>
                    <div class="progress mb-2">
                        <div class="progress-bar bg-secondary" 
                             style="width: {{ min(100, ($topPerformers[1]->pivot->steps / $challenge->required_steps) * 100) }}%"></div>
                    </div>
                    <div class="text-muted small">
                        {{ number_format(($topPerformers[1]->pivot->steps / $challenge->required_steps) * 100, 1) }}% complete
                    </div>
                    @if($topPerformers[1]->pivot->is_winner)
                    <div class="winner-badge mt-2">
                        <i class="mdi mdi-crown"></i>Winner
                    </div>
                    @endif
                </div>
            </div>

            <!-- 1st Place -->
            <div class="col-md-4">
                <div class="rank-card top-3-card text-center" style="transform: scale(1.05);">
                    <div class="mb-3">
                        <i class="mdi mdi-trophy text-warning fs-1"></i>
                    </div>
                    <div class="rank-number text-warning">#1</div>
                    <div class="avatar-placeholder mx-auto mb-3">
                        {{ strtoupper(substr($topPerformers[0]->name, 0, 1)) }}
                    </div>
                    <h5 class="mb-1">{{ $topPerformers[0]->name }}</h5>
                    <p class="text-muted mb-2">{{ $topPerformers[0]->email }}</p>
                    <div class="mb-3">
                        <div class="fs-4 fw-bold text-warning">{{ number_format($topPerformers[0]->pivot->steps) }}</div>
                        <div class="text-muted">steps</div>
                    </div>
                    <div class="progress mb-2">
                        <div class="progress-bar bg-warning" 
                             style="width: {{ min(100, ($topPerformers[0]->pivot->steps / $challenge->required_steps) * 100) }}%"></div>
                    </div>
                    <div class="text-muted small">
                        {{ number_format(($topPerformers[0]->pivot->steps / $challenge->required_steps) * 100, 1) }}% complete
                    </div>
                    @if($topPerformers[0]->pivot->is_winner)
                    <div class="winner-badge mt-2">
                        <i class="mdi mdi-crown"></i>Winner
                    </div>
                    @endif
                </div>
            </div>

            <!-- 3rd Place -->
            <div class="col-md-4">
                <div class="rank-card top-3-card text-center">
                    <div class="mb-3">
                        <i class="mdi mdi-trophy text-bronze fs-1"></i>
                    </div>
                    <div class="rank-number text-bronze">#3</div>
                    <div class="avatar-placeholder mx-auto mb-3">
                        {{ strtoupper(substr($topPerformers[2]->name, 0, 1)) }}
                    </div>
                    <h5 class="mb-1">{{ $topPerformers[2]->name }}</h5>
                    <p class="text-muted mb-2">{{ $topPerformers[2]->email }}</p>
                    <div class="mb-3">
                        <div class="fs-4 fw-bold text-bronze">{{ number_format($topPerformers[2]->pivot->steps) }}</div>
                        <div class="text-muted">steps</div>
                    </div>
                    <div class="progress mb-2">
                        <div class="progress-bar bg-bronze" 
                             style="width: {{ min(100, ($topPerformers[2]->pivot->steps / $challenge->required_steps) * 100) }}%"></div>
                    </div>
                    <div class="text-muted small">
                        {{ number_format(($topPerformers[2]->pivot->steps / $challenge->required_steps) * 100, 1) }}% complete
                    </div>
                    @if($topPerformers[2]->pivot->is_winner)
                    <div class="winner-badge mt-2">
                        <i class="mdi mdi-crown"></i>Winner
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @endif

        <!-- All Participants Grid -->
        <div class="row">
            <div class="col-12">
                <h4 class="mb-3">
                    <i class="mdi mdi-format-list-numbered me-2"></i>All Participants
                </h4>
            </div>
            
            @forelse($topPerformers as $index => $user)
            <div class="col-lg-4 col-md-6 mb-3">
                <div class="rank-card">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    @if($index < 3)
                                        @if($index == 0)
                                        <i class="mdi mdi-trophy text-warning fs-3"></i>
                                        @elseif($index == 1)
                                        <i class="mdi mdi-trophy text-secondary fs-3"></i>
                                        @elseif($index == 2)
                                        <i class="mdi mdi-trophy text-bronze fs-3"></i>
                                        @endif
                                    @else
                                    <div class="fw-bold fs-4 text-muted">#{{ $index + 1 }}</div>
                                    @endif
                                </div>
                                <div class="avatar-placeholder">
                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <h6 class="mb-1">{{ $user->name }}</h6>
                            <p class="text-muted small mb-2">{{ $user->email }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-bold text-primary">{{ number_format($user->pivot->steps) }}</div>
                                    <div class="text-muted small">steps</div>
                                </div>
                                <div class="text-end">
                                    <div class="progress-circle" style="--progress: {{ ($user->pivot->steps / $challenge->required_steps) * 360 }}deg;">
                                        <div class="progress-text">
                                            {{ number_format(($user->pivot->steps / $challenge->required_steps) * 100, 1) }}%
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if($user->pivot->is_winner)
                            <div class="winner-badge mt-2">
                                <i class="mdi mdi-crown"></i>Winner
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="mdi mdi-trophy-off fs-1 text-muted"></i>
                    <h5 class="mt-3 text-muted">No Participants Yet</h5>
                    <p class="text-muted">This challenge doesn't have any participants yet.</p>
                </div>
            </div>
            @endforelse
        </div>

        <!-- Action Buttons -->
        <div class="row mt-4">
            <div class="col-12 text-center">
                <a href="{{ route('globalChallenges.participants', $challenge->id) }}" class="btn btn-primary me-2">
                    <i class="mdi mdi-account-group me-1"></i>View All Participants
                </a>
                <a href="{{ route('globalChallenges.show', $challenge->id) }}" class="btn btn-secondary">
                    <i class="mdi mdi-arrow-left me-1"></i>Back to Challenge
                </a>
            </div>
        </div>
    </div>
</div>
@endsection