@extends('layouts.app')

@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
@endphp

@section('title', $isRtl ? 'حضور الموظفين' : 'Employee Attendance')

@section('content')
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('hr.index') }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors">
                <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
            </a>
            <div>
                <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'حضور الموظفين' : 'Employee Attendance' }}</h1>
                <p class="text-slate-500 mt-1">{{ $isRtl ? 'تسجيل حضور وانصراف الموظفين' : 'Track employee clock-in/out' }}</p>
            </div>
        </div>
        <a href="{{ route('hr.employees.index') }}" class="inline-flex items-center gap-2 px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
            <i data-lucide="users" class="w-5 h-5"></i>
            {{ $isRtl ? 'الموظفين' : 'Employees' }}
        </a>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 p-6">
        <form method="GET" class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'التاريخ' : 'Date' }}</label>
                <input type="date" name="date" value="{{ request('date', $date) }}"
                       class="px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
            </div>
            <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold shadow-lg shadow-emerald-500/20 transition-all">
                <i data-lucide="refresh-cw" class="w-5 h-5"></i>
                {{ $isRtl ? 'تحديث' : 'Refresh' }}
            </button>
        </form>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-emerald-50 rounded-3xl border-2 border-emerald-200 p-6">
            <p class="text-sm text-emerald-700">{{ $isRtl ? 'حاضر' : 'Present' }}</p>
            <p class="text-3xl font-black text-emerald-700 mt-1">{{ $stats['present'] ?? 0 }}</p>
        </div>
        <div class="bg-amber-50 rounded-3xl border-2 border-amber-200 p-6">
            <p class="text-sm text-amber-700">{{ $isRtl ? 'متأخر' : 'Late' }}</p>
            <p class="text-3xl font-black text-amber-700 mt-1">{{ $stats['late'] ?? 0 }}</p>
        </div>
        <div class="bg-slate-50 rounded-3xl border-2 border-slate-200 p-6">
            <p class="text-sm text-slate-600">{{ $isRtl ? 'غائب' : 'Absent' }}</p>
            <p class="text-3xl font-black text-slate-800 mt-1">{{ $stats['absent'] ?? 0 }}</p>
        </div>
        <div class="bg-blue-50 rounded-3xl border-2 border-blue-200 p-6">
            <p class="text-sm text-blue-700">{{ $isRtl ? 'إجازة' : 'On Leave' }}</p>
            <p class="text-3xl font-black text-blue-700 mt-1">{{ $stats['on_leave'] ?? 0 }}</p>
        </div>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-100 text-slate-700 text-sm">
                    <tr>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'الموظف' : 'Employee' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الحالة' : 'Status' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الدخول' : 'Clock In' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الخروج' : 'Clock Out' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الساعات' : 'Worked' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'إجراءات' : 'Actions' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($employees as $employee)
                        @php
                            $att = $attendance[$employee->id] ?? null;
                            $status = $att->status ?? 'absent';
                            $statusColors = [
                                'present' => 'bg-emerald-100 text-emerald-700',
                                'late' => 'bg-amber-100 text-amber-700',
                                'leave' => 'bg-blue-100 text-blue-700',
                                'absent' => 'bg-slate-100 text-slate-700',
                            ];
                            $statusLabels = [
                                'present' => $isRtl ? 'حاضر' : 'Present',
                                'late' => $isRtl ? 'متأخر' : 'Late',
                                'leave' => $isRtl ? 'إجازة' : 'Leave',
                                'absent' => $isRtl ? 'غائب' : 'Absent',
                            ];
                        @endphp
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br {{ $employee->gender === 'male' ? 'from-blue-400 to-blue-500' : 'from-pink-400 to-pink-500' }} flex items-center justify-center text-white font-bold text-lg">
                                        {{ mb_substr($employee->first_name, 0, 1) }}
                                    </div>
                                    <div>
                                        <p class="font-semibold text-slate-800">{{ $employee->full_name }}</p>
                                        <p class="text-xs text-slate-500">{{ $employee->department }} • {{ $employee->position }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-3 py-1 rounded-lg text-xs font-bold {{ $statusColors[$status] ?? 'bg-slate-100 text-slate-700' }}">
                                    {{ $statusLabels[$status] ?? $status }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-mono text-slate-700">
                                {{ $att?->clock_in ? \Carbon\Carbon::parse($att->clock_in)->format('H:i') : '—' }}
                            </td>
                            <td class="px-6 py-4 text-center font-mono text-slate-700">
                                {{ $att?->clock_out ? \Carbon\Carbon::parse($att->clock_out)->format('H:i') : '—' }}
                            </td>
                            <td class="px-6 py-4 text-center font-mono text-slate-700">
                                {{ $att?->worked_hours ?? '—' }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    @if(!$att || !$att->clock_in)
                                        <form action="{{ route('hr.attendance.clock-in') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="employee_id" value="{{ $employee->id }}">
                                            <button type="submit" class="p-2 bg-emerald-100 hover:bg-emerald-200 rounded-xl transition-colors" title="{{ $isRtl ? 'تسجيل حضور' : 'Clock in' }}">
                                                <i data-lucide="log-in" class="w-4 h-4 text-emerald-700"></i>
                                            </button>
                                        </form>
                                    @endif

                                    @if($att && $att->clock_in && !$att->clock_out)
                                        <form action="{{ route('hr.attendance.clock-out') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="employee_id" value="{{ $employee->id }}">
                                            <button type="submit" class="p-2 bg-amber-100 hover:bg-amber-200 rounded-xl transition-colors" title="{{ $isRtl ? 'تسجيل انصراف' : 'Clock out' }}">
                                                <i data-lucide="log-out" class="w-4 h-4 text-amber-700"></i>
                                            </button>
                                        </form>
                                    @endif

                                    <a href="{{ route('hr.employees.show', $employee) }}" class="p-2 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors" title="{{ $isRtl ? 'عرض الموظف' : 'View employee' }}">
                                        <i data-lucide="eye" class="w-4 h-4 text-slate-600"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-16 text-center text-slate-500">{{ $isRtl ? 'لا يوجد موظفين' : 'No employees' }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection