@extends('layouts/contentNavbarLayout')

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

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

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

.stat-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: none;
    height: 100%;
}

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

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
}

.stat-icon {
    font-size: 2.5rem;
    opacity: 0.3;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.participant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

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

.frequency-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 50rem;
}

.frequency-daily {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
}

.frequency-weekly {
    background: linear-gradient(45deg, #4834d4, #686de0);
    color: white;
}

.frequency-monthly {
    background: linear-gradient(45deg, #00d2d3, #54a0ff);
    color: white;
}

.challenge-image {
    max-height: 300px;
    object-fit: cover;
    border-radius: 0.75rem;
}

.recent-completion {
    border-left: 3px solid #28a745;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0 0.375rem 0.375rem 0;
}
</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 active">{{ $challenge->title }}</li>
    </ol>
</nav>
<!-- Challenge Header -->
<div class="challenge-header">
    <div class="row align-items-center">
        <div class="col-md-8">
            <div class="d-flex align-items-center mb-3">
                <h1 class="mb-0 me-3">{{ $challenge->title }}</h1>
                <span class="frequency-badge frequency-{{ $challenge->frequency }}">
                    <i class="mdi mdi-{{ $challenge->frequency === 'daily' ? 'calendar-today' : ($challenge->frequency === 'weekly' ? 'calendar-week' : 'calendar-month') }} me-1"></i>
                    {{ ucfirst($challenge->frequency) }}
                </span>
            </div>
            
            <p class="mb-3 opacity-90">{{ $challenge->description }}</p>
            
            <div class="row g-3">
                <div class="col-auto">
                    <div class="d-flex align-items-center">
                        <i class="mdi mdi-calendar-start me-2"></i>
                        <span>Started: {{ \Carbon\Carbon::parse($challenge->start_date)->format('M d, Y') }}</span>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="d-flex align-items-center">
                        <i class="mdi mdi-calendar-end me-2"></i>
                        <span>Ends: {{ \Carbon\Carbon::parse($challenge->end_date)->format('M d, Y') }}</span>
                    </div>
                </div>
                <div class="col-auto">
                    <span class="badge bg-{{ $statusColor }} fs-6">
                        <i class="mdi mdi-{{ $status === 'active' ? 'play' : ($status === 'upcoming' ? 'clock' : 'check') }} me-1"></i>
                        {{ ucfirst($status) }}
                    </span>
                </div>
            </div>
        </div>
        
        <div class="col-md-4 text-end">
            @if($challenge->image)
                <img src="{{ $challenge->image }}" alt="{{ $challenge->title }}" class="challenge-image">
            @else
                <div class="challenge-image d-flex align-items-center justify-content-center bg-white bg-opacity-25" style="height: 200px;">
                    <i class="mdi mdi-walk display-1 opacity-50"></i>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card position-relative">
            <i class="mdi mdi-account-group stat-icon text-primary"></i>
            <div class="stat-number text-primary">{{ number_format($totalParticipants) }}</div>
            <div class="stat-label">Total Participants</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card position-relative">
            <i class="mdi mdi-walk stat-icon text-success"></i>
            <div class="stat-number text-success">{{ number_format($totalSteps) }}</div>
            <div class="stat-label">Total Steps</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card position-relative">
            <i class="mdi mdi-trophy stat-icon text-warning"></i>
            <div class="stat-number text-warning">{{ number_format($totalCompletions) }}</div>
            <div class="stat-label">Total Completions</div>
        </div>
    </div>
    
    <div class="col-lg-3 col-md-6 mb-3">
        <div class="stat-card position-relative">
            <i class="mdi mdi-chart-line stat-icon text-info"></i>
            <div class="stat-number text-info">{{ number_format($averageSteps) }}</div>
            <div class="stat-label">Average Steps</div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Main Content -->
    <div class="col-lg-8">
        <!-- Challenge Details -->
        <div class="card mb-4">
            <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">
                        <div class="mb-3">
                            <label class="form-label small text-muted">Challenge Type</label>
                            <div class="fw-semibold">
                                <i class="mdi mdi-walk me-1 text-success"></i>
                                Walking Challenge
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label small text-muted">Frequency</label>
                            <div class="fw-semibold">
                                <span class="frequency-badge frequency-{{ $challenge->frequency }}">
                                    {{ ucfirst($challenge->frequency) }}
                                </span>
                            </div>
                        </div>
                        
                        @if($challenge->is_steps_goal)
                        <div class="mb-3">
                            <label class="form-label small text-muted">Steps Goal</label>
                            <div class="fw-semibold">
                                <i class="mdi mdi-target me-1 text-warning"></i>
                                {{ number_format($challenge->steps_goal) }} steps
                            </div>
                        </div>
                        @endif
                    </div>
                    
                    <div class="col-md-6">
                        @if($challenge->is_points_prize)
                        <div class="mb-3">
                            <label class="form-label small text-muted">Points Prize</label>
                            <div class="fw-semibold">
                                <i class="mdi mdi-star me-1 text-info"></i>
                                {{ number_format($challenge->points_prize) }} points
                            </div>
                        </div>
                        @endif
                        
                        @if($challenge->prize_description)
                        <div class="mb-3">
                            <label class="form-label small text-muted">Prize Description</label>
                            <div class="fw-semibold">{{ $challenge->prize_description }}</div>
                        </div>
                        @endif
                        
                        <div class="mb-3">
                            <label class="form-label small text-muted">Average Completions</label>
                            <div class="fw-semibold">
                                <i class="mdi mdi-chart-box me-1 text-primary"></i>
                                {{ $averageCompletions }} per participant
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Top Performers -->
        @if($topPerformers->count() > 0)
        <div class="card mb-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="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Rank</th>
                                <th>Participant</th>
                                <th>Completions</th>
                                <th>Total Steps</th>
                                <th>Progress</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($topPerformers as $index => $user)
                                <tr>
                                    <td>
                                        <span class="badge bg-secondary">
                                            #{{ $index + 1 }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            @if($user->avatar)
                                                <img src="{{ $user->avatar }}" alt="{{ $user->name }}" class="participant-avatar me-2">
                                            @else
                                                <div class="participant-avatar bg-primary d-flex align-items-center justify-content-center text-white me-2">
                                                    {{ substr($user->name, 0, 1) }}
                                                </div>
                                            @endif
                                            <div>
                                                <div class="fw-semibold">{{ $user->name }}</div>
                                                <div class="small text-muted">{{ $user->email }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="completion-badge bg-success text-white">
                                            {{ $user->pivot->num_of_completions }}
                                        </span>
                                    </td>
                                    <td>{{ number_format($user->pivot->steps) }}</td>
                                    <td>
                                        @if($challenge->is_steps_goal)
                                            @php
                                                $progress = min(100, ($user->pivot->steps / $challenge->steps_goal) * 100);
                                            @endphp
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-success" style="width: {{ $progress }}%"></div>
                                            </div>
                                            <small class="text-muted">{{ number_format($progress, 1) }}%</small>
                                        @else
                                            <span class="text-muted">No goal set</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <div class="text-center mt-3">
                    <a href="{{ route('personalChallenges.participants', $challenge->id) }}" class="btn btn-outline-primary">
                        <i class="mdi mdi-account-group me-1"></i>View All Participants
                    </a>
                </div>
            </div>
        </div>
        @endif

        <!-- Recent Completions -->
        @if($recentCompletions->count() > 0)
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-clock-outline me-2"></i>Recent Completions
                </h5>
            </div>
            <div class="card-body">
                @foreach($recentCompletions->take(10) as $completion)
                    <div class="recent-completion">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                @if($completion->user->avatar)
                                    <img src="{{ $completion->user->avatar }}" alt="{{ $completion->user->name }}" class="participant-avatar me-3">
                                @else
                                    <div class="participant-avatar bg-success d-flex align-items-center justify-content-center text-white me-3">
                                        {{ substr($completion->user->name, 0, 1) }}
                                    </div>
                                @endif
                                <div>
                                    <div class="fw-semibold">{{ $completion->user->name }}</div>
                                    <div class="small text-muted">
                                        <i class="mdi mdi-walk me-1"></i>
                                        {{ number_format($completion->steps) }} steps
                                        @if($completion->is_points_prize && $completion->points_prize)
                                            <span class="ms-2">
                                                <i class="mdi mdi-star text-warning me-1"></i>
                                                +{{ $completion->points_prize }} points
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <div class="small text-muted">{{ \Carbon\Carbon::parse($completion->completion_date)->format('M d, Y') }}</div>
                                <div class="small text-muted">{{ \Carbon\Carbon::parse($completion->completion_date)->diffForHumans() }}</div>
                            </div>
                        </div>
                    </div>
                @endforeach
                
                <div class="text-center mt-3">
                    <a href="{{ route('personalChallenges.completions', $challenge->id) }}" class="btn btn-outline-success">
                        <i class="mdi mdi-history me-1"></i>View All Completions
                    </a>
                </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('personalChallenges.participants', $challenge->id) }}" class="btn btn-primary">
                        <i class="mdi mdi-account-group me-1"></i>View Participants
                    </a>
                    <a href="{{ route('personalChallenges.completions', $challenge->id) }}" class="btn btn-info">
                        <i class="mdi mdi-history me-1"></i>View Completions
                    </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('personalChallenges.edit', $challenge->id) }}" class="btn btn-warning">
                        <i class="mdi mdi-pencil me-1"></i>Edit Challenge
                    </a>
                    <button type="button" class="btn btn-outline-secondary" onclick="enrollAllUsers()">
                        <i class="mdi mdi-account-plus me-1"></i>Enroll All Users
                    </button>
                </div>
            </div>
        </div>

        <!-- Challenge Statistics -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-chart-pie me-2"></i>Statistics
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6">
                        <div class="text-center">
                            <div class="h4 text-primary mb-1">{{ $totalParticipants }}</div>
                            <div class="small text-muted">Participants</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <div class="h4 text-success mb-1">{{ $totalCompletions }}</div>
                            <div class="small text-muted">Completions</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <div class="h4 text-warning mb-1">{{ number_format($averageSteps) }}</div>
                            <div class="small text-muted">Avg Steps</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-center">
                            <div class="h4 text-info mb-1">{{ $averageCompletions }}</div>
                            <div class="small text-muted">Avg Completions</div>
                        </div>
                    </div>
                </div>

                @if($challenge->is_steps_goal)
                <hr>
                <div class="mb-3">
                    <div class="d-flex justify-content-between small mb-1">
                        <span>Challenge Goal</span>
                        <span>{{ number_format($challenge->steps_goal) }} steps</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-success" style="width: 100%"></div>
                    </div>
                </div>
                @endif

                <hr>
                <div class="small text-muted">
                    <div class="mb-1">
                        <i class="mdi mdi-calendar-plus me-1"></i>
                        Created: {{ $challenge->created_at->format('M d, Y') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function enrollAllUsers() {
    if (confirm('Are you sure you want to enroll all users to this challenge? This will add all users who are not already enrolled.')) {
        // Create a form and submit it
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '{{ route('personalChallenges.enrollAllUsers', $challenge->id) }}';
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection