@extends('layouts/contentNavbarLayout')

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

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

.stats-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;
}

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

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

.progress-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#28a745 0deg {{ $goalReached ? 360 : ($totalSteps / $challenge->required_steps) * 360 }}deg, #e9ecef 0deg);
    position: relative;
}

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

.progress-text {
    position: relative;
    z-index: 1;
    text-align: center;
}

.winner-card {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border: none;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.top-performer {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
</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 active">{{ $challenge->title }}</li>
    </ol>
</nav>
<div class="row">
    <div class="col-12">
        <!-- Challenge Header -->
        <div class="challenge-header">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="mb-2">{{ $challenge->title }}</h2>
                    <p class="mb-3 opacity-75">{{ $challenge->description }}</p>
                    <div class="d-flex align-items-center gap-3">
                        <span class="badge bg-{{ $statusColor }} fs-6">{{ ucfirst($status) }}</span>
                        <span class="text-white-50">
                            <i class="mdi mdi-calendar me-1"></i>
                            {{ Carbon\Carbon::parse($challenge->start_date)->format('M d, Y') }} - 
                            {{ Carbon\Carbon::parse($challenge->end_date)->format('M d, Y') }}
                        </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: 150px;">
                    @endif
                </div>
            </div>
        </div>

        <!-- Statistics Row -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="stats-card text-center">
                    <div class="stats-number text-primary">{{ number_format($challenge->required_steps) }}</div>
                    <div class="text-muted">Required Steps</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card text-center">
                    <div class="stats-number text-success">{{ $totalParticipants }}</div>
                    <div class="text-muted">Participants</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card text-center">
                    <div class="stats-number text-info">{{ number_format($totalSteps) }}</div>
                    <div class="text-muted">Total Steps</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stats-card text-center">
                    <div class="stats-number text-warning">{{ number_format($averageSteps) }}</div>
                    <div class="text-muted">Average Steps</div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Challenge Details -->
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-information-outline me-2"></i>Challenge Details
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Challenge Type</label>
                                <div class="text-muted">{{ ucfirst($challenge->type) }}</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Duration</label>
                                <div class="text-muted">
                                    {{ Carbon\Carbon::parse($challenge->start_date)->diffInDays($challenge->end_date) }} days
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Start Date</label>
                                <div class="text-muted">{{ Carbon\Carbon::parse($challenge->start_date)->format('F d, Y') }}</div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">End Date</label>
                                <div class="text-muted">{{ Carbon\Carbon::parse($challenge->end_date)->format('F d, Y') }}</div>
                            </div>
                        </div>

                        @if($challenge->is_points_prize)
                        <div class="alert alert-warning">
                            <h6 class="alert-heading">
                                <i class="mdi mdi-star me-1"></i>Prize Information
                            </h6>
                            <div class="mb-2">
                                <strong>{{ number_format($challenge->points_prize) }} Points</strong> will be awarded to winners
                            </div>
                            @if($challenge->prize_description)
                            <div class="text-muted">{{ $challenge->prize_description }}</div>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Goal Progress -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-target me-2"></i>Goal Progress
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-4 text-center">
                                <div class="progress-circle mx-auto">
                                    <div class="progress-text">
                                        <div class="fw-bold">{{ number_format(($totalSteps / $challenge->required_steps) * 100, 1) }}%</div>
                                        <small>Complete</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span class="fw-semibold">Progress</span>
                                        <span class="text-muted">{{ number_format($totalSteps) }} / {{ number_format($challenge->required_steps) }}</span>
                                    </div>
                                    <div class="progress" style="height: 10px;">
                                        <div class="progress-bar bg-success" 
                                             style="width: {{ min(100, ($totalSteps / $challenge->required_steps) * 100) }}%"></div>
                                    </div>
                                </div>
                                @if($goalReached)
                                <div class="alert alert-success mb-0">
                                    <i class="mdi mdi-check-circle me-2"></i>
                                    <strong>Goal Achieved!</strong> The challenge goal has been reached.
                                </div>
                                @else
                                <div class="text-muted">
                                    <i class="mdi mdi-information-outline me-1"></i>
                                    {{ number_format($challenge->required_steps - $totalSteps) }} more steps needed to reach the goal
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Top Performers -->
                @if($topPerformers->count() > 0)
                <div class="card mt-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-trophy me-2"></i>Top Performers
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach($topPerformers as $index => $user)
                            <div class="col-md-6 mb-3">
                                <div class="top-performer">
                                    <div class="d-flex align-items-center">
                                        <div class="me-3">
                                            <div class="fw-bold fs-4">#{{ $index + 1 }}</div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="fw-bold">{{ $user->name }}</div>
                                            <div class="opacity-75">{{ $user->email }}</div>
                                            <div class="mt-1">
                                                <span class="badge bg-light text-dark">
                                                    {{ number_format($user->pivot->steps) }} steps
                                                </span>
                                                @if($user->pivot->is_winner)
                                                <span class="badge bg-warning text-dark ms-1">
                                                    <i class="mdi mdi-crown me-1"></i>Winner
                                                </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Action Buttons -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-cog me-2"></i>Actions
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{{ route('globalChallenges.participants', $challenge->id) }}" class="btn btn-primary">
                                <i class="mdi mdi-account-group me-1"></i>View Participants
                            </a>
                            <a href="{{ route('globalChallenges.leaderboard', $challenge->id) }}" class="btn btn-success">
                                <i class="mdi mdi-trophy me-1"></i>View Leaderboard
                            </a>
                            @if($challenge->map)
                                <a href="{{ route('challengeMaps.show', $challenge->map->id) }}" class="btn btn-info">
                                    <i class="mdi mdi-map me-1"></i>View Map
                                </a>
                            @endif
                            <a href="{{ route('globalChallenges.edit', $challenge->id) }}" class="btn btn-warning">
                                <i class="mdi mdi-pencil me-1"></i>Edit Challenge
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Winners -->
                @if($winners->count() > 0)
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-crown me-2"></i>Winners
                        </h5>
                    </div>
                    <div class="card-body">
                        @foreach($winners as $winner)
                        <div class="winner-card">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <i class="mdi mdi-crown fs-4 text-warning"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-bold">{{ $winner->name }}</div>
                                    <div class="text-muted">{{ $winner->email }}</div>
                                    <div class="mt-1">
                                        <span class="badge bg-dark">
                                            {{ number_format($winner->pivot->steps) }} steps
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Challenge Info -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="mdi mdi-information me-2"></i>Challenge Info
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Created</label>
                            <div class="text-muted">{{ $challenge->created_at->format('F d, Y \a\t g:i A') }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Last Updated</label>
                            <div class="text-muted">{{ $challenge->updated_at->format('F d, Y \a\t g:i A') }}</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Challenge ID</label>
                            <div class="text-muted">#{{ $challenge->id }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection