@php
    $fieldMetadata = $fieldMetadata ?: [
        'type' => 'text',
        'placeholder' => __('clients.action_field.enter_value'),
        'description' => ucfirst(str_replace('_', ' ', $fieldName)),
        'displayName' => ucfirst(str_replace('_', ' ', $fieldName)),
        'required' => false,
        'options' => []
    ];
    
    $inputType = $fieldMetadata['type'];
    $placeholder = $fieldMetadata['placeholder'];
    $description = $fieldMetadata['description'];
    $displayName = $fieldMetadata['displayName'];
    $isRequired = $fieldMetadata['required'] ?? false;
    $selectOptions = $fieldMetadata['options'];
    $fieldDevice = $fieldMetadata['device'] ?? null; // Device specifico per il campo
    
    // Genera l'ID e il nome del campo in base al device e configIndex
    $configIndex = $configIndex ?? 0; // Default a 0 se non fornito
    
    $fieldId = "{$actionName}_{$configIndex}_{$device}_{$fieldName}";
    
    // Nomi dei campi per l'array formato: actionName[configIndex][desktop_config|mobile_config][fieldName]
    $fieldNameAttr = "{$actionName}[{$configIndex}][{$device}_config][{$fieldName}]";
    
    // Controlla se il campo deve essere visibile per questo device
    $shouldShowField = $fieldDevice === "" || $fieldDevice === null || $fieldDevice === $device;
@endphp

@if($shouldShowField)

<div class="mb-3">
    <label for="{{ $fieldId }}" class="form-label">
        {{ $displayName }}
        <small class="text-muted">({{ ucfirst($device) }})</small>
        @if($isRequired)
            <span class="text-danger">*</span>
        @endif
    </label>
    
    @if($inputType === 'textarea')
        <textarea id="{{ $fieldId }}" 
                  name="{{ $fieldNameAttr }}"
                  class="form-control{{ $isRequired ? ' required-field' : '' }} action-field" 
                  rows="3"
                  placeholder="{{ $placeholder }}"
                  autocomplete="off"
                  data-action="{{ $actionName }}"
                  data-config-index="{{ $configIndex }}"
                  data-device="{{ $device }}"
                  data-field="{{ $fieldName }}"
                  data-required="{{ $isRequired ? 'true' : 'false' }}">{{ $currentValue }}</textarea>
    @elseif($inputType === 'select' && !empty($selectOptions))
        <select id="{{ $fieldId }}" 
                name="{{ $fieldNameAttr }}"
                class="form-select{{ $isRequired ? ' required-field' : '' }} action-field"
                autocomplete="off"
                data-action="{{ $actionName }}"
                data-config-index="{{ $configIndex }}"
                data-device="{{ $device }}"
                data-field="{{ $fieldName }}"
                data-required="{{ $isRequired ? 'true' : 'false' }}">
            @foreach($selectOptions as $value => $label)
                <option value="{{ $value }}" 
                        {{ $currentValue == $value ? 'selected' : '' }}>
                    {{ $label }}
                </option>
            @endforeach
        </select>
    @else
        <input type="{{ $inputType }}" 
               id="{{ $fieldId }}" 
               name="{{ $fieldNameAttr }}"
               class="form-control{{ $isRequired ? ' required-field' : '' }} action-field" 
               value="{{ $currentValue }}" 
               placeholder="{{ $placeholder }}"
               autocomplete="off"
               data-action="{{ $actionName }}"
               data-config-index="{{ $configIndex }}"
               data-device="{{ $device }}"
               data-field="{{ $fieldName }}"
               data-required="{{ $isRequired ? 'true' : 'false' }}">
    @endif
    <div class="form-text">{{ $description }}</div>
</div>

@endif