@forelse ($carts as $key => $product)
    <tr class="bg-table-gray">
        <td class="text-center">
            {{ $product->product->getTranslation('title') }}</td>
        <td class="text-center">
            <a class="image-popup-vertical-fit"
                href="{{ url(getProductFirstPhotoOrAvatar($product->product->id)) }}"><img id="logo"
                    src="{{ url(getProductFirstPhotoOrAvatar($product->product->id)) }}" alt="your image"
                    width="50px" /></a>
        </td>
        <td class="text-center">
            {{ single_price($product->price) }}
            {{ currency_sympol()['symbol'] }}
        </td>
        <td class="text-center">
            {{ $product->quantity }}
        </td>
        <td class="text-center">
            {{ single_price($product->price * $product->quantity) }}
            {{ currency_sympol()['symbol'] }}
        </td>
        <td class="text-center">
            @php
                $options = getAttibutesOptionsbyOptions($product->serialized_options);
            @endphp
            @if ($options['color'] != null)
                <div class="badge badge-primary" style="background-color: {{ $options['color'] }}">
                    {{ translate('Color') }}</div>
            @endif
            @forelse ($options['options'] as $key_op => $option)
                <div class="badge badge-primary">
                    {{ $key_op }} : {{ $option }}</div>
            @empty

            @endforelse
        </td>
        <td class="text-center">
            <a class="" href="#" onclick="removeProductFromOrder({{ $product->id }})"><i style="font-size: 1.5em;"
                    class="fa fa-fw fa-trash"></i></a>
            <a class="" href="#" onclick="editProductFromOrder({{ $product->id }},{{ $product->product_id }},{{ $product->serialized_options }},{{ $product->quantity }})"><i style="font-size: 1.5em;"
                    class="fa fa-edit"></i></a>
        </td>
    </tr>
@empty

@endforelse