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

@section('content')
<div class="page-header">
    <h1 class="page-title"><i class="fas fa-th-large"></i> لوحة التحكم</h1>
    <div class="breadcrumb">
        <span>المدير العام</span>
        <i class="fas fa-chevron-left"></i>
        <span>نظرة عامة</span>
    </div>
</div>

<!-- الإحصائيات الرئيسية -->
<div class="stats-grid">
    <div class="card stat-card stat-info">
        <div class="stat-icon bg-info"><i class="fas fa-users"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ number_format($total_employees) }}</div>
            <div class="stat-label">إجمالي الموظفين</div>
        </div>
    </div>
    <div class="card stat-card stat-success">
        <div class="stat-icon bg-success"><i class="fas fa-user-check"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ number_format($present_today) }}</div>
            <div class="stat-label">حاضرون اليوم</div>
            <div class="stat-trend up"><i class="fas fa-arrow-up"></i> {{ $attendance_rate }}%</div>
        </div>
    </div>
    <div class="card stat-card stat-danger">
        <div class="stat-icon bg-danger"><i class="fas fa-user-times"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ number_format($absent_today) }}</div>
            <div class="stat-label">غائبون اليوم</div>
        </div>
    </div>
    <div class="card stat-card stat-warning">
        <div class="stat-icon bg-warning"><i class="fas fa-clock"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ number_format($pending_leaves) }}</div>
            <div class="stat-label">إجازات معلقة</div>
        </div>
    </div>
    <div class="card stat-card stat-accent">
        <div class="stat-icon bg-danger"><i class="fas fa-file-contract"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ number_format($expiring_contracts) }}</div>
            <div class="stat-label">عقود تنتهي قريباً</div>
        </div>
    </div>
    <div class="card stat-card stat-gold">
        <div class="stat-icon bg-gold"><i class="fas fa-user-plus"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ number_format($new_this_month) }}</div>
            <div class="stat-label">موظفون جدد هذا الشهر</div>
        </div>
    </div>
</div>

<div class="dashboard-grid">
    <!-- إجراءات سريعة -->
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-bolt"></i> إجراءات سريعة</h3>
            </div>
            <div class="card-body">
                <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:16px;">
                    <a href="{{ route('employees.create') }}" class="quick-action">
                        <i class="fas fa-user-plus"></i>
                        <span>إضافة موظف</span>
                    </a>
                    <a href="{{ route('attendance.index') }}" class="quick-action">
                        <i class="fas fa-fingerprint"></i>
                        <span>سجل الحضور</span>
                    </a>
                    <a href="{{ route('leaves.index') }}" class="quick-action">
                        <i class="fas fa-calendar-minus"></i>
                        <span>الإجازات</span>
                    </a>
                    <a href="{{ route('payroll.index') }}" class="quick-action">
                        <i class="fas fa-money-bill-wave"></i>
                        <span>الرواتب</span>
                    </a>
                    <a href="{{ route('reports.index') }}" class="quick-action">
                        <i class="fas fa-chart-bar"></i>
                        <span>التقارير</span>
                    </a>
                    <a href="{{ route('recruitment.index') }}" class="quick-action">
                        <i class="fas fa-briefcase"></i>
                        <span>التوظيف</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- آخر الموظفين -->
    <div class="col-8">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-user-clock"></i> آخر الموظفين المضافين</h3>
                <a href="{{ route('employees.index') }}" class="btn btn-sm btn-outline">عرض الكل</a>
            </div>
            <div class="card-body p-0">
                <div class="overflow-auto">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>الموظف</th>
                                <th>الرقم الوظيفي</th>
                                <th>القسم</th>
                                <th>تاريخ الانضمام</th>
                                <th>الحالة</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recent_employees as $emp)
                            <tr>
                                <td><strong>{{ $emp->name }}</strong></td>
                                <td>{{ $emp->employee_number ?? '-' }}</td>
                                <td>{{ $emp->department->name ?? '-' }}</td>
                                <td>{{ $emp->hire_date ? $emp->hire_date->format('Y-m-d') : '-' }}</td>
                                <td>
                                    @if($emp->status === 'active')
                                        <span class="badge badge-success">نشط</span>
                                    @elseif($emp->status === 'probation')
                                        <span class="badge badge-warning">تجربة</span>
                                    @else
                                        <span class="badge badge-secondary">{{ $emp->status }}</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="5" class="text-center text-muted" style="padding:30px;">لا يوجد موظفين</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- توزيع الأقسام -->
    <div class="col-4">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-sitemap"></i> الأقسام</h3>
            </div>
            <div class="card-body">
                <ul class="widget-list">
                    @forelse($departments as $dept)
                    <li class="widget-list-item">
                        <div class="widget-item-right">
                            <div class="widget-item-icon bg-info" style="background:var(--info-light);color:var(--info);">
                                <i class="fas fa-building"></i>
                            </div>
                            <div class="widget-item-text">
                                <h4>{{ $dept->department->name ?? 'غير محدد' }}</h4>
                            </div>
                        </div>
                        <span class="badge badge-primary">{{ $dept->count }}</span>
                    </li>
                    @empty
                    <li class="text-center text-muted" style="padding:20px;">لا توجد أقسام</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection