@extends('layouts.user')

@section('title', __('employee_advance.advance_repayment'))
@section('page_title', __('employee_advance.advance_repayment'))

@section('content')
<div class="max-w-3xl mx-auto px-4 py-6">
    <div class="bg-white border border-slate-200 shadow-sm">
        <div class="border-b border-slate-200 px-4 py-3">
            <h2 class="text-[14px] font-semibold text-slate-800">{{ __('employee_advance.advance_repayment_receive') }}</h2>
            <p class="text-[12px] text-slate-500 mt-1">{{ __('employee_advance.advance_repayment_receive_subtitle') }}</p>
        </div>

        <div class="p-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4 text-[12px]">
                <div class="border border-slate-200 p-3 bg-slate-50">
                    <div><span class="font-semibold">{{ __('employee_advance.employee_label') }}</span> {{ $advance->employee->name ?? '-' }}</div>
                    <div class="mt-1"><span class="font-semibold">{{ __('employee_advance.advance_date_label') }}</span> {{ \Carbon\Carbon::parse($advance->advance_date)->format('d M, Y') }}</div>
                </div>
                <div class="border border-slate-200 p-3 bg-slate-50">
                    <div><span class="font-semibold">{{ __('employee_advance.advance_amount_label') }}</span> {{ number_format($advance->amount, 2) }}</div>
                    <div class="mt-1"><span class="font-semibold">{{ __('employee_advance.remaining_label') }}</span> {{ number_format($advance->remaining_amount, 2) }}</div>
                </div>
            </div>

            <form action="{{ route('user.hr.advances.repayments.store', $advance->id) }}" method="POST" class="space-y-4">
                @csrf

                <div>
                    <label class="block text-[12px] font-medium text-slate-700 mb-1">{{ __('employee_advance.receive_account_label') }}</label>
                    <select name="user_account_id" required class="w-full border border-slate-300 px-3 py-2 text-[12px]">
                        <option value="">{{ __('employee_advance.select_account') }}</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}" {{ old('user_account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->name }} ({{ strtoupper($account->type) }})
                            </option>
                        @endforeach
                    </select>
                    @error('user_account_id')
                        <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[12px] font-medium text-slate-700 mb-1">{{ __('employee_advance.repayment_date') }}</label>
                        <input type="date"
                               name="repayment_date"
                               value="{{ old('repayment_date', date('Y-m-d')) }}"
                               required
                               class="w-full border border-slate-300 px-3 py-2 text-[12px]">
                        @error('repayment_date')
                            <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-[12px] font-medium text-slate-700 mb-1">{{ __('employee_advance.amount') }}</label>
                        <input type="number"
                               name="amount"
                               min="0"
                               value="{{ old('amount', $advance->remaining_amount) }}"
                               required
                               class="w-full border border-slate-300 px-3 py-2 text-[12px]">
                        @error('amount')
                            <p class="text-[11px] text-red-600 mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div>
                    <label class="block text-[12px] font-medium text-slate-700 mb-1">{{ __('employee_advance.reference_no') }}</label>
                    <input type="text"
                           name="reference_no"
                           value="{{ old('reference_no') }}"
                           class="w-full border border-slate-300 px-3 py-2 text-[12px]">
                </div>

                <div>
                    <label class="block text-[12px] font-medium text-slate-700 mb-1">{{ __('employee_advance.note') }}</label>
                    <textarea name="note"
                              rows="3"
                              class="w-full border border-slate-300 px-3 py-2 text-[12px]">{{ old('note') }}</textarea>
                </div>

                <div class="flex items-center gap-2 pt-2">
                    <button type="submit" class="bg-slate-900 text-white px-4 py-2 text-[12px] hover:bg-slate-800">
                        {{ __('employee_advance.save_repayment') }}
                    </button>

                    <a href="{{ route('user.hr.advances.repayments.index', $advance->id) }}"
                       class="border border-slate-300 px-4 py-2 text-[12px] text-slate-700 hover:bg-slate-50">
                        {{ __('employee_advance.back') }}
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection