@extends('layouts.user')

@section('title', __('employee_ledger.title'))
@section('page_title', __('employee_ledger.page_title'))
@section('breadcrumb', __('employee_ledger.breadcrumb'))

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

    {{-- Filter --}}
    <div class="border border-slate-200 bg-white p-3 shadow-sm">
        <div class="mb-3">
            <h2 class="text-sm font-bold text-slate-800">{{ __('employee_ledger.list_title') }}</h2>
            <p class="mt-1 text-xs text-slate-500">
                {{ __('employee_ledger.list_description') }}
            </p>
        </div>

        <form method="GET" class="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-4">
            <div>
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="{{ __('employee_ledger.search_employee') }}"
                       class="w-full border border-slate-300 px-2 py-1.5 text-xs text-slate-700 outline-none focus:border-slate-400">
            </div>

            <div>
                <select name="employee_type"
                        class="w-full border border-slate-300 px-2 py-1.5 text-xs text-slate-700 outline-none focus:border-slate-400">
                    <option value="">{{ __('employee_ledger.all_types') }}</option>
                    <option value="monthly" @selected(request('employee_type') === 'monthly')>{{ __('employee_ledger.monthly') }}</option>
                    <option value="daily_roz" @selected(request('employee_type') === 'daily_roz')>{{ __('employee_ledger.daily_roz') }}</option>
                </select>
            </div>

            <div>
                <select name="status"
                        class="w-full border border-slate-300 px-2 py-1.5 text-xs text-slate-700 outline-none focus:border-slate-400">
                    <option value="">{{ __('employee_ledger.all_status') }}</option>
                    <option value="active" @selected(request('status') === 'active')>{{ __('employee_ledger.active') }}</option>
                    <option value="inactive" @selected(request('status') === 'inactive')>{{ __('employee_ledger.inactive') }}</option>
                </select>
            </div>

            <div class="flex gap-2">
                <button type="submit"
                        class="flex-1 bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">
                    {{ __('employee_ledger.filter') }}
                </button>
                <a href="{{ route('user.hr.ledger.index') }}"
                   class="flex-1 border border-slate-300 px-3 py-1.5 text-center text-xs font-semibold text-slate-700 hover:bg-slate-50">
                    {{ __('employee_ledger.reset') }}
                </a>
            </div>
        </form>
    </div>

    {{-- Table --}}
    <div class="overflow-hidden border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50">
                    <tr class="text-left text-slate-600">
                        <th class="px-3 py-2 font-semibold">{{ __('employee_ledger.employee') }}</th>
                        <th class="px-3 py-2 font-semibold">{{ __('employee_ledger.type') }}</th>
                        <th class="px-3 py-2 font-semibold">{{ __('employee_ledger.current_salary_rate') }}</th>
                        <th class="px-3 py-2 font-semibold">{{ __('employee_ledger.ledger_balance') }}</th>
                        <th class="px-3 py-2 font-semibold">{{ __('employee_ledger.outstanding_advance') }}</th>
                        <th class="px-3 py-2 text-right font-semibold">{{ __('employee_ledger.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-slate-100">
                    @forelse($employees as $employee)
                        @php
                            $ledgerBalance = $ledgerBalances[$employee->id] ?? 0;
                            $advanceBalance = $outstandingAdvances[$employee->id] ?? 0;
                        @endphp

                        <tr class="hover:bg-slate-50/70">
                            <td class="px-3 py-2">
                                <div class="font-semibold text-slate-800">{{ $employee->name }}</div>
                                <div class="text-[11px] text-slate-500">
                                    {{ $employee->employee_code }}
                                    @if($employee->designation)
                                        • {{ $employee->designation->name }}
                                    @endif
                                </div>
                            </td>

                            <td class="px-3 py-2">
                                @if($employee->employee_type === 'monthly')
                                    <span class="border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-semibold text-blue-700">
                                        {{ __('employee_ledger.monthly') }}
                                    </span>
                                @else
                                    <span class="border border-violet-200 bg-violet-50 px-2 py-0.5 text-[10px] font-semibold text-violet-700">
                                        {{ __('employee_ledger.daily_roz') }}
                                    </span>
                                @endif
                            </td>

                            <td class="px-3 py-2 text-slate-700">
                                @if($employee->currentSalaryStructure)
                                    @if($employee->employee_type === 'monthly')
                                        ৳ {{ number_format($employee->currentSalaryStructure->monthly_salary, 2) }}/{{ __('employee_ledger.month') }}
                                    @else
                                        ৳ {{ number_format($employee->currentSalaryStructure->per_roz_rate, 2) }}/{{ __('employee_ledger.roz') }}
                                    @endif
                                @else
                                    -
                                @endif
                            </td>

                            <td class="px-3 py-2 font-semibold {{ $ledgerBalance > 0 ? 'text-emerald-600' : 'text-slate-800' }}">
                                ৳ {{ number_format($ledgerBalance, 2) }}
                            </td>

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

                            <td class="px-3 py-2 text-right">
                                <a href="{{ route('user.hr.ledger.show', $employee->id) }}"
                                   class="inline-flex items-center border border-slate-300 px-2.5 py-1 text-[11px] font-semibold text-slate-700 hover:bg-slate-50">
                                    {{ __('employee_ledger.statement') }}
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-3 py-8 text-center text-xs text-slate-500">
                                {{ __('employee_ledger.no_employee_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($employees->hasPages())
            <div class="border-t border-slate-200 px-3 py-3 text-xs">
                {{ $employees->links() }}
            </div>
        @endif
    </div>
</div>
@endsection