@extends('layouts.app')

@section('title', 'سلم الرواتب')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">سلم الرواتب</h1>
        <p class="page-subtitle">إدارة الدرجات الوظيفية ومدى الرواتب لكل درجة</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('pay-scale.benchmark') }}" class="btn btn-secondary">
            <i class="fas fa-chart-bar"></i> تقرير المقارنة
        </a>
        <a href="{{ route('pay-scale.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> درجة جديدة
        </a>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);">
            <i class="fas fa-layer-group"></i>
        </div>
        <div class="stat-value">{{ $stats['total_grades'] }}</div>
        <div class="stat-label">إجمالي الدرجات</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success);">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="stat-value">{{ $stats['active_grades'] }}</div>
        <div class="stat-label">درجات نشطة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning);">
            <i class="fas fa-user-check"></i>
        </div>
        <div class="stat-value">{{ $stats['assigned_employees'] }}</div>
        <div class="stat-label">موظفون مُعيّنون</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--danger-light); color: var(--danger);">
            <i class="fas fa-user-slash"></i>
        </div>
        <div class="stat-value">{{ $stats['unassigned_employees'] }}</div>
        <div class="stat-label">بدون درجة</div>
    </div>
</div>

@forelse($grades as $grade)
<div class="card" style="margin-bottom: 16px;">
    <div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
        <h3>
            <span class="code-badge" style="margin-left:8px;">{{ $grade->code }}</span>
            {{ $grade->name }}
            @if(!$grade->is_active)
                <span class="status-badge status-expired">غير نشط</span>
            @endif
        </h3>
        <div style="display:flex; gap:8px; align-items:center;">
            <span style="font-size:13px; color:var(--text-secondary);">
                <i class="fas fa-users"></i> {{ $grade->employees_count }} موظف
            </span>
            <a href="{{ route('pay-scale.show', $grade) }}" class="btn btn-secondary" style="padding:4px 12px; font-size:13px;">
                <i class="fas fa-eye"></i> تفاصيل
            </a>
        </div>
    </div>
    <div class="card-body" style="padding: 12px 20px;">
        <div style="display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; text-align:center;">
            <div>
                <div style="font-size:12px; color:var(--text-muted);">الحد الأدنى</div>
                <div style="font-size:18px; font-weight:600; color:var(--danger);">{{ number_format($grade->min_salary, 2) }}</div>
            </div>
            <div>
                <div style="font-size:12px; color:var(--text-muted);">المتوسط</div>
                <div style="font-size:18px; font-weight:600; color:var(--warning);">{{ number_format($grade->mid_salary, 2) }}</div>
            </div>
            <div>
                <div style="font-size:12px; color:var(--text-muted);">الحد الأقصى</div>
                <div style="font-size:18px; font-weight:600; color:var(--success);">{{ number_format($grade->max_salary, 2) }}</div>
            </div>
            <div>
                <div style="font-size:12px; color:var(--text-muted);">الدرجات الفرعية</div>
                <div style="font-size:18px; font-weight:600; color:var(--primary);">{{ $grade->steps->count() }}</div>
            </div>
        </div>
        @if($grade->steps->count() > 0)
        <div style="margin-top:12px; display:flex; gap:6px; flex-wrap:wrap;">
            @foreach($grade->steps as $step)
            <span style="background: var(--bg); border: 1px solid var(--border-light); border-radius: 6px; padding: 4px 10px; font-size: 12px;">
                S{{ $step->step_number }}: <strong>{{ number_format($step->basic_salary, 0) }}</strong>
            </span>
            @endforeach
        </div>
        @endif
    </div>
</div>
@empty
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <i class="fas fa-layer-group" style="font-size:3rem; color: var(--text-muted); margin-bottom:16px;"></i>
            <p>لم يتم إنشاء سلم رواتب بعد</p>
            <a href="{{ route('pay-scale.create') }}" class="btn btn-primary">إنشاء أول درجة</a>
        </div>
    </div>
</div>
@endforelse
@endsection