@php
    $statePath = $getStatePath(); // e.g., data.order_products.UUID.total_display
    $rowPath = \Illuminate\Support\Str::beforeLast($statePath, '.total_display');

    $xsPath = "{$rowPath}.xs";
    $sPath = "{$rowPath}.s";
    $mPath = "{$rowPath}.m";
    $lPath = "{$rowPath}.l";
    $xlPath = "{$rowPath}.xl";
    $xxlPath = "{$rowPath}.2xl";
    $xxxlPath = "{$rowPath}.3xl";
    $osfaPath = "{$rowPath}.osfa";
@endphp

<div
        x-data="{
    xs: @entangle($xsPath),
    s: @entangle($sPath),
    m: @entangle($mPath),
    l: @entangle($lPath),
    xl: @entangle($xlPath),
    _2xl: @entangle($xxlPath),
    _3xl: @entangle($xxxlPath),
    osfa: @entangle($osfaPath),
}"
>
    <!-- Filament TextInput to show the computed total -->
    <input
            type="text"
            x-bind:value="(
        (parseFloat(xs || 0)) +
        (parseFloat(s || 0)) +
        (parseFloat(m || 0)) +
        (parseFloat(l || 0)) +
        (parseFloat(xl || 0)) +
        (parseFloat(_2xl || 0)) +
        (parseFloat(_3xl || 0)) +
        (parseFloat(osfa || 0))
    ).toFixed(0)"
            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"
            readonly
    />
</div>