<div class="p-4">
    <div class="max-w-full mx-auto bg-white rounded-lg">
        <!-- Table Section -->
        <div class="overflow-x-auto p-4">
           <table aria-describedby="mydesc"  class="min-w-full bg-white border border-gray-300">
                <thead>
                    <tr class="bg-slate-300 text-gray-700">
                        <th scope="col"  class="py-2 px-4 border-b">ID</th>
                        <th scope="col"  class="py-2 px-4 border-b">Page Code</th>
                        <th scope="col"  class="py-2 px-4 border-b">Name</th>
                        <th scope="col"  class="py-2 px-4 border-b">T Name</th>
                        <th scope="col"  class="py-2 px-4 border-b">Required</th>
                        <th scope="col"  class="py-2 px-4 border-b">Type</th>
                        <th scope="col"  class="py-2 px-4 border-b">Spec</th>
                        <th scope="col"  class="py-2 px-4 border-b">Manual</th>
                        <th scope="col"  class="py-2 px-4 border-b">User Note</th>
                        <th scope="col"  class="py-2 px-4 border-b">JS Before Focus</th>
                        <th scope="col"  class="py-2 px-4 border-b">Cannot Import</th>
                        <th scope="col"  class="py-2 px-4 border-b">F Name</th>
                        <th scope="col"  class="py-2 px-4 border-b">Report Flag</th>
                        <th scope="col"  class="py-2 px-4 border-b">Report Order By</th>
                        <th scope="col"  class="py-2 px-4 border-b">Report Condition</th>
                        <th scope="col"  class="py-2 px-4 border-b">Report Table</th>
                        <th scope="col"  class="py-2 px-4 border-b">Report Type</th>
                        <th scope="col"  class="py-2 px-4 border-b">Report Format</th>
                        <th scope="col"  class="py-2 px-4 border-b">Report Align</th>
                        <th scope="col"  class="py-2 px-4 border-b">User Default</th>
                    </tr>
                </thead>
                <tbody>
                    @if (count($userInterfaceList) > 0)
                        @foreach ($userInterfaceList['name'] as $index => $mapId)
                        <tr class="border-b">
                            <td class="py-2 px-4 border">{{ $index + 1 }}</td>
                            <td class="py-2 px-4 border min-w-32"><input type="text"  class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.pageCode.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-32"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.name.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-32"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.tname.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.required.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-32"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.type.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.spec.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-64">
                                <textarea class="w-full p-1 border rounded" wire:model.defer="userInterfaceList.manual.{{ $index }}"></textarea>
                            </td>
                            <td class="py-2 px-4 border min-w-64">
                                <textarea class="w-full p-1 border rounded" wire:model.defer="userInterfaceList.user_note.{{ $index }}"></textarea>
                            </td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.js_before_focus.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.cannotImport.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-32"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.fname.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.reportFlag.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.reportOrderBy.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.reportCondition.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-32"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.reportTable.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.reportType.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.reportFormat.{{ $index }}" /></td>
                            <td class="py-2 px-4 border min-w-24"><input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="userInterfaceList.reportAlign.{{ $index }}" /></td>
                            <td class="py-2 px-4 border  min-w-64">
                                <textarea class="w-full p-1 border rounded" wire:model.defer="userInterfaceList.user_default.{{ $index }}"></textarea>
                            </td>
                        </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
        </div>
        <div class="p-4">
            <button wire:click="saveUserInterface" class="bg-primary hover:bg-primary-focus text-white font-bold py-2 px-4 rounded">
                Save
            </button>
        </div>
    </div>
</div>