@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">توصية تعويض</h1>
        <p class="page-subtitle">{{ $recommendation->employee->first_name ?? '' }} {{ $recommendation->employee->last_name ?? '' }}</p>
    </div>
    <div class="page-actions">
        @if($recommendation->status === 'pending')
            <form method="POST" action="{{ route('compensation-recommendations.approve', $recommendation) }}">
                @csrf
                <button type="submit" class="btn btn-success"><i class="fa-solid fa-check"></i> اعتماد</button>
            </form>
        @endif
        @if($recommendation->status === 'approved')
            <form method="POST" action="{{ route('compensation-recommendations.apply', $recommendation) }}" onsubmit="return confirm('سيتم تحديث راتب الموظف فعلياً. متابعة؟');">
                @csrf
                <button type="submit" class="btn btn-primary"><i class="fa-solid fa-money-check-dollar"></i> تطبيق على الراتب</button>
            </form>
        @endif
        <a href="{{ route('compensation-recommendations.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-money-bill"></i></div>
        <div class="stat-value">{{ number_format($recommendation->current_salary, 2) }}</div>
        <div class="stat-label">الراتب الحالي</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-arrow-trend-up"></i></div>
        <div class="stat-value">{{ $recommendation->recommended_increase_percentage }}%</div>
        <div class="stat-label">نسبة الزيادة المقترحة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-sack-dollar"></i></div>
        <div class="stat-value">{{ number_format($recommendation->recommended_new_salary, 2) }}</div>
        <div class="stat-label">الراتب الجديد المقترح</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-gift"></i></div>
        <div class="stat-value">{{ number_format($recommendation->recommended_bonus, 2) }}</div>
        <div class="stat-label">المكافأة المقترحة</div>
    </div>
</div>

<div class="detail-grid">
    <div class="detail-item">
        <label>الحالة</label>
        <p><span class="status-badge status-active">{{ $recommendation->statusLabel() }}</span></p>
    </div>
    <div class="detail-item">
        <label>التقييم المرتبط</label>
        <p>
            @if($recommendation->appraisal)
                <a href="{{ route('appraisals.show', $recommendation->appraisal) }}">عرض التقييم ({{ $recommendation->appraisal->gradeLabel() }})</a>
            @else
                —
            @endif
        </p>
    </div>
    <div class="detail-item">
        <label>اعتمدها</label>
        <p>{{ $recommendation->approver->name ?? '—' }}</p>
    </div>
    <div class="detail-item">
        <label>تاريخ الاعتماد</label>
        <p>{{ $recommendation->approved_at ? $recommendation->approved_at->format('Y-m-d') : '—' }}</p>
    </div>
    <div class="detail-item full">
        <label>المبرر</label>
        <p>{{ $recommendation->justification ?: '—' }}</p>
    </div>
</div>
@endsection