@php
                            $backgroundclass = "level".($counter-1)." bg-yellow-".(100 * ($counter-1));
                        @endphp  
                        
                         
                    <tr class="{{$backgroundclass}}">

                        <td class="border px-4 py-2 text-center w-80">
                        {{$productpart->name}}
                        </td>
                        <td class="border px-4 py-2 text-center w-32">
                            
		                    	   
		                    @if($productpart->product_type)
                                {{ $productpart->product_type->name }} 
                            @endif
                            </td>

                        <td class="border px-4 py-2 text-center  w-32">{{ $productpart->sortcode }}</td>

                        <td class="border px-4 py-2 text-center w-32"></td>

                        <td class="border px-4 py-2 text-center w-32"></td>
                        <td class="border px-4 py-2 text-center">SKU: {{ $productpart->sku }}</td>


                        
                        <td class="border px-4 py-2 text-center  w-20">&pound;{{ $productpart->cost }}</td>
                        <td class="border px-4 py-2 text-center  w-20">
                            @livewire('component.edit-field',['id'=>$operation->pivot->id,'object'=>'ProductOperation','field'=>'qty'], key(rand() * $operation->pivot->id))
                        </td>
                        <td class="border px-4 py-2 text-center  w-20">&pound;{{ $productpart->cost * $operation->pivot->qty }}</td>


                        <td class="border px-4 py-2 text-center  w-20">
                            @livewire('component.edit-field',['id'=>$operation->pivot->id,'object'=>'ProductOperation','field'=>'rank'], key(rand() * $operation->pivot->id))
                        </td>
                        <td class="border px-4 py-2 w-32">
                        <div class="w-full sm:w-auto flex-none flex flex-col-reverse sm:flex-row sm:items-start space-y-3 space-y-reverse sm:space-y-0 sm:space-x-3 mx-auto xl:mx-0">
            
                        <a class="group flex" href="/item-detail/{{ $productpart->id }}" title="View Details" alt="View Details"><x-icon.productdetails /></a>
                        <a class="group flex" wire:click="delete({{ $operation->pivot->id }},2)" title="Delete" alt="Delete"><x-icon.bin /></a>
                        
                        </div>
                        </td>
                    </tr>
                    @if (count($productpart->operations) > 0)
                    <tr  x-data="{show : false}" ><td colspan="11">
                        <button @click="show = !show" x-text ="show ? 'hide' : 'show'" class="w-full text-xs p-1 bg-blue-50 border-gray-50 text-center"></button>
                    <table x-show="show" data-product-id="{{ $productpart->product_id }}" data-id="{{ $operation->pivot->id }}" class="table-fixed w-full text-xs" >
                    <tbody>
                        @foreach($productpart->materiallist as $operation)
                        
                            @livewire('component.item-builder-list',['id'=>$operation->pivot->subproduct_id], key(rand() * $operation->pivot->subproduct_id))
                        
                        @endforeach
                            
                        @foreach($productpart->operationlist as $operation)
                               @include('livewire.item.operationslist')
                        @endforeach
                    
                    </tbody>
                    </table>
                    </td></tr>
                                @endif