@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-chart-line"></i></div>
        <div class="stat-info">
            <div class="stat-value">{{ $myStats['attendance_rate'] }}%</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">{{ $myStats['pending_requests'] }}</div>
            <div class="stat-label">طلباتي المعلقة</div>
        </div>
    </div>
</div>

<div class="dashboard-grid">
    {{-- طلبات الإجازات --}}
    <div class="card">
        <div class="card-header">
            <h3><i class="fas fa-calendar-check"></i> طلبات إجازاتي</h3>
            <a href="{{ route('leaves.create') }}" class="card-link">طلب إجازة جديد</a>
        </div>
        <div class="card-body">
            @forelse($myRequests as $req)
            <div class="request-row">
                <div class="request-info">
                    <div class="request-name">{{ $req->leaveType->name ?? 'إجازة' }}</div>
                    <div class="request-type">{{ $req->start_date ?? '' }} → {{ $req->end_date ?? '' }} • {{ $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('leaves.create') }}" class="quick-action">
                    <i class="fas fa-calendar-plus"></i><span>طلب إجازة</span>
                </a>
                <a href="{{ route('attendance.index') }}" class="quick-action">
                    <i class="fas fa-fingerprint"></i><span>حضوري</span>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection