{{-- Dynamic Edit Field Partial --}}
<label for="{{ $field->name }}" class="form-label">
    {{ $field->label }}
    @if($field->required)
        <span class="text-danger">*</span>
    @endif
    @if($field->help_text)
        <i class="fas fa-question-circle ms-1" 
           data-bs-toggle="tooltip" 
           data-bs-placement="top" 
           title="{{ $field->help_text }}"
           style="color: var(--text-muted);"></i>
    @endif
</label>

@switch($field->field_type)

    {{-- Text Input --}}
    @case('text')
        <input type="text" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value }}"
               placeholder="{{ $field->placeholder }}"
               @if($field->required) required @endif
               @if($field->min_length) minlength="{{ $field->min_length }}" @endif
               @if($field->max_length) maxlength="{{ $field->max_length }}" @endif>
        @break

    {{-- Email Input --}}
    @case('email')
        <input type="email" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value }}"
               placeholder="{{ $field->placeholder ?: 'Enter email address' }}"
               @if($field->required) required @endif>
        @break

    {{-- URL Input --}}
    @case('url')
        <input type="url" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value }}"
               placeholder="{{ $field->placeholder ?: 'https://example.com' }}"
               @if($field->required) required @endif>
        @break

    {{-- Tel Input --}}
    @case('tel')
        <input type="tel" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value }}"
               placeholder="{{ $field->placeholder ?: 'Enter phone number' }}"
               @if($field->required) required @endif>
        @break

    {{-- Password Input --}}
    @case('password')
        <div class="input-group">
            <input type="password" 
                   class="form-control @error($field->name) is-invalid @enderror" 
                   id="{{ $field->name }}" 
                   name="{{ $field->name }}" 
                   value="{{ $value }}"
                   placeholder="{{ $field->placeholder ?: 'Enter new password' }}"
                   @if($field->required) required @endif
                   @if($field->min_length) minlength="{{ $field->min_length }}" @endif>
            <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('{{ $field->name }}')">
                <i class="fas fa-eye" id="{{ $field->name }}-toggle-icon"></i>
            </button>
        </div>
        @if($value)
            <div class="form-text text-info">
                <i class="fas fa-info-circle me-1"></i>
                Leave blank to keep current password
            </div>
        @endif
        @break

    {{-- Number Input --}}
    @case('number')
        <input type="number" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value }}"
               placeholder="{{ $field->placeholder }}"
               @if($field->required) required @endif
               @if($field->min_value !== null) min="{{ $field->min_value }}" @endif
               @if($field->max_value !== null) max="{{ $field->max_value }}" @endif
               step="1">
        @break

    {{-- Decimal Input --}}
    @case('decimal')
        <input type="number" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value }}"
               placeholder="{{ $field->placeholder }}"
               @if($field->required) required @endif
               @if($field->min_value !== null) min="{{ $field->min_value }}" @endif
               @if($field->max_value !== null) max="{{ $field->max_value }}" @endif
               step="0.01">
        @break

    {{-- Currency Input --}}
    @case('currency')
        <div class="input-group">
            <span class="input-group-text">
                {{ $field->configuration['currency_symbol'] ?? '$' }}
            </span>
            <input type="number" 
                   class="form-control @error($field->name) is-invalid @enderror" 
                   id="{{ $field->name }}" 
                   name="{{ $field->name }}" 
                   value="{{ $value }}"
                   placeholder="{{ $field->placeholder ?: '0.00' }}"
                   @if($field->required) required @endif
                   @if($field->min_value !== null) min="{{ $field->min_value }}" @endif
                   @if($field->max_value !== null) max="{{ $field->max_value }}" @endif
                   step="0.01">
        </div>
        @break

    {{-- Textarea --}}
    @case('textarea')
        <textarea class="form-control @error($field->name) is-invalid @enderror" 
                  id="{{ $field->name }}" 
                  name="{{ $field->name }}" 
                  placeholder="{{ $field->placeholder }}"
                  @if($field->required) required @endif
                  @if($field->min_length) minlength="{{ $field->min_length }}" @endif
                  @if($field->max_length) maxlength="{{ $field->max_length }}" @endif
                  rows="{{ $field->configuration['rows'] ?? 3 }}">{{ $value }}</textarea>
        @if($field->max_length)
            <div class="form-text">
                <span id="{{ $field->name }}-count">{{ strlen($value ?? '') }}</span> / {{ $field->max_length }} characters
            </div>
        @endif
        @break

    {{-- Select Dropdown --}}
    @case('select')
        <select class="form-select @error($field->name) is-invalid @enderror" 
                id="{{ $field->name }}" 
                name="{{ $field->name }}"
                @if($field->required) required @endif>
            <option value="">{{ $field->placeholder ?: 'Select an option' }}</option>
            @if($field->options)
                @foreach($field->options as $option)
                    <option value="{{ $option }}" @if($value == $option) selected @endif>
                        {{ $option }}
                    </option>
                @endforeach
            @endif
        </select>
        @break

    {{-- Multi-select --}}
    @case('multiselect')
        @php
            $selectedValues = is_string($value) ? json_decode($value, true) : $value;
            $selectedValues = is_array($selectedValues) ? $selectedValues : [];
        @endphp
        <select class="form-select @error($field->name) is-invalid @enderror" 
                id="{{ $field->name }}" 
                name="{{ $field->name }}[]"
                multiple
                @if($field->required) required @endif>
            @if($field->options)
                @foreach($field->options as $option)
                    <option value="{{ $option }}" 
                            @if(in_array($option, $selectedValues)) selected @endif>
                        {{ $option }}
                    </option>
                @endforeach
            @endif
        </select>
        <div class="form-text">Hold Ctrl (or Cmd) to select multiple options</div>
        @break

    {{-- Radio Buttons --}}
    @case('radio')
        @if($field->options)
            @foreach($field->options as $index => $option)
                <div class="form-check @if($field->configuration['inline'] ?? false) form-check-inline @endif">
                    <input class="form-check-input @error($field->name) is-invalid @enderror" 
                           type="radio" 
                           name="{{ $field->name }}" 
                           id="{{ $field->name }}_{{ $index }}" 
                           value="{{ $option }}"
                           @if($value == $option) checked @endif
                           @if($field->required) required @endif>
                    <label class="form-check-label" for="{{ $field->name }}_{{ $index }}">
                        {{ $option }}
                    </label>
                </div>
            @endforeach
        @endif
        @break

    {{-- Checkboxes --}}
    @case('checkbox')
        @php
            $selectedValues = is_string($value) ? json_decode($value, true) : $value;
            $selectedValues = is_array($selectedValues) ? $selectedValues : [];
        @endphp
        @if($field->options)
            @foreach($field->options as $index => $option)
                <div class="form-check @if($field->configuration['inline'] ?? false) form-check-inline @endif">
                    <input class="form-check-input @error($field->name) is-invalid @enderror" 
                           type="checkbox" 
                           name="{{ $field->name }}[]" 
                           id="{{ $field->name }}_{{ $index }}" 
                           value="{{ $option }}"
                           @if(in_array($option, $selectedValues)) checked @endif>
                    <label class="form-check-label" for="{{ $field->name }}_{{ $index }}">
                        {{ $option }}
                    </label>
                </div>
            @endforeach
        @endif
        @break

    {{-- Single Checkbox --}}
    @case('single_checkbox')
        <div class="form-check">
            <input class="form-check-input @error($field->name) is-invalid @enderror" 
                   type="checkbox" 
                   id="{{ $field->name }}" 
                   name="{{ $field->name }}" 
                   value="1"
                   @if($value) checked @endif
                   @if($field->required) required @endif>
            <label class="form-check-label" for="{{ $field->name }}">
                {{ $field->configuration['checkbox_text'] ?? 'Yes' }}
            </label>
        </div>
        @break

    {{-- Date Input --}}
    @case('date')
        <input type="date" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value ? \Carbon\Carbon::parse($value)->format('Y-m-d') : '' }}"
               @if($field->required) required @endif>
        @break

    {{-- DateTime Input --}}
    @case('datetime')
        <input type="datetime-local" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value ? \Carbon\Carbon::parse($value)->format('Y-m-d\TH:i') : '' }}"
               @if($field->required) required @endif>
        @break

    {{-- Time Input --}}
    @case('time')
        <input type="time" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value ? \Carbon\Carbon::parse($value)->format('H:i') : '' }}"
               @if($field->required) required @endif>
        @break

    {{-- File Upload --}}
    @case('file')
        <input type="file" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}"
               @if($field->configuration['accept']) accept="{{ $field->configuration['accept'] }}" @endif>
        @if($field->configuration['max_size'])
            <div class="form-text">Maximum file size: {{ $field->configuration['max_size'] }}MB</div>
        @endif
        
        {{-- Show current file if exists --}}
        @if($value && Storage::disk('public')->exists($value))
            <div class="mt-2 p-2 border rounded bg-light">
                <div class="d-flex align-items-center">
                    <i class="fas fa-file me-2" style="color: var(--primary-color);"></i>
                    <div class="flex-grow-1">
                        <small class="fw-bold">Current file:</small>
                        <br><small>{{ basename($value) }}</small>
                    </div>
                    <a href="{{ Storage::disk('public')->url($value) }}" 
                       class="btn btn-sm btn-outline-primary" 
                       download>
                        <i class="fas fa-download"></i>
                    </a>
                </div>
                <input type="hidden" name="{{ $field->name }}_existing" value="{{ $value }}">
                <div class="form-text">Upload a new file to replace the current one</div>
            </div>
        @endif
        @break

    {{-- Image Upload --}}
    @case('image')
        <input type="file" 
               class="form-control @error($field->name) is-invalid @enderror" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}"
               accept="image/*">
        <div class="form-text">Supported formats: JPG, PNG, GIF, WebP</div>
        @if($field->configuration['max_size'])
            <div class="form-text">Maximum file size: {{ $field->configuration['max_size'] }}MB</div>
        @endif
        
        {{-- Show current image if exists --}}
        @if($value && Storage::disk('public')->exists($value))
            <div class="mt-2">
                <small class="fw-bold">Current image:</small>
                <div class="mt-1 p-2 border rounded bg-light">
                    <img src="{{ Storage::disk('public')->url($value) }}" 
                         alt="Current image" 
                         class="img-thumbnail mb-2" 
                         style="max-width: 200px; max-height: 150px;">
                    <div class="d-flex align-items-center justify-content-between">
                        <small>{{ basename($value) }}</small>
                        <a href="{{ Storage::disk('public')->url($value) }}" 
                           class="btn btn-sm btn-outline-primary" 
                           target="_blank">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                    <input type="hidden" name="{{ $field->name }}_existing" value="{{ $value }}">
                    <div class="form-text">Upload a new image to replace the current one</div>
                </div>
            </div>
        @endif
        
        {{-- Image Preview for new upload --}}
        <div id="{{ $field->name }}-preview" class="mt-2" style="display: none;">
            <small class="fw-bold">New image preview:</small>
            <div class="mt-1">
                <img id="{{ $field->name }}-preview-img" src="" alt="Preview" class="img-thumbnail" style="max-width: 200px; max-height: 150px;">
                <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="clearImagePreview('{{ $field->name }}')">
                    <i class="fas fa-times"></i> Remove
                </button>
            </div>
        </div>
        @break

    {{-- JSON Input --}}
    @case('json')
        <div class="position-relative">
            <textarea class="form-control @error($field->name) is-invalid @enderror" 
                      id="{{ $field->name }}" 
                      name="{{ $field->name }}" 
                      placeholder="{{ $field->placeholder ?: '{"key": "value"}' }}"
                      @if($field->required) required @endif
                      rows="{{ $field->configuration['rows'] ?? 5 }}"
                      style="font-family: 'Consolas', 'Monaco', 'Courier New', monospace;">{{ $value ? json_encode(json_decode($value), JSON_PRETTY_PRINT) : '' }}</textarea>
            <button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-0 end-0 m-2" 
                    onclick="formatJSON('{{ $field->name }}')" 
                    data-bs-toggle="tooltip" 
                    title="Format JSON">
                <i class="fas fa-code"></i>
            </button>
        </div>
        <div class="form-text">Enter valid JSON format</div>
        @break

    {{-- Color Picker --}}
    @case('color')
        <div class="input-group">
            <input type="color" 
                   class="form-control form-control-color @error($field->name) is-invalid @enderror" 
                   id="{{ $field->name }}" 
                   name="{{ $field->name }}" 
                   value="{{ $value ?: '#000000' }}"
                   @if($field->required) required @endif>
            <input type="text" 
                   class="form-control" 
                   id="{{ $field->name }}_text"
                   value="{{ $value ?: '#000000' }}"
                   placeholder="#000000"
                   readonly>
        </div>
        @break

    {{-- Hidden Input --}}
    @case('hidden')
        <input type="hidden" 
               id="{{ $field->name }}" 
               name="{{ $field->name }}" 
               value="{{ $value }}">
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>
            Hidden field: {{ $field->label }} = {{ $value }}
        </div>
        @break

    {{-- Default case for unknown field types --}}
    @default
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-2"></i>
            Unsupported field type: {{ $field->field_type }}
        </div>

