<div
    x-data="{
        formid: @entangle('formId'),
        loading: false,
        showForm: false,
        errorShown: false,
        inputText: '',
        drawerId: @entangle('drawer'),
        tableId: '{{ $tablename }}',
        toggleForm(state) {
            this.showForm = state;
        },
        updateForm() {
            this.inputValue = this.selectedValue;
            this.inputText = this.selectedText;
            this.showForm = false;
        },
        clearForm() {
            this.selectedValue = '';
            this.selectedText = '';
            this.inputValue = '';
            this.inputText = '';
        },
        toggleLoading() {
            this.loading = true;
        },
        updateFormId() {
            $wire.updateFormId(this.formid);
        },
        init() {
            this.watchFormValues();
        },
        watchFormValues() {
            const form = document.getElementById('recordForm_{{$recordtypestring}}_{{$tablename}}');
            const fields = form.querySelectorAll('[data-condition-field]');

            this.evaluateFieldVisibility(fields, form);

            form.addEventListener('input', () => {
                this.evaluateFieldVisibility(fields, form);
            });
        },

        evaluateFieldVisibility(fields, form) {
            fields.forEach(field => {
                const conditionField = field.dataset.conditionField;
                const conditionValue = field.dataset.conditionValue;
                const condition = field.dataset.conditionCondition;
                const target = form.querySelector(`[name='${conditionField}']`);

                if (target) {
                    let targetValue = target.value;
                    let shouldShow = false;
                    if (condition === 'equals') {
                        shouldShow = targetValue === conditionValue;
                    } else if (condition === 'not_equals') {
                        shouldShow = targetValue !== conditionValue;
                    }

                    field.querySelectorAll('input, select, textarea, button').forEach(input => {
                        input.disabled = !shouldShow;
                    });
                }
            });
        },
        closeForm(event) {
            this.showForm = false;
            this.loading = false;

        },
        selectRecord(id, value) {
            $wire.selectRecord(id, value);
        },
        setSearchModal(value) {
            this.toggleForm(true);
            $wire.setSearchModal(value);
        },
        createRecord() {
            let form = document.getElementById('recordForm_{{$recordtypestring}}_{{$tablename}}');
            const inactiveInputs = form.querySelectorAll('.isinactive');
            if (inactiveInputs.length > 0) {
                alert('Some fields are inactive. Please review them before submitting.');
                return;
            }

            let formData = new FormData(form);

            let serializedData = {};
            const nestedFields = {};

            for (const [key, value] of formData.entries()) {
                if (key in serializedData) {
                    if (!Array.isArray(serializedData[key])) {
                        serializedData[key] = [serializedData[key]];
                    }
                    serializedData[key].push(value);
                } else if (key.includes('[') && key.includes(']')) {
                    const match = key.match(/^(.+?)\[(.+?)\]$/);
                    if (match) {
                        const parentKey = match[1];
                        const childKey = match[2];

                        if (!nestedFields[parentKey]) {
                            nestedFields[parentKey] = {};
                        }

                        if (!nestedFields[parentKey][childKey]) {
                            if (Array.isArray(value)) {
                                nestedFields[parentKey][childKey] = value.map(Number).join(',');  // Convert array to comma-separated string
                            } else {
                                nestedFields[parentKey][childKey] = value;
                            }
                        } else {
                            if (Array.isArray(value)) {
                                nestedFields[parentKey][childKey] = nestedFields[parentKey][childKey] + ',' + value.map(Number).join(',');
                            } else {
                                nestedFields[parentKey][childKey] += ',' + value;
                            }
                        }
                    }

                } else {
                    serializedData[key] = value;
                }
            }

            serializedData = { ...serializedData, ...nestedFields };

            this.loading = true;
            $wire.createRecord(serializedData, this.string);
        },
        recordCreated(event) {
            this.loading = false;
            var dismissButton = document.querySelector(`[data-drawer-dismiss='${this.drawerId}']`);

            if (dismissButton) {
                dismissButton.click();
            }

            var record = event.detail[0];
            var recordType = event.detail[1];
            var drawer = event.detail[3];

            if(drawer === this.drawerId) {
                if(recordType == 'Subtask') {
                    if (record.record && record.record.projecttask) {
                        $wire.getInlineRecords(record.record.projecttask, recordType);
                    }
                }
                if(recordType == 'Assignee') {
                    if (record.record && record.record.projecttask) {
                        $wire.getInlineRecords(record.record.projecttask, recordType);
                    }
                }
            }
        },
        recordError(event) {
            if(event.detail[1] == this.string) {
                if (!this.errorShown) {
                    this.errorShown = true;
                    this.loading = false;
                    var error = event.detail[0];
                    alert(error);

                    setTimeout(() => {
                        this.errorShown = false;
                    }, 2000);
                }
            } 
        },
        updateRecord() {
            let form = document.getElementById('recordForm_{{$recordtypestring}}_{{$tablename}}');
            if(form) {
                const inactiveInputs = form.querySelectorAll('.isinactive');
                if (inactiveInputs.length > 0) {
                    alert('Some fields are inactive. Please review them before submitting.');
                    return;
                }
                form.submit();
            }
        }
    }"
    @closeform{{ $tablename }}.window="closeForm($event)"
    @recordcreated{{ $tablename }}.window="recordCreated($event)"
    @createerror{{ $tablename }}.window="recordError($event)"
    x-cloak
    class="relative"
>
    <div class="fixed top-0 left-0 h-full w-full flex justify-center items-center inset-0 bg-slate-900/25 backdrop-blur transition-opacity z-40" x-show="loading">
        <div role="status" z>
            <svg aria-hidden="true" class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg>
            <span class="sr-only">Loading...</span>
        </div>
    </div>

    @if (isset($record))

        <form method="POST"
            id="recordForm_{{$recordtypestring}}_{{$tablename}}"
            action="{{ route($recordtypestring . '.update', ['id' => $record->id]) }}"
            enctype="multipart/form-data" x-on:submit.prevent="updateRecord">

            <input name="_method" type="hidden" value="PUT">
        @else
            <form method="POST" id="recordForm_{{$recordtypestring}}_{{$tablename}}" action="{{ route($recordtypestring . '.store') }}"
                enctype="multipart/form-data"
                @if ($slideout)
                    x-on:submit.prevent="createRecord"
                @endif
            >
    @endif
    @csrf

    <div class="mx-auto @if(!$slideout) p-4 sm:p-5 @endif" >
        <div class="space-y-6" x-cloak>
            @php $index = 0; @endphp
            <div class=" bg-white  lg:col-span-2  space-y-5 md:space-y-12">
            @foreach ($formData as $formLabel => $fields)

                @php $visible = false; @endphp
                @if (!empty($fields))
                    <div class="grid grid-cols-1 gap-6 sm:gap-8 ">
                        <div class="gap-6 sm:gap-8  ">
                            @if ($index == 0)
                            @php $visible = true; @endphp
                            <div class="gap-4 grid grid-cols-12 mb-4 mb:mb-8">
                                <div class="col-span-12 md:col-span-6 @if ($slideout) lg:col-span-3  @endif">
                                    <label for="formid" class="input-label">Record Form</label>
                                    <select name="formid" id="formid" x-model="formid"
                                        @change="updateFormId" class="input-style">
                                        @foreach ($entryForms as $entryForm)
                                            <option value="{{ $entryForm->id }}"
                                                {{ $entryForm->id == $formId ? 'selected' : '' }}>
                                                {{ $entryForm->title }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            @endif
                            <div class="gap-4 grid grid-cols-1 sm:grid-cols-3 @if ($slideout) md:grid-cols-4  @endif">
                                @foreach ($fields as $field)
                                    @if(is_array($field))
                                        @php
                                            $visible = $field['visibility'] ?? false;

                                            $conditionalAttributes = '';
                                            if (isset($field['conditionals'])) {
                                                foreach ($field['conditionals'] as $conditionField => $condition) {
                                                    $conditionalAttributes .= " data-condition-field=\"{$conditionField}\"";
                                                    $conditionalAttributes .= " data-condition-condition=\"{$condition['condition']}\"";
                                                    $conditionalAttributes .= " data-condition-value=\"{$condition['value']}\"";
                                                }
                                            }
                                        @endphp
                                        <div class="gap:mb-4 break-inside-avoid @if (!$visible) hidden @endif
                                        @if (is_array($field) && in_array($field['contentType'] ?? '', ['long_text', 'text_area'])) sm:col-span-2 @endif" {!! $conditionalAttributes !!}>

                                            @if (is_array($field) && $field['contentType'] != 'inline_html')
                                                <label for="{{ $field['scriptid'] }}" class="input-label @if ($field['is_required']) required @endif">{{ $field['title'] }} @if($field['isinactive']) <span class="italic text-gray-500">(Inactive Record)</span>@endif</label>
                                            @endif
                                            @switch($field['contentType'])
                                                @case('free_form_text')
                                                    <div>
                                                        <input type="text" id="{{ $field['scriptid'] }}"
                                                            name="{{ $field['fieldname'] }}" class="input-style"
                                                            @if ($field['is_required']) required @endif
                                                            value="{{ old('field.' . $field['scriptid'], isset($record) && is_string($field['value']) ? $field['value'] : '') }}">
                                                    </div>
                                                @break

                                                @case('password')
                                                    <div>
                                                        <input type="password" autocomplete=""
                                                            id="{{ $field['scriptid'] }}"
                                                            name="{{ $field['fieldname'] }}" class="input-style"
                                                            @if ($field['is_required']) required @endif
                                                            value="{{ old('field.' . $field['scriptid'], isset($record) ? $field['value'] : '') }}">
                                                    </div>
                                                @break

                                                @case('long_text')
                                                @case('text_area')
                                                    <textarea id="{{ $field['scriptid'] }}" name="{{ $field['fieldname'] }}" class="input-style"
                                                        @if ($field['is_required']) required @endif>{{ old('field.' . $field['scriptid'], isset($record) ? $field['value'] : '') }}</textarea>

                                                @break

                                                @case('list')

                                                <div>
                                                    <select name="{{ $field['fieldname'] }}" id="{{ $field['scriptid'] }}" class="input-style" @if($field['is_required']) required @endif>
                                                        <option value="" disabled selected>Select an option</option>
                                                        @foreach ($field['listoptions'] as $option)
                                                            @if(!isset($option->isinactive) || !$option->isinactive)
                                                                <option value="{{ $option->refid }}"
                                                                    @if(
                                                                        (isset($record) && $field['value'] == $option->refid) ||
                                                                        (!isset($record) && isset($field['defaultvalue']) && $field['defaultvalue'] == $option->refid) ||
                                                                        (!isset($value) && !isset($field['defaultvalue']) && $loop->first)
                                                                    ) selected @endif>
                                                                    {{ $option->value }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>

                                                </div>
                                                @break
                                                @case('multiple_select')
                                                <div>
                                                    <select name="{{ $field['fieldname'] }}" id="{{ $field['scriptid'] }}" class="input-style" @if($field['is_required']) required @endif multiple>
                                                        @foreach ($field['listoptions'] as $option)
                                                            @if(!isset($option->isinactive) || isset($option->isinactive) && !$option->isinactive)
                                                                <option value="{{ $option->refid }}"
                                                                    @if((isset($value) && $value == $option->refid) || (!isset($value) && $loop->first)) selected @endif>
                                                                    {{ $option->value }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                @break

                                                @case('record')

                                                    <div class="relative" >
                                                        <input class="opacity-0 pointer-events-none @if($field['isinactive']) isinactive @endif" name="{{ $field['fieldname'] }}" id="{{ $tablename }}_{{ $field['fieldname'] }}_id" value="{{ $field['value'] ?? null }}" {{ isset($field['is_required'] ) && $field['is_required'] ? 'required' : '' }} >
                                                        <div   class="absolute input-action input-style-action  top-0 !mt-0 whitespace-nowrap truncate @if($field['isinactive']) !border-red-500 isinactive @endif"  wire:key="{{ $tablename }}_{{ $field['scriptid'] }}_id" data-text-name="{{ $field['fieldname'] }}" id="{{ $tablename }}_{{ $field['fieldname'] }}_value" x-on:click="setSearchModal('{{ $field['scriptid'] }}')">
                                                            {{ $field['valueText'] ?? '' }}
                                                        </div>
                                                        @if($field['value'])
                                                        <div class="absolute right-2 top-2.5 text-gray-400 hover:text-gray-600">
                                                            <button wire:click.prevent="clearField('{{ $field['fieldname'] }}')"><i class="fas fa-times-circle"></i></button>
                                                        </div>
                                                        @endif
                                                    </div>


                                                @break

                                                @case('date')
                                                                                                        <x-inputs.date name="{{ $field['scriptid'] }}"  value="{{ $formattedDate ?? '' }}"  required="{{ isset($field['is_required']) ? $field['is_required'] : 'false' }}" />

                                                @break

                                                @case('date_time')

                                                    <div>
                                                        @php
                                                            $apiValue = old('field.' . $field['scriptid'], isset($record) ? $field['value'] : '');
                                                            $dateTimeValue = $apiValue ? $apiValue . (strlen($apiValue) === 10 ? 'T00:00' : '') : '';
                                                        @endphp

                                                        <input type="datetime-local"
                                                               id="{{ $field['scriptid'] }}"
                                                               name="{{ $field['fieldname'] }}"
                                                               value="{{ $dateTimeValue }}"
                                                               class="input-style"
                                                               @if ($field['is_required']) required @endif />
                                                    </div>
                                                @break

                                                @case('integer_number')
                                                    <div>
                                                        <input type="number" id="{{ $field['scriptid'] }}"
                                                            name="{{ $field['fieldname'] }}" class="input-style"
                                                            @if ($field['is_required']) required @endif
                                                            @if ($field['calculated']) disabled @endif
                                                            value="{{ old('field.' . $field['scriptid'], isset($record) ? $field['value'] : 0) }}"
                                                            min="{{ $field['minvalue'] }}"
                                                            max="{{ $field['maxvalue'] }}" />
                                                    </div>
                                                @break

                                                @case('check_box')
                                                    <div x-data="{ isChecked: @if ($record && ($field['value'] == 'on' || $field['value'] == true && $field['value'] != 'false')) true @else false @endif }">
                                                        <div class="relative flex items-start">
                                                            <div class="flex h-6 items-center">
                                                                <input id="{{ $field['scriptid'] }}"
                                                                    name="{{ $field['fieldname'] }}"
                                                                    type="checkbox"
                                                                    class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
                                                                    @if($field['value']) checked @endif
                                                                />
                                                            </div>
                                                        </div>
                                                    </div>
                                                @break

                                                @case('currency')
                                                    <x-inputs.currency id="{{ $field['scriptid'] }}"
                                                        name="{{ $field['fieldname'] }}"
                                                        value="{{ old('field.' . $field['scriptid'], isset($record) && isset($field['value']) ? $field['value'] : '0.00') }}"
                                                        required="{{ $field['is_required'] }}" />
                                                @break

                                                @case('decimal_number')
                                                    <x-inputs.decimal id="$field['scriptid']"
                                                        name="{{ $field['fieldname'] }}" :value="old(
                                                            'field.' . $field['scriptid'],
                                                            isset($record) ? $field['value'] : 0,
                                                        )"
                                                        :required="$field['is_required']"
                                                        :calculated="$field['calculated']" />
                                                @break

                                                @case('hyperlink')
                                                    <div>
                                                        <input type="url" id="{{ $field['scriptid'] }}"
                                                            name="{{ $field['fieldname'] }}"
                                                            class="input-style"
                                                            @if ($field['is_required']) required @endif
                                                            value="{{ old('field.' . $field['scriptid'], isset($record) && is_string($field['value']) ? $field['value'] : '') }}" />
                                                    </div>
                                                @break

                                                @case('phone_number')
                                                    <div>
                                                        <input x-mask="(999) 999-9999" placeholder="(999) 999-9999"
                                                            type="tel" id="{{ $field['scriptid'] }}"
                                                            name="{{ $field['fieldname'] }}"
                                                            class="input-style"
                                                            @if ($field['is_required']) required @endif
                                                            value="{{ old('field.' . $field['scriptid'], isset($record) ? $field['value'] : '') }}" />
                                                    </div>
                                                @break

                                                @case('email_address')
                                                    <div>
                                                        <input type="email" id="{{ $field['scriptid'] }}"
                                                            name="{{ $field['fieldname'] }}"
                                                            class="input-style"
                                                            @if ($field['is_required']) required @endif
                                                            value="{{ old('field.' . $field['scriptid'], isset($record) ? $field['value'] : '') }}" />
                                                    </div>
                                                @break

                                                @case('time_of_day')
                                                    <div>
                                                        <input type="time" id="{{ $field['scriptid'] }}"
                                                            name="{{ $field['fieldname'] }}"
                                                            class="input-style"
                                                            @if ($field['is_required']) required @endif
                                                            value="{{ old('field.' . $field['scriptid'], isset($record) ? $field['value'] : '') }}" />
                                                    </div>
                                                @break

                                                @case('percent')
                                                    <div class="percent-input">
                                                        <input type="number" id="{{ $field['scriptid'] }}"
                                                            name="{{ $field['fieldname'] }}"
                                                            class="input-style"
                                                            @if ($field['is_required']) required @endif
                                                            value="{{ old('field.' . $field['scriptid'], isset($record) ? $field['value'] : '') }}"
                                                            step="0.001"
                                                            min="{{ $field['minvalue'] ?? 0  }}"
                                                            max="{{ $field['maxvalue'] ?? 100  }}"

                                                             />
                                                    </div>

                                                @break

                                                @case('tag')
                                                  {{--   <livewire:tags.filter :field="$field"
                                                        key="{{ $field['scriptid'] }}-{{ now() }}"
                                                        :form="true" /> --}}
                                                @break

                                                @case('document')
                                                    @php $inputFile = null; @endphp
                                                    @if ($field['value'])
                                                        @if ($file = $record->files->firstWhere('id', $field['value']))
                                                            @php
                                                                $inputFile = $file;
                                                            @endphp
                                                        @endif
                                                    @endif
                                                    <x-inputs.document
                                                        :scriptid="$field['scriptid']"
                                                        :value="$inputFile"
                                                        :required="$field['is_required']"
                                                    />
                                                @break

                                                @case('timeduration')
                                                    <x-inputs.timeduration
                                                        :id="$field['scriptid']"
                                                        :name="$field['fieldname']"
                                                        :value="old('field.' . $field['scriptid'], isset($record) ? $field['value'] : 1)"
                                                        :required="$field['is_required']"
                                                    />
                                                @break

                                                @case('inline_html')
                                                @break

                                                @default
                                                    {{ $field['contentType'] }}
                                            @endswitch
                                            @if ($field['calculated'])
                                                <span class="text-primary-600 text-sm italic">calculated</span>
                                            @endif
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                        @if($visible)
                            <div class="lg:col-span-2 order-first">
                                <h2 class="text-base font-semibold leading-7 text-gray-900">{{ $formLabel }}</h2>
                            </div>
                        @endif
                    </div>
                    @php $index++; @endphp
                @endif
            @endforeach
            </div>
        </div>
    </div>

    @if ($slideout)
        <div class="mt-6 flex items-center justify-end gap-x-4">
            <button class="text-sm font-semibold leading-6 text-gray-900"
                data-drawer-dismiss="{{$drawer}}">Cancel</button>
            <button type="submit" class="btn primary-btn">Save</button>
        </div>
    @else
        @if ($showform && isset($record))
            <div class="mt-6 flex items-center justify-end gap-x-4">
                <a class="text-sm font-semibold leading-6 text-gray-900"
                    data-drawer-dismiss="{{$drawer}}">Cancel</a>
                <button type="submit" class="btn primary-btn">Save</button>
            </div>
        @else
            <div class="mt-6 flex items-center justify-end gap-x-4">
                <button type="button" class="text-sm font-semibold leading-6 text-gray-900"
                    onclick="window.location.href = '{{ route($recordtypestring . '.index') }}'">@lang('Cancel')</button>
                <button type="submit" class="btn primary-btn" >@lang('Save')</button>
                <button type="submit" class="btn primary-btn" id="saveAndNew">@lang('Save and Create New')</button>
            </div>
        @endif
    @endif
    </form>
    <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="{{ $tablename }}_searchinput"  />
                        </div>
                        <div >
                            <div class="flex align-center">
                                {{-- <div class="w-full">
                                    @if(isset($selectedText))
                                    <p class="mb-5 text-gray-700">{{ $selectedText }}</p>
                                    @else
                                    <p class="mb-5 text-gray-700" >Select an option</p>
                                    @endif
                                </div> --}}
                                @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">
                                @foreach ($recOptions as $option)
                                    <li class="cursor-pointer p-2 hover:bg-gray-100"
                                        x-on:click="selectRecord('{{ $option['id'] }}', '{{ $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>