@extends('layouts.user')

@section('title', __('Employee_Bonus.create_bonus'))
@section('page_title', __('Employee_Bonus.create_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.store') }}"
          class="border border-slate-200 bg-white p-4 shadow-sm space-y-4">
        @csrf

        <div>
            <h2 class="text-sm font-bold text-slate-800">{{ __('Employee_Bonus.create_employee_bonus') }}</h2>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('Employee_Bonus.employee') }}</label>
                <select name="employee_id" class="w-full border border-slate-200 px-3 py-2 text-xs">
                    <option value="">{{ __('Employee_Bonus.select_employee') }}</option>
                    @foreach($employees as $employee)
                        <option value="{{ $employee->id }}" @selected(old('employee_id') == $employee->id)>
                            {{ $employee->name }} ({{ $employee->employee_code }})
                        </option>
                    @endforeach
                </select>
                @error('employee_id')
                    <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('Employee_Bonus.bonus_type') }}</label>
                <select name="bonus_type" class="w-full border border-slate-200 px-3 py-2 text-xs">
                    <option value="">{{ __('Employee_Bonus.select_type') }}</option>
                    @foreach($bonusTypes as $key => $label)
                        <option value="{{ $key }}" @selected(old('bonus_type') == $key)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('bonus_type')
                    <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('Employee_Bonus.title') }}</label>
                <input type="text" name="title" value="{{ old('title') }}"
                       class="w-full border border-slate-200 px-3 py-2 text-xs"
                       placeholder="{{ __('Employee_Bonus.bonus_title_placeholder') }}">
                @error('title')
                    <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('Employee_Bonus.amount') }}</label>
                <input type="number" step="0.01" min="0.01" name="amount" value="{{ old('amount') }}"
                       class="w-full border border-slate-200 px-3 py-2 text-xs"
                       placeholder="{{ __('Employee_Bonus.amount_placeholder') }}">
                @error('amount')
                    <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            <div class="md:col-span-2">
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('Employee_Bonus.bonus_date') }}</label>
                <input type="date" name="bonus_date" value="{{ old('bonus_date', now()->toDateString()) }}"
                       class="w-full border border-slate-200 px-3 py-2 text-xs">
                @error('bonus_date')
                    <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
                @enderror
            </div>

            <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="4"
                          class="w-full border border-slate-200 px-3 py-2 text-xs"
                          placeholder="{{ __('Employee_Bonus.optional_note') }}">{{ old('note') }}</textarea>
                @error('note')
                    <div class="mt-1 text-[11px] text-rose-600">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="flex items-center gap-2">
            <button type="submit"
                    class="bg-slate-900 px-4 py-2 text-xs font-semibold text-white">
                {{ __('Employee_Bonus.save_bonus') }}
            </button>

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