@php
    $component = $component ?? null;
    $get = function (string $key, $default = null) use ($component) {
        if (is_array($component)) {
            return $component[$key] ?? $default;
        }

        return $default;
    };
    $rowId = $get('id');
    $code = $get('code');
    $name = $get('name');
    $componentType = $get('component_type', 'earning');
    $calculation = $get('calculation', 'fixed');
    $amount = $get('amount', 0);
    $isTaxable = (bool) $get('is_taxable', false);
    $sortOrder = $get('sort_order', 0);
    $prefix = "components[{$index}]";
@endphp

<tr data-component-row>
    @if ($rowId)
        <input type="hidden" name="{{ $prefix }}[id]" value="{{ $rowId }}">
    @endif
    <td>
        <input
            type="text"
            class="form-control form-control-sm"
            name="{{ $prefix }}[code]"
            value="{{ $code }}"
            maxlength="64"
            aria-label="{{ __('salary_structures.fields.component_code') }}"
        >
    </td>
    <td>
        <input
            type="text"
            class="form-control form-control-sm"
            name="{{ $prefix }}[name]"
            value="{{ $name }}"
            maxlength="120"
            required
            aria-label="{{ __('salary_structures.fields.component_name') }}"
        >
    </td>
    <td>
        <select
            class="form-select form-select-sm"
            name="{{ $prefix }}[component_type]"
            required
            aria-label="{{ __('salary_structures.fields.component_type') }}"
        >
            @foreach (['earning', 'deduction', 'employer_contribution'] as $type)
                <option value="{{ $type }}" @selected($componentType === $type)>
                    {{ __('salary_structures.component_types.'.$type) }}
                </option>
            @endforeach
        </select>
    </td>
    <td>
        <select
            class="form-select form-select-sm"
            name="{{ $prefix }}[calculation]"
            required
            aria-label="{{ __('salary_structures.fields.calculation') }}"
        >
            @foreach (['fixed', 'percentage'] as $calc)
                <option value="{{ $calc }}" @selected($calculation === $calc)>
                    {{ __('salary_structures.calculations.'.$calc) }}
                </option>
            @endforeach
        </select>
    </td>
    <td>
        <input
            type="number"
            step="0.01"
            min="0"
            class="form-control form-control-sm"
            name="{{ $prefix }}[amount]"
            value="{{ $amount }}"
            required
            aria-label="{{ __('salary_structures.fields.amount') }}"
        >
    </td>
    <td class="text-center">
        <input type="hidden" name="{{ $prefix }}[is_taxable]" value="0">
        <input
            type="checkbox"
            class="form-check-input"
            name="{{ $prefix }}[is_taxable]"
            value="1"
            @checked($isTaxable)
            aria-label="{{ __('salary_structures.fields.is_taxable') }}"
        >
    </td>
    <td>
        <input
            type="number"
            min="0"
            class="form-control form-control-sm"
            name="{{ $prefix }}[sort_order]"
            value="{{ $sortOrder }}"
            aria-label="{{ __('salary_structures.fields.sort_order') }}"
        >
    </td>
    <td class="text-end">
        <button
            type="button"
            class="btn btn-sm btn-outline-danger"
            data-component-remove
            aria-label="{{ __('salary_structures.actions.remove_component') }}"
        >
            <i class="fe fe-trash-2" aria-hidden="true"></i>
        </button>
    </td>
</tr>
