@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>

        {{-- Goals attached to this evaluation --}}
        @if($performance->goals->count())
        <div class="card">
            <div class="card-header">
                <i class="bi bi-trophy me-2" style="color:#f59e0b;"></i>
                Performance Goals ({{ $performance->goals->count() }})
                <span style="font-size:.74rem;color:var(--text-3);margin-left:.5rem;">
                    Active when this evaluation was created
                </span>
            </div>
            <div class="card-body p-0">
                @foreach($performance->goals as $goal)
                <div class="px-4 py-3" style="border-bottom:1px solid var(--card-border);">
                    <div class="d-flex align-items-start justify-content-between gap-2 flex-wrap mb-1">
                        <div class="fw-semibold" style="font-size:.92rem;">{{ $goal->title }}</div>
                        <div class="d-flex gap-2">
                            <span class="badge bg-{{ $goal->priority_badge }}" style="font-size:.65rem;">{{ ucfirst($goal->priority) }}</span>
                            <span class="badge bg-{{ $goal->status_badge }}" style="font-size:.65rem;">{{ $goal->status_label }}</span>
                        </div>
                    </div>

                    @if($goal->target_metric)
                    <div style="font-size:.78rem;color:var(--text-2);margin-bottom:.4rem;">
                        <i class="bi bi-bullseye me-1"></i>{{ $goal->target_metric }}
                    </div>
                    @endif

                    @if($goal->criterion)
                    <div style="font-size:.75rem;color:#1D9080;margin-bottom:.4rem;">
                        <i class="bi bi-link-45deg me-1"></i>Linked to: {{ $goal->criterion->name }}
                    </div>
                    @endif

                    {{-- Self-assessment on this view --}}
                    @if($goal->self_rating || $goal->self_comments)
                    <div class="mt-2 p-2 rounded-3" style="background:#f0f4f8;font-size:.82rem;">
                        <div class="fw-semibold mb-1">
                            Self-Assessment:
                            @for($s=1;$s<=5;$s++)
                            <i class="bi bi-star{{ $s<=$goal->self_rating?'-fill':'' }}"
                               style="color:#f59e0b;font-size:.8rem;"></i>
                            @endfor
                        </div>
                        @if($goal->self_comments)
                        <div style="color:var(--text-2);">{{ $goal->self_comments }}</div>
                        @endif
                    </div>
                    @elseif(auth()->user()->employee?->id === $performance->employee_id)
                    <div style="font-size:.78rem;color:#f59e0b;margin-top:.3rem;">
                        <i class="bi bi-exclamation-circle me-1"></i>
                        Self-assessment not yet added.
                        <a href="{{ route('goals.index') }}" style="color:#f59e0b;">Add it from My Goals →</a>
                    </div>
                    @endif

                    {{-- Evaluator comments --}}
                    @if($goal->evaluator_comments)
                    <div class="mt-2 p-2 rounded-3" style="background:#f0faf4;border-left:3px solid #059669;font-size:.82rem;">
                        <div class="fw-semibold mb-1" style="color:#065f46;">Manager / HR Feedback:</div>
                        <div style="color:var(--text-2);">{{ $goal->evaluator_comments }}</div>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
        @endif
        @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