@extends('layouts.app')
@section('title','Evaluation — '.$performance->eval_number)
@section('page-title','Performance Evaluation')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('performance.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
            <div>
                <h1>{{ $performance->eval_number }}</h1>
                <nav aria-label="breadcrumb"><ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('performance.index') }}">Evaluations</a></li>
                    <li class="breadcrumb-item active">{{ $performance->eval_number }}</li>
                </ol></nav>
            </div>
        </div>
        <span class="badge bg-{{ $performance->status==='completed'?'success':($performance->status==='submitted'?'warning':'secondary') }} fs-6">
            {{ ucfirst($performance->status) }}
        </span>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-lg-8">
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-person-check me-2" style="color:var(--ul-primary);"></i>Evaluation Summary</div>
            <div class="card-body">
                <div class="row g-3 mb-3">
                    <div class="col-6 col-md-3">
                        <div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Employee</div>
                        <div class="fw-semibold mt-1">{{ $performance->employee->full_name ?? '—' }}</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Period</div>
                        <div class="fw-semibold mt-1">{{ $performance->period->name ?? '—' }}</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Evaluator</div>
                        <div class="fw-semibold mt-1">{{ $performance->evaluator->name ?? '—' }}</div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div style="font-size:.64rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Overall Score</div>
                        @php
                            $score = $performance->weighted_score ? round($performance->weighted_score) : 0;
                            $rMap  = ['excellent'=>'#059669','very_good'=>'#0055b3','satisfactory'=>'#0284c7','needs_improvement'=>'#f59e0b','unsatisfactory'=>'#dc2626'];
                            $rCol  = $rMap[$performance->rating ?? ''] ?? '#6c757d';
                        @endphp
                        <div class="fw-bold mt-1" style="font-size:1.2rem;color:{{ $rCol }};">{{ $score }}%</div>
                        <span class="badge" style="background:{{ $rCol }};color:#fff;font-size:.7rem;">{{ $performance->rating_label }}</span>
                    </div>
                </div>

                {{-- Criteria scores --}}
                @if($performance->scores->count())
                <div style="font-size:.72rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem;">Criteria Breakdown</div>
                @foreach($performance->scores as $s)
                @php $pct = $s->criterion ? ($s->score / $s->criterion->max_score) * 100 : 0; @endphp
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1">
                        <span style="font-size:.82rem;font-weight:600;">{{ $s->criterion->name ?? '—' }}</span>
                        <span style="font-size:.78rem;color:var(--text-2);">{{ $s->score }} / {{ $s->criterion->max_score ?? '—' }}</span>
                    </div>
                    <div class="progress" style="height:8px;">
                        <div class="progress-bar" style="width:{{ min($pct,100) }}%;background:{{ $pct>=75?'#059669':($pct>=50?'#f59e0b':'#dc2626') }};"></div>
                    </div>
                    @if($s->comments)<div style="font-size:.74rem;color:var(--text-2);margin-top:.2rem;">{{ $s->comments }}</div>@endif
                </div>
                @endforeach
                @endif
            </div>
        </div>

        {{-- Comments --}}
        <div class="card mb-3">
            <div class="card-header"><i class="bi bi-chat-text me-2" style="color:var(--ul-primary);"></i>Evaluator Comments</div>
            <div class="card-body">
                @if($performance->evaluator_comments)
                <div style="font-size:.85rem;line-height:1.7;color:var(--text-1);">{{ $performance->evaluator_comments }}</div>
                @endif
                @if($performance->development_goals)
                <div class="mt-3"><div style="font-size:.7rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Development Goals</div>
                <div style="font-size:.85rem;margin-top:.3rem;line-height:1.65;">{{ $performance->development_goals }}</div></div>
                @endif
                @if($performance->training_needs)
                <div class="mt-3"><div style="font-size:.7rem;color:var(--text-2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;">Training Needs</div>
                <div style="font-size:.85rem;margin-top:.3rem;line-height:1.65;">{{ $performance->training_needs }}</div></div>
                @endif
            </div>
        </div>

        {{-- Actions --}}
        @if($performance->status === 'submitted' && auth()->user()->employee?->id === $performance->employee_id)
        <div class="card">
            <div class="card-header"><i class="bi bi-check2-circle me-2" style="color:var(--ul-primary);"></i>Acknowledge Evaluation</div>
            <div class="card-body">
                <p style="font-size:.85rem;color:var(--text-1);">By acknowledging this evaluation, you confirm that you have read and understood your performance review. Acknowledging does not mean you agree with all assessments.</p>
                <form method="POST" action="{{ route('performance.acknowledge', $performance) }}">
                    @csrf
                    <button type="submit" class="btn btn-success"><i class="bi bi-check2-circle me-1"></i>Acknowledge Evaluation</button>
                </form>
            </div>
        </div>
        @endif

        @if($performance->status === 'acknowledged' && auth()->user()->isHrOrAdmin())
        <div class="card">
            <div class="card-header"><i class="bi bi-patch-check me-2" style="color:var(--ul-primary);"></i>HR Review</div>
            <div class="card-body">
                <form method="POST" action="{{ route('performance.hr_review', $performance) }}">
                    @csrf
                    <button type="submit" class="btn btn-primary"><i class="bi bi-patch-check me-1"></i>Mark HR Review Complete</button>
                </form>
            </div>
        </div>
        @endif
    </div>

    <div class="col-12 col-lg-4">
        <div class="card mb-3">
            <div class="card-header" style="font-size:.83rem;"><i class="bi bi-info-circle me-2" style="color:var(--ul-primary);"></i>Evaluation Status</div>
            <div class="card-body"><div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-icon bg-success text-white"><i class="bi bi-check-lg"></i></div>
                    <div class="timeline-body">
                        <div style="font-weight:700;font-size:.82rem;">Submitted</div>
                        <div style="font-size:.74rem;color:var(--text-2);">{{ $performance->created_at->format('M j, Y') }}</div>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-icon {{ $performance->acknowledged_at ? 'bg-success' : 'bg-secondary' }} text-white">
                        <i class="bi bi-{{ $performance->acknowledged_at ? 'check-lg' : 'hourglass-split' }}"></i>
                    </div>
                    <div class="timeline-body">
                        <div style="font-weight:700;font-size:.82rem;">Employee Acknowledged</div>
                        <div style="font-size:.74rem;color:var(--text-2);">
                            {{ $performance->acknowledged_at ? $performance->acknowledged_at->format('M j, Y') : 'Awaiting' }}
                        </div>
                    </div>
                </div>
                <div class="timeline-item" style="margin-bottom:0;">
                    <div class="timeline-icon {{ $performance->status==='completed' ? 'bg-success' : 'bg-secondary' }} text-white">
                        <i class="bi bi-{{ $performance->status==='completed' ? 'check-lg' : 'hourglass-split' }}"></i>
                    </div>
                    <div class="timeline-body">
                        <div style="font-weight:700;font-size:.82rem;">HR Review Complete</div>
                        <div style="font-size:.74rem;color:var(--text-2);">
                            {{ $performance->status==='completed' ? 'Completed' : 'Awaiting' }}
                        </div>
                    </div>
                </div>
            </div></div>
        </div>
    </div>
</div>
@endsection