<div class="cost-center-row mb-4 p-4 bg-white rounded-lg border-2 border-gray-300 shadow-sm">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
        <div class="md:col-span-3">
            <label class="block text-sm font-bold text-gray-800 mb-2">
                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.SelectCenter', __('Cost Center')) }} <span class="text-red-600">*</span>
            </label>
            <select name="cost_centers[{{ $index }}][cost_center_id]" class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900" required>
                <option value="">{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.SelectOption', __('-- Select --')) }}</option>
                @foreach($costCenters as $center)
                    <option value="{{ $center->id }}" 
                        {{ (is_array($costCenter) ? ($costCenter['cost_center_id'] ?? '') : ($costCenter->cost_center_id ?? '')) == $center->id ? 'selected' : '' }}>
                        {{ $center->code }} - {{ $center->name_ar }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-bold text-gray-800 mb-2">
                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.AllocationType', __('Allocation Type')) }} <span class="text-red-600">*</span>
            </label>
            <select name="cost_centers[{{ $index }}][allocation_type]" 
                    onchange="updateAllocation({{ $index }})" 
                    class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900" required>
                <option value="percentage" {{ (is_array($costCenter) ? ($costCenter['allocation_type'] ?? 'percentage') : ($costCenter->allocation_type ?? 'percentage')) == 'percentage' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Percentage', __('Percentage %')) }}</option>
                <option value="amount" {{ (is_array($costCenter) ? ($costCenter['allocation_type'] ?? '') : ($costCenter->allocation_type ?? '')) == 'amount' ? 'selected' : '' }}>{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Amount', __('Amount')) }}</option>
            </select>
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-bold text-gray-800 mb-2">
                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Percentage', __('Percentage %')) }}
            </label>
            <input type="number" 
                   name="cost_centers[{{ $index }}][percentage]" 
                   step="0.01" 
                   min="0" 
                   max="100"
                   value="{{ is_array($costCenter) ? ($costCenter['percentage'] ?? '') : ($costCenter->percentage ?? '') }}"
                   oninput="calculateFromPercentage({{ $index }})"
                   {{ (is_array($costCenter) ? ($costCenter['allocation_type'] ?? 'percentage') : ($costCenter->allocation_type ?? 'percentage')) == 'amount' ? 'disabled' : '' }}
                   class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900 disabled:bg-gray-100 disabled:text-gray-500">
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-bold text-gray-800 mb-2">
                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Amount', __('Amount')) }}
            </label>
            <input type="number" 
                   name="cost_centers[{{ $index }}][amount]" 
                   step="0.01" 
                   min="0"
                   value="{{ is_array($costCenter) ? ($costCenter['amount'] ?? '') : ($costCenter->amount ?? '') }}"
                   oninput="calculateFromAmount({{ $index }})"
                   {{ (is_array($costCenter) ? ($costCenter['allocation_type'] ?? 'percentage') : ($costCenter->allocation_type ?? 'percentage')) == 'percentage' ? 'disabled' : '' }}
                   class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900 disabled:bg-gray-100 disabled:text-gray-500">
        </div>

        <div class="md:col-span-2">
            <label class="block text-sm font-bold text-gray-800 mb-2">
                {{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Notes', __('Notes')) }}
            </label>
            <input type="text" 
                   name="cost_centers[{{ $index }}][notes]" 
                   value="{{ is_array($costCenter) ? ($costCenter['notes'] ?? '') : ($costCenter->notes ?? '') }}"
                   class="w-full px-3 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white text-gray-900"
                   placeholder="{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.OptionalNotes', __('Optional notes')) }}">
        </div>

        <div class="md:col-span-1 flex items-end">
            <button type="button" 
                    onclick="removeCostCenter(this)" 
                    class="w-full px-3 py-2 bg-red-500 text-white font-bold rounded-lg hover:bg-red-600 transition-all duration-150 shadow-md"
                    title="{{ \App\Helpers\TranslationHelper::transFromDatabase('CostCenters.Delete', __('Delete')) }}">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    </div>
</div>