@extends('layouts.app')

@section('content')
<div class="container-fluid py-4" style="background-color: rgba(14,243,14,0.05);">

    {{-- Page Header --}}
    <h2 class="mb-4 text-success fw-bold">Trainers Report</h2>

    {{-- Table of Trainers --}}
    <div class="table-responsive">
        <table class="table table-hover shadow-sm rounded-3 bg-light-green">
            <thead class="table-success">
                <tr>
                    <th>#</th>
                    <th>Trainer Name</th>
                    <th>Assigned Trainees</th>
                    <th>Average Score</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($trainers as $index => $trainer)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>{{ $trainer['name'] }}</td>
                    <td>{{ $trainer['traineeCount'] }}</td>
                    <td>{{ $trainer['averageScore'] }}%</td>
                    <td>
                        {{-- Optional: link to trainer's detailed report --}}
                        <a href="{{ route('reports.user', $trainer['id']) }}" class="btn btn-sm btn-success">View Report</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

</div>
@endsection