@extends('layouts.app')

@section('content')
<div class="container-fluid py-4" style="background-color: #f5fdf5; min-height: 100vh;">

    {{-- ===========================
         PAGE HEADER
    ============================ --}}
    <div class="mb-4">
        <h2 class="text-success fw-bold">{{ $user->name }} - Performance Report</h2>
        <p class="text-muted">Summary of progress, performance, and trainee insights.</p>
    </div>

    {{-- ===========================
         SUMMARY CARDS / CIRCLES
    ============================ --}}
    @if(!empty($summaryCards) && count($summaryCards) > 0)
        <div class="row g-3 mb-5">
            @foreach($summaryCards as $card)
            @php
                $progress = is_numeric($card['value']) ? min($card['value'],100) : 0;
            @endphp
            <div class="col-md-3 col-sm-6">
                <div class="card shadow-sm rounded-3 border-success h-100">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center text-center">
                        <div class="mb-2" style="width:70px; height:70px; position: relative;">
                            <svg viewBox="0 0 36 36" class="circular-chart green">
                                <path class="circle-bg"
                                    d="M18 2.0845
                                        a 15.9155 15.9155 0 0 1 0 31.831
                                        a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                <path class="circle"
                                    stroke-dasharray="{{ $progress }}, 100"
                                    d="M18 2.0845
                                        a 15.9155 15.9155 0 0 1 0 31.831
                                        a 15.9155 15.9155 0 0 1 0 -31.831"/>
                                <text x="18" y="20.35" class="percentage">{{ $progress }}%</text>
                            </svg>
                        </div>
                        <h6 class="text-muted text-uppercase">{{ $card['label'] }}</h6>
                        <p class="fs-4 fw-bold text-success mb-0">{{ $card['value'] }}{{ $card['suffix'] ?? '' }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    @else
        <p class="text-muted">No summary data available for this user yet.</p>
    @endif

    {{-- ===========================
         TRAINEE MODULE PROGRESS
    ============================ --}}
    @if($user->role === 'trainee')
        <h4 class="text-success mb-3">Module Progress</h4>

        @if($activities->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover shadow-sm rounded-3 bg-white">
                <thead class="table-success">
                    <tr>
                        <th>#</th>
                        <th>Module Title</th>
                        <th>Status</th>
                        <th>Score</th>
                        <th>Grade</th>
                        <th>Comments</th>
                        <th>Date</th>
                        <th>Progress</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($activities as $index => $activity)
                    @php
                        $progress = 0;
                        if(in_array(strtolower($activity['status']), ['completed','done'])) {
                            $progress = 100;
                        } elseif(isset($activity['score']) && is_numeric($activity['score'])) {
                            $progress = $activity['score'];
                        }
                    @endphp
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $activity['title'] }}</td>
                        <td>{{ ucfirst($activity['status'] ?? 'N/A') }}</td>
                        <td>{{ $activity['score'] ?? 'N/A' }}</td>
                        <td>{{ $activity['grade'] ?? 'N/A' }}</td>
                        <td>{{ $activity['comments'] ?? '-' }}</td>
                        <td>{{ $activity['date'] ?? '-' }}</td>
                        <td>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" role="progressbar"
                                    style="width: {{ $progress }}%;"
                                    aria-valuenow="{{ $progress }}" aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <p class="text-muted">No modules recorded for this trainee yet.</p>
        @endif
    @endif

    {{-- ===========================
         TRAINER / LEAD TRAINER REPORT
    ============================ --}}
    @if(in_array($user->role, ['trainer', 'lead_trainer']))
        <h4 class="text-success mt-5 mb-3">Trainee Performance</h4>

        @if(isset($user->trainees) && $user->trainees->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover shadow-sm rounded-3 bg-white">
                <thead class="table-success">
                    <tr>
                        <th>#</th>
                        <th>Trainee Name</th>
                        <th>Average Score</th>
                        <th>Completed Modules</th>
                        <th>Overall Progress</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($user->trainees as $index => $trainee)
                    @php
                        $total = $trainee->performances->count();
                        $completed = $trainee->performances->where('status','completed')->count();
                        $progress = $total > 0 ? round(($completed/$total)*100,1) : 0;
                    @endphp
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $trainee->name }}</td>
                        <td>{{ round($trainee->performances->avg('score') ?? 0,1) }}%</td>
                        <td>{{ $completed }}</td>
                        <td>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" role="progressbar"
                                    style="width: {{ $progress }}%;"
                                    aria-valuenow="{{ $progress }}" aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
            <p class="text-muted">No trainees assigned yet.</p>
        @endif
    @endif

</div>

{{-- ===========================
     CIRCULAR CHART STYLES
=========================== --}}
<style>
.circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
}
.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}
.circle {
  fill: none;
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke: #28a745;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 0.6s ease 0s;
}
.percentage {
  fill: #28a745;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}
</style>
@endsection