<div class=" p-4">
    <div class="max-w-full mx-auto bg-white rounded-lg">
        <!-- Header -->
        <div class="text-black p-4 rounded-t-lg flex justify-between items-center">
            <h1 class="text-lg font-semibold">{{ $company }} (SN={{ $serverKey }}):: Print Form</h1>
            <button class="bg-info hover:info-focus text-white font-bold py-2 px-4 rounded">
                Export Query
            </button>
        </div>

        <!-- 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">Form Name</th>
                        <th scope="col"  class="py-2 px-4 border-b">L Name</th>
                        <th scope="col"  class="py-2 px-4 border-b">L Value</th>
                        <th scope="col"  class="py-2 px-4 border-b">X</th>
                        <th scope="col"  class="py-2 px-4 border-b">Y</th>
                        <th scope="col"  class="py-2 px-4 border-b">Parent ID</th>
                        <th scope="col"  class="py-2 px-4 border-b">Edit Layout</th>
                        <th scope="col"  class="py-2 px-4 border-b">Width</th>
                        <th scope="col"  class="py-2 px-4 border-b">Height</th>
                        <th scope="col"  class="py-2 px-4 border-b">Type</th>
                        <th scope="col"  class="py-2 px-4 border-b">Format</th>
                    </tr>
                </thead>
                <tbody>
                    @if (count($labelList) > 0)
                        @foreach ($labelList['lid'] as $index => $mapId)
                        <tr class="border-b">
                            <td class="py-2 px-4 border w-10"> <!-- Adjust as necessary -->
                                {{ $index + 1 }}
                            </td>
                            <td class="py-2 px-4 border w-1/5">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.form_name.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-1/5">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.l_name.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-2/5">
                                <textarea class="w-full p-1 border rounded" wire:model.defer="labelList.l_value.{{ $index }}"></textarea>
                            </td>
                            <td class="py-2 px-4 border w-10">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.x.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-10">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.y.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-1/12">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.parentId.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-1/12">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.editLayout.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-1/12">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.width.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-1/12">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.height.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-1/12">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.type.{{ $index }}" />
                            </td>
                            <td class="py-2 px-4 border w-1/12">
                                <input type="text" class="w-full p-2 border border-gray-300 rounded-md" wire:model.defer="labelList.format.{{ $index }}" />
                            </td>
                        </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
            <div class="p-4">
                <button wire:click="saveLabel"
                    class="bg-primary hover:bg-primary-focus text-white font-bold py-2 px-4 rounded">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>
