@extends('layouts.app')
@section('title', 'لوحة الموظف')
@section('content')
<div class="container-fluid py-4">
    <!-- Welcome Card -->
    <div class="card mb-4" style="background: linear-gradient(135deg, #1B2A4A 0%, #2d4a7a 100%); color: white;">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1">مرحباً، {{ $employee->first_name }} {{ $employee->last_name }}</h3>
                    <p class="mb-0 opacity-75">{{ $employee->job_title ?? 'موظف' }} — {{ $department->name ?? '' }}</p>
                </div>
                <div class="text-center">
                    <div style="width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-user fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <div class="mb-2"><i class="fas fa-umbrella-beach fa-2x text-success"></i></div>
                    <h4 class="mb-0">{{ $leaveBalance->where('leave_type', 'annual')->first()->accrued_days ?? 0 - ($leaveBalance->where('leave_type', 'annual')->first()->used_days ?? 0) }}</h4>
                    <small class="text-muted">رصيد الإجازات السنوية</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <div class="mb-2"><i class="fas fa-clock fa-2x text-primary"></i></div>
                    <h4 class="mb-0">{{ $pendingLeaves }}</h4>
                    <small class="text-muted">طلبات إجازة معلقة</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <div class="mb-2"><i class="fas fa-money-bill-wave fa-2x" style="color: #E8502F;"></i></div>
                    <h4 class="mb-0">{{ $latestPayslip ? number_format($latestPayslip->net_salary, 2) : '—' }}</h4>
                    <small class="text-muted">آخر صافي راتب</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <div class="mb-2"><i class="fas fa-bell fa-2x text-warning"></i></div>
                    <h4 class="mb-0">{{ count($notifications) }}</h4>
                    <small class="text-muted">إشعارات جديدة</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Recent Attendance -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-calendar-check me-2"></i>الحضور (آخر 7 أيام)</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr><th>التاريخ</th><th>الدخول</th><th>الخروج</th><th>الحالة</th></tr>
                            </thead>
                            <tbody>
                                @forelse($recentAttendance as $att)
                                <tr>
                                    <td>{{ $att->date }}</td>
                                    <td>{{ $att->check_in ? \Carbon\Carbon::parse($att->check_in)->format('H:i') : '—' }}</td>
                                    <td>{{ $att->check_out ? \Carbon\Carbon::parse($att->check_out)->format('H:i') : '—' }}</td>
                                    <td>
                                        @if($att->status === 'present')
                                            <span class="badge bg-success">حاضر</span>
                                        @elseif($att->status === 'late')
                                            <span class="badge bg-warning">متأخر</span>
                                        @elseif($att->status === 'absent')
                                            <span class="badge bg-danger">غائب</span>
                                        @else
                                            <span class="badge bg-secondary">{{ $att->status }}</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr><td colspan="4" class="text-center py-3">لا توجد بيانات حضور</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-bolt me-2"></i>إجراءات سريعة</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <a href="{{ route('leaves.create') }}" class="btn btn-outline-primary w-100 py-3">
                                <i class="fas fa-umbrella-beach d-block mb-2 fa-lg"></i>طلب إجازة
                            </a>
                        </div>
                        <div class="col-6">
                            <a href="{{ route('ess.edit-profile') }}" class="btn btn-outline-primary w-100 py-3">
                                <i class="fas fa-user-edit d-block mb-2 fa-lg"></i>تعديل بياناتي
                            </a>
                        </div>
                        @if(Route::has('financial-requests.create'))
                        <div class="col-6">
                            <a href="{{ route('financial-requests.create') }}" class="btn btn-outline-primary w-100 py-3">
                                <i class="fas fa-hand-holding-usd d-block mb-2 fa-lg"></i>طلب مالي
                            </a>
                        </div>
                        @endif
                        <div class="col-6">
                            <a href="{{ route('internal-notifications.index') }}" class="btn btn-outline-primary w-100 py-3">
                                <i class="fas fa-bell d-block mb-2 fa-lg"></i>الإشعارات
                            </a>
                        </div>
                    </div>

                    @if(count($notifications) > 0)
                    <hr>
                    <h6 class="text-muted mb-3">أحدث الإشعارات</h6>
                    @foreach($notifications as $notif)
                    <div class="d-flex align-items-start mb-2 p-2 bg-light rounded">
                        <i class="fas fa-info-circle text-primary mt-1 me-2"></i>
                        <div>
                            <strong class="d-block" style="font-size: 0.9rem;">{{ $notif->title }}</strong>
                            <small class="text-muted">{{ \Carbon\Carbon::parse($notif->created_at)->diffForHumans() }}</small>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection