practice-matrix.blade.php

@php
    $id = $getId();
    $statePath = $getStatePath();
    $practicesData = $getPracticesData();
    $stateValues = $getStateValues();
    $rowKey = 1;

    $groupedPractice = collect($practicesData)->sortBy(['category_practice_name', 'name'])->groupBy('category_practice_name');
@endphp

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <table class="fi-input-wrp rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-rich-editor max-w-full overflow-x-auto w-full">
            <tbody>
            @foreach($groupedPractice as $groupLabel => $practices)
                @foreach($practices as $i => $practice)
                    <tr class="border-b border-gray-100 dark:border-white/10">
                        @if($i === 0)
                            <td class="p-4" rowspan="{{ count($practices) }}">{{ $groupLabel }}</td>
                        @endif
                        @php
                            $supStatPath = $statePath.'.'.$practice['id']
                        @endphp
                        <td class="p-4">{{ $practice['name'] }}</td>
                        <td class="p-4">
                            <div class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-select">
                                <select
                                    wire:key="{{ $id }}.{{ $rowKey }}.state"
                                    wire:loading.attr="disabled"
                                    id="{{ $id }}.{{ $rowKey }}.state"
                                    class="fi-select-input block w-full border-none bg-transparent py-1.5 pe-8 text-base text-gray-950 transition duration-75 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] dark:text-white dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] sm:text-sm sm:leading-6 [&_optgroup]:bg-white [&_optgroup]:dark:bg-gray-900 [&_option]:bg-white [&_option]:dark:bg-gray-900 ps-3"
                                    {{ $applyStateBindingModifiers('wire:model') }}="{{ $supStatPath . '.state' }}"
                                >
                                    @foreach ($stateValues as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </td>
                        <td class="p-4">
                            <div class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-text-input overflow-hidden">
                                <input
                                    wire:key="{{ $id }}.{{ $rowKey }}.notes"
                                    wire:loading.attr="disabled"
                                    id="{{ $id }}.{{ $rowKey }}.notes"
                                    type="text"
                                    class="fi-input block w-full border-none py-1.5 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 bg-white/0 ps-3 pe-3"
                                    {{ $applyStateBindingModifiers('wire:model') }}="{{ $supStatPath . '.notes' }}"
                                />
                            </div>
                        </td>
                    </tr>
                    @php
                        $rowKey++;
                    @endphp
                @endforeach
            @endforeach
            </tbody>
        </table>
    </div>
</x-dynamic-component>

PracticeMatrix.php

<?php

namespace App\Forms\Components;

use App\Models\DigitalProduct\Practice;
use App\Models\DigitalProduct\Product;
use Filament\Forms\Components\CheckboxList;

class PracticeMatrix extends CheckboxList
{
    protected string $view = 'forms.components.practice-matrix';

    protected array $practicesData = [];

    public function practicesData(array $data): static
    {
        $this->practicesData = $data;

        return $this;
    }

    public function getPracticesData(): array
    {
        return $this->evaluate($this->practicesData);
    }

    public function getStateValues(): array
    {
        return ['no' => 'Non', 'yes' => 'Oui', 'n/a' => 'N/A'];
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->afterStateHydrated(static function ($record, PracticeMatrix $component, $state) {
            if ($record) {
                $practiceData = self::getPracticeData($record->id);
                $component->practicesData($practiceData);
                $component->state($practiceData);
            }
        });
        $this->beforeStateDehydrated(static function ($record, PracticeMatrix $component, $state) {
            if ($record) {
                $practiceData = self::getPracticeData($record->id);
                $component->practicesData($practiceData);
                $component->state($practiceData);
            }
        });
    }

    public static function getPracticeData($id)
    {
        $allPractices = Practice::all();
        $practicesData = [];
        if ($id) {
            $product = Product::find($id);
            $productPractices = $product->practices()->get()->keyBy('id')->toArray();
            foreach ($allPractices as $practice) {
                $practiceId = $practice->id;
                $practicesData[$practiceId] = ['id' => $practiceId, 'name' => $practice->name, 'category_practice_name' => $practice->category_practice ? $practice->category_practice->name : ''];
                if (isset($productPractices[$practiceId])) {
                    foreach ($productPractices[$practiceId]['pivot'] as $fieldname => $value) {
                        $practicesData[$practiceId][$fieldname] = $value;
                    }
                } else {
                    foreach ($product->practices()->getPivotColumns() as $fieldname) {
                        $practicesData[$practiceId][$fieldname] = '';
                    }
                }
            }
        }
        return $practicesData;
    }
}