<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">
                                        <input :name="`field[${field.id}][visibility]`" :id="`field[${field.id}][visibility]`" type="checkbox" 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">
                                        <input :name="`field[${field.id}][is_visible_to_client]`" :id="`field[${field.id}][is_visible_to_client]`" type="checkbox" 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">
                                        <input :name="`field[${field.id}][is_required]`" :id="`field[${field.id}][is_required]`" type="checkbox" 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">
                                        <input :name="`field[${field.id}][conditional_enabled]`" :id="`field[${field.id}][conditional_enabled]`" type="checkbox" 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>