<div x-data="{
        showform: {{ $showform ? 'true' : 'false' }},
        recordFields: [],
        recordFilters: [],
        inputText: '',
        loading: false,
        showForm: false,
        selectedFilterIndex: null,
        toggleForm(state) {
            this.showForm = state;
        },
        clearForm() {
            this.recordFilters[this.selectedFilterIndex].value = null;
            this.recordFilters[this.selectedFilterIndex].valueText = '';
            this.toggleForm(false);
        },
        updateForm() {
            this.inputValue = this.selectedValue;
            this.inputText = this.selectedText;
            this.showForm = false;
        },
        setSearchModal(value, index) {
            this.toggleForm(true);
            this.selectedFilterIndex = index;
            $wire.setSearchModal(value);
        },
        setRecordFilterFields(event) {
            if(event) {
                let fields = event.detail[0] || event.detail;
                const fieldArray = Object.values(fields);
                fieldArray.sort((a, b) => a.title.localeCompare(b.title));
                this.recordFields = fieldArray;
                
                // Initialize recordFilters for all filterable fields if not exists
                fieldArray.forEach(field => {
                    if (field.contentType === 'list' || field.contentType === 'free_form_text' || field.contentType === 'record' || field.contentType === 'check_box' || field.contentType === 'date' || field.contentType === 'date_time') {
                        if (!this.recordFilters.find(f => f.recordfield === field.scriptid)) {
                            this.recordFilters.push({
                                recordfield: field.scriptid,
                                show: false,
                                label: ''
                            });
                        }
                    }
                });
            }
        },
        selectRecord(id, value) {
            let filter = this.recordFilters[this.selectedFilterIndex];

            filter.value = id;
            filter.valueText = value;

            this.toggleForm(false);
            console.log(filter);
        },
        setFiltersOptions(event) {

        },
        setRecordFilters(event) {
            if (event.detail) {
                let filters = event.detail.map(f => {
                    return {
                        ...f,
                        value: Array.isArray(f.value)
                            ? f.value
                            : f.value
                                ? [f.value]
                                : [],
                        valueText: f.valueText ?? [],
                        options: f.options ?? []  // initialize options
                    };
                });

                this.recordFilters = filters;

                // Only initialize filters for all filterable fields if this is NOT a saved search edit
                // For saved search editing, we only want to show the filters that are already defined
                if (this.recordFields.length > 0 && {{ $savedsearch ? 'false' : 'true' }}) {
                    this.recordFields.forEach(field => {
                        if (field.contentType === 'list' || field.contentType === 'free_form_text' || field.contentType === 'record' || field.contentType === 'check_box' || field.contentType === 'date' || field.contentType === 'date_time') {
                            if (!this.recordFilters.find(f => f.recordfield === field.scriptid)) {
                                this.recordFilters.push({
                                    recordfield: field.scriptid,
                                    show: false,
                                    label: ''
                                });
                            }
                        }
                    });
                }

                // Fetch list options for filters of type 'list'
                this.recordFilters.forEach(async (filter) => {
                    if (filter.content_type === 'list' && filter.selectedreferenceid) {
                        const options = await $wire.fetchListOptions(filter.selectedreferenceid);
                        filter.options = options;
                    }
                });

                this.$dispatch('table-filters', this.recordFilters);
            }
        },
        updateFilter(filter, value) {
            const fieldsArray = Object.values(this.recordFields);
            const selectedField = fieldsArray.find(field => field.id === value);
            if (selectedField) {
                filter.recordfield = selectedField.scriptid;
                filter.content_type = selectedField.contentType;
                filter.selectedreferenceid = selectedField.refId;

                if (filter.content_type === 'list') {
                    $wire.fetchListOptions(selectedField.refId).then(options => {
                        filter.options = options;
                    });
                } else if (filter.content_type === 'record') {
                     filter.references = selectedField.references;
                     filter.filterid = selectedField.scriptid;
                } else {
                    filter.options = [];
                    // Dispatch an event to update the filters
                    this.$dispatch('recfilters', this.recordFilters);
                }
            }
        },
        addFilter() {
            this.recordFilters.push({
                recordfield: '',
                show: false,
                label: '',
                value: [],
                references: '',
                valueText: []
            });
        },
        removeFilter(index) {
            this.recordFilters.splice(index, 1);
        },
        getFilter(scriptid) {
            return this.recordFilters.find(filter => filter.recordfield === scriptid) || { show: false, label: '' };
        },
        getCheckedFilters() {
            if (!Array.isArray(this.recordFields)) {
                return [];
            }
            return this.recordFields.filter(field => {
                return (field.contentType === 'list' || field.contentType === 'free_form_text' || field.contentType === 'record' || field.contentType === 'check_box' || field.contentType === 'date' || field.contentType === 'date_time') && this.getFilter(field.scriptid).show;
            });
        },
        getUncheckedFilters() {
            if (!Array.isArray(this.recordFields)) {
                return [];
            }
            let unchecked = this.recordFields.filter(field => {
                return (field.contentType === 'list' || field.contentType === 'free_form_text' || field.contentType === 'record' || field.contentType === 'check_box' || field.contentType === 'date' || field.contentType === 'date_time') && !this.getFilter(field.scriptid).show;
            });
            // Sort alphabetically by title
            return unchecked.sort((a, b) => {
                const titleA = (a.title || '').toLowerCase();
                const titleB = (b.title || '').toLowerCase();
                return titleA.localeCompare(titleB);
            });
        },
        init() {
            this.recordFilters.forEach(filter => {
                if (filter.fieldId) {
                    this.updateFilter(filter, filter.fieldId);
                }
            });
        }
    }"
    @recfields.window="setRecordFilterFields($event)"
    @recfilters.window="setRecordFilters($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 && !$savedsearch)<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">Column</th>
                            @if(!$savedsearch)
                            <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">Custom Label</th>
                            @else
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Value</th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" x-show="showform">Actions</th>
                            @endif
                        </tr>
                    </thead>
                    
                    @if($savedsearch)
                    <tbody class="divide-y divide-gray-200 bg-white"  @if($showform) x-sort.ghost  x-sort:config="{ handle: '[x-sort\\:handle]' }" @endif>
                        <template x-for="(filter, index) in recordFilters">
                            <tr>
                                <td class="whitespace-nowrap py-3 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                                    <select :name="`filters[${index}][recordfield]`" class="input-style" x-bind:disabled="!showform" @change="updateFilter(filter, $event.target.value)">
                                        <option value="">Select Field</option>
                                        <template x-for="field in recordFields" :key="field.id">
                                            <option :value="field.id" x-text="field.title" :selected="field.id === filter.recordfield" x-show="field.contentType === 'list' || field.contentType === 'free_form_text' || field.contentType === 'record'"></option>
                                        </template>
                                    </select>
                                </td>

                                <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500">
                                    <template x-if="filter.content_type === 'free_form_text'">
                                        <input type="text" :name="`filters[${index}][value]`" x-model="filter.value" class="input-style" x-bind:disabled="!showform" required>
                                    </template>
                                    <template x-if="filter.content_type === 'list'">
                                        <select
                                            multiple
                                            :name="`filters[${index}][value][]`"
                                            x-init="
                                                filter.value = Array.isArray(filter.value) ? filter.value : (filter.value ? [filter.value] : []);
                                                $nextTick(() => {
                                                    for (const option of $el.options) {
                                                        option.selected = filter.value.includes(option.value);
                                                    }
                                                });
                                            "
                                            @change="
                                                filter.value = Array.from($el.selectedOptions).map(opt => opt.value);
                                            "
                                            class="input-style"
                                            :disabled="!showform"
                                        >
                                            <option value="empty">-Empty-</option>
                                            <template x-for="(option, key) in filter.options" :key="key">
                                                <option :value="option.refid" x-text="option.value"></option>
                                            </template>
                                        </select>
                                    </template>


                                    <template x-if="filter.content_type === 'record'">
                                        <div class="">
                                            <div  x-show="showform">
                                                <input type="text" :name="`filters[${index}][value]`" x-model="filter.value" class="hidden">
                                                <div class=" input-action input-style-action top-0 !mt-0"
                                                    wire:key="`filters[${index}][value]`"
                                                    x-on:click="setSearchModal(filter, index)"  x-show="showform">
                                                    <span x-text="filter.valueText"></span>
                                                </div>
                                            </div>
                                            <div  x-show="!showform">
                                                <span x-text="filter.valueText"></span>
                                            </div>
                                        </div>
                                    </template>
                                </td>

                                <td class="whitespace-nowrap px-3 py-3 text-sm text-gray-500" x-show="showform">
                                    <button type="button" @click="removeFilter(index)" class="text-red-600 hover:text-red-900">Remove</button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                    @else
                    <!-- Checked/Visible Filters Section -->
                    <tbody class="divide-y divide-gray-200 bg-white"  @if($showform) x-sort.ghost  x-sort:config="{ handle: '[x-sort\\:handle]' }" @endif>
                        <template x-for="(field, index) in getCheckedFilters()" :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-1 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                                    <span x-text="field.title"></span>
                                    <input
                                        type="text"
                                        :name="`filters[${field.scriptid}][recordfield]`"
                                        class="hidden"
                                        :value="field.scriptid"
                                    >
                                </td>
                                <td class="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
                                    <input
                                        type="hidden"
                                        :name="`filters[${field.scriptid}][show]`"
                                        value="false"
                                    >
                                    <input
                                        type="checkbox"
                                        :name="`filters[${field.scriptid}][show]`"
                                        class="checkbox-style"
                                        x-bind:disabled="!showform"
                                        value="true"
                                        x-model="getFilter(field.scriptid).show"
                                    >
                                </td>
                                <td class="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
                                    <input
                                        type="text"
                                        :name="`filters[${field.scriptid}][label]`"
                                        class="input-style"
                                        x-bind:disabled="!showform"
                                        x-model="getFilter(field.scriptid).label"
                                    >
                                </td>
                            </tr>
                        </template>
                    </tbody>

                    <!-- Separator Row -->
                    <tbody x-show="getUncheckedFilters().length > 0" class="bg-gray-100">
                        <tr>
                            <td :colspan="showform ? 4 : 3" class="px-6 py-3 text-sm font-semibold text-gray-600 border-t-2 border-b-2 border-gray-300">
                                Hidden Filters (Alphabetical)
                            </td>
                        </tr>
                    </tbody>

                    <!-- Unchecked/Hidden Filters Section (Alphabetical, No Sorting) -->
                    <tbody class="divide-y divide-gray-200 bg-gray-50">
                        <template x-for="(field, index) in getUncheckedFilters()" :key="field.id">
                            <tr class="bg-gray-50">
                                @if($showform)
                                <td class="max-w-5">
                                    <!-- No drag handle for unchecked items -->
                                </td>
                                @endif
                                <td class="whitespace-nowrap py-1 pl-4 pr-3 text-sm font-medium text-gray-600 sm:pl-6">
                                    <span x-text="field.title"></span>
                                    <input
                                        type="text"
                                        :name="`filters[${field.scriptid}][recordfield]`"
                                        class="hidden"
                                        :value="field.scriptid"
                                    >
                                </td>
                                <td class="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
                                    <input
                                        type="hidden"
                                        :name="`filters[${field.scriptid}][show]`"
                                        value="false"
                                    >
                                    <input
                                        type="checkbox"
                                        :name="`filters[${field.scriptid}][show]`"
                                        class="checkbox-style"
                                        x-bind:disabled="!showform"
                                        value="true"
                                        x-model="getFilter(field.scriptid).show"
                                    >
                                </td>
                                <td class="whitespace-nowrap px-3 py-1 text-sm text-gray-500">
                                    <input
                                        type="text"
                                        :name="`filters[${field.scriptid}][label]`"
                                        class="input-style"
                                        x-bind:disabled="!showform"
                                        x-model="getFilter(field.scriptid).label"
                                    >
                                </td>
                            </tr>
                        </template>
                    </tbody>
                    @endif
                </table>
                @if($showform && $savedsearch)
                <div class="p-3">
                    <button type="button" @click="addFilter" class="btn primary-btn sm">Add Filter</button>
                </div>
                @endif
            </div>
        </div>
    </div>