@endswitch

{{-- Error Message --}}
@error($field->name)
    <div class="invalid-feedback">
        {{ $message }}
    </div>
@enderror

{{-- Field Description --}}
@if($field->description)
    <div class="form-text mt-1">{{ $field->description }}</div>
@endif

{{-- Add field-specific JavaScript for edit form --}}
@push('scripts')
<script>
// Character counter for textarea fields
@if($field->field_type === 'textarea' && $field->max_length)
document.getElementById('{{ $field->name }}').addEventListener('input', function() {
    const count = this.value.length;
    document.getElementById('{{ $field->name }}-count').textContent = count;
    
    if (count > {{ $field->max_length }}) {
        this.style.borderColor = '#dc3545';
        document.getElementById('{{ $field->name }}-count').style.color = '#dc3545';
    } else {
        this.style.borderColor = '';
        document.getElementById('{{ $field->name }}-count').style.color = '';
    }
});
@endif

// Image preview for image fields (edit version)
@if($field->field_type === 'image')
document.getElementById('{{ $field->name }}').addEventListener('change', function() {
    const file = this.files[0];
    const preview = document.getElementById('{{ $field->name }}-preview');
    const previewImg = document.getElementById('{{ $field->name }}-preview-img');
    
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else {
        preview.style.display = 'none';
    }
});

