{{-- Shared form partial for salary component create/edit --}}
<div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-data="{ calcType: '{{ old('calculation_type', $component->calculation_type ?? 'fixed') }}' }">
    {{-- Name --}}
    <div>
        <label class="form-label">Component Name <span class="text-danger-500">*</span></label>
        <input type="text" name="name" value="{{ old('name', $component->name ?? '') }}" class="form-input @error('name') form-input-error @enderror" placeholder="e.g. Basic Salary" required>
        @error('name') <p class="form-error">{{ $message }}</p> @enderror
    </div>

    {{-- Code --}}
    <div>
        <label class="form-label">Code <span class="text-danger-500">*</span></label>
        <input type="text" name="code" value="{{ old('code', $component->code ?? '') }}" class="form-input @error('code') form-input-error @enderror" placeholder="e.g. BASIC" required style="text-transform: uppercase;">
        @error('code') <p class="form-error">{{ $message }}</p> @enderror
        <p class="text-xxs text-gray-400 mt-1">Unique identifier, uppercase letters only</p>
    </div>

    {{-- Type --}}
    <div>
        <label class="form-label">Type <span class="text-danger-500">*</span></label>
        <select name="type" class="form-select @error('type') form-input-error @enderror" required>
            <option value="earning" {{ old('type', $component->type ?? '') === 'earning' ? 'selected' : '' }}>Earning</option>
            <option value="deduction" {{ old('type', $component->type ?? '') === 'deduction' ? 'selected' : '' }}>Deduction</option>
        </select>
        @error('type') <p class="form-error">{{ $message }}</p> @enderror
    </div>

    {{-- Calculation Type --}}
    <div>
        <label class="form-label">Calculation Type <span class="text-danger-500">*</span></label>
        <select name="calculation_type" x-model="calcType" class="form-select @error('calculation_type') form-input-error @enderror" required>
            <option value="fixed">Fixed Amount</option>
            <option value="percentage">Percentage of Another Component</option>
        </select>
        @error('calculation_type') <p class="form-error">{{ $message }}</p> @enderror
    </div>

    {{-- Percentage Of (only if percentage) --}}
    <div x-show="calcType === 'percentage'" x-transition>
        <label class="form-label">Percentage Of <span class="text-danger-500">*</span></label>
        <input type="text" name="percentage_of" value="{{ old('percentage_of', $component->percentage_of ?? '') }}" class="form-input" placeholder="e.g. BASIC" style="text-transform: uppercase;">
        @error('percentage_of') <p class="form-error">{{ $message }}</p> @enderror
        <p class="text-xxs text-gray-400 mt-1">Enter the component CODE this is based on</p>
    </div>

    {{-- Sort Order --}}
    <div>
        <label class="form-label">Sort Order</label>
        <input type="number" name="sort_order" value="{{ old('sort_order', $component->sort_order ?? 0) }}" class="form-input" min="0">
    </div>

    {{-- Toggles --}}
    <div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-3 gap-4">
        <label class="flex items-center gap-2 cursor-pointer">
            <input type="hidden" name="is_part_of_gross" value="0">
            <input type="checkbox" name="is_part_of_gross" value="1" {{ old('is_part_of_gross', $component->is_part_of_gross ?? false) ? 'checked' : '' }} class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
            <span class="text-sm text-gray-700">Part of Gross Salary</span>
        </label>
        <label class="flex items-center gap-2 cursor-pointer">
            <input type="hidden" name="is_taxable" value="0">
            <input type="checkbox" name="is_taxable" value="1" {{ old('is_taxable', $component->is_taxable ?? false) ? 'checked' : '' }} class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
            <span class="text-sm text-gray-700">Taxable</span>
        </label>
        <label class="flex items-center gap-2 cursor-pointer">
            <input type="hidden" name="is_active" value="0">
            <input type="checkbox" name="is_active" value="1" {{ old('is_active', $component->is_active ?? true) ? 'checked' : '' }} class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
            <span class="text-sm text-gray-700">Active</span>
        </label>
    </div>
</div>