<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity justify-center z-40" aria-hidden="true" x-show="showForm" >
    <div class="fixed inset-0 z-20 ">
        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
            <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 w-full sm:max-w-lg">
                <div class="flex items-start justify-between px-6 py-4 rounded-t border-b">
                    <h3 class="text-lg font-normal text-gray-500 dark:text-gray-400">
                        Search Records
                    </h3>
                    <button type="button"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
                        x-on:click="toggleForm(false)">
                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                @if(strlen($filter) > 0 || $recOptions)
                <div class="px-4 pb-4 sm:p-6 space-y-2 md:space-y-4" >
                    <div >
                        <input type="text" wire:model.live.debounce.300ms="filter" placeholder="Search..." class="input-style" id="searchinput"  />
                    </div>
                    @if($searchReferences == 'Employee')
                    <div class="relative ">
                        <button class="btn btn-primary  w-full" x-on:click.prevent="selectRecord('-99', 'Current employee')">Filter by current employee</button>
                    </div>
                    @endif
                    <div >
                        <div class="flex align-center">
                            @if(isset($selectedText))
                            <div class="cursor-pointer">
                                <div>Clear</div>
                            </div>
                            @endif
                        </div>

                        <ul class="border border-gray-300 rounded-md w-full  max-h-72 overflow-auto">
                            @if(!$previousUrl)
                            <li wire:key="empty-option" class="cursor-pointer p-2 hover:bg-gray-100"
                                @click="selectRecord('empty', 'Empty')">
                                Empty
                            </li>
                            @endif
                            @foreach ($recOptions as $option)
                                <li wire:key="option-{{ $option['id'] }}" class="cursor-pointer p-2 hover:bg-gray-100"
                                    @click="selectRecord('{{ $option['id'] }}', @js($option['value']))">
                                    {{ $option['value'] }}
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="mt-5 sm:mt-4 sm:flex space-x-3 justify-between">
                        <div class="flex space-x-3">
                            <div class="flex space-x-3">
                                <span>
                                    <button
                                        type="button"
                                        @if(!$previousUrl) disabled @endif
                                        class="{{ !$previousUrl ? 'disabled pointer-events-none opacity-50' : '' }} mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
                                        wire:click="updatePage('{{ $previousUrl }}')"
                                    >
                                        Previous
                                    </button>
                                </span>
                                <span>
                                    <button type="button" @if($pageOf > $totalRecords) disabled @endif class="@if($pageOf > $totalRecords) disabled pointer-events-none opacity-50 @endif mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" wire:click="updatePage('{{ $nextUrl }}')">Next</button>
                                </span>
                            </div>
                            <div class="pag-count flex text-sm text-gray-500 items-center">
                                @if($pageOf < $totalRecords)
                                {{ $pageStart }} - {{ $pageOf }} of {{ $totalRecords }}
                                @else
                                {{ $pageStart }} - {{ $totalRecords }} of {{ $totalRecords }}
                                @endif
                            </div>
                        </div>
                        <div class="flex space-x-3 ">
                            <button type="button" class="btn btn-outline sm !px-4" x-on:click="clearForm()">Clear</button>
                            {{-- <button type="button" class="btn btn-primary sm !px-4" x-on:click="updateForm()">Set</button> --}}
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

</div>