<div x-data="{
    showform: {{ $showform ? 'true' : 'false' }},
    fieldGroups: [],
    recordFields: [],
    editingConditional: null,
    conditionalOverlay: false,
    tempConditionalField: null,
    tempConditionalValue: null,
    setRecordFields(event) {
        if(event.detail[0][0]) {
            this.recordFields = event.detail[0];
        } else {
            this.recordFields = event.detail;
        }
    },
    setGroupFields(event) {
        this.fieldGroups = event.detail;
    },
    getSortedFields(groupId) {
        // Filter fields by group
        let filtered = this.recordFields.filter(field =>
            (field.group == groupId || (field.group === null && groupId === -1)) && field.title
        );
        // Sort: visible (checked) items first, then hidden (unchecked) items
        return filtered.sort((a, b) => {
            if (a.visibility === b.visibility) return 0;
            return a.visibility ? -1 : 1;
        });
    },
    getConditionalFields() {
        // Get all fields that can be used for conditional logic (list or check_box content types)
        return this.recordFields.filter(field =>
            field.contentType === 'list' || field.contentType === 'check_box'
        );
    },
    getConditionalFieldType(fieldId) {
        const condField = this.recordFields.find(f => f.id === fieldId);
        return condField ? condField.contentType : null;
    },
    getConditionalFieldOptions(fieldId) {
        const condField = this.recordFields.find(f => f.id === fieldId);
        // Return the list_options if they exist, otherwise empty array
        return condField && condField.list_options ? condField.list_options : [];
    },
    openConditionalEditor(field) {
        this.editingConditional = field;
        this.tempConditionalField = field.conditional_field || null;
        this.tempConditionalValue = field.conditional_value || null;
        this.conditionalOverlay = true;
    },
    closeConditionalEditor() {
        this.conditionalOverlay = false;
        this.editingConditional = null;
        this.tempConditionalField = null;
        this.tempConditionalValue = null;
    },
    saveConditionalCriteria() {
        if (this.editingConditional) {
            this.editingConditional.conditional_field = this.tempConditionalField;
            this.editingConditional.conditional_value = this.tempConditionalValue;
        }
        this.closeConditionalEditor();
    },
    updateTempConditionalField(fieldId) {
        this.tempConditionalField = fieldId;
        this.tempConditionalValue = null; // Reset value when field changes
    },
    updateTempConditionalValue(value) {
        this.tempConditionalValue = value;
    },
    getConditionalFieldDisplayName(fieldId) {
        const condField = this.recordFields.find(f => f.id === fieldId);
        return condField ? condField.title : fieldId;
    },
    getConditionalValueDisplay(field) {
        if (!field.conditional_field || !field.conditional_value) return '';

        const condField = this.recordFields.find(f => f.id === field.conditional_field);
        if (!condField) return '';

        if (condField.contentType === 'check_box') {
            return field.conditional_value === 'true' ? 'True' : 'False';
        } else if (condField.contentType === 'list') {
            if (Array.isArray(field.conditional_value)) {
                // Get the labels for selected values
                const options = this.getConditionalFieldOptions(field.conditional_field);
                const selectedLabels = field.conditional_value.map(value => {
                    const option = options.find(opt => opt.value === value);
                    return option ? option.label : value;
                });
                return selectedLabels.join(', ');
            }
            return field.conditional_value;
        }

        return field.conditional_value;
    },
    clearConditionalCriteria(field) {
        field.conditional_field = null;
        field.conditional_value = null;
    }
}" @groups.window="setGroupFields($event)" @recfields.window="setRecordFields($event)">
    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5">
                <table class="min-w-full divide-y divide-gray-300">
                    <thead class="bg-gray-50">
                        <tr>
                            @if($showform)
                            <th scope="col"></th>@endif
                            <th scope="col"
                                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Label
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Show</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Visible to
                                Clients</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Required
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Display
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Field
                                Group</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                Conditional</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                                Conditional Criteria</th>
                        </tr>
                    </thead>

                    <template x-for="fieldGroup in fieldGroups" :key="fieldGroup.id">
                        <tbody class="divide-y divide-gray-200 bg-white" @if($showform) x-sort.ghost
                            x-sort-group="`group-${fieldGroup.id}`" x-sort:config="{ handle: '[x-sort\\:handle]' }"
                        @endif>
                            <template x-for="field in getSortedFields(fieldGroup.id)" :key="field.id">
                                <tr x-sort:item class="bg-white">
                                    @if($showform)
                                        <td class="max-w-5 cursor-grab active:cursor-grabbing" x-sort:handle>
                                            <div class="flex justify-center">
                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                        d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
                                                </svg>
                                            </div>
                                        </td>
                                    @endif
                                    <td
                                        class="whitespace-nowrap py-3 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                                        <input x-show="showform" :name="`field[${field.id}][refId]`"
                                            :value="field.refId ? field.refId : ''" hidden readonly>
                                        <input x-show="showform" :name="`field[${field.id}][refField]`"
                                            :value="field.refId ? field.refField : ''" hidden readonly>
                                        <input x-show="showform" :name="`field[${field.id}][id]`" :value="field.id"
                                            hidden readonly>
                                        <input x-show="showform" :name="`field[${field.id}][title]`"
                                            :value="field.title" hidden readonly>
                                        <input x-show="showform" :name="`field[${field.id}][contenttype]`"
                                            :value="field.contentType" hidden readonly>
                                        <div x-text="field.title"></div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">
                                        <template x-if="showform">
                                            <x-checkbox x-bind:name="`field[${field.id}][visibility]`"
                                                x-bind:id="`field[${field.id}][visibility]`" x-model="field.visibility"
                                                class="checkbox-style" />
                                        </template>
                                        <template x-if="!showform">
                                            <span x-show="field.visibility"
                                                class="text-green-600 font-bold text-lg">✓</span>
                                            <span x-show="!field.visibility"
                                                class="text-red-600 font-bold text-lg">✗</span>
                                        </template>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">
                                        <template x-if="showform">
                                            <x-checkbox x-bind:name="`field[${field.id}][is_visible_to_client]`"
                                                x-bind:id="`field[${field.id}][is_visible_to_client]`"
                                                x-model="field.is_visible_to_client" class="checkbox-style" />
                                        </template>
                                        <template x-if="!showform">
                                            <span x-show="field.is_visible_to_client"
                                                class="text-green-600 font-bold text-lg">✓</span>
                                            <span x-show="!field.is_visible_to_client"
                                                class="text-red-600 font-bold text-lg">✗</span>
                                        </template>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">
                                        <template x-if="showform">
                                            <x-checkbox x-bind:name="`field[${field.id}][is_required]`"
                                                x-bind:id="`field[${field.id}][is_required]`"
                                                x-model="field.is_required" class="checkbox-style" />
                                        </template>
                                        <template x-if="!showform">
                                            <span x-show="field.is_required"
                                                class="text-green-600 font-bold text-lg">✓</span>
                                            <span x-show="!field.is_required"
                                                class="text-red-600 font-bold text-lg">✗</span>
                                        </template>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">
                                        <select :name="`field[${field.id}][display]`"
                                            :id="`field[${field.id}][display]`"
                                            :class="showform ? 'input-style' : 'input-style-div'" x-show="showform"
                                            x-model="field.display" x-bind:disabled="!showform">
                                            <option value="1">Normal</option>
                                            <option value="2">Disabled</option>
                                        </select>
                                        <div x-show="!showform" class="input-style-div">
                                            <span x-text="field.display == 1 ? 'Normal' : 'Disabled'"></span>
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">
                                        <select :name="`field[${field.id}][group]`" :id="`field[${field.id}][group]`"
                                            class="input-style" x-model="field.group" x-bind:disabled="!showform">
                                            <template x-for="fieldGroupItem in fieldGroups" :key="fieldGroupItem.id">
                                                <option :value="fieldGroupItem.id" x-text="fieldGroupItem.label"
                                                    :selected="fieldGroupItem.id == (field.group === null ? -1 : field.group)">
                                                </option>
                                            </template>
                                        </select>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">
                                        <template x-if="showform">
                                            <x-checkbox x-bind:name="`field[${field.id}][conditional_enabled]`"
                                                x-bind:id="`field[${field.id}][conditional_enabled]`"
                                                x-model="field.conditional_enabled" class="checkbox-style" />
                                        </template>
                                        <template x-if="!showform">
                                            <span x-show="field.conditional_enabled"
                                                class="text-green-600 font-bold text-lg">✓</span>
                                            <span x-show="!field.conditional_enabled"
                                                class="text-red-600 font-bold text-lg">✗</span>
                                        </template>

                                        <!-- Hidden inputs to store the values -->
                                        <input x-show="showform" :name="`field[${field.id}][conditional_field]`"
                                            :value="field.conditional_field || ''" hidden>
                                        <template
                                            x-if="field.conditional_value && Array.isArray(field.conditional_value)">
                                            <template x-for="(val, idx) in field.conditional_value" :key="idx">
                                                <input :name="`field[${field.id}][conditional_value][]`" :value="val"
                                                    hidden>
                                            </template>
                                        </template>
                                        <template
                                            x-if="field.conditional_value && !Array.isArray(field.conditional_value)">
                                            <input :name="`field[${field.id}][conditional_value]`"
                                                :value="field.conditional_value" hidden>
                                        </template>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">
                                        <template x-if="field.conditional_enabled">
                                            <div class="flex items-center gap-2">
                                                <template x-if="field.conditional_field && field.conditional_value">
                                                    <div class="">
                                                        <span
                                                            x-text="getConditionalFieldDisplayName(field.conditional_field)"></span>
                                                        <span class="text-gray-400 mx-1">=</span>
                                                        <span x-text="getConditionalValueDisplay(field)"
                                                            class="font-medium"></span>
                                                    </div>
                                                </template>
                                                <template x-if="!field.conditional_field || !field.conditional_value">
                                                    <span class="text-gray-400 text-xs">Not set</span>
                                                </template>
                                                <template x-if="showform">
                                                    <button type="button" @click="openConditionalEditor(field)"
                                                        class="inline-flex items-center px-2 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                            class="w-3 h-3 mr-1">
                                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                                        </svg>
                                                        Edit
                                                    </button>
                                                </template>
                                            </div>
                                        </template>
                                        <template x-if="!field.conditional_enabled">
                                            <span class="text-gray-400">-</span>
                                        </template>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </template>
                </table>
            </div>
        </div>
    </div>

    <!-- Conditional Editor Overlay -->
    <div x-show="conditionalOverlay" x-cloak class="fixed inset-0 z-50 overflow-y-auto"
        @keydown.escape.window="closeConditionalEditor()" style="display: none;">
        <!-- Backdrop -->
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeConditionalEditor()"></div>

        <!-- Modal -->
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full" @click.away="closeConditionalEditor()">
                <!-- Header -->
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 rounded-t-lg">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900">
                            Edit Conditional Criteria
                        </h3>
                        <button @click="closeConditionalEditor()" type="button"
                            class="text-gray-400 hover:text-gray-500">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <template x-if="editingConditional">
                        <p class="mt-1 text-sm text-gray-500">
                            Setting conditional logic for: <span class="font-medium text-gray-900"
                                x-text="editingConditional.title"></span>
                        </p>
                    </template>
                </div>

                <!-- Body -->
                <div class="px-6 py-4 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Show this field when:
                        </label>
                        <select x-model="tempConditionalField" @change="updateTempConditionalField($event.target.value)"
                            class="input-style w-full block rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
                            <option value="">Select a field...</option>
                            <template x-for="condField in getConditionalFields()" :key="condField.id">
                                <option :value="condField.id" x-text="condField.title"></option>
                            </template>
                        </select>
                    </div>

                    <template x-if="tempConditionalField">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Equals:
                            </label>

                            <!-- Checkbox field: True/False dropdown -->
                            <template x-if="getConditionalFieldType(tempConditionalField) === 'check_box'">
                                <select x-model="tempConditionalValue"
                                    class="input-style w-full block rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
                                    <option value="">Select a value...</option>
                                    <option value="true">True</option>
                                    <option value="false">False</option>
                                </select>
                            </template>

                            <!-- List field: Multi-select with options -->
                            <template x-if="getConditionalFieldType(tempConditionalField) === 'list'">
                                <div>
                                    <select x-init="if (!Array.isArray(tempConditionalValue)) tempConditionalValue = []"
                                        multiple size="5"
                                        @change="updateTempConditionalValue(Array.from($event.target.selectedOptions).map(option => option.value))"
                                        class="input-style w-full block rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm">
                                        <template x-for="option in getConditionalFieldOptions(tempConditionalField)"
                                            :key="option.value">
                                            <option :value="option.value"
                                                :selected="Array.isArray(tempConditionalValue) && tempConditionalValue.includes(option.value)"
                                                x-text="option.label">
                                            </option>
                                        </template>
                                    </select>
                                    <p class="text-xs text-gray-500 mt-2">Hold Ctrl/Cmd to select multiple options</p>
                                </div>
                            </template>
                        </div>
                    </template>

                    <template x-if="!tempConditionalField">
                        <div class="bg-blue-50 border border-blue-200 rounded-md p-3">
                            <p class="text-sm text-blue-800">
                                Select a field above to set conditional criteria. This field will only be shown when the
                                selected field meets your criteria.
                            </p>
                        </div>
                    </template>
                </div>

                <!-- Footer -->
                <div
                    class="bg-gray-50 px-6 py-4 border-t border-gray-200 rounded-b-lg flex justify-between items-center">
                    <template x-if="editingConditional && editingConditional.conditional_field">
                        <button @click="clearConditionalCriteria(editingConditional); closeConditionalEditor()"
                            type="button"
                            class="inline-flex items-center px-3 py-2 border border-red-300 shadow-sm text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-4 h-4 mr-1">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                            </svg>
                            Clear Criteria
                        </button>
                    </template>
                    <div x-show="!editingConditional || !editingConditional.conditional_field"></div>

                    <div class="flex gap-2">
                        <button @click="closeConditionalEditor()" type="button"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            Cancel
                        </button>
                        <button @click="saveConditionalCriteria()" type="button"
                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                            Save
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
</div>