<div x-data="{
        recordTypes: @js($recordTypes),
        selectedRecordTypes: @js($selectedRecordTypes ?? []),
        toggleAllCheckboxes() {
            this.selectAll = !this.selectAll;
            this.selectedRecordTypes = this.selectAll ? this.recordTypes.map(option => option.id) : [];
        },
        defaultchecked: {{ (isset($record) && $record->defaultchecked) ? 'true' : 'false' }},
        required: {{ (isset($record) && $record->is_required) ? 'true' : 'false' }},
        selectAll: false,
        storeValue: {{ (isset($record) && $record->storevalue) ? 'true' : 'false' }},
        showTable: {{ (isset($record) && $record->showtable) ? 'true' : 'false' }},
        isVisible: {{ isset($record) ? ($record->visibility ? 'true' : 'false') : 'true' }},
        contentType: @js(isset($record) ? $record->content_type : '8'),
        selectRecordType: {{ isset($record) && $record->selectedreferenceid != null ? $record->selectedreferenceid : 'null' }},
        typeOptions: [],
        initialRecordFilter: @js(isset($record) ? $record->record_filter : null),
        availableFilterFields: [],
        selectedRecordFilterFieldScriptid: '',
        recordFilterBoolean: null,
        recordFilterListValues: [],
        updateSelectedRecordTypes(id) {
            if (this.selectedRecordTypes.includes(id)) {
                const index = this.selectedRecordTypes.indexOf(id);
                this.selectedRecordTypes.splice(index, 1);
            } else {
                this.selectedRecordTypes.push(id);
            }
            this.selectAll = this.selectedRecordTypes.length === this.recordTypes.length;
        },
        updateTypeOptions() {
            if (this.contentType === 13 || this.contentType === '13' || this.contentType === 15 || this.contentType === '15') {
                this.typeOptions = @js($listRecords);
            } else if (this.contentType === 19 || this.contentType === '19') {
                this.typeOptions = @js($recordTypes);
            } else {
                this.typeOptions = [];
            }
        },
        getSelectedFilterField() {
            if (!this.selectedRecordFilterFieldScriptid) {
                return null;
            }
            return this.availableFilterFields.find(f => String(f.scriptid) === String(this.selectedRecordFilterFieldScriptid)) || null;
        },
        resetRecordFilterValues() {
            this.recordFilterBoolean = null;
            this.recordFilterListValues = [];
        },
        onRecordFilterFieldChange() {
            this.resetRecordFilterValues();
        },
        /**
         * Radio / JSON often yields strings; coercing the string false with !! is wrong in JS.
         */
        coerceRecordFilterBoolean(val) {
            if (val === null || val === undefined || val === '') {
                return null;
            }
            if (val === true || val === 'true' || val === 1 || val === '1') {
                return true;
            }
            if (val === false || val === 'false' || val === 0 || val === '0') {
                return false;
            }
            return null;
        },
        async loadRecordFilterFields(recordTypeId) {
            if (!recordTypeId || (this.contentType != '19' && this.contentType != 19)) {
                this.availableFilterFields = [];
                return;
            }
            const token = document.querySelector('meta[name=\'csrf-token\']')?.getAttribute('content');
            try {
                const res = await fetch('/api/record-type-filter-fields?record_type_id=' + encodeURIComponent(recordTypeId), {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': token || ''
                    },
                    credentials: 'same-origin'
                });
                const data = await res.json();
                this.availableFilterFields = data.fields || [];
            } catch (e) {
                this.availableFilterFields = [];
            }
        },
        initRecordFilterFromServer() {
            const irf = this.initialRecordFilter;
            if (!irf || !irf.field_scriptid) {
                return;
            }
            this.selectedRecordFilterFieldScriptid = irf.field_scriptid;
            if (irf.field_type === 'boolean' && irf.values && irf.values.length > 0) {
                this.recordFilterBoolean = this.coerceRecordFilterBoolean(irf.values[0]);
            }
            if (irf.field_type === 'list' && Array.isArray(irf.values)) {
                this.recordFilterListValues = irf.values.map(v => v);
            }
        },
        buildRecordFilter() {
            if (this.contentType != '19' && this.contentType != 19) {
                return null;
            }
            if (!this.selectedRecordFilterFieldScriptid) {
                return null;
            }
            const f = this.getSelectedFilterField();
            if (!f) {
                return null;
            }
            if (f.field_type === 'boolean') {
                const b = this.coerceRecordFilterBoolean(this.recordFilterBoolean);
                if (b === null) {
                    return null;
                }
                return { field_scriptid: f.scriptid, field_type: 'boolean', values: [b] };
            }
            if (f.field_type === 'list') {
                if (!this.recordFilterListValues || this.recordFilterListValues.length === 0) {
                    return null;
                }
                return { field_scriptid: f.scriptid, field_type: 'list', list_key: f.list_key || '', values: this.recordFilterListValues.map(v => v) };
            }
            return null;
        },
        buildRecordFilterJson() {
            const obj = this.buildRecordFilter();
            return obj ? JSON.stringify(obj) : '';
        },
        typeChanged($id) {
            this.updateTypeOptions();
            if ($id == '19') {
                const firstId = this.typeOptions[0] ? this.typeOptions[0].id : null;
                if (firstId) {
                    this.selectRecordType = firstId;
                    $dispatch('setrefid', firstId);
                    this.loadRecordFilterFields(firstId);
                }
                this.selectedRecordFilterFieldScriptid = '';
                this.resetRecordFilterValues();
            } else {
                this.availableFilterFields = [];
                this.selectedRecordFilterFieldScriptid = '';
                this.resetRecordFilterValues();
            }
            $dispatch('contenttype', $id);
        },
        recTypeChanged($id) {
            $dispatch('setrefid', $id);
            this.selectedRecordFilterFieldScriptid = '';
            this.resetRecordFilterValues();
            this.loadRecordFilterFields($id);
        }
    }"

    x-init="
        updateTypeOptions(),
        $nextTick(async () => {
            $dispatch('contenttype', contentType);
            $dispatch('refid', selectRecordType);
            if (contentType == '19' || contentType == 19) {
                await loadRecordFilterFields(selectRecordType);
                initRecordFilterFromServer();
            }
        })
    "
>

    @if($showform)
        <form method="POST" id="recordForm" action="{{ $postroute }}" >
            @if(isset($record) && !$create)
            <input name="_method" type="hidden" value="PUT">
            @endif
            @csrf
            <input type="hidden" name="record_filter" id="record_filter" x-bind:value="buildRecordFilterJson()">
        @else
        {{-- <div> --}}
        @endif

        <div class="space-y-12">
            {{-- Form section --}}
            <div class="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3">
                <div>
                    <h2 class="text-base font-semibold leading-7 text-gray-900">General Information</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Configure your field settings for your form field.</p>
                </div>
                <div class=" bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2 ">
                    <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-12 px-4 py-6 sm:p-8">
                        <div class="sm:col-span-6">
                            <label for="title" class="input-label required">Name</label>
                            @if($showform)
                            <input type="text" name="title" id="title" class="input-style" required value="{{ isset($record) ? $record->title : '' }}" >
                            @else
                            <div  class="input-style-div">{{ isset($record) ? $record->title : '' }}</div>
                            @endif
                        </div>
                        <div class="sm:col-span-6">
                            <label for="label" class="input-label">Label</label>
                            @if($showform)
                            <input type="text" name="label" id="label" class="input-style" value="{{ isset($record) ? $record->label : '' }}" >
                            @else
                            <div  class="input-style-div">{{ isset($record) ? $record->label : '' }}</div>
                            @endif
                        </div>
                        <div class="sm:col-span-6">
                            <label for="content_type" class="input-label required">Type</label>
                            @if($showform)
                            <select name="content_type" id="content_type" class="input-style" required x-model="contentType"  @change="typeChanged($event.target.value)">
                                @foreach($contenttypes as $option)
                                <option value="{{ $option->id }}">{{ $option->name }}</option>
                                @endforeach
                            </select>
                            @else

                            <div  class="input-style-div">{{ isset($record) ? $record->contentType->name : '' }}</div>
                            @endif
                        </div>

                        <div class="sm:col-span-6">
                            <label for="scriptid" class="input-label">ID</label>
                            <div class="!flex  input-style @if(!$showform) disabled @endif">
                                @if($showform)
                                    @if(!$admin && $create)
                                    <span class="flex select-none items-center border px-3 text-gray-500 sm:text-sm bg-gray-100 border-gray-300 dark:border-gray-700 border-r-0 rounded-md !rounded-r-none">custfield</span>
                                    @endif
                                    <input type="text" name="scriptid" id="scriptid" value="{{ isset($record) ? $record->scriptid : '' }}" placeholder="Auto-generated if left blank" @if(!$showform || isset($record) && !$create) disabled @endif class="block flex-1 input-style  pl-3 text-gray-900 placeholder:text-gray-400 @if(!$admin && $create) !mt-0 !border-l-0 !rounded-l-none  @endif" >
                                @else
                                <div  class="input-style-div @if(!$admin && $create) rounded-l-none  @endif">
                                    {{ isset($record) ? $record->scriptid : '' }}
                                </div>
                                @endif
                            </div>
                       </div>

                        <div class="sm:col-span-6" >
                            <label for="selectedreferenceid" class="input-label">List/Record</label>
                            @if($showform)
                            <select name="selectedreferenceid" id="selectedreferenceid" class="input-style " x-bind:disabled="contentType != '13' && contentType != '19' && contentType != '15'" x-model="selectRecordType" @change="recTypeChanged($event.target.value)">
                                <template x-for="(item, index) in typeOptions" :key="index">
                                  <option :value="item.id" x-text="item.title" :selected="selectRecordType == item.id"></option>
                                </template>
                            </select>
                            @else
                                @if(isset($record) && ($record->content_type == '13' || $record->content_type == '19' || $record->content_type == '15'))
                                    @php
                                        if($record->content_type == '13' || $record->content_type == '15'){
                                            $referenceTitle = $listRecords->where('id', $record->selectedreferenceid)->first();
                                        }
                                        if($record->content_type == '19'){
                                            $referenceTitle = $recordTypes->where('id', $record->selectedreferenceid)->first();
                                        }
                                    @endphp
                                    @if($referenceTitle)
                                        <div class="input-style-div">{{ $referenceTitle->title }}</div>
                                    @endif
                                @endif
                            @endif
                        </div>

                        <div class="sm:col-span-12" x-show="contentType == '19' || contentType == 19" x-cloak>
                            <label class="input-label">Static record filter</label>
                            <p class="mt-1 mb-3 text-sm text-gray-600">Optional: limit selectable records to rows matching a boolean or list field on the referenced record type.</p>
                            @if($showform)
                            <div class="space-y-3 rounded-md border border-gray-200 bg-gray-50 p-4">
                                <div>
                                    <label for="record_filter_field" class="text-sm font-medium text-gray-700">Filter by field</label>
                                    <select id="record_filter_field" class="input-style mt-1" x-model="selectedRecordFilterFieldScriptid" @change="onRecordFilterFieldChange()">
                                        <option value="">No static filter</option>
                                        <template x-for="(rf, rfi) in availableFilterFields" :key="rfi">
                                            <option :value="rf.scriptid" x-text="rf.title + (rf.field_type === 'boolean' ? ' (boolean)' : ' (list)')"></option>
                                        </template>
                                    </select>
                                </div>
                                <div x-show="getSelectedFilterField() && getSelectedFilterField().field_type === 'boolean'">
                                    <span class="text-sm font-medium text-gray-700">Value</span>
                                    <div class="mt-2 flex gap-6">
                                        <label class="inline-flex items-center gap-2 text-sm">
                                            <input type="radio" name="record_filter_bool" class="checkbox-style" :value="true" x-model="recordFilterBoolean">
                                            True
                                        </label>
                                        <label class="inline-flex items-center gap-2 text-sm">
                                            <input type="radio" name="record_filter_bool" class="checkbox-style" :value="false" x-model="recordFilterBoolean">
                                            False
                                        </label>
                                    </div>
                                </div>
                                <div x-show="getSelectedFilterField() && getSelectedFilterField().field_type === 'list'">
                                    <span class="text-sm font-medium text-gray-700">List values (multi-select)</span>
                                    <div class="mt-2 max-h-48 space-y-2 overflow-y-auto rounded border border-gray-200 bg-white p-2">
                                        <template x-for="(li, lix) in (getSelectedFilterField() && getSelectedFilterField().list_items ? getSelectedFilterField().list_items : [])" :key="lix">
                                            <label class="flex cursor-pointer items-center gap-2 text-sm">
                                                <input type="checkbox" class="checkbox-style" :value="li.refid" x-model="recordFilterListValues">
                                                <span x-text="li.value"></span>
                                            </label>
                                        </template>
                                    </div>
                                </div>
                            </div>
                            @else
                                @if(isset($record) && $record->content_type == '19' && !empty($record->record_filter))
                                    @php
                                        $rf = $record->record_filter;
                                        $fieldScriptid = $rf['field_scriptid'] ?? '';
                                        $fieldLabel = \Illuminate\Support\Str::title(str_replace('_', ' ', $fieldScriptid));
                                    @endphp
                                    <div class="input-style-div text-sm">
                                        Field: {{ $fieldLabel }}
                                        @if(($rf['field_type'] ?? '') === 'boolean')
                                            @php $boolV = $rf['values'][0] ?? null; @endphp
                                            — {{ ($boolV === true || $boolV === 1 || $boolV === '1') ? 'True' : 'False' }}
                                        @elseif(($rf['field_type'] ?? '') === 'list')
                                            @php
                                                $listKey = $rf['list_key'] ?? null;
                                                $listLabels = [];
                                                if ($listKey && !empty($rf['values']) && is_array($rf['values'])) {
                                                    foreach ($rf['values'] as $ref) {
                                                        $li = \Domain\ListItems\Models\ListItem::query()
                                                            ->where('list_key', $listKey)
                                                            ->where(function ($q) use ($ref) {
                                                                $q->where('refid', $ref)->orWhere('refid', (string) $ref);
                                                            })
                                                            ->first();
                                                        $listLabels[] = $li ? $li->value : (string) $ref;
                                                    }
                                                } elseif (!empty($rf['values']) && is_array($rf['values'])) {
                                                    $listLabels = array_map('strval', $rf['values']);
                                                }
                                            @endphp
                                            — {{ implode(', ', $listLabels) }}
                                        @endif
                                    </div>
                                @elseif(isset($record) && $record->content_type == '19')
                                    <div class="input-style-div">No static filter</div>
                                @endif
                            @endif
                        </div>

                        <div class="sm:col-span-6">
                            <label for="description" class="input-label">Description</label>
                            <textarea name="description" id="description" rows="3" class="input-style" @if(!$showform) disabled @endif>{{ isset($record) ? $record->description : '' }}</textarea>
                        </div>

                        <div class="sm:col-span-6">
                        {{--     <div class="relative flex gap-x-3">
                                <div class="flex h-6 items-center">
                                    <input
                                        name="storevalue"
                                        id="storevalue"
                                        type="checkbox"
                                        x-model="storeValue"
                                        class="checkbox-style"
                                        @if(!$showform)
                                        disabled
                                        @endif
                                    >
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="storevalue" class="input-label">Store Value</label>
                                </div>
                            </div> --}}
                            <div class="relative flex gap-x-3">
                                <div class="flex h-6 items-center">
                                    <input
                                        name="showtable"
                                        id="showtable"
                                        type="checkbox"
                                        x-model="showTable"
                                        class="checkbox-style"
                                        @if(!$showform)
                                        disabled
                                        @endif
                                    >
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="showtable" class="input-label">Show on table</label>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- Form section --}}
            <div class="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3" >
                <div>
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Record Types</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Choose the record types you'd like this field applied to.</p>
                </div>
                <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
                    <div class="grid grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-12 px-4 py-6 sm:p-8">
                        @foreach($recordTypes as $option)
                            <div class="sm:col-span-6 md:col-span-4">
                                <div class="relative flex gap-x-3">
                                    <div class="flex h-6 items-center">
                                        <input
                                            id="recordtypes_{{$option->id}}"
                                            name="recordtypes[]"
                                            value="{{$option->id}}"
                                            type="checkbox"
                                            class="checkbox-style"
                                            x-bind:checked="selectedRecordTypes.includes({{$option->id}})"
                                            @if($showform)
                                            x-on:click="updateSelectedRecordTypes({{$option->id}})"

                                            @else
                                            disabled
                                            @endif
                                        >
                                    </div>
                                    <div class="text-sm leading-6">
                                        <label for="recordtypes_{{$option->id}}" class="font-medium text-gray-900">{{$option->title}}</label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        @if($showform)
                        <div class="sm:col-span-12 border-t pt-3 mt-3">
                            <div class="relative flex gap-x-3">
                                <div class="flex h-6 items-center">
                                    <input id="recordtypes_all" type="checkbox" class="checkbox-style" x-on:click="toggleAllCheckboxes()" x-bind:checked="selectAll">
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="recordtypes_all" class="font-medium text-gray-900">Select All</label>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Form section: Search Settings --}}
            @if($showSearchSettings)
            <div class="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3">
                <div>
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Search Settings</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Configure how this field participates in site-wide search.</p>
                </div>
                <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
                    <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-12 px-4 py-6 sm:p-8">
                        <div class="sm:col-span-4 flex items-center gap-2">
                            <input type="checkbox" id="index_in_search" name="index_in_search" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" @if(!$showform) disabled @endif @checked(old('index_in_search', $indexInSearch))>
                            <label for="index_in_search" class="input-label">Index in Search</label>
                        </div>
                        <div class="sm:col-span-4 flex items-center gap-2">
                            <input type="checkbox" id="embed_in_search" name="embed_in_search" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500" @if(!$showform) disabled @endif @checked(old('embed_in_search', $embedInSearch))>
                            <label for="embed_in_search" class="input-label">Embed</label>
                        </div>
                        <div class="sm:col-span-4">
                            <label for="search_weight" class="input-label">Weight</label>
                            <input type="number" id="search_weight" name="search_weight" class="input-style" min="0" max="100" placeholder="e.g. 3" value="{{ old('search_weight', $searchWeight) }}" @if(!$showform) disabled @endif>
                        </div>
                        <div class="sm:col-span-12 text-sm text-gray-500">
                            <span>Enable indexing to include this field in global search. Embedding is optional (cap 5). Weight adjusts relevance.</span>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- Form section --}}
            <div class="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3">
                <div>
                    <h2 class="text-base font-semibold leading-7 text-gray-900">Validation Rules</h2>
                    <p class="mt-1 text-sm leading-6 text-gray-600">Apply optional validation rules to your form field.</p>
                </div>
                <div class=" bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2 ">
                    <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-12 px-4 py-6 sm:p-8">
                        <div class="sm:col-span-3">
                            <div class="relative flex gap-x-3 ">
                                <div class="flex h-6 items-center">
                                    <input
                                    name="is_required"
                                    id="is_required"
                                    type="checkbox"
                                    x-model="required"
                                    class="checkbox-style"
                                    @if(!$showform)
                                    disabled
                                    @endif
                                    >
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="is_required" class="input-label">Is Required</label>
                                </div>
                            </div>
                            <div class="relative flex gap-x-3 mt-2" id="defaultcheckedWrapper" x-show="contentType == '1'">
                                <div class="flex h-6 items-center">
                                    <input
                                    name="defaultchecked"
                                    id="defaultchecked"
                                    x-model="defaultchecked"
                                    type="checkbox"
                                    class="checkbox-style"
                                    @if(!$showform)
                                    disabled
                                    @endif>
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="defaultchecked" class="input-label">Default Checked</label>
                                </div>
                            </div>
                            <div class="relative flex gap-x-3 mt-2" >
                                <div class="flex h-6 items-center">
                                    <input
                                    name="visibility"
                                    id="visibility"
                                    type="checkbox"
                                    class="checkbox-style"
                                    x-model="isVisible"
                                    @if(!$showform)
                                    disabled
                                    @endif>
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="visibility" class="input-label">Visible</label>
                                </div>
                            </div>
                        </div>
                        <div class="sm:col-span-6" id="defaultValuesWrapper">
                            <div class="grid gap-y-2">
                                <div>
                                    <label for="defaultvalue" class="input-label">Default Value</label>
                                    @if($showform)
                                    <input type="text" name="defaultvalue" id="defaultvalue" class="input-style" value="{{ isset($record) ? $record->defaultvalue : '' }}" >
                                    @else
                                    <input class="input-style-div" value="{{ isset($record) ? $record->defaultvalue : '' }}" disabled placeholder="" />
                                    @endif
                                </div>
                                <div>
                                    <label for="minvalue" class="input-label">Min Value</label>
                                    @if($showform)
                                    <input type="number" name="minvalue" id="minvalue" class="input-style" value="{{ isset($record) ? $record->minvalue : '' }}"  x-bind:disabled="contentType != '12' && contentType != '23'">
                                    @else
                                     <div class="input-style-div" >{{ isset($record) ? $record->minvalue : '' }}</div>
                                    @endif
                                </div>
                                <div>
                                    <label for="maxvalue" class="input-label">Max Value</label>

                                    @if($showform)
                                   <input type="number" name="maxvalue" id="maxvalue" class="input-style" value="{{ isset($record) ? $record->maxvalue : '' }}"  x-bind:disabled="contentType != '12' && contentType != '23'">
                                    @else
                                    <div class="input-style-div">{{ isset($record) ? $record->maxvalue : '' }}</div>
                                    @endif

                                </div>
                            </div>
                        </div>
                        <div class="sm:col-span-6">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sourcing (hidden for now) --}}
            {{-- <livewire:form-field.sourcing
                :showform="$showform"
                :selectRefField="isset($record) && $record->selectedreferencefield ? json_decode($record->selectedreferencefield)->id : 'null'"
            /> --}}
        </div>


    @if($showform)
        <div class="mt-6 flex items-center justify-end gap-x-6">
            @if(isset($record))
            <a href="{{ route('formfields.show', ['id' => $record->id, 'e' => 'f']) }}" class="text-sm font-semibold leading-6 text-gray-900">Cancel</a>
            @else
            <a href="{{ route('formfields.index') }}" class="text-sm font-semibold leading-6 text-gray-900">Cancel</a>
            @endif
            @if(isset($record))
                 @if($admin || !$admin && $record->id > 0)
                    @if($create)
                    <button type="submit" class="btn primary-btn" >Save</button>
                    @else
                    <button type="submit" class="btn primary-btn" >{{ isset($record) ? 'Save Updates' : 'Save' }}</button>
                    @endif
                    @if(!isset($record))
                    <button type="submit" class="btn primary-btn" id="saveAndNew">Save and Create New</button>
                    @endif
                @endif
            @else

                    @if($create)
                    <button type="submit" class="btn primary-btn" >Save</button>
                    @else
                    <button type="submit" class="btn primary-btn" >{{ isset($record) ? 'Save Updates' : 'Save' }}</button>
                    @endif
                    @if(!isset($record))
                    <button type="submit" class="btn primary-btn" id="saveAndNew">Save and Create New</button>
                    @endif

            @endif
        </div>
    </form>
    @else
    <div class="mt-6 flex items-center justify-end gap-x-6">
     {{--    @if(!$admin && $record->id < 0)
        <a href="{{ route('formfields.create', ['recordref' => $record->id]) }}" class="btn primary-btn">Customize</a>
        @else --}}
        @if($admin || !$admin && $record->id > 0)
        <a href="{{ route('formfields.show', ['id' => $record->id, 'e' => 't']) }}" class="btn primary-btn">Edit</a>
        @endif
    </div>

    @endif
