@extends('layouts.app')
@section('title', 'تفاصيل مؤشر الأداء - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تفاصيل مؤشر الأداء</h1>
        <p class="page-subtitle">{{ $kpi->name }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('kpis.edit', $kpi) }}" class="btn btn-primary"><i class="fas fa-edit"></i> تعديل</a>
        <a href="{{ route('kpis.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="card" style="max-width:700px">
    <div class="card-body">
        <div class="detail-grid">
            <div class="detail-item"><label>الموظف</label><span>{{ $kpi->employee->full_name ?? '—' }}</span></div>
            <div class="detail-item"><label>اسم المؤشر</label><span>{{ $kpi->name }}</span></div>
            <div class="detail-item"><label>القيمة المستهدفة</label><span>{{ $kpi->target_value ?? '—' }} {{ $kpi->unit }}</span></div>
            <div class="detail-item"><label>القيمة الفعلية</label><span>{{ $kpi->actual_value ?? '—' }} {{ $kpi->unit }}</span></div>
            <div class="detail-item"><label>نسبة الإنجاز</label>
                <span>
                    @if($kpi->target_value)
                        {{ number_format(($kpi->actual_value / $kpi->target_value) * 100, 1) }}%
                    @else
                        —
                    @endif
                </span>
            </div>
            <div class="detail-item"><label>الوزن</label><span>{{ $kpi->weight ?? '—' }}</span></div>
            <div class="detail-item"><label>الفترة</label><span>{{ $kpi->period ?? '—' }}</span></div>
            <div class="detail-item"><label>الحالة</label><span class="status-badge status-{{ $kpi->status }}">{{ $kpi->status ?? '—' }}</span></div>
            <div class="detail-item full"><label>الوصف</label><span>{{ $kpi->description ?? '—' }}</span></div>
            <div class="detail-item"><label>تاريخ الإنشاء</label><span>{{ $kpi->created_at ? $kpi->created_at->format('Y/m/d') : '—' }}</span></div>
        </div>
    </div>
</div>
@endsection