@extends('layouts.user')

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

@section('content')
<div class="max-w-4xl mx-auto px-4 py-5">
    <form method="POST"
          action="{{ route('user.hr.bonuses.pay', $bonus->id) }}"
          class="border border-slate-200 bg-white shadow-sm">
        @csrf

        {{-- Header --}}
        <div class="border-b border-slate-200 bg-slate-50 px-4 py-3 flex justify-between items-center">
            <div>
                <p class="text-[10px] uppercase text-slate-400">{{ __('Employee_Bonus.bonus_payment') }}</p>
                <h2 class="text-sm font-bold text-slate-800">{{ __('Employee_Bonus.pay_employee_bonus') }}</h2>
            </div>

            <div class="text-right">
                <p class="text-[10px] text-slate-500">{{ __('Employee_Bonus.amount') }}</p>
                <p class="text-sm font-bold text-emerald-600">
                    ৳ {{ number_format((float) $bonus->amount, 2) }}
                </p>
            </div>
        </div>

        {{-- Body --}}
        <div class="space-y-4 px-4 py-4">

            {{-- Bonus Summary --}}
            <div class="border border-slate-200 bg-slate-50 p-3">
                <h3 class="text-xs font-bold text-slate-700">{{ __('Employee_Bonus.bonus_information') }}</h3>

                <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3">
                    <div class="border p-2 bg-white">
                        <p class="text-[10px] text-slate-400">{{ __('Employee_Bonus.employee') }}</p>
                        <p class="text-xs font-semibold">{{ $bonus->employee?->name ?? __('Employee_Bonus.na') }}</p>
                    </div>

                    <div class="border p-2 bg-white">
                        <p class="text-[10px] text-slate-400">{{ __('Employee_Bonus.title') }}</p>
                        <p class="text-xs font-semibold">{{ $bonus->title ?? __('Employee_Bonus.bonus') }}</p>
                    </div>

                    <div class="border p-2 bg-white">
                        <p class="text-[10px] text-slate-400">{{ __('Employee_Bonus.status') }}</p>
                        <span class="text-[11px] font-semibold text-amber-600">
                            {{ ucfirst($bonus->status ?? __('Employee_Bonus.unpaid')) }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- Form --}}
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">

                {{-- Account --}}
                <div class="md:col-span-2">
                    <label class="mb-1 block text-xs font-semibold text-slate-700">
                        {{ __('Employee_Bonus.pay_from_account') }} *
                    </label>

                    <select name="user_account_id"
                        class="w-full border px-3 py-2 text-xs
                        {{ $errors->has('user_account_id') ? 'border-rose-400' : 'border-slate-200' }}">
                        <option value="">{{ __('Employee_Bonus.select_account') }}</option>
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}"
                                {{ old('user_account_id') == $account->id ? 'selected' : '' }}>
                                {{ $account->name }}
                                ({{ strtoupper($account->type) }}@if($account->account_number) - {{ $account->account_number }}@endif)
                            </option>
                        @endforeach
                    </select>

                    @error('user_account_id')
                        <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Method --}}
                <div>
                    <label class="mb-1 block text-xs font-semibold text-slate-700">
                        {{ __('Employee_Bonus.payment_method') }} *
                    </label>

                    <select name="payment_method"
                        class="w-full border px-3 py-2 text-xs
                        {{ $errors->has('payment_method') ? 'border-rose-400' : 'border-slate-200' }}">
                        <option value="">{{ __('Employee_Bonus.select_method') }}</option>
                        <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>{{ __('Employee_Bonus.cash') }}</option>
                        <option value="bank" {{ old('payment_method') == 'bank' ? 'selected' : '' }}>{{ __('Employee_Bonus.bank') }}</option>
                        <option value="mfs" {{ old('payment_method') == 'mfs' ? 'selected' : '' }}>{{ __('Employee_Bonus.mfs') }}</option>
                        <option value="cheque" {{ old('payment_method') == 'cheque' ? 'selected' : '' }}>{{ __('Employee_Bonus.cheque') }}</option>
                        <option value="manual" {{ old('payment_method') == 'manual' ? 'selected' : '' }}>{{ __('Employee_Bonus.manual') }}</option>
                    </select>

                    @error('payment_method')
                        <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Reference --}}
                <div>
                    <label class="mb-1 block text-xs font-semibold text-slate-700">
                        {{ __('Employee_Bonus.reference_no') }}
                    </label>

                    <input type="text"
                           name="reference_no"
                           value="{{ old('reference_no') }}"
                           class="w-full border border-slate-200 px-3 py-2 text-xs"
                           placeholder="{{ __('Employee_Bonus.optional') }}">
                </div>

                {{-- Note --}}
                <div class="md:col-span-2">
                    <label class="mb-1 block text-xs font-semibold text-slate-700">
                        {{ __('Employee_Bonus.note') }}
                    </label>

                    <textarea name="note" rows="3"
                              class="w-full border border-slate-200 px-3 py-2 text-xs"
                              placeholder="{{ __('Employee_Bonus.optional') }}">{{ old('note', $bonus->note) }}</textarea>
                </div>
            </div>
        </div>

        {{-- Footer --}}
        <div class="flex gap-2 border-t border-slate-200 bg-slate-50 px-4 py-3">
            <button type="submit"
                    class="bg-slate-900 px-4 py-2 text-xs font-semibold text-white">
                {{ __('Employee_Bonus.confirm_pay_bonus') }}
            </button>

            <a href="{{ route('user.hr.bonuses.show', $bonus->id) }}"
               class="border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-700">
                {{ __('Employee_Bonus.back') }}
            </a>
        </div>
    </form>
</div>
@endsection