@extends('layouts.modern')

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

@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 active">{{ $field ? 'Edit' : 'Create' }}</li>
@endsection

@section('action-buttons')
    <a href="{{ route('data-management.data-types.sections.fields.index', [$dataType, $section]) }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left"></i>
        Back to Fields
    </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">
                @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 }}</h6>
                    <small style="color: var(--text-muted);">{{ $field ? 'Editing field: ' . $field->label : 'Creating field for ' . $section->name . ' section' }}</small>
                </div>
                @if($section->icon)
                    <i class="{{ $section->icon }} me-2" style="color: var(--success-color);"></i>
                @endif
                <div>
                    <span class="badge bg-info">{{ $section->name }}</span>
                </div>
            </div>
        </div>
    </div>

    <form action="{{ $field ? route('data-management.data-types.sections.fields.update', [$dataType, $section, $field]) : route('data-management.data-types.sections.fields.store', [$dataType, $section]) }}" method="POST" id="create-field-form">
        @csrf
        @if($field)
            @method('PUT')
        @endif
        
        <div class="row">
            <div class="col-lg-8">
                <!-- Field Type Selection -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-shapes me-2"></i>
                            Field Type Selection
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @php
                                $groupedTypes = [];
                                foreach($fieldTypes as $key => $type) {
                                    $groupedTypes[$type['category']][$key] = $type;
                                }
                            @endphp
                            
                            @foreach($groupedTypes as $category => $types)
                                <div class="col-md-6 col-lg-3 mb-3">
                                    <h6 class="text-muted mb-2">{{ $category }}</h6>
                                    @foreach($types as $key => $type)
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="radio" name="field_type" 
                                                   id="field_type_{{ $key }}" value="{{ $key }}" 
                                                   {{ old('field_type', $field->field_type ?? '') == $key ? 'checked' : '' }}>
                                            <label class="form-check-label d-flex align-items-center" for="field_type_{{ $key }}">
                                                <i class="{{ $type['icon'] }} me-2" style="width: 16px;"></i>
                                                <div>
                                                    <div class="fw-medium">{{ $type['name'] }}</div>
                                                    <small class="text-muted">{{ $type['description'] }}</small>
                                                </div>
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                        @error('field_type')
                            <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- 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 ?? '') }}" 
                                    placeholder="e.g., Full Name, Email Address" required>
                                @error('label')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Display label for this field</div>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Field Name</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                    id="name" name="name" value="{{ old('name', $field->name ?? '') }}" 
                                    placeholder="auto-generated from label">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Database field name (auto-generated if empty)</div>
                            </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" 
                                    placeholder="Brief description of this field...">{{ old('description', $field->description ?? '') }}</textarea>
                                @error('description')
                                    <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 ?? '') }}" 
                                    placeholder="Enter placeholder text...">
                                @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 ?? '') }}" 
                                    placeholder="Additional help text...">
                                @error('help_text')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Field Configuration -->
                <div class="card mb-4" id="field-configuration" style="display: none;">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-cog me-2"></i>
                            Field Configuration
                        </h6>
                    </div>
                    <div class="card-body">
                        <!-- Text Field Configuration -->
                        <div class="field-config" data-field-type="text,textarea,email,url,tel">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="min_length" class="form-label">Minimum Length</label>
                                    <input type="number" class="form-control @error('min_length') is-invalid @enderror" 
                                        id="min_length" name="min_length" value="{{ old('min_length', $field->min_length ?? '') }}" 
                                        min="0" placeholder="0">
                                    @error('min_length')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="max_length" class="form-label">Maximum Length</label>
                                    <input type="number" class="form-control @error('max_length') is-invalid @enderror" 
                                        id="max_length" name="max_length" value="{{ old('max_length', $field->max_length ?? '') }}" 
                                        min="1" placeholder="255">
                                    @error('max_length')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Numeric Field Configuration -->
                        <div class="field-config" data-field-type="number,decimal,currency" style="display: none;">
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="min_value" class="form-label">Minimum Value</label>
                                    <input type="number" class="form-control @error('min_value') is-invalid @enderror" 
                                        id="min_value" name="min_value" value="{{ old('min_value', $field->min_value ?? '') }}" 
                                        step="any" placeholder="0">
                                    @error('min_value')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="max_value" class="form-label">Maximum Value</label>
                                    <input type="number" class="form-control @error('max_value') is-invalid @enderror" 
                                        id="max_value" name="max_value" value="{{ old('max_value', $field->max_value ?? '') }}" 
                                        step="any" placeholder="999999">
                                    @error('max_value')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="step" class="form-label">Step</label>
                                    <input type="number" class="form-control @error('step') is-invalid @enderror" 
                                        id="step" name="step" value="{{ old('step', $field->step ?? '') }}" 
                                        step="0.01" placeholder="1">
                                    @error('step')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Selection Field Configuration -->
                        <div class="field-config" data-field-type="select,radio,checkbox,multiselect" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Options</label>
                                <div id="options-container">
                                    @if(old('options') || ($field && $field->options))
                                        @php
                                            $options = old('options') ?? ($field->options ?? []);
                                            if (!is_array($options)) {
                                                $options = json_decode($options, true) ?? [];
                                            }
                                        @endphp
                                        @foreach($options as $index => $option)
                                            <div class="input-group mb-2 option-row">
                                                <input type="text" class="form-control" name="options[]" 
                                                    value="{{ $option }}" placeholder="Option text">
                                                <button type="button" class="btn btn-outline-danger remove-option">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        @endforeach
                                    @else
                                        <div class="input-group mb-2 option-row">
                                            <input type="text" class="form-control" name="options[]" 
                                                placeholder="Option 1">
                                            <button type="button" class="btn btn-outline-danger remove-option">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                        <div class="input-group mb-2 option-row">
                                            <input type="text" class="form-control" name="options[]" 
                                                placeholder="Option 2">
                                            <button type="button" class="btn btn-outline-danger remove-option">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    @endif
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary" id="add-option">
                                    <i class="fas fa-plus"></i>
                                    Add Option
                                </button>
                                @error('options')
                                    <div class="text-danger mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Default Value -->
                        <div class="row">
                            <div class="col-12 mb-3">
                                <label for="default_value" class="form-label">Default Value</label>
                                <input type="text" class="form-control @error('default_value') is-invalid @enderror" 
                                    id="default_value" name="default_value" value="{{ old('default_value', $field->default_value ?? '') }}" 
                                    placeholder="Default value for this field">
                                @error('default_value')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Layout & Behavior -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-layout me-2"></i>
                            Layout & Behavior
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="width_class" class="form-label">
                                    Field Width <span class="text-danger">*</span>
                                </label>
                                <select class="form-select @error('width_class') is-invalid @enderror" 
                                    id="width_class" name="width_class" required>
                                    <option value="col-12" {{ old('width_class', $field->width_class ?? 'col-12') == 'col-12' ? 'selected' : '' }}>
                                        Full Width (12 columns)
                                    </option>
                                    <option value="col-6" {{ old('width_class', $field->width_class ?? '') == 'col-6' ? 'selected' : '' }}>
                                        Half Width (6 columns)
                                    </option>
                                    <option value="col-4" {{ old('width_class', $field->width_class ?? '') == 'col-4' ? 'selected' : '' }}>
                                        One-third Width (4 columns)
                                    </option>
                                    <option value="col-3" {{ old('width_class', $field->width_class ?? '') == 'col-3' ? 'selected' : '' }}>
                                        Quarter Width (3 columns)
                                    </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 ?? 0) }}" 
                                    min="0" step="1">
                                @error('order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">Lower numbers appear first (0 = auto-assign to end)</div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-3 col-6 mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="required" 
                                        name="required" value="1" {{ old('required', $field->required ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="required">
                                        Required Field
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-3 col-6 mb-3">
                                <div class="form-check form-switch">
                                    <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 ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="show_in_list">
                                        Show in List
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-3 col-6 mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="searchable" 
                                        name="searchable" value="1" {{ old('searchable', $field->searchable ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="searchable">
                                        Searchable
                                    </label>
                                </div>
                            </div>
                            
                            <div class="col-md-3 col-6 mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="filterable" 
                                        name="filterable" value="1" {{ old('filterable', $field->filterable ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="filterable">
                                        Filterable
                                    </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">
                            @foreach($validationOptions as $rule => $description)
                                <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 }}" 
                                            {{ in_array($rule, old('validation_rules', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="validation_{{ $rule }}">
                                            {{ $description }}
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        @error('validation_rules')
                            <div class="text-danger mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Conditional Logic -->
                <div class="card mb-4" id="conditional-logic">
                    <div class="card-header">
                        <div class="d-flex align-items-center justify-content-between">
                            <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" id="add-condition">
                                <i class="fas fa-plus"></i>
                                Add Condition
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="conditions-container">
                            @php
                                $conditions = old('conditions') ?? ($field && $field->conditions ? $field->conditions->toArray() : []);
                            @endphp
                            @if(!empty($conditions))
                                @foreach($conditions as $index => $condition)
                                    @php
                                        // Handle both array format (from old) and object format (from model)
                                        $conditionData = is_array($condition) ? $condition : [
                                            'field_id' => $condition->field_id,
                                            'operator' => $condition->operator,
                                            'value' => $condition->value,
                                            'action' => $condition->action,
                                        ];
                                    @endphp
                                    <div class="condition-row border rounded p-3 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-3 mb-2">
                                                <label class="form-label small">When Field</label>
                                                <select class="form-select form-select-sm" name="conditions[{{ $index }}][field_id]">
                                                    <option value="">Select field...</option>
                                                    @foreach($availableSections as $availableSection)
                                                        @if($availableSection->fields && $availableSection->fields->count() > 0)
                                                            <optgroup label="{{ $availableSection->name }}">
                                                                @foreach($availableSection->fields as $availableField)
                                                                    <option value="{{ $availableField->id }}" 
                                                                        {{ $conditionData['field_id'] == $availableField->id ? 'selected' : '' }}>
                                                                        {{ $availableField->label }}
                                                                    </option>
                                                                @endforeach
                                                            </optgroup>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <label class="form-label small">Is</label>
                                                <select class="form-select form-select-sm" name="conditions[{{ $index }}][operator]">
                                                    <option value="equals" {{ $conditionData['operator'] == 'equals' ? 'selected' : '' }}>Equals</option>
                                                    <option value="not_equals" {{ $conditionData['operator'] == 'not_equals' ? 'selected' : '' }}>Not Equals</option>
                                                    <option value="contains" {{ $conditionData['operator'] == 'contains' ? 'selected' : '' }}>Contains</option>
                                                    <option value="not_contains" {{ $conditionData['operator'] == 'not_contains' ? 'selected' : '' }}>Not Contains</option>
                                                    <option value="greater_than" {{ $conditionData['operator'] == 'greater_than' ? 'selected' : '' }}>Greater Than</option>
                                                    <option value="less_than" {{ $conditionData['operator'] == 'less_than' ? 'selected' : '' }}>Less Than</option>
                                                    <option value="is_empty" {{ $conditionData['operator'] == 'is_empty' ? 'selected' : '' }}>Is Empty</option>
                                                    <option value="is_not_empty" {{ $conditionData['operator'] == 'is_not_empty' ? 'selected' : '' }}>Is Not Empty</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3 mb-2">
                                                <label class="form-label small">Value</label>
                                                <input type="text" class="form-control form-control-sm" 
                                                    name="conditions[{{ $index }}][value]" 
                                                    value="{{ $conditionData['value'] }}" placeholder="Comparison value">
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <label class="form-label small">Then</label>
                                                <select class="form-select form-select-sm" name="conditions[{{ $index }}][action]">
                                                    <option value="show" {{ $conditionData['action'] == 'show' ? 'selected' : '' }}>Show Field</option>
                                                    <option value="hide" {{ $conditionData['action'] == 'hide' ? 'selected' : '' }}>Hide Field</option>
                                                    <option value="require" {{ $conditionData['action'] == 'require' ? 'selected' : '' }}>Require Field</option>
                                                    <option value="unrequire" {{ $conditionData['action'] == 'unrequire' ? 'selected' : '' }}>Make Optional</option>
                                                </select>
                                            </div>
                                            <div class="col-md-2 mb-2">
                                                <label class="form-label small">&nbsp;</label>
                                                <button type="button" class="btn btn-sm btn-outline-danger d-block remove-condition">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        <div id="no-conditions" style="{{ old('conditions') ? 'display: none;' : '' }}">
                            <p class="text-muted mb-0">No conditions set. This field will always be visible.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Field Preview -->
                <div class="card sticky-top" style="top: 20px;">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-eye me-2"></i>
                            Field Preview
                        </h6>
                    </div>
                    <div class="card-body">
                        <div id="field-preview">
                            <div class="text-center text-muted py-4">
                                <i class="fas fa-mouse-pointer fa-2x mb-2"></i>
                                <p class="mb-0">Select a field type to see preview</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-footer">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i>
                                {{ $field ? 'Update Field' : 'Create Field' }}
                            </button>
                            <a href="{{ route('data-management.data-types.sections.fields.index', [$dataType, $section]) }}" 
                               class="btn btn-outline-secondary">
                                <i class="fas fa-times"></i>
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fieldTypeInputs = document.querySelectorAll('input[name="field_type"]');
    const fieldConfiguration = document.getElementById('field-configuration');
    const fieldConfigs = document.querySelectorAll('.field-config');
    const fieldPreview = document.getElementById('field-preview');
    const labelInput = document.getElementById('label');
    const nameInput = document.getElementById('name');
    const placeholderInput = document.getElementById('placeholder');
    const helpTextInput = document.getElementById('help_text');
    const requiredInput = document.getElementById('required');
    const widthClassInput = document.getElementById('width_class');
    
    let conditionIndex = {{ old('conditions') ? count(old('conditions')) : 0 }};

    // Field type change handler
    fieldTypeInputs.forEach(input => {
        input.addEventListener('change', function() {
            if (this.checked) {
                showFieldConfiguration(this.value);
                updateFieldPreview();
            }
        });
    });

    // Auto-generate field name from label
    labelInput.addEventListener('input', function() {
        if (!nameInput.value || nameInput.hasAttribute('data-auto-generated')) {
            const name = this.value
                .toLowerCase()
                .replace(/[^a-z0-9\s]/g, '')
                .replace(/\s+/g, '_')
                .replace(/_+/g, '_')
                .trim('_');
            nameInput.value = name;
            nameInput.setAttribute('data-auto-generated', 'true');
        }
        updateFieldPreview();
    });

    // Remove auto-generated attribute when manually edited
    nameInput.addEventListener('input', function() {
        this.removeAttribute('data-auto-generated');
    });

    // Update preview on input changes
    [placeholderInput, helpTextInput, requiredInput, widthClassInput].forEach(input => {
        input.addEventListener('input', updateFieldPreview);
        input.addEventListener('change', updateFieldPreview);
    });

    // Options management
    document.getElementById('add-option').addEventListener('click', function() {
        const container = document.getElementById('options-container');
        const optionCount = container.children.length;
        const newOption = document.createElement('div');
        newOption.className = 'input-group mb-2 option-row';
        newOption.innerHTML = `
            <input type="text" class="form-control" name="options[]" 
                placeholder="Option ${optionCount + 1}">
            <button type="button" class="btn btn-outline-danger remove-option">
                <i class="fas fa-times"></i>
            </button>
        `;
        container.appendChild(newOption);
    });

    // Remove option
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-option')) {
            const optionRow = e.target.closest('.option-row');
            if (document.querySelectorAll('.option-row').length > 1) {
                optionRow.remove();
            }
        }
    });

    // Condition management
    document.getElementById('add-condition').addEventListener('click', function() {
        addCondition();
    });

    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-condition')) {
            e.target.closest('.condition-row').remove();
            updateConditionsVisibility();
        }
    });

    function showFieldConfiguration(fieldType) {
        fieldConfiguration.style.display = 'block';
        
        // Hide all configs
        fieldConfigs.forEach(config => config.style.display = 'none');
        
        // Show relevant config
        fieldConfigs.forEach(config => {
            const types = config.getAttribute('data-field-type').split(',');
            if (types.includes(fieldType)) {
                config.style.display = 'block';
            }
        });
    }

    function updateFieldPreview() {
        const selectedType = document.querySelector('input[name="field_type"]:checked');
        const label = labelInput.value || 'Field Label';
        const placeholder = placeholderInput.value;
        const helpText = helpTextInput.value;
        const required = requiredInput.checked;
        const widthClass = widthClassInput.value;

        if (!selectedType) {
            fieldPreview.innerHTML = `
                <div class="text-center text-muted py-4">
                    <i class="fas fa-mouse-pointer fa-2x mb-2"></i>
                    <p class="mb-0">Select a field type to see preview</p>
                </div>
            `;
            return;
        }

        let previewHtml = `
            <div class="${widthClass}">
                <div class="mb-3">
                    <label class="form-label">
                        ${label}
                        ${required ? '<span class="text-danger">*</span>' : ''}
                    </label>
                    ${generateFieldInput(selectedType.value, placeholder)}
                    ${helpText ? `<div class="form-text">${helpText}</div>` : ''}
                </div>
            </div>
        `;

        fieldPreview.innerHTML = previewHtml;
    }

    function generateFieldInput(fieldType, placeholder) {
        const placeholderAttr = placeholder ? `placeholder="${placeholder}"` : '';
        
        switch(fieldType) {
            case 'text':
            case 'email':
            case 'url':
            case 'tel':
                return `<input type="${fieldType}" class="form-control" ${placeholderAttr}>`;
            case 'textarea':
                return `<textarea class="form-control" rows="3" ${placeholderAttr}></textarea>`;
            case 'rich_text':
                return `<div class="form-control" style="min-height: 120px; position: relative;">
                    <div class="text-muted">[Rich Text Editor]</div>
                </div>`;
            case 'number':
            case 'decimal':
                return `<input type="number" class="form-control" ${placeholderAttr}>`;
            case 'currency':
                return `<div class="input-group">
                    <span class="input-group-text">$</span>
                    <input type="number" class="form-control" ${placeholderAttr}>
                </div>`;
            case 'select':
                return `<select class="form-select">
                    <option value="">Choose...</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>`;
            case 'multiselect':
                return `<select class="form-select" multiple>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>`;
            case 'radio':
                return `<div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="preview_radio">
                        <label class="form-check-label">Option 1</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="preview_radio">
                        <label class="form-check-label">Option 2</label>
                    </div>
                </div>`;
            case 'checkbox':
                return `<div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox">
                        <label class="form-check-label">Option 1</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox">
                        <label class="form-check-label">Option 2</label>
                    </div>
                </div>`;
            case 'date':
                return `<input type="date" class="form-control">`;
            case 'datetime':
                return `<input type="datetime-local" class="form-control">`;
            case 'time':
                return `<input type="time" class="form-control">`;
            case 'file':
                return `<input type="file" class="form-control">`;
            case 'image':
                return `<input type="file" class="form-control" accept="image/*">`;
            case 'json':
                return `<textarea class="form-control" rows="4" placeholder='{"key": "value"}'></textarea>`;
            case 'lookup':
                return `<select class="form-select">
                    <option value="">Select reference...</option>
                    <option>[Referenced items will appear here]</option>
                </select>`;
            default:
                return `<input type="text" class="form-control" ${placeholderAttr}>`;
        }
    }

    function addCondition() {
        const container = document.getElementById('conditions-container');
        const conditionHtml = `
            <div class="condition-row border rounded p-3 mb-3">
                <div class="row align-items-center">
                    <div class="col-md-3 mb-2">
                        <label class="form-label small">When Field</label>
                        <select class="form-select form-select-sm" name="conditions[${conditionIndex}][field_id]">
                            <option value="">Select field...</option>
                            @foreach($availableSections as $availableSection)
                                @if($availableSection->fields && $availableSection->fields->count() > 0)
                                    <optgroup label="{{ $availableSection->name }}">
                                        @foreach($availableSection->fields as $availableField)
                                            <option value="{{ $availableField->id }}">{{ $availableField->label }}</option>
                                        @endforeach
                                    </optgroup>
                                @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="form-label small">Is</label>
                        <select class="form-select form-select-sm" name="conditions[${conditionIndex}][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 mb-2">
                        <label class="form-label small">Value</label>
                        <input type="text" class="form-control form-control-sm" 
                            name="conditions[${conditionIndex}][value]" placeholder="Comparison value">
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="form-label small">Then</label>
                        <select class="form-select form-select-sm" name="conditions[${conditionIndex}][action]">
                            <option value="show">Show Field</option>
                            <option value="hide">Hide Field</option>
                            <option value="require">Require Field</option>
                            <option value="unrequire">Make Optional</option>
                        </select>
                    </div>
                    <div class="col-md-2 mb-2">
                        <label class="form-label small">&nbsp;</label>
                        <button type="button" class="btn btn-sm btn-outline-danger d-block remove-condition">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
        
        container.insertAdjacentHTML('beforeend', conditionHtml);
        conditionIndex++;
        updateConditionsVisibility();
    }

    function updateConditionsVisibility() {
        const hasConditions = document.querySelectorAll('.condition-row').length > 0;
        document.getElementById('no-conditions').style.display = hasConditions ? 'none' : 'block';
    }

    // Initialize preview if field type is already selected
    const selectedType = document.querySelector('input[name="field_type"]:checked');
    if (selectedType) {
        showFieldConfiguration(selectedType.value);
        updateFieldPreview();
    }
    
    // Update conditions visibility on load
    updateConditionsVisibility();
});
</script>
@endpush

@push('styles')
<style>
.field-config {
    border-radius: 8px;
    background-color: var(--bs-light);
    padding: 1rem;
    margin-bottom: 1rem;
}

.condition-row {
    background-color: var(--bs-light);
}

.form-check-label {
    cursor: pointer;
}

.sticky-top {
    position: sticky !important;
}

#field-preview .form-control,
#field-preview .form-select {
    pointer-events: none;
    background-color: var(--bs-light);
}

.option-row:last-child .remove-option {
    display: none;
}

.option-row:not(:last-child) ~ .option-row:last-child .remove-option {
    display: inline-block;
}
</style>
@endpush