@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ $cycle->name }}</h1>
        <p class="page-subtitle">{{ $cycle->template->name ?? '' }} — {{ $cycle->start_date->format('Y-m-d') }} إلى {{ $cycle->end_date->format('Y-m-d') }}</p>
    </div>
    <div class="page-actions">
        @if($cycle->status === 'draft')
            <form method="POST" action="{{ route('appraisal-cycles.activate', $cycle) }}" onsubmit="return confirm('سيتم إنشاء نماذج تقييم لجميع الموظفين المستهدفين. متابعة؟');">
                @csrf
                <button type="submit" class="btn btn-success"><i class="fa-solid fa-play"></i> تفعيل الدورة</button>
            </form>
        @elseif($cycle->status === 'active')
            <form method="POST" action="{{ route('appraisal-cycles.complete', $cycle) }}" onsubmit="return confirm('سيتم إغلاق الدورة نهائياً. متابعة؟');">
                @csrf
                <button type="submit" class="btn btn-danger"><i class="fa-solid fa-flag-checkered"></i> إغلاق الدورة</button>
            </form>
        @endif
        <a href="{{ route('appraisal-cycles.index') }}" 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-users"></i></div>
        <div class="stat-value">{{ $cycle->target_employees_count }}</div>
        <div class="stat-label">الموظفون المستهدفون</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-check-double"></i></div>
        <div class="stat-value">{{ $cycle->completed_count }}</div>
        <div class="stat-label">تقييمات معتمدة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-building"></i></div>
        <div class="stat-value">{{ $cycle->department->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">{{ $cycle->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($appraisals->isEmpty())
            <div class="empty-state">
                <i class="fa-solid fa-user-clock"></i>
                <p>لم يتم إنشاء نماذج تقييم بعد. قم بتفعيل الدورة أولاً.</p>
            </div>
        @else
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>الموظف</th>
                            <th>المقيّم</th>
                            <th>النتيجة</th>
                            <th>التقدير</th>
                            <th>الحالة</th>
                            <th>إجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($appraisals as $appraisal)
                        <tr>
                            <td>{{ $appraisal->employee->first_name ?? '' }} {{ $appraisal->employee->last_name ?? '' }}</td>
                            <td>{{ $appraisal->appraiser->name ?? '—' }}</td>
                            <td>{{ $appraisal->total_percentage ? number_format($appraisal->total_percentage, 1) . '%' : '—' }}</td>
                            <td>{{ $appraisal->grade ? $appraisal->gradeLabel() : '—' }}</td>
                            <td>
                                @php
                                    $sMap = ['pending' => 'status-pending', 'in_progress' => 'status-pending', 'submitted' => 'status-submitted', 'reviewed' => 'status-submitted', 'finalized' => 'status-active'];
                                @endphp
                                <span class="status-badge {{ $sMap[$appraisal->status] ?? 'status-pending' }}">{{ $appraisal->statusLabel() }}</span>
                            </td>
                            <td>
                                <div class="action-btns">
                                    <a href="{{ route('appraisals.show', $appraisal) }}" class="action-btn" title="عرض"><i class="fa-solid fa-eye"></i></a>
                                    <a href="{{ route('appraisals.edit', $appraisal) }}" class="action-btn" title="تعبئة"><i class="fa-solid fa-pen"></i></a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="pagination-wrap">{{ $appraisals->links() }}</div>
        @endif
    </div>
</div>
@endsection