<div class="p-4">
    <div class="max-w-6xl 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">Profiles</h1>

        </div>

        @if (count($globalListGroup) > 0)
            @foreach ($globalListGroup as $profileCode => $profileData)
                <div x-data="{ expanded: false }" class="mb-4">
                    <div @click="expanded = !expanded" class="bg-gray-500 text-white px-4 py-2 cursor-pointer">
                        <strong>Profile = {{ $profileCode }}</strong>
                    </div>

                    <div x-show="expanded" class="overflow-x-auto p-4">
                        <div class="max-w-3xl mx-auto bg-white rounded-lg">
                           <table aria-describedby="mydesc"  class="min-w-full bg-white border border-gray-300 text-sm">
                                <thead>
                                    <tr class="bg-slate-300 text-gray-700  text-xs">
                                        <th scope="col"  class="py-2 px-4 border-b w-1/2">Name</th>
                                        <th scope="col"  class="py-2 px-4 border-b w-1/2">Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($profileData as $item)
                                        <tr class="border-b  text-xs">
                                            <td class="py-2 px-4 border"> <input type="text"
                                                    class="w-full p-2 border border-gray-300 rounded-md"
                                                    wire:model.defer="globalListGroup.{{ $profileCode }}.{{ $loop->index }}.name" />
                                            </td>
                                            <td class="py-2 px-4 border">
                                                <input type="text"
                                                    class="w-full p-2 border border-gray-300 rounded-md"
                                                    wire:model.defer="globalListGroup.{{ $profileCode }}.{{ $loop->index }}.value" />
                                            </td>
                                            <input type="hidden"  wire:model.defer="globalListGroup.{{ $profileCode }}.{{ $loop->index }}.profilecode">
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="p-4">
                                <button wire:click="saveGlobal"
                                    class="bg-primary hover:bg-primary-focus text-white font-bold py-2 px-4 rounded">
                                    Save
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    </div>
</div>
</div>
