{{-- Field Preview Partial --}}
<div class="mb-3">
    <label class="form-label">
        {{ $field->label }}
        @if($field->required)
            <span class="text-danger">*</span>
        @endif
    </label>
    
    @switch($field->field_type)
        @case('text')
        @case('email')
        @case('url')
        @case('tel')
            <input type="{{ $field->field_type === 'text' ? 'text' : $field->field_type }}" 
                   class="form-control" 
                   placeholder="{{ $field->placeholder }}" 
                   value="{{ $field->default_value }}"
                   @if($field->min_length) minlength="{{ $field->min_length }}" @endif
                   @if($field->max_length) maxlength="{{ $field->max_length }}" @endif
                   disabled>
            @break

        @case('textarea')
            <textarea class="form-control" 
                      placeholder="{{ $field->placeholder }}" 
                      rows="{{ $field->configuration['rows'] ?? 3 }}"
                      @if($field->min_length) minlength="{{ $field->min_length }}" @endif
                      @if($field->max_length) maxlength="{{ $field->max_length }}" @endif
                      disabled>{{ $field->default_value }}</textarea>
            @break

        @case('rich_text')
            <div class="border rounded p-3" style="min-height: 120px; background-color: #f8f9fa;">
                <div class="d-flex align-items-center justify-content-center h-100 text-muted">
                    <div class="text-center">
                        <i class="fas fa-edit fa-2x mb-2"></i>
                        <br>Rich Text Editor
                        <br><small>WYSIWYG content editing</small>
                    </div>
                </div>
            </div>
            @break

        @case('number')
        @case('decimal')
            <input type="number" 
                   class="form-control" 
                   placeholder="{{ $field->placeholder }}" 
                   value="{{ $field->default_value }}"
                   @if($field->min_value !== null) min="{{ $field->min_value }}" @endif
                   @if($field->max_value !== null) max="{{ $field->max_value }}" @endif
                   @if($field->step) step="{{ $field->step }}" @endif
                   disabled>
            @break

        @case('currency')
            <div class="input-group">
                <span class="input-group-text">
                    {{ $field->configuration['currency_symbol'] ?? '$' }}
                </span>
                <input type="number" 
                       class="form-control" 
                       placeholder="{{ $field->placeholder }}" 
                       value="{{ $field->default_value }}"
                       @if($field->min_value !== null) min="{{ $field->min_value }}" @endif
                       @if($field->max_value !== null) max="{{ $field->max_value }}" @endif
                       step="0.01"
                       disabled>
            </div>
            @break

        @case('select')
            <select class="form-select" disabled>
                <option value="">Choose...</option>
                @if($field->options)
                    @foreach($field->options as $option)
                        <option value="{{ $option }}" {{ $field->default_value == $option ? 'selected' : '' }}>
                            {{ $option }}
                        </option>
                    @endforeach
                @endif
            </select>
            @break

        @case('multiselect')
            <select class="form-select" multiple disabled style="height: auto;">
                @if($field->options)
                    @foreach($field->options as $option)
                        @php
                            $defaultValues = is_array($field->default_value) ? $field->default_value : [$field->default_value];
                        @endphp
                        <option value="{{ $option }}" {{ in_array($option, $defaultValues) ? 'selected' : '' }}>
                            {{ $option }}
                        </option>
                    @endforeach
                @endif
            </select>
            <div class="form-text">Hold Ctrl/Cmd to select multiple options</div>
            @break

        @case('radio')
            @if($field->options)
                @foreach($field->options as $option)
                    <div class="form-check {{ $field->configuration['layout'] === 'inline' ? 'form-check-inline' : '' }}">
                        <input class="form-check-input" 
                               type="radio" 
                               name="preview_{{ $field->name }}" 
                               value="{{ $option }}"
                               {{ $field->default_value == $option ? 'checked' : '' }}
                               disabled>
                        <label class="form-check-label">
                            {{ $option }}
                        </label>
                    </div>
                @endforeach
            @endif
            @break

        @case('checkbox')
            @if($field->options)
                @foreach($field->options as $option)
                    @php
                        $defaultValues = is_array($field->default_value) ? $field->default_value : [$field->default_value];
                    @endphp
                    <div class="form-check {{ $field->configuration['layout'] === 'inline' ? 'form-check-inline' : '' }}">
                        <input class="form-check-input" 
                               type="checkbox" 
                               value="{{ $option }}"
                               {{ in_array($option, $defaultValues) ? 'checked' : '' }}
                               disabled>
                        <label class="form-check-label">
                            {{ $option }}
                        </label>
                    </div>
                @endforeach
            @endif
            @break

        @case('date')
            <input type="date" 
                   class="form-control" 
                   value="{{ $field->default_value }}"
                   @if($field->configuration['min_date'] ?? null) min="{{ $field->configuration['min_date'] }}" @endif
                   @if($field->configuration['max_date'] ?? null) max="{{ $field->configuration['max_date'] }}" @endif
                   disabled>
            @break

        @case('datetime')
            <input type="datetime-local" 
                   class="form-control" 
                   value="{{ $field->default_value }}"
                   disabled>
            @break

        @case('time')
            <input type="time" 
                   class="form-control" 
                   value="{{ $field->default_value }}"
                   @if($field->configuration['time_step'] ?? null) step="{{ $field->configuration['time_step'] }}" @endif
                   disabled>
            @break

        @case('file')
            <input type="file" 
                   class="form-control" 
                   @if($field->configuration['allowed_types'] ?? null) 
                       accept=".{{ implode(',.' , explode(',', $field->configuration['allowed_types'])) }}"
                   @endif
                   @if($field->configuration['max_files'] ?? null > 1) multiple @endif
                   disabled>
            @if($field->configuration['allowed_types'] ?? null)
                <div class="form-text">
                    Allowed types: {{ $field->configuration['allowed_types'] }}
                    @if($field->configuration['max_size'] ?? null)
                        (Max size: {{ $field->configuration['max_size'] }}MB)
                    @endif
                </div>
            @endif
            @break

        @case('image')
            <input type="file" 
                   class="form-control" 
                   accept="image/*"
                   disabled>
            <div class="form-text">
                Image files only
                @if($field->configuration['max_size'] ?? null)
                    (Max size: {{ $field->configuration['max_size'] }}MB)
                @endif
            </div>
            <div class="mt-2 p-3 border rounded text-center" style="background-color: #f8f9fa;">
                <i class="fas fa-image fa-2x text-muted mb-2"></i>
                <br><small class="text-muted">Image preview will appear here</small>
            </div>
            @break

        @case('json')
            <textarea class="form-control" 
                      rows="5" 
                      placeholder='{"key": "value"}'
                      disabled>{{ $field->default_value }}</textarea>
            <div class="form-text">Enter valid JSON data</div>
            @break

        @case('lookup')
            <div class="input-group">
                <input type="text" 
                       class="form-control" 
                       placeholder="Search and select..."
                       disabled>
                <button class="btn btn-outline-secondary" type="button" disabled>
                    <i class="fas fa-search"></i>
                </button>
            </div>
            @if($field->configuration['lookup_data_type'] ?? null)
                <div class="form-text">
                    Lookup from: {{ $field->configuration['lookup_data_type'] }}
                </div>
            @endif
            @break

        @default
            <input type="text" 
                   class="form-control" 
                   placeholder="{{ $field->placeholder }}" 
                   value="{{ $field->default_value }}"
                   disabled>
    @endswitch
    
    @if($field->help_text)
        <div class="form-text">{{ $field->help_text }}</div>
    @endif
</div>