@extends('layouts.app')
@section('title', 'القروض والسلف')
@section('page_title', 'القروض والسلف')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- Active Loans List (2/3 width) --}}
    <div class="lg:col-span-2 space-y-6">
        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/30">
                <h3 class="font-bold text-slate-700 dark:text-slate-300">سجل القروض والسلف القائمة</h3>
            </div>
            
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
                            <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">الموظف</th>
                            <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">النوع</th>
                            <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">المبلغ الإجمالي</th>
                            <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">الخصم الشهري</th>
                            <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">المتبقي</th>
                            <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">الحالة</th>
                            <th class="text-right px-5 py-3.5 text-xs font-semibold text-slate-500 uppercase">إجراء</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
                        @forelse($loans as $loan)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
                            <td class="px-5 py-3.5">
                                <p class="font-semibold text-sm text-slate-800 dark:text-white">{{ $loan->employee->name }}</p>
                                <p class="text-xs text-slate-400 font-mono">{{ $loan->loan_number }}</p>
                            </td>
                            <td class="px-5 py-3.5">
                                <span class="text-xs font-semibold px-2.5 py-1 rounded-lg {{ $loan->type === 'loan' ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400' : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' }}">
                                    {{ $loan->type === 'loan' ? 'قرض' : 'سلفة' }}
                                </span>
                            </td>
                            <td class="px-5 py-3.5 font-bold text-slate-800 dark:text-white text-sm">{{ number_format($loan->amount, 2) }}</td>
                            <td class="px-5 py-3.5 text-sm text-slate-600 dark:text-slate-400">{{ number_format($loan->monthly_deduction, 2) }}</td>
                            <td class="px-5 py-3.5">
                                <span class="font-bold text-red-500 text-sm">{{ number_format($loan->remaining_amount, 2) }}</span>
                            </td>
                            <td class="px-5 py-3.5">
                                <span class="text-xs font-semibold px-2.5 py-1 rounded-lg {{ $loan->status === 'active' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/20 dark:text-emerald-400' : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400' }}">
                                    {{ match($loan->status) { 'active' => 'نشط', 'completed' => 'مكتمل', 'cancelled' => 'ملغى', default => $loan->status } }}
                                </span>
                            </td>
                            <td class="px-5 py-3.5">
                                <form action="{{ route('hr.loan.destroy', $loan->id) }}" method="POST" onsubmit="return confirm('هل أنت متأكد من حذف هذا القرض؟');" class="inline m-0">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/10 rounded-lg transition-colors cursor-pointer" title="حذف">
                                        <i class="fa-solid fa-trash-can text-sm"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="py-16 text-center text-slate-400 text-xs">لا توجد قروض أو سلف مسجلة حالياً.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($loans->hasPages())
                <div class="px-5 py-4 border-t border-slate-100 dark:border-slate-700">{{ $loans->links() }}</div>
            @endif
        </div>
    </div>

    {{-- Create Loan Form (1/3 width) --}}
    <div>
        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm p-6 space-y-6">
            <h3 class="font-bold text-sm text-slate-800 dark:text-white border-b border-slate-100 dark:border-slate-700 pb-3 flex items-center gap-2">
                <i class="fa-solid fa-hand-holding-dollar text-primary-500"></i>
                تسجيل قرض أو سلفة جديدة
            </h3>
            
            <form action="{{ route('hr.loan.store') }}" method="POST" class="space-y-4">
                @csrf
                
                {{-- Employee Select --}}
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold text-slate-600 dark:text-slate-400">الموظف المستفيد</label>
                    <select name="employee_id" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                        <option value="">-- اختر الموظف --</option>
                        @foreach($employees as $emp)
                            <option value="{{ $emp->id }}">{{ $emp->name }} ({{ $emp->employee_number }})</option>
                        @endforeach
                    </select>
                </div>

                {{-- Type --}}
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold text-slate-600 dark:text-slate-400">النوع</label>
                    <select name="type" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                        <option value="loan">قرض (يخصم على أقساط)</option>
                        <option value="advance">سلفة مؤقتة (تخصم من الراتب التالي)</option>
                    </select>
                </div>

                {{-- Amount --}}
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold text-slate-600 dark:text-slate-400">مبلغ القرض/السلفة</label>
                    <input type="number" step="0.01" min="1" name="amount" required placeholder="0.00" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none font-mono">
                </div>

                {{-- Monthly Deduction --}}
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold text-slate-600 dark:text-slate-400">قيمة القسط الشهري</label>
                    <input type="number" step="0.01" min="0" name="monthly_deduction" required placeholder="0.00" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none font-mono">
                </div>

                {{-- Start Date --}}
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold text-slate-600 dark:text-slate-400">تاريخ بدء الخصم</label>
                    <input type="date" name="start_date" required value="{{ date('Y-m-d') }}" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none">
                </div>

                {{-- Notes --}}
                <div class="space-y-1.5">
                    <label class="text-xs font-semibold text-slate-600 dark:text-slate-400">ملاحظات إضافية</label>
                    <textarea name="notes" rows="3" placeholder="ملاحظات أو مبررات طلب القرض..." class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-xl text-xs focus:ring-2 focus:ring-primary-500 outline-none"></textarea>
                </div>

                <button type="submit" class="w-full py-2.5 bg-primary-600 hover:bg-primary-700 text-white rounded-xl font-bold text-xs transition-colors flex items-center justify-center gap-1.5 shadow-sm">
                    <i class="fa-solid fa-save"></i>
                    حفظ القرض والاعتماد
                </button>
            </form>
        </div>
    </div>
</div>
@endsection