@extends('layouts/contentNavbarLayout')

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

@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')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}">
@endsection

@section('page-style')
<style>
.completion-header {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
    color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

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

.completion-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.completion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.completion-date {
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    text-align: center;
    min-width: 120px;
}

.steps-badge {
    background: linear-gradient(45deg, #ffc107, #ffb300);
    color: #333;
    border-radius: 50rem;
    padding: 0.25rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.points-badge {
    background: linear-gradient(45deg, #6f42c1, #5a367c);
    color: white;
    border-radius: 50rem;
    padding: 0.25rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
}

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

.stats-row {
    background: #f8f9fa;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.stat-item {
    text-align: center;
    padding: 1rem;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #495057;
}

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}
</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">Completions</li>
    </ol>
</nav>
<!-- Challenge Header -->
<div class="completion-header">
    <div class="row align-items-center">
        <div class="col-md-8">
            <div class="d-flex align-items-center mb-3">
                <h3 class="mb-0 me-3">{{ $challenge->title }} - Completions</h3>
                <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">Complete history of all challenge completions by participants</p>
            <div class="d-flex gap-3">
                <a href="{{ route('personalChallenges.show', $challenge->id) }}" class="btn btn-light">
                    <i class="mdi mdi-arrow-left me-1"></i>Back to Challenge
                </a>
                <a href="{{ route('personalChallenges.participants', $challenge->id) }}" class="btn btn-outline-light">
                    <i class="mdi mdi-account-group me-1"></i>Participants
                </a>
            </div>
        </div>
        <div class="col-md-4 text-end">
            <div class="text-white">
                <div class="h2 mb-1">{{ $challenge->completions->count() }}</div>
                <div class="opacity-90">Total Completions</div>
            </div>
        </div>
    </div>
</div>

<!-- Statistics Summary -->
<div class="stats-row">
    <div class="row">
        <div class="col-lg-3 col-md-6">
            <div class="stat-item">
                <div class="stat-number text-success">{{ $challenge->completions->count() }}</div>
                <div class="stat-label">Total Completions</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-item">
                <div class="stat-number text-primary">{{ $challenge->completions->unique('user_id')->count() }}</div>
                <div class="stat-label">Unique Participants</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-item">
                <div class="stat-number text-warning">{{ number_format($challenge->completions->sum('steps')) }}</div>
                <div class="stat-label">Total Steps</div>
            </div>
        </div>
        <div class="col-lg-3 col-md-6">
            <div class="stat-item">
                <div class="stat-number text-info">{{ number_format($challenge->completions->where('is_points_prize', true)->sum('points_prize')) }}</div>
                <div class="stat-label">Points Awarded</div>
            </div>
        </div>
    </div>
</div>

<!-- Completions List -->
<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-history me-2"></i>Completion History
                </h5>
                <p class="card-text text-muted mb-0">Chronological list of all challenge completions</p>
            </div>
            <div class="col-md-6 text-end">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="filterByDate('today')">Today</button>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="filterByDate('week')">This Week</button>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="filterByDate('month')">This Month</button>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="filterByDate('all')">All Time</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card-body">
        @if($challenge->completions->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover" id="completionsTable">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Participant</th>
                            <th>Steps</th>
                            <th>Frequency</th>
                            @if($challenge->is_points_prize)
                                <th>Points</th>
                            @endif
                            <th>Prize Description</th>
                            <th>Completed</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($challenge->completions->sortByDesc('completion_date') as $completion)
                            <tr data-date="{{ $completion->completion_date }}">
                                <td>
                                    <div class="completion-date">
                                        <div class="fw-bold">{{ \Carbon\Carbon::parse($completion->completion_date)->format('M d') }}</div>
                                        <div class="small">{{ \Carbon\Carbon::parse($completion->completion_date)->format('Y') }}</div>
                                    </div>
                                </td>
                                <td>
                                    <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-primary 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">{{ $completion->user->email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($completion->steps)
                                        <span class="steps-badge">
                                            <i class="mdi mdi-walk me-1"></i>
                                            {{ number_format($completion->steps) }}
                                        </span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="frequency-badge frequency-{{ $completion->frequency }}">
                                        {{ ucfirst($completion->frequency) }}
                                    </span>
                                </td>
                                @if($challenge->is_points_prize)
                                    <td>
                                        @if($completion->is_points_prize && $completion->points_prize)
                                            <span class="points-badge">
                                                <i class="mdi mdi-star me-1"></i>
                                                +{{ $completion->points_prize }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                @endif
                                <td>
                                    @if($completion->prize_description)
                                        <span class="text-muted">{{ Str::limit($completion->prize_description, 50) }}</span>
                                    @else
                                        <span class="text-muted">No description</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="small text-muted">{{ \Carbon\Carbon::parse($completion->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-history display-3 text-muted"></i>
                </div>
                <h5 class="text-muted mb-3">No Completions Yet</h5>
                <p class="text-muted mb-4">Once participants start completing the challenge, their progress will appear here.</p>
                <a href="{{ route('personalChallenges.show', $challenge->id) }}" class="btn btn-primary">
                    <i class="mdi mdi-arrow-left me-1"></i>Back to Challenge
                </a>
            </div>
        @endif
    </div>
</div>

<!-- Recent Activity Timeline (Mobile-friendly) -->
@if($challenge->completions->count() > 0)
<div class="card mt-4 d-md-none">
    <div class="card-header">
        <h6 class="card-title mb-0">
            <i class="mdi mdi-timeline me-2"></i>Recent Activity
        </h6>
    </div>
    <div class="card-body">
        @foreach($challenge->completions->sortByDesc('completion_date')->take(10) as $completion)
            <div class="completion-card">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-start">
                        <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">
                                    @if($completion->steps)
                                        <i class="mdi mdi-walk me-1"></i>{{ number_format($completion->steps) }} steps
                                    @endif
                                    @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') }}</div>
                            <div class="small text-muted">{{ \Carbon\Carbon::parse($completion->completion_date)->locale('en')->diffForHumans() }}</div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endif

<script src="{{asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
<script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
<script>
let completionsTable;

$(document).ready(function() {
    if ($('#completionsTable tbody tr').length > 0) {
        completionsTable = $('#completionsTable').DataTable({
            responsive: true,
            order: [[6, 'desc']], // Order by completion time desc
            columnDefs: [
                { orderable: false, targets: [3, 5] }, // Disable ordering on frequency and prize description
                { searchable: false, targets: [2, 3, 4, 6] } // Disable search on specific columns
            ],
            language: {
                search: 'Search completions:',
                lengthMenu: 'Show _MENU_ completions per page',
                info: 'Showing _START_ to _END_ of _TOTAL_ completions',
                infoEmpty: 'No completions found',
                infoFiltered: '(filtered from _MAX_ total completions)'
            },
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
        });
    }
});

function filterByDate(period) {
    if (!completionsTable) return;
    
    const today = new Date();
    let startDate;
    
    switch(period) {
        case 'today':
            startDate = today.toISOString().split('T')[0];
            completionsTable.columns(0).search(startDate).draw();
            break;
        case 'week':
            const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
            filterByDateRange(weekAgo, today);
            break;
        case 'month':
            const monthAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
            filterByDateRange(monthAgo, today);
            break;
        case 'all':
        default:
            completionsTable.columns(0).search('').draw();
            break;
    }
    
    // Update button states
    document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
}

function filterByDateRange(startDate, endDate) {
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        const date = new Date(data[0]); // Assuming date is in the first column
        return date >= startDate && date <= endDate;
    });
    
    completionsTable.draw();
    
    // Remove the custom filter
    $.fn.dataTable.ext.search.pop();
}
</script>
@endsection