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

@section('content')
<div class="page-header">
    <h1 class="page-title"><i class="fas fa-user-tie"></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($active_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>
    </div>
    <div class="card stat-card stat-danger">
        <div class="stat-icon bg-danger"><i class="fas fa-user-clock"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ number_format($late_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-hourglass-half"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ number_format($pending_leaves) }}</div>
            <div class="stat-label">إجازات بانتظار الموافقة</div>
        </div>
    </div>
</div>

<div class="dashboard-grid">
    <!-- طلبات الإجازة الأخيرة -->
    <div class="col-8">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-calendar-check"></i> آخر طلبات الإجازة</h3>
                <a href="{{ route('leaves.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>
                                <th>إجراء</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recent_leaves as $leave)
                            <tr>
                                <td><strong>{{ ($leave->employee->name ?? "—") ?? '-' }}</strong></td>
                                <td>{{ $leave->type ?? '-' }}</td>
                                <td>{{ $leave->start_date ? $leave->start_date->format('m/d') : '-' }}</td>
                                <td>{{ $leave->end_date ? $leave->end_date->format('m/d') : '-' }}</td>
                                <td>
                                    @if($leave->status === 'approved')
                                        <span class="badge badge-success">موافق</span>
                                    @elseif($leave->status === 'pending')
                                        <span class="badge badge-warning">معلق</span>
                                    @else
                                        <span class="badge badge-danger">مرفوض</span>
                                    @endif
                                </td>
                                <td>
                                    <a href="{{ route('leaves.show', $leave->id) }}" class="btn btn-sm btn-secondary">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="6" 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-user-times" style="color:var(--danger);"></i> الغائبون اليوم</h3>
            </div>
            <div class="card-body">
                <ul class="widget-list">
                    @forelse($absent_employees as $emp)
                    <li class="widget-list-item">
                        <div class="widget-item-right">
                            <div class="widget-item-icon" style="background:var(--danger-light);color:var(--danger);">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="widget-item-text">
                                <h4>{{ $emp->name }}</h4>
                                <p>{{ $emp->department->name ?? '' }}</p>
                            </div>
                        </div>
                    </li>
                    @empty
                    <li class="text-center text-muted" style="padding:20px;">الكل حاضر!</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection