@php
    $items = $getRecord()
        ->cartItems()
        ->with(['salable.product_option_values.product_option'])
        ->get();
@endphp


<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-4 py-3">Producto</th>
                <th scope="col" class="px-4 py-3 text-center">Cantidad</th>
                <th scope="col" class="px-4 py-3 text-right">Precio Unitario</th>
                <th scope="col" class="px-4 py-3 text-right">Total</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($items as $item)
                <tr
                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                    <td class="px-4 py-2 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                        {{ $item->name }}
                        @if ($item->salable && $item->salable->product_option_values->isNotEmpty())
                            @foreach ($item->salable->product_option_values as $optionValue)
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ $optionValue->product_option->label }}: {{ $optionValue->name }}
                                </div>
                            @endforeach
                        @endif
                    </td>
                    <td class="px-4 py-2 text-center">{{ $item->qty }}</td>
                    <td class="px-4 py-2 text-right">
                        ${{ number_format($item->price, 2, '.', ',') }}
                    </td>
                    <td class="px-4 py-2 text-right">
                        ${{ number_format($item->price * $item->qty, 2, '.', ',') }}
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="4" class="px-4 py-3 text-center text-gray-500 dark:text-gray-400">
                        No hay artículos en este pedido.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>