@extends('layouts.app')
@section('page-title', __('User Performance'))


@section('title', __('User Performance'))

@section('content')
<div class="content-wrapper">
    @include('partials.messages')

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">
            {{ __('Performance - :name', ['name' => trim($subject->first_name . ' ' . $subject->last_name)]) }}
        </h4>
        <a href="{{ route('performance.users.index') }}" class="btn btn-outline-secondary">
            <i class="fa fa-arrow-left mr-1"></i> {{ __('Back to Users') }}
        </a>
    </div>

    <div class="row mb-3">
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-muted small">{{ __('Overall Score') }}</div>
                    @if($summary['overall_score'] !== null)
                        <div class="mt-1">@include('performance.partials.score-badge', ['score' => $summary['overall_score']])</div>
                    @else
                        <div class="text-muted mt-1">{{ __('No evaluations yet') }}</div>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-muted small">{{ __('Evaluations') }}</div>
                    <div class="mt-1" style="font-size: 1.25rem;">{{ $summary['reviews_count'] }}</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-muted small">{{ __('Last Evaluated') }}</div>
                    <div class="mt-1" style="font-size: 1.25rem;">
                        {{ $summary['last_evaluated'] ? \Illuminate\Support\Carbon::parse($summary['last_evaluated'])->format('M j, Y') : '—' }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-body">
            <h6 class="card-title">{{ __('Score Trend') }}</h6>
            @if($trend->isEmpty())
                <p class="text-muted mb-0">{{ __('No evaluations recorded yet.') }}</p>
            @else
                <canvas id="performance-trend-chart" height="90"></canvas>
            @endif
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h6 class="card-title">{{ __('Evaluation History') }}</h6>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>{{ __('Date Evaluated') }}</th>
                        <th>{{ __('KPI') }}</th>
                        <th>{{ __('Score') }}</th>
                        <th>{{ __('Next Evaluation') }}</th>
                        <th class="text-right">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($trend->sortByDesc('date_evaluated') as $performance)
                        <tr>
                            <td>{{ $performance->date_evaluated->format('M j, Y') }}</td>
                            <td>{{ $performance->kpi->title ?? __('Deleted KPI') }}</td>
                            <td>@include('performance.partials.score-badge', ['score' => $performance->avg_score, 'showLabel' => false])</td>
                            <td>{{ optional($performance->next_evaluation_date)->format('M j, Y') ?? '—' }}</td>
                            <td class="text-right">
                                <a href="{{ route('performance.reviews.show', $performance) }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="fa fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">{{ __('No evaluations recorded yet.') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@if($trend->isNotEmpty())
    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const labels = @json($trend->pluck('date_evaluated')->map(fn ($d) => $d->format('M j, Y')));
                const scores = @json($trend->pluck('avg_score'));

                const bandColor = (score) => {
                    if (score >= 85) return '#28a745';
                    if (score >= 70) return '#007bff';
                    if (score >= 50) return '#FFBF00';
                    return '#dc3545';
                };

                const ctx = document.getElementById('performance-trend-chart');
                if (!ctx || typeof Chart === 'undefined') return;

                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: '{{ __('Avg Score') }}',
                            data: scores,
                            borderColor: '#6c757d',
                            backgroundColor: 'rgba(108, 117, 125, 0.08)',
                            pointBackgroundColor: scores.map(bandColor),
                            pointBorderColor: scores.map(bandColor),
                            pointRadius: 5,
                            tension: 0.25,
                            fill: true,
                        }],
                    },
                    options: {
                        scales: {
                            y: { min: 0, max: 100, title: { display: true, text: '{{ __('Score (%)') }}' } },
                        },
                        plugins: {
                            legend: { display: false },
                        },
                    },
                });
            });
        </script>
    @endpush
@endif