</div>

<script>

    function toggleChecked(el) {
        var element = document.getElementById('defaultchecked');
        var defaultcheckedWrapper = document.getElementById('defaultcheckedWrapper');
        var defaultValuesWrapper = document.getElementById('defaultValuesWrapper');
        var defaultvalue = document.getElementById('defaultvalue');
        if (el.value == '1') {
            element.disabled = false;
            defaultvalue.disabled = true;
            defaultValuesWrapper.style.visibility = "hidden";
            defaultcheckedWrapper.style.visibility = "visible";
            defaultvalue.checked = false;
        } else {
            element.disabled = true;
            defaultvalue.disabled = false;
            defaultValuesWrapper.style.visibility = "visible";
            defaultcheckedWrapper.style.visibility = "hidden";
            defaultvalue.checked = false;
        }
    }

    function updateRules(el) {
        var targetIds = ['minvalue', 'maxvalue'];
        if (el.value !== '12') {
            targetIds.forEach(function(id) {
                var element = document.getElementById(id);
                if (element) {
                    element.disabled = true;
                    element.value = '';
                }
            });
        } else {
            targetIds.forEach(function(id) {
                var element = document.getElementById(id);
                if (element) {
                    element.disabled = false;
                }
            });
        }
    }

    // function typeChanged(el) {
        // updateRules(el);
        // toggleChecked(el);
    // }

    document.addEventListener('DOMContentLoaded', function() {
        // var selectElement = document.getElementById('content_type');
        // var selectedValue = selectElement.value;
        // updateRules(selectElement);
        // toggleListRecord(selectElement);
        // toggleChecked(selectElement);
    });
</script>