@extends('admin.layouts.app')

@section('content')
<div class="bg-white p-4 shadow-sm border border-gray-200">
    <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  p-2 rounded-t-sm">
        <h3 class="font-semibold text-sm flex items-center">
            <i class="fa-solid fa-list-ul mr-2"></i> Advance/Loan List
        </h3>
        <span class="bg-[#e64a19] px-3 py-1 text-xs rounded-sm font-bold shadow-inner">Total Records: {{ $loans->count() }}</span>
    </div>

    <div class="p-4 border border-t-0 border-gray-200 bg-gray-50 flex flex-wrap gap-4 items-center mb-4">
        <form action="{{ route('payroll.loans.index') }}" method="GET" class="flex flex-wrap gap-4 items-center w-full">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search_employee" placeholder="Search Employee" class="w-full border border-gray-300 px-3 py-1.5 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
            </div>
            <div class="w-48">
                <select name="loan_type" class="w-full border border-gray-300 px-3 py-1.5 text-xs focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 text-gray-600 bg-white">
                    <option value="">Active Loan</option>
                    <option value="Advance" {{ request('loan_type') == 'Advance' ? 'selected' : '' }}>Advance</option>
                    <option value="Loan" {{ request('loan_type') == 'Loan' ? 'selected' : '' }}>Loan</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <span class="text-xs text-gray-700">From:</span>
                <input type="date" name="from_date" value="{{ request('from_date') }}" class="border border-gray-300 px-2 py-1.5 text-xs text-gray-500 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
            </div>
            <div class="flex items-center space-x-2">
                <span class="text-xs text-gray-700">To:</span>
                <input type="date" name="to_date" value="{{ request('to_date') }}" class="border border-gray-300 px-2 py-1.5 text-xs text-gray-500 focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
            </div>
            <button type="submit" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-4 py-1.5 rounded-sm text-xs font-semibold shadow flex items-center transition">
                <i class="fa-regular fa-eye mr-1"></i> VIEW
            </button>
        </form>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-left text-xs text-gray-700 border-collapse border border-gray-200">
            <thead>
                <tr class="bg-slate-50 text-slate-500 border-b border-slate-200 text-xs uppercase tracking-wider">
                    <th class="p-2 border border-gray-300 font-semibold w-12">Loan ID</th>
                    <th class="p-2 border border-gray-300 font-semibold">Loan Name</th>
                    <th class="p-2 border border-gray-300 font-semibold">Loan Type</th>
                    <th class="p-2 border border-gray-300 font-semibold">Employee Name</th>
                    <th class="p-2 border border-gray-300 font-semibold text-right">Amount</th>
                    <th class="p-2 border border-gray-300 font-semibold text-right">Interest %</th>
                    <th class="p-2 border border-gray-300 font-semibold text-center">Term</th>
                    <th class="p-2 border border-gray-300 font-semibold text-center">Start Date</th>
                    <th class="p-2 border border-gray-300 font-semibold text-right">Total Amount</th>
                    <th class="p-2 border border-gray-300 font-semibold text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($loans as $loan)
                <tr class="hover:bg-gray-50 bg-white">
                    <td class="p-2 border border-gray-300 font-bold text-center">{{ $loan->id }}</td>
                    <td class="p-2 border border-gray-300 font-semibold">{{ $loan->loan_name }}</td>
                    <td class="p-2 border border-gray-300 font-semibold">{{ $loan->loan_type }}</td>
                    <td class="p-2 border border-gray-300 font-semibold">{{ $loan->employee->name ?? 'N/A' }}</td>
                    <td class="p-2 border border-gray-300 font-semibold text-right">{{ number_format($loan->amount, 2) }}</td>
                    <td class="p-2 border border-gray-300 font-semibold text-right">{{ number_format($loan->interest_rate, 2) }}%</td>
                    <td class="p-2 border border-gray-300 font-semibold text-center">{{ $loan->term_months }}</td>
                    <td class="p-2 border border-gray-300 font-semibold text-center">{{ $loan->start_date ? \Carbon\Carbon::parse($loan->start_date)->format('d-M-Y') : 'N/A' }}</td>
                    <td class="p-2 border border-gray-300 font-semibold text-right">{{ number_format($loan->total_amount, 2) }}</td>
                    <td class="p-2 border border-gray-300 text-center space-x-1">
                        <a href="{{ route('payroll.loans.edit', $loan->id) }}" class="inline-flex items-center justify-center bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white w-6 h-6 rounded-sm transition"><i class="fa-solid fa-pen-to-square text-[10px]"></i></a>
                        <a href="#" class="inline-flex items-center justify-center bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white w-6 h-6 rounded-sm transition"><i class="fa-solid fa-eye text-[10px]"></i></a>
                        <a href="#" class="inline-flex items-center justify-center bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white w-6 h-6 rounded-sm transition"><i class="fa-regular fa-file-pdf text-[10px]"></i></a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="10" class="p-4 text-center text-gray-500 border border-gray-300 bg-white">No records found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4 flex justify-end">
        <a href="{{ route('payroll.loans.create') }}" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-4 py-2 rounded-sm text-xs font-semibold shadow flex items-center transition">
            <i class="fa-solid fa-plus mr-2"></i> ADD NEW LOAN
        </a>
    </div>
</div>
@endsection