@extends('layouts.user')

@section('title', __('employee_advance.employee_advances'))
@section('page_title', __('employee_advance.employee_advances'))
@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 items-center justify-between gap-3">
        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
            <div class="border border-slate-200 bg-white px-3 py-2 shadow-sm min-w-[180px]">
                <div class="text-[11px] text-slate-500">{{ __('employee_advance.total_advance') }}</div>
                <div class="mt-1 text-sm font-bold text-slate-800">
                    ৳ {{ number_format($totalAdvance, 2) }}
                </div>
            </div>

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

        <a href="{{ route('user.hr.advances.create') }}"
           class="bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800">
            + {{ __('employee_advance.give_advance') }}
        </a>
    </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.advance_list') }}</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.search') }}</label>
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="{{ __('employee_advance.search_employee') }}"
                       class="w-44 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.employee') }}</label>
                <select name="employee_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_employees') }}</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}" @selected(request('employee_id') == $employee->id)>
                            {{ $employee->name }} ({{ $employee->employee_code }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="mb-1 block text-[10px] text-slate-500">{{ __('employee_advance.status') }}</label>
                <select name="status"
                        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_status') }}</option>
                    <option value="active" @selected(request('status') === 'active')>{{ __('employee_advance.active') }}</option>
                    <option value="partial_adjusted" @selected(request('status') === 'partial_adjusted')>{{ __('employee_advance.partial_adjusted') }}</option>
                    <option value="adjusted" @selected(request('status') === 'adjusted')>{{ __('employee_advance.adjusted') }}</option>
                    <option value="cancelled" @selected(request('status') === 'cancelled')>{{ __('employee_advance.cancelled') }}</option>
                </select>
            </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.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.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.advance_records') }}</div>
            <div class="text-[11px] text-slate-500">
                {{ __('employee_advance.total') }}: {{ $advances->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.employee') }}</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.adjusted_amount') }}</th>
                        <th class="px-3 py-2">{{ __('employee_advance.remaining') }}</th>
                        <th class="px-3 py-2">{{ __('employee_advance.status') }}</th>
                        <th class="px-3 py-2 text-right">{{ __('employee_advance.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                    @forelse($advances as $advance)
                        @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

                        <tr class="hover:bg-slate-50">
                            <td class="px-3 py-2">
                                <div class="font-semibold text-slate-800">
                                    {{ optional($advance->advance_date)->format('d M Y') }}
                                </div>
                                <div class="text-[11px] text-slate-500">
                                    {{ optional($advance->advance_date)->format('l') }}
                                </div>
                            </td>

                            <td class="px-3 py-2">
                                <div class="font-semibold text-slate-900">
                                    {{ $advance->employee?->name ?? '-' }}
                                </div>
                                <div class="text-[11px] text-slate-500">
                                    {{ $advance->employee?->employee_code ?? __('employee_advance.no_code') }}
                                </div>
                            </td>

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

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

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

                            <td class="px-3 py-2 font-semibold text-rose-600">
                                ৳ {{ number_format($advance->remaining_amount, 2) }}
                            </td>

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

                            <td class="px-3 py-2">
                                <div class="flex flex-wrap items-center justify-end gap-1">
                                    <a href="{{ route('user.hr.advances.repayments.index', $advance->id) }}"
                                       class="inline-flex items-center px-2 py-1 text-[11px] border border-sky-300 text-sky-700 bg-sky-50 hover:bg-sky-100">
                                        {{ __('employee_advance.repayments') }}
                                    </a>

                                    @if((float) $advance->remaining_amount > 0)
                                        <a href="{{ route('user.hr.advances.repayments.create', $advance->id) }}"
                                           class="inline-flex items-center px-2 py-1 text-[11px] border border-emerald-300 text-emerald-700 bg-emerald-50 hover:bg-emerald-100">
                                            {{ __('employee_advance.receive') }}
                                        </a>
                                    @endif

                                    @if((float) $advance->adjusted_amount <= 0)
                                        <a href="{{ route('user.hr.advances.edit', $advance->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.destroy', $advance->id) }}"
                                              method="POST"
                                              class="delete-advance-form"
                                              data-name="{{ $advance->employee?->name ?? __('employee_advance.this_employee') }}">
                                            @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.locked') }}
                                        </span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-center">
                                <div class="text-sm font-semibold text-slate-800">{{ __('employee_advance.no_advance_found') }}</div>
                                <div class="mt-1 text-xs text-slate-500">
                                    {{ __('employee_advance.no_advance_found_for_filter') }}
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

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

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

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

            Swal.fire({
                title: @json(__('employee_advance.delete_advance_question')),
                text: employeeName + ' ' + @json(__('employee_advance.delete_advance_warning')),
                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