function clearImagePreview(fieldName) {
    document.getElementById(fieldName).value = '';
    document.getElementById(fieldName + '-preview').style.display = 'none';
}
@endif

// Color picker synchronization
@if($field->field_type === 'color')
document.getElementById('{{ $field->name }}').addEventListener('change', function() {
    document.getElementById('{{ $field->name }}_text').value = this.value;
});
@endif

// Password toggle
@if($field->field_type === 'password')
function togglePassword(fieldName) {
    const field = document.getElementById(fieldName);
    const icon = document.getElementById(fieldName + '-toggle-icon');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}
@endif

// JSON formatter
@if($field->field_type === 'json')
function formatJSON(fieldName) {
    const field = document.getElementById(fieldName);
    try {
        const parsed = JSON.parse(field.value || '{}');
        field.value = JSON.stringify(parsed, null, 2);
        field.classList.remove('is-invalid');
        field.classList.add('is-valid');
    } catch (e) {
        field.classList.remove('is-valid');
        field.classList.add('is-invalid');
        
        // Show error message
        let feedback = field.parentNode.querySelector('.invalid-feedback');
        if (!feedback) {
            feedback = document.createElement('div');
            feedback.className = 'invalid-feedback';
            field.parentNode.appendChild(feedback);
        }
        feedback.textContent = 'Invalid JSON format: ' + e.message;
    }
}
@endif
</script>
@endpush