@php
    $items = $getRecord()
        ->cartItems()
        ->with(['salable'])
        ->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)
                @php
                    $salable = $item->salable;

                    $sku = $salable?->sku ?? null;
                    $legacyCode = $salable?->legacy_code ?? null;

                    $color = null;
                    $size = null;

                    if ($salable && method_exists($salable, 'color')) {
                        $color = $salable->color?->name;
                    }

                    if ($salable && method_exists($salable, 'size')) {
                        $size = $salable->size?->name;
                    }
                @endphp

                <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">
                        <div class="font-semibold">
                            {{ $item->name }}
                        </div>

                        @if ($sku || $legacyCode || $color || $size)
                            <div class="mt-1 space-y-0.5 text-xs text-gray-500 dark:text-gray-400">
                                @if ($sku)
                                    <div>SKU: {{ $sku }}</div>
                                @endif

                                @if ($legacyCode)
                                    <div>Código: {{ $legacyCode }}</div>
                                @endif

                                @if ($color)
                                    <div>Color: {{ $color }}</div>
                                @endif

                                @if ($size)
                                    <div>Talla: {{ $size }}</div>
                                @endif
                            </div>
                        @endif
                    </td>

                    <td class="px-4 py-2 text-center">
                        {{ $item->qty }}
                    </td>

                    <td class="px-4 py-2 text-right">
                        ${{ number_format((float) $item->price, 2, '.', ',') }}
                    </td>

                    <td class="px-4 py-2 text-right">
                        ${{ number_format((float) $item->price * (int) $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>