@extends('layouts.user')

@section('title', __('employee_advance.advance_repayments'))
@section('page_title', __('employee_advance.advance_repayments'))
@section('breadcrumb', __('employee_advance.hr_payroll'))

@section('content')
<div class="w-full px-1 sm:px-2 lg:px-3 space-y-3">

    {{-- Top summary --}}
    <div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-5">
            <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm min-w-[170px]">
                <div class="text-[11px] text-slate-500">{{ __('employee_advance.employee') }}</div>
                <div class="mt-1 text-sm font-bold text-slate-800">
                    {{ $advance->employee?->name ?? '-' }}
                </div>
                <div class="text-[11px] text-slate-500">
                    {{ $advance->employee?->employee_code ?? __('employee_advance.no_code') }}
                </div>
            </div>

            <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm min-w-[170px]">
                <div class="text-[11px] text-slate-500">{{ __('employee_advance.advance_amount') }}</div>
                <div class="mt-1 text-sm font-bold text-slate-800">
                    ৳ {{ number_format($advance->amount, 2) }}
                </div>
            </div>

            <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm min-w-[170px]">
                <div class="text-[11px] text-slate-500">{{ __('employee_advance.total_repaid') }}</div>
                <div class="mt-1 text-sm font-bold text-emerald-700">
                    ৳ {{ number_format($totalRepayment, 2) }}
                </div>
            </div>

            <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm min-w-[170px]">
                <div class="text-[11px] text-slate-500">{{ __('employee_advance.manual_repayment') }}</div>
                <div class="mt-1 text-sm font-bold text-sky-700">
                    ৳ {{ number_format($manualRepayment, 2) }}
                </div>
            </div>

            <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm min-w-[170px]">
                <div class="text-[11px] text-slate-500">{{ __('employee_advance.payroll_adjust') }}</div>
                <div class="mt-1 text-sm font-bold text-amber-700">
                    ৳ {{ number_format($payrollRepayment, 2) }}
                </div>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            @if((float) $advance->remaining_amount > 0)
                <a href="{{ route('user.hr.advances.repayments.create', $advance->id) }}"
                   class="bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800">
                    + {{ __('employee_advance.receive_repayment') }}
                </a>
            @endif

            <a href="{{ route('user.hr.advances.index') }}"
               class="border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">
                {{ __('employee_advance.back') }}
            </a>
        </div>
    </div>

    {{-- Advance info --}}
    <div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
        <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm">
            <div class="text-[11px] text-slate-500">{{ __('employee_advance.adjusted_amount') }}</div>
            <div class="mt-1 text-sm font-bold text-emerald-700">
                ৳ {{ number_format($advance->adjusted_amount, 2) }}
            </div>
        </div>

        <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm">
            <div class="text-[11px] text-slate-500">{{ __('employee_advance.remaining_amount') }}</div>
            <div class="mt-1 text-sm font-bold text-rose-600">
                ৳ {{ number_format($advance->remaining_amount, 2) }}
            </div>
        </div>

        <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm">
            <div class="text-[11px] text-slate-500">{{ __('employee_advance.status') }}</div>
            <div class="mt-1">
                @php
                    $status = $advance->status;

                    $statusClasses = match($status) {
                        'active' => 'bg-emerald-50 text-emerald-700 border border-emerald-200',
                        'partial_adjusted' => 'bg-amber-50 text-amber-700 border border-amber-200',
                        'adjusted' => 'bg-sky-50 text-sky-700 border border-sky-200',
                        'cancelled' => 'bg-rose-50 text-rose-700 border border-rose-200',
                        default => 'bg-slate-100 text-slate-700 border border-slate-200',
                    };
                @endphp

                <span class="inline-flex px-2 py-0.5 text-[11px] font-semibold {{ $statusClasses }}">
                    {{ __('employee_advance.status_' . $advance->status) }}
                </span>
            </div>
        </div>
    </div>

    {{-- Filter --}}
    <div class="border border-slate-200 bg-white p-3 shadow-sm">
        <div class="mb-2 text-sm font-bold text-slate-900">{{ __('employee_advance.repayment_history') }}</div>

        <form method="GET" class="flex flex-wrap items-end gap-2">
            <div>
                <label class="mb-1 block text-[10px] text-slate-500">{{ __('employee_advance.source') }}</label>
                <select name="source"
                        class="w-40 border border-slate-200 px-3 py-2 text-xs text-slate-800 outline-none focus:border-slate-400">
                    <option value="">{{ __('employee_advance.all_source') }}</option>
                    <option value="manual" @selected(request('source') === 'manual')>{{ __('employee_advance.manual') }}</option>
                    <option value="payroll_adjustment" @selected(request('source') === 'payroll_adjustment')>{{ __('employee_advance.payroll_adjust') }}</option>
                </select>
            </div>

            <div>
                <label class="mb-1 block text-[10px] text-slate-500">{{ __('employee_advance.account') }}</label>
                <select name="account_id"
                        class="w-48 border border-slate-200 px-3 py-2 text-xs text-slate-800 outline-none focus:border-slate-400">
                    <option value="">{{ __('employee_advance.all_account') }}</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" @selected((string) request('account_id') === (string) $account->id)>
                            {{ $account->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="mb-1 block text-[10px] text-slate-500">{{ __('employee_advance.from_date') }}</label>
                <input type="date"
                       name="date_from"
                       value="{{ request('date_from') }}"
                       class="w-40 border border-slate-200 px-3 py-2 text-xs text-slate-800 outline-none focus:border-slate-400">
            </div>

            <div>
                <label class="mb-1 block text-[10px] text-slate-500">{{ __('employee_advance.to_date') }}</label>
                <input type="date"
                       name="date_to"
                       value="{{ request('date_to') }}"
                       class="w-40 border border-slate-200 px-3 py-2 text-xs text-slate-800 outline-none focus:border-slate-400">
            </div>

            <button type="submit"
                    class="bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800">
                {{ __('employee_advance.filter') }}
            </button>

            <a href="{{ route('user.hr.advances.repayments.index', $advance->id) }}"
               class="border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">
                {{ __('employee_advance.reset') }}
            </a>
        </form>
    </div>

    {{-- Table --}}
    <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
        <div class="border-b border-slate-200 bg-slate-50 px-3 py-2 flex items-center justify-between">
            <div class="text-sm font-bold text-slate-900">{{ __('employee_advance.repayment_records') }}</div>
            <div class="text-[11px] text-slate-500">
                {{ __('employee_advance.total') }}: {{ $repayments->total() }}
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50">
                    <tr class="text-left text-[10px] uppercase text-slate-500">
                        <th class="px-3 py-2">{{ __('employee_advance.date') }}</th>
                        <th class="px-3 py-2">{{ __('employee_advance.source') }}</th>
                        <th class="px-3 py-2">{{ __('employee_advance.account') }}</th>
                        <th class="px-3 py-2">{{ __('employee_advance.amount') }}</th>
                        <th class="px-3 py-2">{{ __('employee_advance.reference') }}</th>
                        <th class="px-3 py-2">{{ __('employee_advance.note') }}</th>
                        <th class="px-3 py-2 text-right">{{ __('employee_advance.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                    @forelse($repayments as $item)
                        <tr class="hover:bg-slate-50">
                            <td class="px-3 py-2">
                                <div class="font-semibold text-slate-800">
                                    {{ optional($item->repayment_date)->format('d M Y') }}
                                </div>
                                <div class="text-[11px] text-slate-500">
                                    {{ optional($item->repayment_date)->format('l') }}
                                </div>
                            </td>

                            <td class="px-3 py-2">
                                @if(($item->source ?? 'manual') === 'payroll_adjustment')
                                    <span class="inline-flex px-2 py-0.5 text-[11px] font-semibold border border-amber-200 bg-amber-50 text-amber-700">
                                        {{ __('employee_advance.payroll_adjust') }}
                                    </span>
                                @else
                                    <span class="inline-flex px-2 py-0.5 text-[11px] font-semibold border border-sky-200 bg-sky-50 text-sky-700">
                                        {{ __('employee_advance.manual') }}
                                    </span>
                                @endif
                            </td>

                            <td class="px-3 py-2 text-slate-700">
                                {{ $item->account?->name ?? '-' }}
                            </td>

                            <td class="px-3 py-2 font-semibold text-emerald-700">
                                ৳ {{ number_format($item->amount, 2) }}
                            </td>

                            <td class="px-3 py-2 text-slate-700">
                                {{ $item->reference_no ?: '-' }}
                            </td>

                            <td class="px-3 py-2 text-slate-700">
                                {{ $item->note ?: '-' }}
                            </td>

                            <td class="px-3 py-2">
                                <div class="flex flex-wrap items-center justify-end gap-1">
                                    @if(($item->source ?? 'manual') !== 'payroll_adjustment')
                                        <a href="{{ route('user.hr.advances.repayments.edit', [$advance->id, $item->id]) }}"
                                           class="border border-amber-200 bg-amber-50 px-2 py-1 text-[11px] font-semibold text-amber-700 hover:bg-amber-100">
                                            {{ __('employee_advance.edit') }}
                                        </a>

                                        <form action="{{ route('user.hr.advances.repayments.destroy', [$advance->id, $item->id]) }}"
                                              method="POST"
                                              class="delete-repayment-form"
                                              data-name="{{ $advance->employee?->name ?? __('employee_advance.employee_fallback') }}">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    class="border border-rose-200 bg-rose-50 px-2 py-1 text-[11px] font-semibold text-rose-700 hover:bg-rose-100">
                                                {{ __('employee_advance.delete') }}
                                            </button>
                                        </form>
                                    @else
                                        <span class="border border-slate-200 bg-slate-50 px-2 py-1 text-[11px] font-semibold text-slate-500">
                                            {{ __('employee_advance.auto_posted') }}
                                        </span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center">
                                <div class="text-sm font-semibold text-slate-800">{{ __('employee_advance.no_repayment_found') }}</div>
                                <div class="mt-1 text-xs text-slate-500">
                                    {{ __('employee_advance.no_repayment_found_for_filter') }}
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($repayments->hasPages())
            <div class="border-t border-slate-200 px-4 py-2">
                {{ $repayments->links() }}
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.delete-repayment-form').forEach(function (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            const employeeName = form.dataset.name || @json(__('employee_advance.employee_fallback'));

            if (typeof Swal === 'undefined') {
                if (confirm(@json(__('employee_advance.delete_repayment_for')) + ' ' + employeeName + '?')) {
                    form.submit();
                }
                return;
            }

            Swal.fire({
                title: @json(__('employee_advance.delete_repayment_question')),
                text: @json(__('employee_advance.delete_repayment_warning_prefix')) + ' ' + employeeName + ' ' + @json(__('employee_advance.delete_repayment_warning_suffix')),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: @json(__('employee_advance.yes_delete')),
                cancelButtonText: @json(__('employee_advance.cancel')),
                reverseButtons: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                background: '#ffffff'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    });
});
</script>
@endpush
@endsection