@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">نتيجة التقييم</h1>
        <p class="page-subtitle">{{ $appraisal->employee->first_name ?? '' }} {{ $appraisal->employee->last_name ?? '' }} — {{ $appraisal->cycle->name ?? '' }}</p>
    </div>
    <div class="page-actions">
        @if(in_array($appraisal->status, ['pending', 'in_progress']))
            <a href="{{ route('appraisals.edit', $appraisal) }}" class="btn btn-primary"><i class="fa-solid fa-pen"></i> تعبئة التقييم</a>
        @endif
        @if($appraisal->status === 'submitted')
            <form method="POST" action="{{ route('appraisals.review', $appraisal) }}">
                @csrf
                <button type="submit" class="btn btn-success"><i class="fa-solid fa-check"></i> مراجعة</button>
            </form>
        @endif
        @if($appraisal->status === 'reviewed')
            <form method="POST" action="{{ route('appraisals.finalize', $appraisal) }}">
                @csrf
                <button type="submit" class="btn btn-success"><i class="fa-solid fa-stamp"></i> اعتماد نهائي</button>
            </form>
        @endif
        <a href="{{ url()->previous() }}" class="btn btn-secondary"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-percent"></i></div>
        <div class="stat-value">{{ $appraisal->total_percentage ? number_format($appraisal->total_percentage, 1) : '—' }}%</div>
        <div class="stat-label">النسبة الإجمالية</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-medal"></i></div>
        <div class="stat-value">{{ $appraisal->grade ? $appraisal->gradeLabel() : '—' }}</div>
        <div class="stat-label">التقدير</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-user-tie"></i></div>
        <div class="stat-value">{{ $appraisal->appraiser->name ?? '—' }}</div>
        <div class="stat-label">المقيّم</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-circle-info"></i></div>
        <div class="stat-value"><span class="status-badge status-active">{{ $appraisal->statusLabel() }}</span></div>
        <div class="stat-label">الحالة</div>
    </div>
</div>

<div class="card">
    <div class="card-header"><h3>الدرجات حسب المعيار</h3></div>
    <div class="card-body">
        @if(!empty($appraisal->scores))
            <div style="max-width:520px; margin:0 auto 24px;">
                <canvas id="radarChart" height="320"></canvas>
            </div>
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>المعيار</th>
                            <th>الدرجة</th>
                            <th>الدرجة القصوى</th>
                            <th>الوزن</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($appraisal->scores as $s)
                        <tr>
                            <td>{{ $s['name'] ?? '' }}</td>
                            <td>{{ $s['score'] ?? 0 }}</td>
                            <td>{{ $s['max_score'] ?? 0 }}</td>
                            <td>{{ $s['weight'] ?? 0 }}%</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="empty-state">
                <i class="fa-solid fa-chart-simple"></i>
                <p>لم يتم تعبئة الدرجات بعد</p>
            </div>
        @endif
    </div>
</div>

<div class="detail-grid">
    <div class="detail-item full">
        <label>نقاط القوة</label>
        <p>{{ $appraisal->strengths ?: '—' }}</p>
    </div>
    <div class="detail-item full">
        <label>نقاط تحتاج تحسين</label>
        <p>{{ $appraisal->weaknesses ?: '—' }}</p>
    </div>
    <div class="detail-item full">
        <label>التوصيات</label>
        <p>{{ $appraisal->recommendations ?: '—' }}</p>
    </div>
    <div class="detail-item full">
        <label>تعليق الموظف</label>
        <p>{{ $appraisal->employee_comments ?: '—' }}</p>
    </div>
</div>

@if(!empty($appraisal->scores))
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.4/chart.umd.min.js"></script>
<script>
const ctx = document.getElementById('radarChart');
new Chart(ctx, {
    type: 'radar',
    data: {
        labels: @json(collect($appraisal->scores)->pluck('name')),
        datasets: [{
            label: 'الدرجة',
            data: @json(collect($appraisal->scores)->pluck('score')),
            backgroundColor: 'rgba(37, 99, 235, 0.2)',
            borderColor: 'rgba(37, 99, 235, 1)',
            pointBackgroundColor: 'rgba(37, 99, 235, 1)',
        }]
    },
    options: {
        scales: { r: { beginAtZero: true } },
        plugins: { legend: { display: false } }
    }
});
</script>
@endif
@endsection