@extends('layouts.modern')

@section('page-title', 'Edit Field: ' . $field->label)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Management</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.index') }}">Data Types</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.show', $dataType) }}">{{ $dataType->name }}</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.sections.index', $dataType) }}">Sections</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.sections.show', [$dataType, $section]) }}">{{ $section->name }}</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.sections.fields.index', [$dataType, $section]) }}">Fields</a></li>
    <li class="breadcrumb-item"><a href="{{ route('data-management.data-types.sections.fields.show', [$dataType, $section, $field]) }}">{{ $field->label }}</a></li>
    <li class="breadcrumb-item active">Edit</li>
@endsection

@section('action-buttons')
    <a href="{{ route('data-management.data-types.sections.fields.show', [$dataType, $section, $field]) }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i>
        Back to Field
    </a>
@endsection

@section('content')
    <!-- Data Type & Section Info -->
    <div class="card mb-3">
        <div class="card-body py-3">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    @if($dataType->icon)
                        <i class="{{ $dataType->icon }} me-2" style="color: var(--primary-color);"></i>
                    @endif
                    <div class="me-3">
                        <h6 class="mb-0">{{ $dataType->name }} → {{ $section->name }}</h6>
                        <small style="color: var(--text-muted);">Editing field: {{ $field->label }}</small>
                    </div>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-{{ getFieldTypeBadgeColor($field->field_type) }}">
                        <i class="fas fa-{{ getFieldIcon($field->field_type) }} me-1"></i>
                        {{ getFieldTypeDisplayName($field->field_type) }}
                    </span>
                    @if($field->required)
                        <span class="badge bg-danger">Required</span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <form action="{{ route('data-management.data-types.sections.fields.update', [$dataType, $section, $field]) }}" method="POST" id="fieldForm">
                @csrf
                @method('PUT')
                
                <!-- Basic Information -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            Basic Information
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="label" class="form-label">Field Label <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('label') is-invalid @enderror" 
                                       id="label" 
                                       name="label" 
                                       value="{{ old('label', $field->label) }}" 
                                       required>
                                @error('label')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Field Name <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('name') is-invalid @enderror" 
                                       id="name" 
                                       name="name" 
                                       value="{{ old('name', $field->name) }}" 
                                       readonly>
                                <div class="form-text">
                                    <i class="fas fa-info-circle text-warning me-1"></i>
                                    Field name cannot be changed after creation to maintain data integrity.
                                </div>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" 
                                          id="description" 
                                          name="description" 
                                          rows="2">{{ old('description', $field->description) }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Field Type Selection (Read-only) -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-layer-group me-2"></i>
                            Field Type
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info mb-0">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-{{ getFieldIcon($field->field_type) }} fa-2x me-3" style="color: var(--primary-color);"></i>
                                <div>
                                    <h6 class="mb-1">{{ getFieldTypeDisplayName($field->field_type) }}</h6>
                                    <p class="mb-0 text-muted">
                                        Field type cannot be changed after creation. To use a different field type, create a new field.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="field_type" value="{{ $field->field_type }}">
                    </div>
                </div>

                <!-- Field Configuration -->
                <div class="card mb-4" id="fieldConfiguration">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-cog me-2"></i>
                            Field Configuration
                        </h6>
                    </div>
                    <div class="card-body">
                        <div id="configurationPanel">
                            <!-- Configuration will be loaded based on field type -->
                        </div>
                    </div>
                </div>

                <!-- Display & Behavior Settings -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-display me-2"></i>
                            Display & Behavior Settings
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="width_class" class="form-label">Width Class</label>
                                <select class="form-select @error('width_class') is-invalid @enderror" 
                                        id="width_class" 
                                        name="width_class">
                                    <option value="col-12" {{ old('width_class', $field->width_class) == 'col-12' ? 'selected' : '' }}>Full Width (col-12)</option>
                                    <option value="col-md-6" {{ old('width_class', $field->width_class) == 'col-md-6' ? 'selected' : '' }}>Half Width (col-md-6)</option>
                                    <option value="col-md-4" {{ old('width_class', $field->width_class) == 'col-md-4' ? 'selected' : '' }}>One Third (col-md-4)</option>
                                    <option value="col-md-3" {{ old('width_class', $field->width_class) == 'col-md-3' ? 'selected' : '' }}>One Quarter (col-md-3)</option>
                                    <option value="col-md-8" {{ old('width_class', $field->width_class) == 'col-md-8' ? 'selected' : '' }}>Two Thirds (col-md-8)</option>
                                    <option value="col-md-9" {{ old('width_class', $field->width_class) == 'col-md-9' ? 'selected' : '' }}>Three Quarters (col-md-9)</option>
                                </select>
                                @error('width_class')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="order" class="form-label">Display Order</label>
                                <input type="number" 
                                       class="form-control @error('order') is-invalid @enderror" 
                                       id="order" 
                                       name="order" 
                                       value="{{ old('order', $field->order) }}" 
                                       min="1">
                                @error('order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="placeholder" class="form-label">Placeholder Text</label>
                                <input type="text" 
                                       class="form-control @error('placeholder') is-invalid @enderror" 
                                       id="placeholder" 
                                       name="placeholder" 
                                       value="{{ old('placeholder', $field->placeholder) }}">
                                @error('placeholder')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="help_text" class="form-label">Help Text</label>
                                <input type="text" 
                                       class="form-control @error('help_text') is-invalid @enderror" 
                                       id="help_text" 
                                       name="help_text" 
                                       value="{{ old('help_text', $field->help_text) }}">
                                @error('help_text')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12 mb-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="required" 
                                           name="required" 
                                           value="1" 
                                           {{ old('required', $field->required) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="required">
                                        <strong>Required Field</strong>
                                        <br><small class="text-muted">This field must be filled out</small>
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="show_in_list" 
                                           name="show_in_list" 
                                           value="1" 
                                           {{ old('show_in_list', $field->show_in_list) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_in_list">
                                        <strong>Show in List View</strong>
                                        <br><small class="text-muted">Display this field in data listings</small>
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="searchable" 
                                           name="searchable" 
                                           value="1" 
                                           {{ old('searchable', $field->searchable) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="searchable">
                                        <strong>Searchable</strong>
                                        <br><small class="text-muted">Allow searching by this field</small>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" 
                                           type="checkbox" 
                                           id="filterable" 
                                           name="filterable" 
                                           value="1" 
                                           {{ old('filterable', $field->filterable) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="filterable">
                                        <strong>Filterable</strong>
                                        <br><small class="text-muted">Allow filtering by this field</small>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Validation Rules -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-shield-alt me-2"></i>
                            Validation Rules
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row" id="validationRules">
                            <!-- Validation rules will be loaded based on field type -->
                        </div>
                    </div>
                </div>

                <!-- Conditional Logic -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="fas fa-code-branch me-2"></i>
                            Conditional Logic
                        </h6>
                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="addCondition()">
                            <i class="fas fa-plus me-1"></i>
                            Add Condition
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="conditionsContainer">
                            @if($field->conditions && $field->conditions->count() > 0)
                                @foreach($field->conditions as $index => $condition)
                                    <div class="condition-row border rounded p-3 mb-3" data-index="{{ $index }}">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <h6 class="mb-0">Condition {{ $index + 1 }}</h6>
                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeCondition(this)">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                <label class="form-label">Dependent Field</label>
                                                <select class="form-select" name="conditions[{{ $index }}][dependent_field_id]">
                                                    <option value="">Select Field</option>
                                                    @foreach($availableFields as $availableField)
                                                        <option value="{{ $availableField->id }}" 
                                                                {{ $condition->dependent_field_id == $availableField->id ? 'selected' : '' }}>
                                                            {{ $availableField->label }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label">Operator</label>
                                                <select class="form-select" name="conditions[{{ $index }}][operator]">
                                                    <option value="equals" {{ $condition->operator == 'equals' ? 'selected' : '' }}>Equals</option>
                                                    <option value="not_equals" {{ $condition->operator == 'not_equals' ? 'selected' : '' }}>Not Equals</option>
                                                    <option value="contains" {{ $condition->operator == 'contains' ? 'selected' : '' }}>Contains</option>
                                                    <option value="not_contains" {{ $condition->operator == 'not_contains' ? 'selected' : '' }}>Not Contains</option>
                                                    <option value="greater_than" {{ $condition->operator == 'greater_than' ? 'selected' : '' }}>Greater Than</option>
                                                    <option value="less_than" {{ $condition->operator == 'less_than' ? 'selected' : '' }}>Less Than</option>
                                                    <option value="is_empty" {{ $condition->operator == 'is_empty' ? 'selected' : '' }}>Is Empty</option>
                                                    <option value="is_not_empty" {{ $condition->operator == 'is_not_empty' ? 'selected' : '' }}>Is Not Empty</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">Value</label>
                                                <input type="text" 
                                                       class="form-control" 
                                                       name="conditions[{{ $index }}][value]" 
                                                       value="{{ $condition->value }}"
                                                       placeholder="Comparison value">
                                            </div>
                                            <div class="col-md-2">
                                                <label class="form-label">Action</label>
                                                <select class="form-select" name="conditions[{{ $index }}][action]">
                                                    <option value="show" {{ $condition->action == 'show' ? 'selected' : '' }}>Show</option>
                                                    <option value="hide" {{ $condition->action == 'hide' ? 'selected' : '' }}>Hide</option>
                                                    <option value="require" {{ $condition->action == 'require' ? 'selected' : '' }}>Require</option>
                                                    <option value="unrequire" {{ $condition->action == 'unrequire' ? 'selected' : '' }}>Make Optional</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <p class="text-muted mb-0">No conditional logic configured. Add conditions to control when this field is shown, hidden, or required based on other field values.</p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>
                                    Update Field
                                </button>
                                <a href="{{ route('data-management.data-types.sections.fields.show', [$dataType, $section, $field]) }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            </div>
                            <button type="button" class="btn btn-outline-danger" onclick="confirmDelete()">
                                <i class="fas fa-trash me-2"></i>
                                Delete Field
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-lg-4">
            <!-- Field Preview -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-eye me-2"></i>
                        Live Preview
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div id="previewContainer" class="col-12">
                            <!-- Preview will be rendered here -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- Field Type Guide -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-{{ getFieldIcon($field->field_type) }} me-2"></i>
                        {{ getFieldTypeDisplayName($field->field_type) }} Guide
                    </h6>
                </div>
                <div class="card-body">
                    <div id="fieldTypeGuide">
                        <!-- Guide content will be loaded based on field type -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Field Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                            <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-1">Delete Field "{{ $field->label }}"?</h6>
                            <p class="mb-0 text-muted">
                                This action cannot be undone. The field and all its data will be permanently deleted.
                            </p>
                        </div>
                    </div>
                    
                    <div class="alert alert-danger mb-0">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <strong>Warning:</strong> This will also remove the field from the data table and delete all existing data in this field.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form action="{{ route('data-management.data-types.sections.fields.destroy', [$dataType, $section, $field]) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-2"></i>
                            Delete Field
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
// Field configuration data (reuse from create view)
const fieldConfigurations = {
    text: {
        name: 'Text Input',
        icon: 'keyboard',
        category: 'text',
        guide: 'Single-line text input for short text values.',
        config: ['placeholder', 'default_value', 'min_length', 'max_length'],
        validation: ['required', 'min', 'max', 'alpha', 'alpha_num', 'regex']
    },
    textarea: {
        name: 'Textarea',
        icon: 'align-left',
        category: 'text',
        guide: 'Multi-line text input for longer text content.',
        config: ['placeholder', 'default_value', 'min_length', 'max_length', 'rows'],
        validation: ['required', 'min', 'max']
    },
    rich_text: {
        name: 'Rich Text Editor',
        icon: 'edit',
        category: 'text',
        guide: 'WYSIWYG editor for formatted text content.',
        config: ['default_value', 'min_length', 'max_length'],
        validation: ['required', 'min', 'max']
    },
    email: {
        name: 'Email',
        icon: 'envelope',
        category: 'text',
        guide: 'Email input with validation.',
        config: ['placeholder', 'default_value'],
        validation: ['required', 'email', 'unique']
    },
    url: {
        name: 'URL',
        icon: 'link',
        category: 'text',
        guide: 'URL input with validation.',
        config: ['placeholder', 'default_value'],
        validation: ['required', 'url']
    },
    tel: {
        name: 'Phone',
        icon: 'phone',
        category: 'text',
        guide: 'Phone number input.',
        config: ['placeholder', 'default_value'],
        validation: ['required', 'regex']
    },
    number: {
        name: 'Number',
        icon: 'hashtag',
        category: 'numeric',
        guide: 'Integer number input.',
        config: ['placeholder', 'default_value', 'min_value', 'max_value', 'step'],
        validation: ['required', 'numeric', 'min', 'max']
    },
    decimal: {
        name: 'Decimal',
        icon: 'calculator',
        category: 'numeric',
        guide: 'Decimal number input with precision.',
        config: ['placeholder', 'default_value', 'min_value', 'max_value', 'step', 'decimal_places'],
        validation: ['required', 'numeric', 'min', 'max']
    },
    currency: {
        name: 'Currency',
        icon: 'dollar-sign',
        category: 'numeric',
        guide: 'Currency input with formatting.',
        config: ['default_value', 'min_value', 'max_value', 'currency_symbol'],
        validation: ['required', 'numeric', 'min', 'max']
    },
    select: {
        name: 'Select Dropdown',
        icon: 'list',
        category: 'selection',
        guide: 'Single selection from predefined options.',
        config: ['default_value', 'options', 'allow_other'],
        validation: ['required']
    },
    multiselect: {
        name: 'Multi-Select',
        icon: 'list-check',
        category: 'selection',
        guide: 'Multiple selections from predefined options.',
        config: ['default_value', 'options', 'max_selections'],
        validation: ['required']
    },
    radio: {
        name: 'Radio Buttons',
        icon: 'dot-circle',
        category: 'selection',
        guide: 'Single selection using radio buttons.',
        config: ['default_value', 'options', 'layout'],
        validation: ['required']
    },
    checkbox: {
        name: 'Checkboxes',
        icon: 'check-square',
        category: 'selection',
        guide: 'Multiple selections using checkboxes.',
        config: ['default_value', 'options', 'max_selections', 'layout'],
        validation: ['required']
    },
    date: {
        name: 'Date',
        icon: 'calendar-day',
        category: 'datetime',
        guide: 'Date picker input.',
        config: ['default_value', 'min_date', 'max_date', 'date_format'],
        validation: ['required', 'date', 'after', 'before']
    },
    datetime: {
        name: 'Date & Time',
        icon: 'calendar-alt',
        category: 'datetime',
        guide: 'Date and time picker input.',
        config: ['default_value', 'min_date', 'max_date', 'date_format', 'time_format'],
        validation: ['required', 'date']
    },
    time: {
        name: 'Time',
        icon: 'clock',
        category: 'datetime',
        guide: 'Time picker input.',
        config: ['default_value', 'time_format', 'time_step'],
        validation: ['required']
    },
    file: {
        name: 'File Upload',
        icon: 'file',
        category: 'file',
        guide: 'File upload with type restrictions.',
        config: ['allowed_types', 'max_size', 'max_files'],
        validation: ['required']
    },
    image: {
        name: 'Image Upload',
        icon: 'image',
        category: 'file',
        guide: 'Image upload with preview.',
        config: ['allowed_types', 'max_size', 'max_width', 'max_height', 'thumbnail'],
        validation: ['required']
    },
    json: {
        name: 'JSON Data',
        icon: 'code',
        category: 'advanced',
        guide: 'JSON data input with validation.',
        config: ['default_value', 'json_schema'],
        validation: ['required']
    },
    lookup: {
        name: 'Lookup/Reference',
        icon: 'search',
        category: 'advanced',
        guide: 'Reference to another data type.',
        config: ['lookup_data_type', 'lookup_display_field', 'allow_multiple'],
        validation: ['required']
    }
};

let conditionCounter = {{ $field->conditions ? $field->conditions->count() : 0 }};

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const fieldType = '{{ $field->field_type }}';
    loadFieldConfiguration(fieldType);
    loadValidationRules(fieldType);
    loadFieldTypeGuide(fieldType);
    updatePreview();
    
    // Bind events
    bindFormEvents();
});

function bindFormEvents() {
    // Update preview on form changes
    const form = document.getElementById('fieldForm');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    inputs.forEach(input => {
        input.addEventListener('change', updatePreview);
        if (input.type === 'text' || input.tagName === 'TEXTAREA') {
            input.addEventListener('input', debounce(updatePreview, 300));
        }
    });
}

function loadFieldConfiguration(fieldType) {
    const config = fieldConfigurations[fieldType];
    const container = document.getElementById('configurationPanel');
    
    if (!config || !config.config || config.config.length === 0) {
        container.innerHTML = '<p class="text-muted mb-0">No additional configuration available for this field type.</p>';
        return;
    }
    
    let html = '<div class="row">';
    
    config.config.forEach(configOption => {
        html += getConfigurationHTML(configOption, fieldType);
    });
    
    html += '</div>';
    container.innerHTML = html;
}

function getConfigurationHTML(configOption, fieldType) {
    const field = @json($field);
    const value = field.configuration && field.configuration[configOption] ? field.configuration[configOption] : '';
    
    switch (configOption) {
        case 'min_length':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Minimum Length</label>
                    <input type="number" class="form-control" name="configuration[min_length]" value="${field.min_length || ''}" min="0">
                </div>
            `;
        case 'max_length':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Maximum Length</label>
                    <input type="number" class="form-control" name="configuration[max_length]" value="${field.max_length || ''}" min="1">
                </div>
            `;
        case 'min_value':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Minimum Value</label>
                    <input type="number" class="form-control" name="configuration[min_value]" value="${field.min_value || ''}" step="any">
                </div>
            `;
        case 'max_value':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Maximum Value</label>
                    <input type="number" class="form-control" name="configuration[max_value]" value="${field.max_value || ''}" step="any">
                </div>
            `;
        case 'step':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Step</label>
                    <input type="number" class="form-control" name="configuration[step]" value="${field.step || ''}" step="any" min="0">
                </div>
            `;
        case 'decimal_places':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Decimal Places</label>
                    <input type="number" class="form-control" name="configuration[decimal_places]" value="${value}" min="0" max="10">
                </div>
            `;
        case 'rows':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Number of Rows</label>
                    <input type="number" class="form-control" name="configuration[rows]" value="${value || 3}" min="2" max="20">
                </div>
            `;
        case 'options':
            const options = field.options || [];
            return `
                <div class="col-12 mb-3">
                    <label class="form-label">Options</label>
                    <div id="optionsContainer">
                        ${options.map((option, index) => `
                            <div class="input-group mb-2">
                                <input type="text" class="form-control" name="options[]" value="${option}" placeholder="Option ${index + 1}">
                                <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        `).join('')}
                        <div class="input-group mb-2">
                            <input type="text" class="form-control" name="options[]" placeholder="New option">
                            <button type="button" class="btn btn-outline-success" onclick="addOption()">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
        case 'default_value':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Default Value</label>
                    <input type="text" class="form-control" name="default_value" value="${field.default_value || ''}">
                </div>
            `;
        case 'currency_symbol':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Currency Symbol</label>
                    <input type="text" class="form-control" name="configuration[currency_symbol]" value="${value || '$'}" maxlength="5">
                </div>
            `;
        case 'date_format':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Date Format</label>
                    <select class="form-select" name="configuration[date_format]">
                        <option value="Y-m-d" ${value === 'Y-m-d' ? 'selected' : ''}>YYYY-MM-DD</option>
                        <option value="m/d/Y" ${value === 'm/d/Y' ? 'selected' : ''}>MM/DD/YYYY</option>
                        <option value="d/m/Y" ${value === 'd/m/Y' ? 'selected' : ''}>DD/MM/YYYY</option>
                        <option value="d-m-Y" ${value === 'd-m-Y' ? 'selected' : ''}>DD-MM-YYYY</option>
                    </select>
                </div>
            `;
        case 'allowed_types':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Allowed File Types</label>
                    <input type="text" class="form-control" name="configuration[allowed_types]" value="${value}" placeholder="jpg,png,pdf">
                    <div class="form-text">Comma-separated file extensions</div>
                </div>
            `;
        case 'max_size':
            return `
                <div class="col-md-6 mb-3">
                    <label class="form-label">Max File Size (MB)</label>
                    <input type="number" class="form-control" name="configuration[max_size]" value="${value || 5}" min="1" max="100">
                </div>
            `;
        default:
            return '';
    }
}

function loadValidationRules(fieldType) {
    const config = fieldConfigurations[fieldType];
    const container = document.getElementById('validationRules');
    
    if (!config || !config.validation) {
        container.innerHTML = '<div class="col-12"><p class="text-muted mb-0">No validation rules available.</p></div>';
        return;
    }
    
    const currentRules = @json($field->validation_rules || []);
    let html = '';
    
    config.validation.forEach(rule => {
        const isChecked = currentRules.includes(rule);
        html += `
            <div class="col-md-4 col-6 mb-2">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="validation_${rule}" name="validation_rules[]" value="${rule}" ${isChecked ? 'checked' : ''}>
                    <label class="form-check-label" for="validation_${rule}">
                        ${getValidationRuleLabel(rule)}
                    </label>
                </div>
            </div>
        `;
    });
    
    container.innerHTML = html;
}

function getValidationRuleLabel(rule) {
    const labels = {
        'required': 'Required',
        'email': 'Valid Email',
        'url': 'Valid URL',
        'numeric': 'Numeric Only',
        'alpha': 'Letters Only',
        'alpha_num': 'Letters & Numbers',
        'date': 'Valid Date',
        'unique': 'Unique Value',
        'min': 'Minimum Length',
        'max': 'Maximum Length',
        'regex': 'Custom Pattern'
    };
    return labels[rule] || rule;
}

function loadFieldTypeGuide(fieldType) {
    const config = fieldConfigurations[fieldType];
    const container = document.getElementById('fieldTypeGuide');
    
    if (!config) {
        container.innerHTML = '<p class="text-muted">No guide available.</p>';
        return;
    }
    
    container.innerHTML = `
        <p class="mb-3">${config.guide}</p>
        <div class="list-group list-group-flush">
            <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                <span>Category</span>
                <span class="badge bg-primary">${config.category}</span>
            </div>
            <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                <span>Configuration Options</span>
                <span class="badge bg-secondary">${config.config ? config.config.length : 0}</span>
            </div>
            <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                <span>Validation Rules</span>
                <span class="badge bg-info">${config.validation ? config.validation.length : 0}</span>
            </div>
        </div>
    `;
}

function updatePreview() {
    const formData = new FormData(document.getElementById('fieldForm'));
    const label = formData.get('label') || 'Field Label';
    const placeholder = formData.get('placeholder') || '';
    const helpText = formData.get('help_text') || '';
    const required = formData.get('required') === '1';
    const fieldType = '{{ $field->field_type }}';
    const widthClass = formData.get('width_class') || 'col-12';
    
    const container = document.getElementById('previewContainer');
    container.className = widthClass;
    
    let html = `
        <div class="mb-3">
            <label class="form-label">
                ${label}
                ${required ? '<span class="text-danger">*</span>' : ''}
            </label>
    `;
    
    // Generate field HTML based on type
    switch (fieldType) {
        case 'text':
        case 'email':
        case 'url':
        case 'tel':
            html += `<input type="${fieldType === 'text' ? 'text' : fieldType}" class="form-control" placeholder="${placeholder}" disabled>`;
            break;
        case 'textarea':
            html += `<textarea class="form-control" placeholder="${placeholder}" rows="3" disabled></textarea>`;
            break;
        case 'number':
        case 'decimal':
            html += `<input type="number" class="form-control" placeholder="${placeholder}" disabled>`;
            break;
        case 'currency':
            html += `
                <div class="input-group">
                    <span class="input-group-text">$</span>
                    <input type="number" class="form-control" placeholder="${placeholder}" disabled>
                </div>
            `;
            break;
        case 'select':
            const options = Array.from(document.querySelectorAll('input[name="options[]"]'))
                .map(input => input.value)
                .filter(value => value.trim() !== '');
            html += `
                <select class="form-select" disabled>
                    <option>Choose...</option>
                    ${options.map(option => `<option>${option}</option>`).join('')}
                </select>
            `;
            break;
        case 'radio':
            const radioOptions = Array.from(document.querySelectorAll('input[name="options[]"]'))
                .map(input => input.value)
                .filter(value => value.trim() !== '');
            radioOptions.slice(0, 3).forEach((option, index) => {
                html += `
                    <div class="form-check">
                        <input class="form-check-input" type="radio" disabled>
                        <label class="form-check-label">${option}</label>
                    </div>
                `;
            });
            break;
        case 'checkbox':
            const checkboxOptions = Array.from(document.querySelectorAll('input[name="options[]"]'))
                .map(input => input.value)
                .filter(value => value.trim() !== '');
            checkboxOptions.slice(0, 3).forEach((option, index) => {
                html += `
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" disabled>
                        <label class="form-check-label">${option}</label>
                    </div>
                `;
            });
            break;
        case 'date':
            html += `<input type="date" class="form-control" disabled>`;
            break;
        case 'datetime':
            html += `<input type="datetime-local" class="form-control" disabled>`;
            break;
        case 'time':
            html += `<input type="time" class="form-control" disabled>`;
            break;
        case 'file':
        case 'image':
            html += `<input type="file" class="form-control" disabled>`;
            break;
        default:
            html += `<input type="text" class="form-control" placeholder="${placeholder}" disabled>`;
    }
    
    if (helpText) {
        html += `<div class="form-text">${helpText}</div>`;
    }
    
    html += '</div>';
    
    container.innerHTML = html;
}

function addOption() {
    const container = document.getElementById('optionsContainer');
    const newOption = document.createElement('div');
    newOption.className = 'input-group mb-2';
    newOption.innerHTML = `
        <input type="text" class="form-control" name="options[]" placeholder="New option">
        <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)">
            <i class="fas fa-trash"></i>
        </button>
    `;
    
    const lastInput = container.lastElementChild;
    container.insertBefore(newOption, lastInput);
    updatePreview();
}

function removeOption(button) {
    button.closest('.input-group').remove();
    updatePreview();
}

function addCondition() {
    const container = document.getElementById('conditionsContainer');
    
    // If this is the first condition, clear the "no conditions" message
    if (container.querySelector('p.text-muted')) {
        container.innerHTML = '';
    }
    
    const conditionHtml = `
        <div class="condition-row border rounded p-3 mb-3" data-index="${conditionCounter}">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <h6 class="mb-0">Condition ${conditionCounter + 1}</h6>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeCondition(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label">Dependent Field</label>
                    <select class="form-select" name="conditions[${conditionCounter}][dependent_field_id]">
                        <option value="">Select Field</option>
                        @foreach($availableFields as $availableField)
                            <option value="{{ $availableField->id }}">{{ $availableField->label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Operator</label>
                    <select class="form-select" name="conditions[${conditionCounter}][operator]">
                        <option value="equals">Equals</option>
                        <option value="not_equals">Not Equals</option>
                        <option value="contains">Contains</option>
                        <option value="not_contains">Not Contains</option>
                        <option value="greater_than">Greater Than</option>
                        <option value="less_than">Less Than</option>
                        <option value="is_empty">Is Empty</option>
                        <option value="is_not_empty">Is Not Empty</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Value</label>
                    <input type="text" class="form-control" name="conditions[${conditionCounter}][value]" placeholder="Comparison value">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Action</label>
                    <select class="form-select" name="conditions[${conditionCounter}][action]">
                        <option value="show">Show</option>
                        <option value="hide">Hide</option>
                        <option value="require">Require</option>
                        <option value="unrequire">Make Optional</option>
                    </select>
                </div>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', conditionHtml);
    conditionCounter++;
}

function removeCondition(button) {
    const conditionRow = button.closest('.condition-row');
    conditionRow.remove();
    
    // If no conditions left, show message
    const container = document.getElementById('conditionsContainer');
    if (container.children.length === 0) {
        container.innerHTML = '<p class="text-muted mb-0">No conditional logic configured. Add conditions to control when this field is shown, hidden, or required based on other field values.</p>';
    }
}

function confirmDelete() {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

@php
    // Helper functions for the view (same as show view)
    function getFieldIcon($fieldType) {
        $icons = [
            'text' => 'keyboard', 'textarea' => 'align-left', 'rich_text' => 'edit',
            'email' => 'envelope', 'url' => 'link', 'tel' => 'phone',
            'number' => 'hashtag', 'decimal' => 'calculator', 'currency' => 'dollar-sign',
            'select' => 'list', 'multiselect' => 'list-check', 'radio' => 'dot-circle', 'checkbox' => 'check-square',
            'date' => 'calendar-day', 'datetime' => 'calendar-alt', 'time' => 'clock',
            'file' => 'file', 'image' => 'image', 'json' => 'code', 'lookup' => 'search'
        ];
        return $icons[$fieldType] ?? 'square';
    }

    function getFieldTypeBadgeColor($fieldType) {
        $colors = [
            'text' => 'primary', 'textarea' => 'primary', 'rich_text' => 'primary',
            'email' => 'info', 'url' => 'info', 'tel' => 'info',
            'number' => 'success', 'decimal' => 'success', 'currency' => 'success',
            'select' => 'warning', 'multiselect' => 'warning', 'radio' => 'warning', 'checkbox' => 'warning',
            'date' => 'secondary', 'datetime' => 'secondary', 'time' => 'secondary',
            'file' => 'dark', 'image' => 'dark', 'json' => 'danger', 'lookup' => 'danger'
        ];
        return $colors[$fieldType] ?? 'secondary';
    }

    function getFieldTypeDisplayName($fieldType) {
        $names = [
            'text' => 'Text', 'textarea' => 'Textarea', 'rich_text' => 'Rich Text',
            'email' => 'Email', 'url' => 'URL', 'tel' => 'Phone',
            'number' => 'Number', 'decimal' => 'Decimal', 'currency' => 'Currency',
            'select' => 'Select', 'multiselect' => 'Multi-Select', 'radio' => 'Radio', 'checkbox' => 'Checkbox',
            'date' => 'Date', 'datetime' => 'Date/Time', 'time' => 'Time',
            'file' => 'File', 'image' => 'Image', 'json' => 'JSON', 'lookup' => 'Lookup'
        ];
        return $names[$fieldType] ?? $fieldType;
    }
@endphp
</script>
@endpush