Laravel AlpineJS Blade template show/hide table row on click event.

laravel-alpinejs-blade-template-show-hide-table-row-click-event.blade.php

//
// This is a blade component which contains 2 <tr> rows. In the first row you click on the product name, the second row should show/hide. (toggle)
// x-cloak will hide <tr> during page load, so it won't "blink".
//
//

@props([
    'sku' => null,
    'name' => null,
    'mpn' => null,
    'gtin' => null,
    'manufacturer' => null,
    'category' => null,
    'progress' => null,
    'updatedAt' => null,
])
<tr class="border-b hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700">
    <th scope="row" class="flex items-center whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
        @if (is_null($sku))
            <x-flowbite.mini-spinner />
        @else
            {{ $sku }}
        @endif
    </th>
    <td class="px-4 py-2">
        @if (is_null($name))
            <x-flowbite.mini-spinner />
        @else
            <span class="bg-primary-100 text-primary-800 dark:bg-primary-900 rounded px-2 py-0.5 font-medium dark:text-white">
                <button x-data="{ open{{ $sku }}: false }" x-on:click="open{{ $sku }} = ! open{{ $sku }}; if (open{{ $sku }}) { $refs.itemDetails{{ $sku }}.style.display='block'; } else { $refs.itemDetails{{ $sku }}.style.display='none'; }">
                    {{ $name }}
                </button>
            </span>
        @endif
    </td>
    <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
        @if (is_null($mpn))
            <x-flowbite.mini-spinner />
        @else
            <div class="flex items-center">
                {{ $mpn }}
            </div>
        @endif
    </td>
    <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
        @if (is_null($gtin))
            <x-flowbite.mini-spinner />
        @else
            {{ $gtin }}
        @endif
    </td>
    <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
        @if (is_null($manufacturer))
            <x-flowbite.mini-spinner />
        @else
            {{ $manufacturer }}
        @endif
    </td>
    <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
        @if (is_null($category))
            <x-flowbite.mini-spinner />
        @else
            {{ $category }}
        @endif
    </td>
    <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
        @if (is_null($progress))
            <x-flowbite.mini-spinner />
        @else
            <div class="mb-1 flex h-5 w-40 flex-col justify-center rounded-full bg-gray-200 dark:bg-gray-700">
                <div class="relative flex h-6 w-40 items-center justify-center">
                    <div class="absolute top-0 bottom-0 left-0 rounded-lg bg-blue-600" style="width: 45%"></div>
                    <div class="relative text-sm font-medium text-gray-50">45%</div>
                </div>
            </div>
        @endif
    </td>
    <td class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 dark:text-white">
        @if (is_null($sku))
            <div class="flex space-x-2">
                <button disabled type="button" class="cursor-not-allowed rounded-lg bg-gray-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">K</button>
                <button disabled type="button" class="cursor-not-allowed rounded-lg bg-gray-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">A</button>
                <button disabled type="button" class="cursor-not-allowed rounded-lg bg-gray-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">L</button>
            </div>
        @else
            <div class="flex space-x-2">
                <button type="button" x-data x-on:click="window.open('{{ route('image-manager') }}?sku={{ $sku }}', '_self')" class="rounded-lg bg-blue-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">K</button>
                <button type="button" x-data x-on:click="window.open('{{ route('attribute-editor') }}?sku={{ $sku }}', '_self')" class="rounded-lg bg-blue-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">A</button>
                <button type="button" class="rounded-lg bg-blue-700 px-2 py-1 text-center text-xs font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">L</button>
            </div>
        @endif
    </td>
</tr>

<tr class="hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-700" colspan="8">
    <td>
        <div x-cloak x-ref="itemDetails{{ $sku }}" x-show="false">
            WORKS WORKS WORKS WORKS WORKS WORKS
            You put your product details here. Like images, attributes, descriptions, etc.
            WORKS WORKS WORKS WORKS WORKS WORKS
        </div>
    </td>
</tr>