@extends('layouts.epelcon')
@section('title', 'Employee Loans')

@section('content')
<div x-data="{ add: false }">
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Employee loans</h1>
            <p class="text-sm text-slate-500">Track staff loans and monthly salary deductions.</p>
        </div>
        <button @click="add = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ Issue loan</button>
    </div>

    <div class="mb-5 grid grid-cols-2 gap-3 sm:grid-cols-3">
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Active loans</p><p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $loans->where('status', 'active')->count() }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Outstanding balance</p><p class="mt-1 text-2xl font-extrabold text-amber-600">@money($loans->where('status', 'active')->sum('balance'))</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Monthly deductions</p><p class="mt-1 text-2xl font-extrabold text-indigo-600">@money($loans->where('status', 'active')->sum('monthly_deduction'))</p></div>
    </div>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[760px] text-sm">
            <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                <th class="px-4 py-3">Employee</th><th class="px-4 py-3">Issued</th><th class="px-4 py-3 text-right">Amount</th><th class="px-4 py-3 text-right">Monthly</th><th class="px-4 py-3 text-right">Balance</th><th class="px-4 py-3">Reason</th><th class="px-4 py-3">Status</th><th class="px-4 py-3"></th>
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
            @forelse ($loans as $loan)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3 font-bold text-slate-800">{{ $loan->employee->name ?? '—' }}</td>
                    <td class="px-4 py-3 text-slate-500">{{ $loan->issued_on?->format('j M Y') }}</td>
                    <td class="px-4 py-3 text-right font-bold text-slate-900">@money($loan->amount)</td>
                    <td class="px-4 py-3 text-right text-slate-700">@money($loan->monthly_deduction)</td>
                    <td class="px-4 py-3 text-right font-extrabold {{ $loan->balance > 0 ? 'text-amber-600' : 'text-emerald-600' }}">@money($loan->balance)</td>
                    <td class="px-4 py-3 text-slate-500">{{ Str::limit($loan->reason, 40) }}</td>
                    <td class="px-4 py-3"><span class="rounded-full px-2.5 py-1 text-[10px] font-bold uppercase {{ $loan->status === 'active' ? 'bg-amber-100 text-amber-700' : 'bg-emerald-100 text-emerald-700' }}">{{ $loan->status }}</span></td>
                    <td class="px-4 py-3">
                        @if ($loan->status === 'active')
                            <form method="POST" action="{{ route('epelcon.hr.loans.status', $loan) }}">@csrf
                                <input type="hidden" name="status" value="settled">
                                <button class="rounded-lg bg-emerald-50 px-2.5 py-1.5 text-[11px] font-bold text-emerald-700 hover:bg-emerald-100">Mark settled</button>
                            </form>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" class="px-4 py-10 text-center text-slate-400">No loans issued.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div x-cloak x-show="add" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="add = false"></div>
        <div x-show="add" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Issue employee loan</h2>
            <form method="POST" action="{{ route('epelcon.hr.loans.store') }}" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Employee</span>
                    <select name="employee_id" required class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach ($employees as $employee)<option value="{{ $employee->id }}">{{ $employee->name }} — @money($employee->salary)/mo</option>@endforeach
                    </select></label>
                <div class="grid grid-cols-2 gap-3">
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Amount ({{ $CUR }})</span><input type="number" step="0.01" min="0.01" name="amount" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Monthly deduction</span><input type="number" step="0.01" min="0.01" name="monthly_deduction" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                </div>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Reason</span><textarea name="reason" rows="2" class="w-full rounded-xl border-slate-200 text-sm"></textarea></label>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="add = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Issue loan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
