@extends('layouts.app')
@section('title', 'لوحة التحكم — الموارد البشرية')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">مرحباً {{ $user->name }}</h1>
        <p class="page-subtitle">لوحة تحكم الموارد البشرية</p>
    </div>
    <div class="page-actions">
        <span class="date-badge"><i class="fas fa-calendar-alt"></i> {{ now()->translatedFormat('l j F Y') }}</span>
    </div>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-users"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $stats['total_employees'] }}</div>
            <div class="stat-label">إجمالي الموظفين</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-user-check"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $stats['present_today'] }}</div>
            <div class="stat-label">حاضرون اليوم</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-umbrella-beach"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $stats['on_leave'] }}</div>
            <div class="stat-label">في إجازة</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-clock"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $stats['pending_requests'] }}</div>
            <div class="stat-label">طلبات معلقة</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fas fa-user-plus"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $stats['new_employees'] }}</div>
            <div class="stat-label">موظفون جدد</div>
        </div>
    </div>
</div>

@if($alerts['expiring_contracts'] > 0 || $alerts['expiring_residencies'] > 0 || $alerts['pending_leaves'] > 0)
<div class="alerts-bar">
    @if($alerts['expiring_contracts'] > 0)
    <div class="alert-item warning">
        <i class="fas fa-file-contract"></i>
        <span>{{ $alerts['expiring_contracts'] }} عقود تنتهي خلال 30 يوم</span>
        <a href="{{ route('contracts.index') }}">عرض</a>
    </div>
    @endif
    @if($alerts['expiring_residencies'] > 0)
    <div class="alert-item danger">
        <i class="fas fa-id-card"></i>
        <span>{{ $alerts['expiring_residencies'] }} إقامات تنتهي خلال 30 يوم</span>
    </div>
    @endif
    @if($alerts['pending_leaves'] > 0)
    <div class="alert-item info">
        <i class="fas fa-hourglass-half"></i>
        <span>{{ $alerts['pending_leaves'] }} طلبات إجازة معلقة</span>
        <a href="{{ route('leaves.index') }}">مراجعة</a>
    </div>
    @endif
</div>
@endif

<div class="dashboard-grid">
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-building"></i> توزيع الموظفين حسب الأقسام</h3>
        </div>
        <div class="card-body">
            @foreach($departmentStats as $dept)
            <div class="dept-row">
                <div class="dept-info">
                    <span class="dept-name">{{ $dept->name }}</span>
                    <span class="dept-count">{{ $dept->employees_count }} موظف</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width:{{ $stats['total_employees'] > 0 ? ($dept->employees_count / $stats['total_employees'] * 100) : 0 }}%"></div>
                </div>
            </div>
            @endforeach
            @if($departmentStats->isEmpty())
                <div class="empty-state-sm">لا توجد أقسام بعد</div>
            @endif
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-calendar-check"></i> آخر طلبات الإجازات</h3>
            <a href="{{ route('leaves.index') }}" class="card-link">عرض الكل</a>
        </div>
        <div class="card-body">
            @forelse($recentRequests as $req)
            <div class="request-row">
                <div class="request-avatar">{{ mb_substr($req->employee->first_name ?? '?', 0, 1) }}</div>
                <div class="request-info">
                    <div class="request-name">{{ $req->employee->full_name ?? 'غير محدد' }}</div>
                    <div class="request-type">{{ $req->leaveType->name ?? 'إجازة' }} • {{ $req->days_count ?? 0 }} يوم</div>
                </div>
                <span class="status-badge status-{{ $req->status }}">
                    @switch($req->status)
                        @case('pending') معلق @break
                        @case('approved') موافق @break
                        @case('rejected') مرفوض @break
                        @default {{ $req->status }}
                    @endswitch
                </span>
            </div>
            @empty
                <div class="empty-state-sm">لا توجد طلبات إجازات</div>
            @endforelse
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-bolt"></i> إجراءات سريعة</h3>
        </div>
        <div class="card-body">
            <div class="quick-actions-grid">
                <a href="{{ route('employees.create') }}" class="quick-action">
                    <i class="fas fa-user-plus"></i><span>إضافة موظف</span>
                </a>
                <a href="{{ route('leaves.index') }}" class="quick-action">
                    <i class="fas fa-calendar-check"></i><span>طلبات الإجازات</span>
                </a>
                <a href="{{ route('attendance.index') }}" class="quick-action">
                    <i class="fas fa-fingerprint"></i><span>الحضور</span>
                </a>
                <a href="{{ route('contracts.index') }}" class="quick-action">
                    <i class="fas fa-file-contract"></i><span>العقود</span>
                </a>
                <a href="{{ route('employees.index') }}" class="quick-action">
                    <i class="fas fa-search"></i><span>بحث موظف</span>
                </a>
                <a href="{{ route('reports.index') }}" class="quick-action">
                    <i class="fas fa-chart-pie"></i><span>التقارير</span>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection