<x-ui.layout.page :title="__('compensation.allowances')" page-icon="fe fe-plus-circle">
    @can('compensation.create')
        <div class="card mb-3"><div class="card-body">
            <form method="POST" action="{{ route('hr.allowances.store') }}" class="row g-3">@csrf
                <div class="col-md-3"><x-ui.form.input name="code" :label="__('compensation.fields.code')" required /></div>
                <div class="col-md-3"><x-ui.form.input name="name" :label="__('compensation.fields.name')" required /></div>
                <div class="col-md-3"><x-ui.form.select name="calculation_type" :label="__('compensation.fields.calculation_type')" :options="['fixed'=>__('compensation.fixed'),'percentage'=>__('compensation.percentage')]" required /></div>
                <div class="col-md-2"><x-ui.form.input name="default_amount" type="number" step="0.01" :label="__('compensation.fields.default_amount')" /></div>
                <input type="hidden" name="is_active" value="1"><input type="hidden" name="is_recurring" value="1">
                <div class="col-md-1 d-flex align-items-end"><x-ui.buttons.primary type="submit">{{ __('common.save') }}</x-ui.buttons.primary></div>
            </form>
        </div></div>
    @endcan
    <x-ui.operational.index-shell>
        <x-ui.table.table :columns="[['label'=>__('compensation.fields.code')],['label'=>__('compensation.fields.name')],['label'=>__('compensation.fields.calculation_type')],['label'=>__('compensation.fields.default_amount')],['label'=>__('common.actions'),'align'=>'end']]">
            @forelse($types as $type)
                <x-ui.table.row><td>{{ $type->code }}</td><td>{{ $type->name }}</td><td>{{ __('compensation.'.$type->calculation_type) }}</td><td>{{ number_format((float)$type->default_amount, 2) }}</td>
                    <td class="text-end">@can('compensation.manage')<form method="POST" action="{{ route('hr.allowances.destroy',$type->id) }}">@csrf @method('DELETE')<x-ui.buttons.danger outline size="sm" type="submit">{{ __('common.delete') }}</x-ui.buttons.danger></form>@endcan</td>
                </x-ui.table.row>
            @empty<x-ui.table.row><td colspan="5"><x-ui.operational.empty-state :title="__('compensation.empty')" /></td></x-ui.table.row>@endforelse
        </x-ui.table.table>
    </x-ui.operational.index-shell>
</x-ui.layout.page>
