@extends('layouts.app')

@section('title', 'Salary Advances')
@section('heading', 'Salary Advances')

@section('content')
@include('finance.top-submenu')
    <x-card>
        <div class="mb-5 flex flex-nowrap items-end justify-between gap-3 overflow-x-auto rounded-lg border border-slate-200 bg-slate-50 p-3">
            <p class="shrink-0 pb-2 text-sm text-slate-600 whitespace-nowrap">Salary advances and monthly repayment deductions linked to payroll.</p>

            <form method="get" class="flex flex-nowrap items-end gap-2">
                <div class="min-w-[12rem]">
                    <label class="mb-1 block text-xs font-medium text-slate-500">Employee</label>
                    <select name="user_id" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                        <option value="">All employees</option>
                        @foreach($employees as $employee)
                            <option value="{{ $employee->id }}" {{ request('user_id') == $employee->id ? 'selected' : '' }}>{{ $employee->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="min-w-[9rem]">
                    <label class="mb-1 block text-xs font-medium text-slate-500">Status</label>
                    <select name="status" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm js-select2">
                        <option value="">All statuses</option>
                        @foreach(['pending', 'deducted', 'cancelled'] as $st)
                            <option value="{{ $st }}" {{ request('status') === $st ? 'selected' : '' }}>{{ ucfirst($st) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex shrink-0 gap-2 pb-px">
                    <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white whitespace-nowrap">Apply</button>
                    <a href="{{ route('pre-payments.index') }}" class="rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 whitespace-nowrap">Reset</a>
                    @if(auth()->user()?->hasPermission('finance_create'))
                        <a href="{{ route('pre-payments.create') }}" class="inline-flex items-center rounded-lg bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-600 whitespace-nowrap"><i class="bi bi-plus-lg me-1"></i>Add advance</a>
                    @endif
                </div>
            </form>
        </div>

        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Advance date</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Deduction month</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Amount</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Plan</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($prePayments as $advance)
                <tr>
                    <td class="px-4 py-3 text-sm text-slate-900">{{ $advance->user?->name }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">
                        {{ $advance->advance_date?->format('d M Y') ?? '—' }}
                    </td>
                    <td class="px-4 py-3 text-sm text-slate-600">{{ date('M Y', mktime(0, 0, 0, $advance->month, 1, $advance->year)) }}</td>
                    <td class="px-4 py-3 text-sm font-medium text-slate-900">{{ number_format((float) $advance->amount, 2) }}</td>
                    <td class="px-4 py-3 text-sm text-slate-600">
                        @if($advance->isInstallmentPlan())
                            <span class="inline-flex rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-700">
                                {{ $advance->installmentLabel() }}
                            </span>
                            <div class="mt-0.5 text-xs text-slate-500">of {{ number_format((float) $advance->total_amount, 2) }}</div>
                        @else
                            <span class="text-slate-400">Single</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-sm capitalize">{{ $advance->status }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm space-x-2">
                        @if($advance->status === 'pending')
                            @if(auth()->user()?->hasPermission('finance_edit'))
                                <a href="{{ route('pre-payments.edit', $advance) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                                <form action="{{ route('pre-payments.cancel', $advance) }}" method="post" class="inline" onsubmit="return confirm(@js($advance->isInstallmentPlan() ? 'Cancel all pending installments for this advance?' : 'Cancel this advance?'));">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="font-medium text-amber-700 hover:underline">
                                        {{ $advance->isInstallmentPlan() ? 'Cancel plan' : 'Cancel' }}
                                    </button>
                                </form>
                            @endif
                            @if(auth()->user()?->hasPermission('finance_delete'))
                                @include('partials.delete-form', ['action' => route('pre-payments.destroy', $advance)])
                            @endif
                        @else
                            <span class="text-slate-400">—</span>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="px-4 py-8 text-center text-sm text-slate-500">No advances recorded.</td></tr>
            @endforelse
        </x-table>
        @if($prePayments->hasPages())<div class="mt-4">{{ $prePayments->links() }}</div>@endif
    </x-card>
@endsection