@extends('layouts.admin', ['title' => 'Loans'])

@section('content')
    <div x-data="loansPage()">
        <h1 class="text-2xl font-semibold text-slate-900 mb-6">Loans</h1>
        {{-- Loading --}}
        <div x-show="loading" class="flex items-center justify-center py-20">
            <div class="h-8 w-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-600"></div>
        </div>

        <div x-show="error" x-transition class="rounded-xl bg-red-50 border border-red-200 px-4 py-3 mb-6">
            <p class="text-sm text-red-600" x-text="error"></p>
        </div>

        <template x-if="!loading">
            <div>
                {{-- Filter --}}
                <div class="mb-6 rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm flex items-center gap-4 flex-wrap">
                    <input type="text" x-model="searchQuery" @input.debounce.300ms="fetchLoans()"
                           placeholder="Search by ID or name..."
                           class="w-64 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                    <div class="flex items-center gap-3">
                        <label class="text-sm font-medium text-slate-700">Branch</label>
                        <select x-model="selectedBranch" @change="applyFilter"
                                class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                            <option value="">All Branches</option>
                            <template x-for="b in branches" :key="b.id">
                                <option :value="b.id" x-text="b.name"></option>
                            </template>
                        </select>
                    </div>
                </div>

                {{-- Stats --}}
                <div class="grid gap-6 sm:grid-cols-3 mb-6">
                    <div class="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm">
                        <p class="text-sm text-slate-500">Employees with Loans</p>
                        <p class="mt-1 text-2xl font-bold text-slate-900" x-text="stats.employeeCount"></p>
                    </div>
                    <div class="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm">
                        <p class="text-sm text-slate-500">Total Loan Given</p>
                        <p class="mt-1 text-2xl font-bold text-slate-900" x-text="'SAR ' + stats.totalLoan.toLocaleString()"></p>
                    </div>
                    <div class="rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm">
                        <p class="text-sm text-slate-500">Total Outstanding</p>
                        <p class="mt-1 text-2xl font-bold text-amber-600" x-text="'SAR ' + stats.totalOutstanding.toLocaleString()"></p>
                    </div>
                </div>

                {{-- Employee List --}}
                <div x-show="filteredEmployees.length === 0" class="rounded-2xl border border-slate-200/80 bg-white p-12 shadow-sm text-center">
                    <svg class="mx-auto h-12 w-12 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    <h3 class="mt-4 text-lg font-semibold text-slate-900">No Loans</h3>
                    <p class="mt-2 text-sm text-slate-500">No employees have outstanding loans.</p>
                </div>

                <div x-show="filteredEmployees.length > 0" class="space-y-4">
                    <template x-for="emp in filteredEmployees" :key="emp.id">
                        <div class="rounded-2xl border border-slate-200/80 bg-white shadow-sm overflow-hidden">
                            <div @click="showLoanModal = emp.id" class="cursor-pointer">
                                <div class="px-6 py-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
                                    <div class="flex items-center gap-4">
                                        <div class="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 text-sm font-bold text-amber-700" x-text="(emp.name || '?')[0]"></div>
                                        <div>
                                            <p class="text-sm font-semibold text-slate-900" x-text="emp.name"></p>
                                            <p class="text-xs text-slate-500" x-text="emp.designation + (emp.branch_name ? ' — ' + emp.branch_name : '')"></p>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-6 text-right">
                                        <div>
                                            <p class="text-xs text-slate-500">Total Loan</p>
                                            <p class="text-sm font-semibold text-slate-900" x-text="'SAR ' + emp._loanTotal.toLocaleString()"></p>
                                        </div>
                                        <div>
                                            <p class="text-xs text-slate-500">Adjusted</p>
                                            <p class="text-sm font-semibold text-green-600" x-text="'SAR ' + emp._loanAdjusted.toLocaleString()"></p>
                                        </div>
                                        <div>
                                            <p class="text-xs text-slate-500">Remaining</p>
                                            <p class="text-sm font-semibold" :class="emp._loanRemaining > 0 ? 'text-amber-600' : 'text-green-600'" x-text="'SAR ' + emp._loanRemaining.toLocaleString()"></p>
                                        </div>
                                        <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </template>

        {{-- Loan Modal --}}
        <div x-show="showLoanModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30" @click.self="showLoanModal = null">
            <div class="rounded-2xl bg-white shadow-2xl max-w-lg w-full mx-4 max-h-[85vh] flex flex-col">
                {{-- Header --}}
                <div class="px-6 py-4 border-b shrink-0 flex items-center justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-slate-900" x-text="selectedEmp?.name"></h3>
                        <p class="text-sm text-slate-500" x-text="'ID: ' + (selectedEmp?.employee_id || '') + '  •  ' + (selectedEmp?.designation || '')"></p>
                    </div>
                    <button @click="showLoanModal = null" class="text-slate-400 hover:text-slate-600">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>

                {{-- Loan List --}}
                <div class="flex-1 overflow-y-auto px-6 py-4 space-y-4">
                    {{-- Loans --}}
                    <template x-if="selectedEmp && selectedEmp._loans.length">
                        <div>
                            <p class="text-xs font-semibold text-slate-500 mb-2 uppercase tracking-wider">Loan Given</p>
                            <div class="space-y-2">
                                <template x-for="loan in selectedEmp._loans" :key="loan.id">
                                    <div class="flex items-center justify-between rounded-xl bg-slate-50 px-4 py-3">
                                        <div>
                                            <p class="text-sm font-medium text-slate-900" x-text="loan.loan_date || '—'"></p>
                                            <p class="text-xs text-slate-500" x-text="loan.notes?.startsWith('_payroll_') ? 'Payroll advance' : (loan.notes || '—')"></p>
                                        </div>
                                        <p class="text-sm font-semibold text-slate-900">SAR <span x-text="parseFloat(loan.amount).toLocaleString()"></span></p>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>

                    {{-- Adjustments --}}
                    <template x-if="selectedEmp && selectedEmp._adjustments.length">
                        <div>
                            <p class="text-xs font-semibold text-slate-500 mb-2 uppercase tracking-wider">Loan Adjusted</p>
                            <div class="space-y-2">
                                <template x-for="adj in selectedEmp._adjustments" :key="adj.id">
                                    <div class="flex items-center justify-between rounded-xl bg-green-50 px-4 py-3">
                                        <div>
                                            <p class="text-sm font-medium text-slate-900" x-text="adj.adjust_date || '—'"></p>
                                            <p class="text-xs text-slate-500" x-text="adj.notes || '—'"></p>
                                        </div>
                                        <p class="text-sm font-semibold text-green-600">SAR <span x-text="parseFloat(adj.amount).toLocaleString()"></span></p>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>

                    <p x-show="selectedEmp && !selectedEmp._loans.length && !selectedEmp._adjustments.length" class="text-sm text-slate-400 text-center py-8">No loan records.</p>
                </div>

                {{-- Summary --}}
                <div x-show="selectedEmp" class="px-6 py-3 border-t bg-slate-50 space-y-1.5 shrink-0">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-slate-600">Total Given</span>
                        <span class="font-semibold text-slate-900">SAR <span x-text="selectedEmp._loanTotal.toLocaleString()"></span></span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-slate-600">Total Adjusted</span>
                        <span class="font-semibold text-green-600">SAR <span x-text="selectedEmp._loanAdjusted.toLocaleString()"></span></span>
                    </div>
                    <div class="flex items-center justify-between text-sm border-t border-slate-200 pt-1.5">
                        <span class="font-semibold text-slate-900">Outstanding</span>
                        <span class="font-semibold" :class="selectedEmp._loanRemaining > 0 ? 'text-amber-600' : 'text-green-600'">SAR <span x-text="selectedEmp._loanRemaining.toLocaleString()"></span></span>
                    </div>
                </div>

                {{-- Add Loan Form --}}
                <div class="px-6 py-4 border-t shrink-0">
                    <p class="text-sm font-semibold text-slate-900 mb-3">Add New Loan</p>
                    <form @submit.prevent="addLoan(selectedEmp.id)" class="space-y-3">
                        <div class="flex items-center gap-3">
                            <input type="number" step="0.01" min="0" x-model="loanForm.amount" placeholder="Amount" required
                                   class="block w-28 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                            <input type="date" x-model="loanForm.loan_date"
                                   class="block w-36 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                        </div>
                        <div class="flex items-center gap-3">
                            <input type="text" x-model="loanForm.notes" placeholder="Notes"
                                   class="block flex-1 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                            <button type="submit" :disabled="adding"
                                    class="shrink-0 rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 disabled:opacity-50">
                                <span x-show="!adding">Add</span>
                                <span x-show="adding">...</span>
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Adjust Loan Form --}}
                <div class="px-6 py-4 border-t shrink-0">
                    <p class="text-sm font-semibold text-slate-900 mb-3">Loan Adjust</p>
                    <form @submit.prevent="adjustLoan(selectedEmp.id)" class="space-y-3">
                        <div class="flex items-center gap-3">
                            <input type="number" step="0.01" min="0" x-model="adjustForm.amount" placeholder="Amount" required
                                   class="block w-28 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                            <input type="date" x-model="adjustForm.adjust_date"
                                   class="block w-36 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                        </div>
                        <div class="flex items-center gap-3">
                            <input type="text" x-model="adjustForm.notes" placeholder="Notes"
                                   class="block flex-1 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                            <button type="submit" :disabled="adjusting"
                                    class="shrink-0 rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-50">
                                <span x-show="!adjusting">Adjust</span>
                                <span x-show="adjusting">...</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection