<div
    :class="showForm ? 'z-40' : 'z-10'"
    class="relative"
    x-data="{
        disableFilter: false,
        showForm: false,
        scriptid: '{{ $scriptid }}',
        filterid: '{{ isset($filterid) ? $filterid : '' }}',
        tablename: '{{ isset($tablename) ? $tablename : '' }}',
        {{-- filtervalue: '{{ isset($filtervalue) ? $filtervalue : '' }}', --}}
        inputValue: '{{ isset($selectedRecord->external_id) ? $selectedRecord->external_id : (isset($selectedRecord->id) ? $selectedRecord->id : '') }}',
        inputText: '{{ isset($selectedRecord->title) ? $selectedRecord->title : 'Select an option' }}',
        inputHref: '{{ isset($selectedRecord->id) ? $selectedRecord->id : '' }}',
        selectedValue: '{{ isset($value) ? $value : '' }}',
        selectedText: '{{ isset($value) && !empty($options) ? ($options->firstWhere('id', $value)['value'] ?? '') : 'Select an option' }}',

        toggleForm(state) {
            if (this.disableFilter) {
                return;
            }
            this.showForm = state;
        },

        updateForm() {
            this.inputValue = this.selectedValue;
            this.inputText = this.selectedText;
            this.showForm = false;
            $dispatch('updatefilteredrecord', { scriptid: '{{ $scriptid }}', value: this.selectedValue });
           {{--  document.cookie = `${this.scriptid}_value=${this.selectedValue}; path=/`;
            document.cookie = `${this.scriptid}_text=${this.selectedText}; path=/`; --}}
        },

        clearForm() {
            this.selectedValue = '';
            this.selectedText = '';
            this.inputValue = '';
            this.inputText = '';
        },

        setFilteredRecords(event) {
            if (this.filterid == event.detail.scriptid) {
                $wire.updateFilter(event.detail.scriptid, event.detail.value);
                this.inputText = '';
                this.inputValue = '';
            }
        },

        setSelectedValue(event) {
            if (event.detail[1] == this.scriptid) {
                this.$nextTick(() => {
                    if(event.detail[0]) {
                        if (event.detail[0]['refid']) {
                            this.selectedValue = event.detail[0]['refid'];
                            this.inputValue = event.detail[0]['refid'];
                        } else if (event.detail[0]['id']) {
                            this.selectedValue = event.detail[0]['id'];
                            this.inputValue = event.detail[0]['id'];
                        }
                        if (event.detail[0]['title']) {
                            this.selectedText = event.detail[0]['title'];
                            this.inputText = event.detail[0]['title'];
                        }
                    }
                });
            }
        },
        setFilterbyRecord(event) {
            if (this.scriptid == event.detail[1]) {
                this.disableFilter = true;
                $wire.updateSelected(event.detail[1], event.detail[0]);
            }
        },

        udpateSelectedRecord(event) {
            if (this.tablename === event.detail.tablename) {
                if (this.scriptid === event.detail.scriptid) {
                    $wire.updateSelected(event.detail.scriptid, event.detail.value);
                }
            }
        },
        initForm() {

        },
        setCookies() {
            const cookieValue = this.getCookie(`${this.scriptid}_value`);
            const cookieText = this.getCookie(`${this.scriptid}_text`);

            @if(!isset($value))
            if (!this.selectedValue && cookieValue) {
                this.selectedValue = cookieValue;
                this.inputValue = cookieValue;
            }
            if (!this.selectedText && cookieText) {
                this.selectedText = cookieText;
                this.inputText = cookieText;
            }
            @endif
        },
        getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
            return '';
        }
    }"

    x-init="initForm(), $nextTick(() => {
        $dispatch('selectedrecord', {{ isset($selectedRecord) ? json_encode($selectedRecord) : '' }});
    })"

    @updatefilteredrecord.window="setFilteredRecords($event)"
    @udpateselectedrecord.window="udpateSelectedRecord($event)"
    @setselectedrecord.window="setSelectedValue($event)"
    @setfilterbyrecord.window="setFilterbyRecord($event)"
>

    @if($form)

   @php
        $fieldName = isset($inputname) ? $inputname : $scriptid;
    @endphp

        @if($isfilter)
            <input type="hidden" name="{{ $fieldName }}" id="{{ $fieldName }}" x-model="inputValue"  {{ isset($required) && $required ? 'required' : '' }} >
        @else
            <input name="{{ $field['fieldname'] }}" id="{{ $field['fieldname'] }}" x-model="inputValue" {{ isset($required) && $required ? 'required' : '' }} class="absolute w-full border-none  opacity-0 pointer-events-none">

        @endif

        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity justify-center" aria-hidden="true" x-show="showForm" wire:ignore.self>
            <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-center justify-between px-4 py-3 border-b rounded-t dark:border-gray-600">
                            <h3 class="text-base font-semibold text-gray-900 dark:text-white">Search By Title</h3>
                            {{-- <div class="absolute right-0 top-0  pr-4 pt-4 sm:block"> --}}
                                <button type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" x-on:click="toggleForm(false)">
                                    <span class="sr-only">Close</span>
                                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            {{-- </div> --}}
                        </div>
                        <div class="px-4 pb-4 pt-4 sm:p-6">
                            <div >
                                <div class="flex align-center mb-2 relative">
                                    <div class="w-full">
                                        <input type="text" wire:model.live.debounce.300ms="filter" placeholder="Search..." class="input-style" key="modal-{{ $scriptid }}-{{ now() }}" />
                                    </div>
                                    <div class="cursor-pointer absolute right-3 top-3" x-show="selectedValue && selectedText">
                                        <div x-on:click="selectedValue = ''; selectedText = ''">Clear</div>
                                    </div>
                                </div>

                                <ul class="border border-gray-300 rounded-md w-full  max-h-72 overflow-auto">
                                    @if(!$previousUrl)
                                    <li class="cursor-pointer p-2 hover:bg-gray-100"
                                        :class="{'bg-blue-100': selectedValue === 'empty'}"
                                        x-on:click="selectedValue = 'empty'; selectedText = 'Empty'"
                                    >
                                        Empty
                                    </li>
                                    @endif
                                    @foreach ($options as $option)
                                        <li class="cursor-pointer p-2 hover:bg-gray-100"
                                            :class="{'bg-blue-100': selectedValue === '{{ $option['id'] }}'}"
                                            x-on:click="selectedValue = '{{ $option['id'] }}'; selectedText = '{{ $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" :disabled="{{ !$previousUrl }}" class="@if(!$previousUrl) disabled  @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('{{ $previousUrl }}')">Previous</button>
                                        </span>
                                        @if($nextUrl)
                                            @if($pageOf < $totalRecords)
                                        <span>
                                            <button type="button" class="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>
                                            @endif
                                        @endif
                                    </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>
                    </div>
                </div>
            </div>
        </div>
        <div
            class="input-action input-style-action @if ($scriptid === $pagetype) opacity-50 @endif"
            @if ($scriptid != $pagetype)
            x-on:click="toggleForm(true)"
            @endif
            x-text="inputText"
            :class="disableFilter ? 'opacity-50' : ''">
        >
        </div>

    @else
    {{-- {{ dd($field); }} --}}
        @if(isset($selectedRecord->id))
        <a href="{{ route(strtolower($field['references']) . '.show', ['id' => $selectedRecord->id]) }}" target="_blank" class="link"><div x-text="inputText"></div></a>
        @else
        <div x-text="inputText"></div>
        @endif
    @endif
</div>