@extends('layouts.user')

@section('title', __('Employee_Bonus.employee_bonus'))
@section('page_title', __('Employee_Bonus.employee_bonus'))
@section('breadcrumb', __('Employee_Bonus.hr_payroll'))

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

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <h2 class="text-sm font-bold text-slate-800">{{ __('Employee_Bonus.employee_bonus') }}</h2>

        <a href="{{ route('user.hr.bonuses.create') }}"
           class="bg-slate-900 px-3 py-2 text-xs font-semibold text-white">
            + {{ __('Employee_Bonus.add_bonus') }}
        </a>
    </div>

    {{-- Filter --}}
    <div class="border border-slate-200 bg-white p-4 shadow-sm">
        <form method="GET" class="flex flex-wrap gap-2">

            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="{{ __('Employee_Bonus.search') }}"
                   class="w-40 border px-3 py-2 text-xs">

            <select name="employee_id" class="w-40 border px-3 py-2 text-xs">
                <option value="">{{ __('Employee_Bonus.all_employees') }}</option>
                @foreach($employees as $employee)
                    <option value="{{ $employee->id }}" @selected(request('employee_id') == $employee->id)>
                        {{ $employee->name }}
                    </option>
                @endforeach
            </select>

            <select name="bonus_type" class="w-40 border px-3 py-2 text-xs">
                <option value="">{{ __('Employee_Bonus.all_types') }}</option>
                @foreach($bonusTypes as $key => $label)
                    <option value="{{ $key }}" @selected(request('bonus_type') == $key)>{{ $label }}</option>
                @endforeach
            </select>

            <select name="status" class="w-32 border px-3 py-2 text-xs">
                <option value="">{{ __('Employee_Bonus.all') }}</option>
                <option value="unpaid" @selected(request('status')==='unpaid')>{{ __('Employee_Bonus.unpaid') }}</option>
                <option value="paid" @selected(request('status')==='paid')>{{ __('Employee_Bonus.paid') }}</option>
            </select>

            <button class="bg-blue-600 px-3 py-2 text-xs text-white">{{ __('Employee_Bonus.filter') }}</button>

            <a href="{{ route('user.hr.bonuses.index') }}"
               class="border px-3 py-2 text-xs">{{ __('Employee_Bonus.reset') }}</a>
        </form>
    </div>

    {{-- Table --}}
    <div class="border border-slate-200 bg-white shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead class="bg-slate-50">
                    <tr class="text-slate-600 text-left">
                        <th class="px-4 py-2">{{ __('Employee_Bonus.employee') }}</th>
                        <th class="px-4 py-2">{{ __('Employee_Bonus.title') }}</th>
                        <th class="px-4 py-2">{{ __('Employee_Bonus.type') }}</th>
                        <th class="px-4 py-2">{{ __('Employee_Bonus.amount') }}</th>
                        <th class="px-4 py-2">{{ __('Employee_Bonus.date') }}</th>
                        <th class="px-4 py-2">{{ __('Employee_Bonus.status') }}</th>
                        <th class="px-4 py-2 text-right">{{ __('Employee_Bonus.action') }}</th>
                    </tr>
                </thead>

                <tbody class="divide-y">
                    @forelse($bonuses as $bonus)
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-2">
                                <div class="font-semibold text-slate-800">{{ $bonus->employee?->name }}</div>
                                <div class="text-[11px] text-slate-500">{{ $bonus->employee?->employee_code }}</div>
                            </td>

                            <td class="px-4 py-2">{{ $bonus->title }}</td>

                            <td class="px-4 py-2">
                                {{ $bonusTypes[$bonus->bonus_type] ?? ucfirst(str_replace('_',' ',$bonus->bonus_type)) }}
                            </td>

                            <td class="px-4 py-2 font-semibold">
                                {{ number_format((float)$bonus->amount, 2) }}
                            </td>

                            <td class="px-4 py-2">
                                {{ $bonus->bonus_date?->format('d M Y') }}
                            </td>

                            <td class="px-4 py-2">
                                @if($bonus->status === 'paid')
                                    <span class="bg-emerald-100 px-2 py-0.5 text-[11px] text-emerald-700">
                                        {{ __('Employee_Bonus.paid') }}
                                    </span>
                                @else
                                    <span class="bg-amber-100 px-2 py-0.5 text-[11px] text-amber-700">
                                        {{ __('Employee_Bonus.unpaid') }}
                                    </span>
                                @endif
                            </td>

                            <td class="px-4 py-2 text-right">
                                <div class="flex justify-end gap-1">

                                    <a href="{{ route('user.hr.bonuses.show', $bonus->id) }}"
                                       class="border px-2 py-1 text-[11px]">
                                        {{ __('Employee_Bonus.view') }}
                                    </a>

                                    @if($bonus->status === 'unpaid')

                                        <a href="{{ route('user.hr.bonuses.edit', $bonus->id) }}"
                                           class="border border-blue-200 bg-blue-50 px-2 py-1 text-[11px] text-blue-700">
                                            {{ __('Employee_Bonus.edit') }}
                                        </a>

                                        <a href="{{ route('user.hr.bonuses.pay-form', $bonus->id) }}"
                                           class="bg-slate-900 px-2 py-1 text-[11px] text-white">
                                            {{ __('Employee_Bonus.pay') }}
                                        </a>

                                        <form action="{{ route('user.hr.bonuses.destroy', $bonus->id) }}"
                                              method="POST"
                                              class="js-delete"
                                              data-swal-title="{{ __('Employee_Bonus.delete_bonus_question') }}"
                                              data-swal-text="{{ __('Employee_Bonus.delete_bonus_warning') }}"
                                              data-swal-confirm="{{ __('Employee_Bonus.yes_delete') }}">
                                            @csrf
                                            @method('DELETE')

                                            <button class="border border-rose-200 bg-rose-50 px-2 py-1 text-[11px] text-rose-700">
                                                {{ __('Employee_Bonus.delete') }}
                                            </button>
                                        </form>

                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-8 text-center text-xs text-slate-500">
                                {{ __('Employee_Bonus.no_bonus_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

</div>
@endsection