@extends('layouts.app')

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

    $typeLabels = [
        'annual' => $isRtl ? 'سنوية' : 'Annual',
        'sick' => $isRtl ? 'مرضية' : 'Sick',
        'unpaid' => $isRtl ? 'بدون راتب' : 'Unpaid',
        'maternity' => $isRtl ? 'أمومة' : 'Maternity',
        'paternity' => $isRtl ? 'أبوة' : 'Paternity',
        'emergency' => $isRtl ? 'طارئة' : 'Emergency',
        'other' => $isRtl ? 'أخرى' : 'Other',
    ];
    $statusColors = [
        'pending' => 'bg-amber-100 text-amber-700',
        'approved' => 'bg-emerald-100 text-emerald-700',
        'rejected' => 'bg-rose-100 text-rose-700',
    ];
    $statusLabels = [
        'pending' => $isRtl ? 'معلقة' : 'Pending',
        'approved' => $isRtl ? 'مقبولة' : 'Approved',
        'rejected' => $isRtl ? 'مرفوضة' : 'Rejected',
    ];
@endphp

@section('title', $isRtl ? 'الإجازات' : 'Leaves')

@section('content')
<div class="space-y-8">
    <div class="flex flex-col lg:flex-row lg:items-center lg: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 ? 'الإجازات' : 'Leaves' }}</h1>
                <p class="text-slate-500 mt-1">{{ $isRtl ? 'طلبات الإجازات والموافقات' : 'Leave requests and approvals' }}</p>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <div class="px-4 py-3 bg-amber-50 border-2 border-amber-200 rounded-2xl text-amber-800 font-bold">
                {{ $isRtl ? 'معلقة:' : 'Pending:' }} {{ $pendingCount ?? 0 }}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-1 bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-6">
            <h2 class="text-lg font-black text-slate-800">{{ $isRtl ? 'طلب إجازة' : 'Request Leave' }}</h2>

            <form action="{{ route('hr.leaves.store') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الموظف' : 'Employee' }} *</label>
                    <select name="employee_id" required class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                        <option value="">{{ $isRtl ? 'اختر الموظف' : 'Select employee' }}</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">{{ $emp->full_name }} — {{ $emp->employee_id }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'نوع الإجازة' : 'Leave Type' }} *</label>
                    <select name="leave_type" required class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                        @foreach($typeLabels as $k => $lbl)
                            <option value="{{ $k }}">{{ $lbl }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'من' : 'From' }} *</label>
                        <input type="date" name="start_date" required value="{{ old('start_date', now()->format('Y-m-d')) }}"
                               class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'إلى' : 'To' }} *</label>
                        <input type="date" name="end_date" required value="{{ old('end_date', now()->format('Y-m-d')) }}"
                               class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'السبب' : 'Reason' }} *</label>
                    <textarea name="reason" rows="3" required
                              class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl resize-none">{{ old('reason') }}</textarea>
                </div>
                <button type="submit" class="w-full inline-flex items-center justify-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="send" class="w-5 h-5"></i>
                    {{ $isRtl ? 'إرسال الطلب' : 'Submit' }}
                </button>
            </form>
        </div>

        <div class="lg:col-span-2 space-y-6">
            <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 ? 'الحالة' : 'Status' }}</label>
                        <select name="status" class="px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                            <option value="">{{ $isRtl ? 'الكل' : 'All' }}</option>
                            <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>{{ $statusLabels['pending'] }}</option>
                            <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>{{ $statusLabels['approved'] }}</option>
                            <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>{{ $statusLabels['rejected'] }}</option>
                        </select>
                    </div>
                    <div class="flex gap-3">
                        <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-semibold transition-colors">
                            <i data-lucide="filter" class="w-5 h-5"></i>
                            {{ $isRtl ? 'فلترة' : 'Filter' }}
                        </button>
                        <a href="{{ route('hr.leaves') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                            <i data-lucide="rotate-ccw" class="w-5 h-5"></i>
                            {{ $isRtl ? 'إعادة ضبط' : 'Reset' }}
                        </a>
                    </div>
                </form>
            </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-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'النوع' : 'Type' }}</th>
                                <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'الفترة' : 'Period' }}</th>
                                <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الأيام' : 'Days' }}</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 ? 'إجراءات' : 'Actions' }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse($leaves as $leave)
                                <tr class="hover:bg-slate-50/50 transition-colors">
                                    <td class="px-6 py-4">
                                        <p class="font-bold text-slate-800">{{ $leave->employee->full_name ?? '—' }}</p>
                                        <p class="text-xs text-slate-400 mt-1 font-mono">{{ $leave->employee->employee_id ?? '' }}</p>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-slate-700">{{ $typeLabels[$leave->leave_type] ?? $leave->leave_type }}</td>
                                    <td class="px-6 py-4 text-sm text-slate-700">
                                        {{ $leave->start_date?->format('Y-m-d') }} → {{ $leave->end_date?->format('Y-m-d') }}
                                    </td>
                                    <td class="px-6 py-4 text-center font-bold text-slate-800">{{ $leave->days }}</td>
                                    <td class="px-6 py-4 text-center">
                                        <span class="px-3 py-1.5 rounded-full text-xs font-bold {{ $statusColors[$leave->status] ?? 'bg-slate-100 text-slate-700' }}">
                                            {{ $statusLabels[$leave->status] ?? $leave->status }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex items-center justify-center gap-2">
                                            @if($leave->status === 'pending')
                                                <form action="{{ route('hr.leaves.approve', $leave) }}" method="POST">
                                                    @csrf
                                                    <button type="submit" class="p-2 bg-emerald-100 hover:bg-emerald-200 rounded-xl transition-colors" title="{{ $isRtl ? 'موافقة' : 'Approve' }}">
                                                        <i data-lucide="check" class="w-4 h-4 text-emerald-700"></i>
                                                    </button>
                                                </form>
                                                <button type="button" onclick="document.getElementById('reject-{{ $leave->id }}').showModal()"
                                                        class="p-2 bg-rose-100 hover:bg-rose-200 rounded-xl transition-colors" title="{{ $isRtl ? 'رفض' : 'Reject' }}">
                                                    <i data-lucide="x" class="w-4 h-4 text-rose-700"></i>
                                                </button>
                                            @else
                                                <span class="text-slate-400 text-sm">—</span>
                                            @endif
                                        </div>

                                        <dialog id="reject-{{ $leave->id }}" class="rounded-2xl p-0 backdrop:bg-black/50">
                                            <div class="p-6 w-[min(520px,calc(100vw-32px))]">
                                                <h3 class="font-black text-lg text-slate-800 mb-2">{{ $isRtl ? 'رفض الإجازة' : 'Reject Leave' }}</h3>
                                                <p class="text-sm text-slate-500 mb-4">{{ $leave->employee->full_name ?? '' }}</p>
                                                <form action="{{ route('hr.leaves.reject', $leave) }}" method="POST" class="space-y-4">
                                                    @csrf
                                                    <textarea name="rejection_reason" rows="3" required
                                                              class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl resize-none"
                                                              placeholder="{{ $isRtl ? 'سبب الرفض...' : 'Reason...' }}"></textarea>
                                                    <div class="flex gap-2">
                                                        <button type="button" onclick="this.closest('dialog').close()"
                                                                class="flex-1 px-4 py-2 border border-slate-200 rounded-xl text-slate-700 hover:bg-slate-50">
                                                            {{ $isRtl ? 'إلغاء' : 'Cancel' }}
                                                        </button>
                                                        <button type="submit" class="flex-1 px-4 py-2 bg-rose-600 text-white rounded-xl hover:bg-rose-700">
                                                            {{ $isRtl ? 'رفض' : 'Reject' }}
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </dialog>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="6" class="px-6 py-16 text-center text-slate-500">{{ $isRtl ? 'لا توجد طلبات' : 'No requests' }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($leaves->hasPages())
                    <div class="px-6 py-4 border-t-2 border-slate-200">
                        {{ $leaves->withQueryString()->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection