<tr wire:ignore.self class="bg-gray-50 hidden inline-drawer" id="{{$drawer}}"
    x-data="{
        loading: false,
        showForm: false,
        errorShown: false,
        tablename: '{{ $tablename }}',
        drawerId: @entangle('drawer'),
        setSearchModal(value) {
            this.toggleForm(true);
            $wire.setSearchModal(value);
        },
        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;
        },
        closeForm(event) {
            this.showForm = false;
            this.loading = false;
        },
        selectRecord(id, value) {
            $wire.selectRecord(id, value);
        },
        createRecord() {
            const row = document.getElementById('{{$drawer}}');
            const inputs = row.querySelectorAll('input, select, textarea');
            const formData = new FormData();
            const missingFields = [];
            var isMilestoneTask = false;

            // Check if this is a project task
            const isProjectTask = '{{ $recordType->scriptid }}' === 'projecttask';
            let contractedWork = 0;
            let plannedWork = 0;

            inputs.forEach(input => {
                // Find the associated label by looking for the closest parent td and then finding the label within it
                const parentTd = input.closest('td');
                const label = parentTd ? parentTd.querySelector('label') : null;
                const labelText = label ? label.textContent.trim() : 'No label found';

                if (input.name) {
                    // Check if the field is required and empty
                    if (input.required && !input.value.trim()) {
                        missingFields.push(input);
                    }
                    formData.append(input.name, input.value);

                    // Track contracted and planned work values
                    if (isProjectTask) {
                        if (labelText === 'Contracted Work') { // Contracted Work field
                            contractedWork = parseFloat(input.value) || 0;
                        }
                        if (labelText === 'Planned Work') { // Planned Work field
                            plannedWork = parseFloat(input.value) || 0;
                        }

                        if (contractedWork === 0 && plannedWork === 0) {
                            isMilestoneTask = true;
                        } else {
                            isMilestoneTask = false;
                        }
                    }
                }
            });

            if (missingFields.length > 0) {
                alert('Please fill out all required fields before submitting.');
                missingFields[0].focus();
                return;
            }

            // Check for milestone task condition
            if (isProjectTask && isMilestoneTask) {
                if (!confirm('You have not entered planned or contracted work for this task. It will be saved as a milestone. Do you want to continue?')) {
                    return;
                }
            }

            let serializedData = {};
            for (const [key, value] of formData.entries()) {
                serializedData[key] = value;
            }

            const nestedFields = {};
            for (const [key, value] of Object.entries(serializedData)) {
                if (key.includes('[') && key.includes(']')) {
                    const match = key.match(/^(.+?)\[(.+?)\]$/);
                    if (match) {
                        const parentKey = match[1];
                        const childKey = match[2];

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

                        nestedFields[parentKey][childKey] = value;
                    }
                }
            }

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

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

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

            if(drawer === this.drawerId) {
                if(recordType == 'Assignee') {
                    if (record.record && record.record.projecttask) {
                        $wire.getInlineRecords(record.record.projecttask, recordType);
                    }
                } else {
                    if (record.record && record.record.parent) {
                        $wire.getInlineRecords(record.record.parent, recordType);
                    }
                }
            }

        },
        recordError(event) {
            var tablename = event.detail[1];
            var drawer = event.detail[2];

            if(drawer === this.drawerId) {
                if (!this.errorShown) {
                    this.errorShown = true;
                    this.loading = false;
                    var error = event.detail[0];
                    alert(error);

                    setTimeout(() => {
                        this.errorShown = false;
                    }, 2000);
                }
            }
        },
        init() {
            this.watchFormValues();
        },
        watchFormValues() {
            const formTd = document.getElementById('{{$drawer}}');
            const fields = formTd.querySelectorAll('[data-condition-field]');

            this.evaluateFieldVisibility(fields, formTd);

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

        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;
                    });
                }
            });
        }
    }"
    @closeinlineform{{ $tablename }}.window="closeForm($event)"
    @inlinerecordcreated{{ $tablename }}.window="recordCreated($event)"
    @inlinecreateerror{{ $tablename }}.window="recordError($event)"
    x-cloak
>

    <td class="bg-gray-50">
        <div class="space-x-2 flex items-center">
            <div x-show="loading" class="flex items-center space-x-2">
                <svg class="animate-spin h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor"
                        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                </svg>
                <span class="text-sm text-gray-600">Saving...</span>
            </div>

            <div x-show="!loading" class="space-x-2 flex">
                <button class="btn btn-primary sm" x-on:click.prevent="createRecord">Submit</button>
                @if($inline && $inline == 'true')
                    <button class="btn btn-outline sm" data-drawer-dismiss="inlineRecordForm_{{ $recordType->scriptid }}-{{ $parent->id }}">Cancel</button>
                @else
                    <button class="btn btn-outline sm" data-drawer-dismiss="inlineRecordForm_{{ $recordType->scriptid }}">Cancel</button>
                @endif
            </div>
        </div>
    </td>

    @foreach ($tableData['tableFields'] as $field)
        <td class="whitespace-nowrap bg-gray-50" wire:ignore.self >
            @if(isset($field['label']))
            <label class="input-label !mb-0 @if(isset($field['is_required']) && $field['is_required']) required @endif">{{ $field['label'] }}</label>
            @endif
            @php
                $scriptId = $field['scriptid'] ?? '';
                $contentType = $field['content_type'] ?? null;
                $fieldValue = $field['value'] !== "" ? $field['value'] : ($field['defaultvalue'] ?? '');
                $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']}\"";
                    }
                }

                // Check if scriptId starts with 'cust' and wrap it
                if (str_starts_with($scriptId, 'cust')) {
                    $scriptId = "field[$scriptId]";
                }

                $key = ($contentType ?? 'default') . '-' . $scriptId . '-record-inline';
            @endphp

            @if($contentType)
            <div class="min-h-[42px] min-w-[80px]" {!! $conditionalAttributes !!}>
            @switch($field['content_type'])
                @case('free_form_text')
                    @if($field['scriptid'] == 'title')
                    <span class="flex space-between title-col whitespace-nowrap space-x-2 " wire:ignore.self>
                        <x-table.create-field
                            :href="route($recordType->recordType . '.show', ['id' => $pagetypeid])"
                            :recordtype="$recordType->recordType"
                            :fieldid="$scriptId"
                            :contenttype="$contentType"
                            :key="$key"
                            :required="isset($field['is_required']) && $field['is_required']"
                        />
                    </span>


                    @else
                    <div  wire:ignore.self class="min-w-48 ">
                        <x-table.create-field
                            :recordtype="$recordType->recordType"
                            :fieldid="$scriptId"
                            :contenttype="$contentType"
                            :key="$key"
                            :label="$field['label']"
                            :required="isset($field['is_required']) && $field['is_required']"
                        />
                    </div>

                    @endif
                @break
                @case('long_text')
                @case('text_area')
                <div class="max-w-96 truncate">
                    <input type="text" name="{{ $scriptId }}" class="input-style" {{ isset($field['is_required'] ) && $field['is_required'] ? 'required' : '' }}>
                </div>
                @break
                @case('integer_number')
                @case('currency')
                <input type="number" name="{{ $scriptId }}" class="input-style" {{ isset($field['is_required'] ) && $field['is_required'] ? 'required' : '' }} {{ isset($field['calculated'] ) && $field['calculated'] ? 'disabled' : '' }}>
                @break
                @case('percent')
                @case('decimal_number')
                <input type="number" name="{{ $scriptId }}" class="input-style" value="{{ $fieldValue; }}" {{ isset($field['is_required'] ) && $field['is_required'] ? 'required' : '' }} {{ isset($field['calculated'] ) && $field['calculated'] ? 'disabled' : '' }} style="min-width: 80px;">
                @break

                @case('time_of_day')

                <input type="time" id="inline{{ $field['scriptid'] }}"
                    name="{{ $scriptId }}"
                    class="input-style"
                    {{ isset($field['is_required'] ) && $field['is_required'] ? 'required' : '' }}
                    value=""
                 />

                @break

                @case('timeduration')
                    <x-inputs.timeduration
                        :id="$scriptId . '_inline'"
                        :name="$scriptId"
                        value="0"
                        :required="isset($field['is_required']) && $field['is_required']"
                    />
                @break

                @case('multiple_select')

                    @if (isset($tableData['lists'][$field['list_id']]) || Str::startsWith($field['list_id'], 'custlist'))

                    <span  wire:ignore.self>
                        @php
                            $fieldValue = $record[$field['scriptid']] ?? null;
                        @endphp

                        <x-table.create-field
                            :recordtype="$recordType->recordType"
                            :fieldid="$scriptId"
                            :contenttype="$contentType"
                            :listoptions="$tableData['lists'][$field['list_id']]"
                            :key="$key"
                            :required="isset($field['is_required']) && $field['is_required']"
                            :label="$field['label']"
                        />
                    </span>
                    @endif
                @break

                @case('list')
                    @if (isset($tableData['lists'][$field['list_id']]) || Str::startsWith($field['list_id'], 'custlist'))

                    <span  wire:ignore.self>
                        @php
                            $fieldValue = $record[$field['scriptid']] ?? null;
                        @endphp

                        <x-table.create-field
                            :recordtype="$recordType->recordType"
                            :fieldid="$scriptId"
                            :contenttype="$contentType"
                            :listoptions="$tableData['lists'][$field['list_id']]"
                            :key="$key"
                            :required="isset($field['is_required']) && $field['is_required']"
                            :label="$field['label']"
                            :value="old(
                                'field.' . $field['scriptid'],
                                isset($record[$field['scriptid']]) ? $record[$field['scriptid']] : ($field['defaultvalue'] ?? '')
                            )"
                        />
                    </span>
                    @endif
                @break

                @case('date')
                    <span  wire:ignore.self>
                        <x-table.create-field
                            :recordtype="$recordType->recordType"
                            :fieldid="$scriptId"
                            :contenttype="$contentType"
                            :key="$key"
                            :required="isset($field['is_required']) && $field['is_required']"
                            :label="$field['label']"
                        />
                    </span>
                @break

                @case('date_time')
                    <x-table.create-field
                        :recordtype="$recordType->recordType"
                        :fieldid="$scriptId"
                        :contenttype="$contentType"
                        :key="$key"
                        :required="isset($field['is_required']) && $field['is_required']"
                        :label="$field['label']"
                    />
                @break

                @case('check_box')
                    <x-table.create-field
                        :recordtype="$recordType->recordType"
                        :fieldid="$scriptId"
                        :contenttype="$contentType"
                        :value="false"
                        :required="isset($field['is_required']) && $field['is_required']"
                        :key="$key"
                        :label="$field['label']"
                    />
                @break

                @case('hyperlink')
                    {{-- <a href="{{ isset($field) & /& is_string($fields[$field['scriptid']]) ? $fields[$field['scriptid']] : '' }}" target="_blank" class="link">Link WIP</a> --}}
                @break

                @case('record')

                <div class="relative" >

                    <input class="opacity-0 pointer-events-none" name="{{ $scriptId }}" id="{{ $pagetypemodel }}_{{ $field['scriptid'] }}_inline" value="{{ $field['value'] ?? null }}" {{ isset($field['is_required'] ) && $field['is_required'] ? 'required' : '' }} >
                    <div   class="absolute input-action input-style-action  top-0 !mt-0 bg-white truncate"  wire:key="_{{ $scriptId }}_inline" data-text-name="{{ $scriptId }}" id="{{ $pagetypemodel }}_{{ $scriptId }}_value" x-on:click="setSearchModal('{{ $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['scriptid'] }}')"><i class="fas fa-times-circle"></i></button>
                    </div>
                    @endif
                </div>

                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity justify-center z-50" 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">
                                            @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>


                @break

                @case('document')

                @break;

                @default
                    {{-- {{ isset($field) && is_string($record[$field['scriptid']]) ? $record[$field['scriptid']] : '' }} --}}
            @endswitch
            @endif

        </td>

    @endforeach
{{--     <td>
        <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">
                <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>
    </td> --}}

</tr>