@extends('layouts.app')

@section('content')
<div class="container my-5">
    <h3 class="mb-4 text-success fw-bold">My Progress</h3>

    {{-- Summary Cards --}}
    @php
        $total = $total ?? 0;
        $completed = $completed ?? 0;
        $completionRate = $completionRate ?? 0;
        $averageScore = $averageScore ?? 0;

        $summary = [
            ['icon'=>'bi-clock-fill','label'=>'Completion Rate','value'=>$completionRate,'suffix'=>'%','note'=>'All modules','color'=>'bg-light-green'],
            ['icon'=>'bi-book','label'=>'Modules','value'=>"$completed/$total",'note'=>'Modules done','color'=>'bg-nyota-red'],
            ['icon'=>'bi-star-fill','label'=>'Average Score','value'=>number_format($averageScore,1),'suffix'=>'%','note'=>'Across modules','color'=>'bg-nyota-black'],
            ['icon'=>'bi-clipboard-check','label'=>'Performance Level','value'=>($averageScore >= 80 ? 'Excellent' : ($averageScore >= 60 ? 'Good' : 'Improving')),'note'=>'Overall evaluation','color'=>'bg-nyota-olive'],
        ];
    @endphp

    <div class="row g-3 mb-4">
        @foreach($summary as $card)
            <div class="col-6 col-md-3">
                <div class="card summary-card p-3 text-center">
                    <div class="icon-circle {{ $card['color'] }} text-white mx-auto mb-2">
                        <i class="bi {{ $card['icon'] }}"></i>
                    </div>
                    <div class="text-muted small">{{ $card['label'] }}</div>
                    <div class="fw-bold h4">{{ $card['value'] }}{{ $card['suffix'] ?? '' }}</div>
                    <div class="small text-muted">{{ $card['note'] }}</div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Download PDF Button --}}
    <div class="mb-4 text-end">
        <a href="{{ route('trainee.progress.download') }}" class="btn btn-primary">
            <i class="bi bi-download me-1"></i> Download PDF
        </a>
    </div>

    {{-- Activities Table --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-light fw-bold">
            <i class="bi bi-list-task me-2"></i> Assigned Modules & Activities
        </div>
        <div class="card-body">
            @if($activities->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped align-middle">
                        <thead class="table-success">
                            <tr>
                                <th>#</th>
                                <th>Module Title</th>
                                <th>Description</th>
                                <th>Status</th>
                                <th>Progress</th>
                                <th>Date Assigned</th>
                                <th>Download</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($activities as $index => $activity)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td class="fw-semibold">{{ $activity['title'] }}</td>
                                    <td>{{ $activity['description'] }}</td>
                                    <td>
                                        <span class="badge 
                                            {{ $activity['status'] === 'completed' ? 'bg-success' : ($activity['status'] === 'in-progress' ? 'bg-warning text-dark' : 'bg-secondary') }}">
                                            {{ ucfirst(str_replace('-', ' ', $activity['status'])) }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar {{ $activity['status'] === 'completed' ? 'bg-success' : 'bg-info' }}" 
                                                 role="progressbar" 
                                                 style="width: {{ $activity['score'] ?? 0 }}%;" 
                                                 aria-valuenow="{{ $activity['score'] ?? 0 }}" 
                                                 aria-valuemin="0" 
                                                 aria-valuemax="100">
                                                {{ $activity['score'] ?? 0 }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ \Carbon\Carbon::parse($activity['date'])->format('d M Y') }}</td>
                                    <td>
                                        @if(!empty($activity['file_url']))
                                            <a href="{{ route('trainee.module.download', $activity['id']) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                                Download
                                            </a>
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <p class="text-muted">No activities have been assigned to you yet.</p>
            @endif
        </div>
    </div>
</div>

{{-- Custom Styles --}}
<style>
.summary-card {
    border-radius: 12px;
    background: #d7f3d7;
    transition: all .25s ease;
}
.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.15);
}
.icon-circle {
    width: 52px; height: 52px; border-radius: 10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem;
}
.bg-light-green { background: linear-gradient(90deg,#a3e8a3,#7ed97e); }
.bg-nyota-red { background: linear-gradient(90deg,#d32f2f,#b22222); }
.bg-nyota-black { background: linear-gradient(90deg,#262626,#141414); }
.bg-nyota-olive { background: linear-gradient(90deg,#7a9a2f,#4f7a1d); }
.table thead th { font-weight: 600; }
.badge { padding: 0.45em 0.85em; font-weight: 600; font-size: 0.85rem; }
.progress { height: 20px; }
.progress-bar { font-size: 0.85rem; }
</style>
@endsection