@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="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-slate-50 text-left text-xs font-semibold uppercase text-slate-500">
                                <th class="px-6 py-3">ID</th>
                                <th class="px-6 py-3">Name</th>
                                <th class="px-6 py-3">Designation</th>
                                <th class="px-6 py-3">Branch</th>
                                <th class="px-6 py-3 text-right">Total Loan</th>
                                <th class="px-6 py-3 text-right">Deduct</th>
                                <th class="px-6 py-3 text-right">Total Due</th>
                                <th class="px-6 py-3 text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="emp in filteredEmployees" :key="emp.id">
                                <tr class="border-t border-slate-100 transition-colors hover:bg-slate-50">
                                    <td class="px-6 py-4 text-sm font-semibold text-slate-900" x-text="String(emp.id).padStart(3, '0')"></td>
                                    <td class="px-6 py-4 text-sm font-semibold text-slate-900" x-text="emp.name"></td>
                                    <td class="px-6 py-4 text-sm text-slate-600" x-text="emp.designation || '—'"></td>
                                    <td class="px-6 py-4 text-sm text-slate-600" x-text="emp.branch_name || '—'"></td>
                                    <td class="px-6 py-4 text-right text-sm font-semibold text-slate-900" x-text="'SAR ' + emp._loanTotal.toLocaleString()"></td>
                                    <td class="px-6 py-4 text-right text-sm font-semibold text-green-600" x-text="'SAR ' + emp._loanAdjusted.toLocaleString()"></td>
                                    <td class="px-6 py-4 text-right text-sm font-semibold" :class="emp._loanRemaining > 0 ? 'text-amber-600' : 'text-green-600'" x-text="'SAR ' + emp._loanRemaining.toLocaleString()"></td>
                                    <td class="px-6 py-4 text-right whitespace-nowrap">
                                        <button @click="showLoanReportModal = emp.id" class="rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-200">Report</button>
                                        <button @click="showLoanEditModal = emp.id" class="ml-2 rounded-lg bg-amber-100 px-3 py-1.5 text-xs font-semibold text-amber-700 hover:bg-amber-200">Edit</button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </template>

        {{-- Report Modal --}}
        <div x-show="showLoanReportModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-6" @click.self="showLoanReportModal = null">
            <div class="rounded-2xl bg-white shadow-2xl max-w-4xl w-full max-h-[88vh] flex flex-col overflow-hidden">

                {{-- Header --}}
                <div class="px-8 py-5 border-b border-slate-200 shrink-0 flex items-center justify-between bg-slate-50/60">
                    <div class="flex items-center gap-4">
                        <div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-blue-600 font-bold text-lg" x-text="selectedEmp?.name?.charAt(0)"></div>
                        <div>
                            <h3 class="text-xl font-bold text-slate-900" x-text="selectedEmp?.name"></h3>
                            <p class="text-sm text-slate-500 mt-0.5" x-text="'ID: ' + (selectedEmp?.employee_id || '') + '  •  ' + (selectedEmp?.designation || '') + (selectedEmp?.branch_name ? '  •  ' + selectedEmp.branch_name : '')"></p>
                        </div>
                    </div>
                    <button @click="showLoanReportModal = null" class="rounded-lg p-2 text-slate-400 hover:bg-slate-200 hover:text-slate-600 transition">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>

                {{-- Report Table --}}
                <div class="flex-1 overflow-y-auto p-6">

                    {{-- Empty State --}}
                    <div x-show="selectedEmp && _reportRows.length === 0" class="flex flex-col items-center justify-center py-16 text-center">
                        <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100">
                            <svg class="h-8 w-8 text-slate-300" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
                        </div>
                        <p class="text-sm font-medium text-slate-400">No loan records.</p>
                    </div>

                    {{-- Table --}}
                    <div x-show="selectedEmp && _reportRows.length > 0" class="rounded-xl border border-slate-200 overflow-hidden">
                        <table class="w-full text-sm border-collapse">
                            <thead>
                                <tr class="bg-slate-100 border-b-2 border-slate-200">
                                    <th class="px-5 py-3.5 text-left text-xs font-bold uppercase tracking-wider text-slate-600 border border-slate-200">Date</th>
                                    <th class="px-5 py-3.5 text-left text-xs font-bold uppercase tracking-wider text-slate-600 border border-slate-200">Description</th>
                                    <th class="px-5 py-3.5 text-right text-xs font-bold uppercase tracking-wider text-slate-600 border border-slate-200">Loan (SAR)</th>
                                    <th class="px-5 py-3.5 text-right text-xs font-bold uppercase tracking-wider text-slate-600 border border-slate-200">Deduct (SAR)</th>
                                    <th class="px-5 py-3.5 text-left text-xs font-bold uppercase tracking-wider text-slate-600 border border-slate-200">Remark</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(row, idx) in _reportRows" :key="idx">
                                    <tr class="border-b border-slate-200 hover:bg-blue-50/40 transition" :class="idx % 2 === 1 ? 'bg-slate-50/60' : 'bg-white'">
                                        <td class="px-5 py-3 text-slate-600 border border-slate-200 whitespace-nowrap" x-text="row.date"></td>
                                        <td class="px-5 py-3 font-medium text-slate-900 border border-slate-200" x-text="row.description"></td>
                                        <td class="px-5 py-3 text-right font-semibold border border-slate-200 whitespace-nowrap" :class="row.loan ? 'text-slate-900' : 'text-slate-300'" x-text="row.loan ? parseFloat(row.loan).toLocaleString(undefined, {minimumFractionDigits:2}) : '—'"></td>
                                        <td class="px-5 py-3 text-right font-semibold border border-slate-200 whitespace-nowrap" :class="row.deduct ? 'text-green-600' : 'text-slate-300'" x-text="row.deduct ? parseFloat(row.deduct).toLocaleString(undefined, {minimumFractionDigits:2}) : '—'"></td>
                                        <td class="px-5 py-3 text-xs text-slate-500 border border-slate-200" x-text="row.remark || '—'"></td>
                                    </tr>
                                </template>
                            </tbody>
                            <tfoot>
                                <tr class="bg-slate-100 font-semibold border-t-2 border-slate-300">
                                    <td colspan="2" class="px-5 py-3.5 text-slate-700 border border-slate-200">Total</td>
                                    <td class="px-5 py-3.5 text-right text-slate-900 border border-slate-200 whitespace-nowrap" x-text="'SAR ' + (selectedEmp?._loanTotal || 0).toLocaleString(undefined, {minimumFractionDigits:2})"></td>
                                    <td class="px-5 py-3.5 text-right text-green-600 border border-slate-200 whitespace-nowrap" x-text="'SAR ' + (selectedEmp?._loanAdjusted || 0).toLocaleString(undefined, {minimumFractionDigits:2})"></td>
                                    <td class="border border-slate-200"></td>
                                </tr>
                                <tr class="bg-blue-50/70 font-bold">
                                    <td colspan="4" class="px-5 py-4 text-slate-900 text-base border border-slate-200">Total Due</td>
                                    <td class="px-5 py-4 text-right text-base border border-slate-200 whitespace-nowrap" :class="(selectedEmp?._loanRemaining || 0) > 0 ? 'text-amber-600' : 'text-green-600'" x-text="'SAR ' + (selectedEmp?._loanRemaining || 0).toLocaleString(undefined, {minimumFractionDigits:2})"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

            </div>
        </div>

        {{-- Edit Modal --}}
        <div x-show="showLoanEditModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30" @click.self="showLoanEditModal = null">
            <div class="rounded-2xl bg-white shadow-2xl max-w-2xl w-full mx-4 max-h-[90vh] 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 || '') + '  •  ' + (selectedEmp?.branch_name || '')"></p>
                    </div>
                    <button @click="showLoanEditModal = 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>

                {{-- Add Loan Form --}}
                <div class="px-6 py-5 shrink-0 border-b">
                    <p class="text-sm font-semibold text-slate-900 mb-4">Add New Loan</p>
                    <form @submit.prevent="addLoan(selectedEmp.id)" class="space-y-3">
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="mb-1 block text-xs font-semibold text-slate-700">Amount</label>
                                <input type="number" step="0.01" min="0" x-model="loanForm.amount" placeholder="0.00" required
                                       class="w-full 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>
                                <label class="mb-1 block text-xs font-semibold text-slate-700">Date</label>
                                <input type="date" x-model="loanForm.loan_date"
                                       class="w-full 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>
                        <div>
                            <label class="mb-1 block text-xs font-semibold text-slate-700">Description</label>
                            <input type="text" x-model="loanForm.description" placeholder="Reason for loan"
                                   class="w-full 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>
                            <label class="mb-1 block text-xs font-semibold text-slate-700">Notes</label>
                            <input type="text" x-model="loanForm.notes" placeholder="Additional notes"
                                   class="w-full 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 justify-end pt-1">
                            <button type="submit" :disabled="adding"
                                    class="rounded-xl bg-slate-900 px-5 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-5 shrink-0">
                    <p class="text-sm font-semibold text-slate-900 mb-4">Loan Deduct</p>
                    <template x-if="selectedEmp && selectedEmp._loanRemaining <= 0">
                        <p class="text-sm text-slate-500 bg-slate-50 rounded-xl px-4 py-3">No outstanding loan to deduct.</p>
                    </template>
                    <template x-if="selectedEmp && selectedEmp._loanRemaining > 0">
                        <form @submit.prevent="adjustLoan(selectedEmp.id)" class="space-y-3">
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="mb-1 block text-xs font-semibold text-slate-700">Amount</label>
                                    <input type="number" step="0.01" min="0" :max="selectedEmp._loanRemaining" x-model="adjustForm.amount" placeholder="0.00" required
                                           class="w-full 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">
                                    <p x-show="adjustForm.amount > selectedEmp._loanRemaining" class="mt-1 text-xs text-red-500">Cannot exceed remaining balance (SAR <span x-text="selectedEmp._loanRemaining.toLocaleString()"></span>)</p>
                                </div>
                                <div>
                                    <label class="mb-1 block text-xs font-semibold text-slate-700">Date</label>
                                    <input type="date" x-model="adjustForm.adjust_date"
                                           class="w-full 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>
                            <div>
                                <label class="mb-1 block text-xs font-semibold text-slate-700">Description</label>
                                <input type="text" x-model="adjustForm.description" placeholder="Reason for deduction"
                                       class="w-full 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>
                                <label class="mb-1 block text-xs font-semibold text-slate-700">Notes</label>
                                <input type="text" x-model="adjustForm.notes" placeholder="Additional notes"
                                       class="w-full 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 justify-end pt-1">
                                <button type="submit" :disabled="adjusting || !adjustForm.amount || adjustForm.amount > selectedEmp._loanRemaining"
                                        class="rounded-xl bg-emerald-600 px-5 py-2 text-sm font-semibold text-white hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed">
                                    <span x-show="!adjusting">Deduct</span>
                                    <span x-show="adjusting">...</span>
                                </button>
                            </div>
                        </form>
                    </template>
                </div>
            </div>
        </div>
    </div>
@endsection