@props([
    'action',
    'method' => 'POST',
    'structure' => null,
    'submitLabel',
])

@php
    $existingComponents = old('components');

    if ($existingComponents === null) {
        if ($structure !== null) {
            $existingComponents = $structure->components->map(fn ($component) => [
                'id' => $component->id,
                'code' => $component->code,
                'name' => $component->name,
                'component_type' => $component->component_type,
                'calculation' => $component->calculation,
                'amount' => $component->amount,
                'is_taxable' => $component->is_taxable,
                'sort_order' => $component->sort_order,
            ])->all();
        } else {
            $existingComponents = [[
                'id' => null,
                'code' => null,
                'name' => null,
                'component_type' => 'earning',
                'calculation' => 'fixed',
                'amount' => 0,
                'is_taxable' => false,
                'sort_order' => 0,
            ]];
        }
    }
@endphp

<form method="POST" action="{{ $action }}" novalidate>
    @csrf
    @if (strtoupper($method) !== 'POST')
        @method($method)
    @endif

    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <x-ui.form.input
                        name="code"
                        :label="__('salary_structures.fields.code')"
                        :value="$structure?->code"
                        required
                    />
                </div>
                <div class="col-md-5">
                    <x-ui.form.input
                        name="name"
                        :label="__('salary_structures.fields.name')"
                        :value="$structure?->name"
                        required
                    />
                </div>
                <div class="col-md-2">
                    <x-ui.form.input
                        name="currency"
                        :label="__('salary_structures.fields.currency')"
                        :value="old('currency', $structure?->currency ?? 'USD')"
                        maxlength="3"
                        class="text-uppercase"
                        required
                    />
                </div>
                @if ($structure !== null)
                    <div class="col-md-2">
                        <x-ui.form.select
                            name="is_active"
                            :label="__('salary_structures.fields.status')"
                            :options="[
                                1 => __('salary_structures.status.active'),
                                0 => __('salary_structures.status.inactive'),
                            ]"
                            :selected="$structure->is_active ? 1 : 0"
                            required
                        />
                    </div>
                @endif
                <div class="col-12">
                    <x-ui.form.field name="description" :label="__('salary_structures.fields.description')" id="description" optional>
                        <textarea
                            class="form-control"
                            rows="3"
                            name="description"
                            id="description"
                        >{{ old('description', $structure?->description) }}</textarea>
                    </x-ui.form.field>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header bg-white d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h3 class="h6 mb-0">{{ __('salary_structures.fields.components') }}</h3>
                <p class="text-muted small mb-0">{{ __('salary_structures.components_hint') }}</p>
            </div>
            <x-ui.buttons.secondary type="button" size="sm" icon="fe fe-plus" data-component-add>
                {{ __('salary_structures.actions.add_component') }}
            </x-ui.buttons.secondary>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead>
                        <tr>
                            <th style="width: 12%">{{ __('salary_structures.fields.component_code') }}</th>
                            <th style="width: 22%">{{ __('salary_structures.fields.component_name') }}</th>
                            <th style="width: 17%">{{ __('salary_structures.fields.component_type') }}</th>
                            <th style="width: 13%">{{ __('salary_structures.fields.calculation') }}</th>
                            <th style="width: 13%">{{ __('salary_structures.fields.amount') }}</th>
                            <th style="width: 9%">{{ __('salary_structures.fields.is_taxable') }}</th>
                            <th style="width: 8%">{{ __('salary_structures.fields.sort_order') }}</th>
                            <th style="width: 6%" class="text-end"></th>
                        </tr>
                    </thead>
                    <tbody data-component-rows>
                        <template data-component-template>
                            @include('pages.hr.salary-structures._component-row', ['index' => '__INDEX__', 'component' => null])
                        </template>
                        @foreach ($existingComponents as $index => $component)
                            @include('pages.hr.salary-structures._component-row', ['index' => $index, 'component' => $component])
                        @endforeach
                    </tbody>
                </table>
            </div>
            <p class="text-muted small mb-0 px-3 py-2" data-component-empty style="{{ $existingComponents === [] ? '' : 'display:none' }}">
                {{ __('salary_structures.empty_components') }}
            </p>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2">
        <x-ui.buttons.secondary :href="route('hr.salary-structures.index')">
            {{ __('common.cancel') }}
        </x-ui.buttons.secondary>
        <x-ui.buttons.primary type="submit">{{ $submitLabel }}</x-ui.buttons.primary>
    </div>
</form>

@once
    @push('scripts')
        <script src="{{ asset('assets/admin/js/erp-salary-structure-components.js') }}?v={{ @filemtime(public_path('assets/admin/js/erp-salary-structure-components.js')) ?: '1' }}"></script>
    @endpush
@endonce
