@extends('layouts/contentNavbarLayout')

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

@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}">
@endsection

@section('page-style')
<style>
.participant-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.completion-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

.stats-card {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

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

.stats-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

.challenge-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
</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('personalChallenges.index') }}">Personal Challenges</a></li>
        <li class="breadcrumb-item"><a href="{{ route('personalChallenges.show', $challenge->id) }}">{{ $challenge->title }}</a></li>
        <li class="breadcrumb-item active">Participants</li>
    </ol>
</nav>
<!-- Challenge Header -->
<div class="challenge-header">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h3 class="mb-2">{{ $challenge->title }} - Participants</h3>
            <p class="mb-0 opacity-90">{{ $challenge->description }}</p>
        </div>
        <div class="col-md-4 text-end">
            <a href="{{ route('personalChallenges.show', $challenge->id) }}" class="btn btn-light">
                <i class="mdi mdi-arrow-left me-1"></i>Back to Challenge
            </a>
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card">
            <div class="stats-number">{{ number_format($totalParticipants) }}</div>
            <div class="stats-label">Total Participants</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card">
            <div class="stats-number">{{ number_format($totalSteps) }}</div>
            <div class="stats-label">Total Steps</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card">
            <div class="stats-number">{{ number_format($totalCompletions) }}</div>
            <div class="stats-label">Total Completions</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stats-card">
            <div class="stats-number">{{ number_format($averageSteps) }}</div>
            <div class="stats-label">Average Steps</div>
        </div>
    </div>
</div>

<!-- Participants Table -->
<div class="card">
    <div class="card-header border-bottom">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-account-group me-2"></i>All Participants
                </h5>
                <p class="card-text text-muted mb-0">Complete list of challenge participants and their progress</p>
            </div>
        </div>
    </div>

    <div class="card-body">
        @if($challenge->users->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover" id="participantsTable">
                    <thead>
                        <tr>
                            <th>Rank</th>
                            <th>Participant</th>
                            <th>Email</th>
                            <th>Completions</th>
                            <th>Total Steps</th>
                            @if($challenge->is_steps_goal)
                                <th>Goal Progress</th>
                            @endif
                            <th>Joined Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($challenge->users as $index => $user)
                            <tr>
                                <td>
                                    @if($index < 3)
                                        <span class="badge bg-{{ $index === 0 ? 'warning' : 'secondary' }} text-{{ $index >= 3 ? 'dark' : 'white' }}">
                                            #{{ $index + 1 }}
                                            @if($index === 0)
                                                <i class="mdi mdi-trophy-variant ms-1"></i>
                                            @elseif($index === 1)
                                                <i class="mdi mdi-medal ms-1"></i>
                                            @elseif($index === 2)
                                                <i class="mdi mdi-medal ms-1"></i>
                                            @endif
                                        </span>
                                    @else
                                        <span class="badge bg-light text-dark">#{{ $index + 1 }}</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($user->avatar)
                                            <img src="{{ $user->avatar }}" alt="{{ $user->name }}" class="participant-avatar me-3">
                                        @else
                                            <div class="participant-avatar bg-primary d-flex align-items-center justify-content-center text-white me-3">
                                                {{ substr($user->name, 0, 1) }}
                                            </div>
                                        @endif
                                        <div>
                                            <div class="fw-semibold">{{ $user->name }}</div>
                                            @if($user->company)
                                                <div class="small text-muted">{{ $user->company->name }}</div>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <span class="completion-badge bg-success text-white">
                                        {{ $user->pivot->num_of_completions }}
                                    </span>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ number_format($user->pivot->steps) }}</div>
                                    @if($challenge->frequency === 'daily')
                                        <div class="small text-muted">
                                            Avg: {{ $user->pivot->num_of_completions > 0 ? number_format($user->pivot->steps / $user->pivot->num_of_completions) : 0 }}/day
                                        </div>
                                    @endif
                                </td>
                                @if($challenge->is_steps_goal)
                                    <td>
                                        @php
                                            $progress = min(100, ($user->pivot->steps / $challenge->steps_goal) * 100);
                                        @endphp
                                        <div class="progress mb-1" style="height: 8px;">
                                            <div class="progress-bar bg-{{ $progress >= 100 ? 'success' : ($progress >= 50 ? 'warning' : 'danger') }}" 
                                                 style="width: {{ $progress }}%"></div>
                                        </div>
                                        <small class="text-muted">{{ number_format($progress, 1) }}%</small>
                                    </td>
                                @endif
                                <td>
                                    <div>{{ \Carbon\Carbon::parse($user->pivot->created_at)->format('M d, Y') }}</div>
                                    <div class="small text-muted">{{ \Carbon\Carbon::parse($user->pivot->created_at)->locale('en')->diffForHumans() }}</div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-5">
                <div class="mb-3">
                    <i class="mdi mdi-account-off-outline display-3 text-muted"></i>
                </div>
                <h5 class="text-muted mb-3">No Participants Yet</h5>
                <p class="text-muted mb-4">This challenge doesn't have any participants yet. Users can join through the mobile app.</p>
                <a href="{{ route('personalChallenges.enrollAllUsers', $challenge->id) }}" class="btn btn-success">
                    <i class="mdi mdi-account-plus me-1"></i>Enroll All Users
                </a>
            </div>
        @endif
    </div>
</div>
<script>
$(document).ready(function() {
    if ($('#participantsTable tbody tr').length > 0) {
        $('#participantsTable').DataTable({
            responsive: true,
            order: [[3, 'desc']], // Order by completions desc
            columnDefs: [
                { orderable: false, targets: [0] }, // Disable ordering on rank column
                { searchable: false, targets: [0, 3, 4, 5] } // Disable search on specific columns
            ],
            language: {
                search: 'Search participants:',
                lengthMenu: 'Show _MENU_ participants per page',
                info: 'Showing _START_ to _END_ of _TOTAL_ participants',
                infoEmpty: 'No participants found',
                infoFiltered: '(filtered from _MAX_ total participants)'
            },
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
        });
    }
});
</script>
@endsection

@section('vendor-js')
<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
@endsection