@if ($product->colors->count() != 0)
<tr class="border border-dashed border-gray-300 dark:border-indigo-300">
    <td class="p-2">
        <h3 class="text-sm font-medium">Select Color:</h3>
        <div id="req_alert_color" class="bg-red-500 text-white border-none p-3 hidden"></div>
    </td>
    <td class="p-2">
        <div class="color_selection flex flex-row gap-0 justify-end" data-toggle="buttons">
            @foreach ($colors_product as $color)
                <label class="{{ $product->colors->count() == 1 ? 'active ' : '' }}mx-1 border-2 border-transparent dark:border-indigo-300 p-1 md:p-3 bg-[{{ $color->code }}] cursor-pointer" onclick="singleHiddenValueInputID('single_color', '{{ $color->slug }}')">
                    @if ($product->images)
                        @foreach ($product->images as $image)
                            @if ($image->color_attri == $color->slug)
                            <img src="@if (file_exists(public_path() . '/uploads/product/' . $image->name)){{ asset('uploads/product/' . $image->name) }}@else{{ asset('icon/no-img-cat.png') }}@endif"
                                class="h-[30px] w-[30px] md:h-[70px] md:w-[70px] object-contain border-5 border-white bg-white" alt="" draggable="true">
                            @endif
                        @endforeach
                    @endif
                </label>
            @endforeach
            <input class="hidden" type="hidden" name="color" id="single_color" autocomplete="off" value="blank" {{ $product->colors->count() == 1 ? 'checked' : '' }}>
        </div>
        <style>
            .color_selection label.active img{
                opacity: 0.5;
            }
        </style>
    </td>
</tr>
@endif


@foreach ($attributes as $attribute)
    <?php
        $attribute_prouct = DB::table('attribute_product')
            ->select('*')
            ->join('attribute_values', 'attribute_values.id', '=', 'attribute_product.attribute_value_id')
            ->addselect('attribute_values.name as vName')
            ->addselect('attribute_values.id as vid')
            ->join('attributes', 'attributes.id', '=', 'attribute_values.attributes_id')
            ->where('attribute_product.product_id', $product->id)
            ->where('attributes.id', $attribute->id)
            ->get();
    ?>
    @if ($attribute_prouct->count() > 0)
        @if (setting('ATTRIBUTE_STYLE') == 2)
            <tr class="border border-dashed border-gray-300 dark:border-indigo-300">
                <td class="flex flex-wrap flex-col gap-2 p-2">
                    <label for="{{ $attribute->slug }}_select" class="block mb-2 text-sm text-gray-900 dark:text-indigo-300">Select {{ $attribute->name }}:</label>
                    <div id="req_alart_{{ $attribute->slug }}" class="bg-red-500 text-white border-none p-3 hidden"></div>
                </td>
                <td class="p-2 text-right">
                    <select class="select select-bordered select-sm w-min max-w-xs bg-white dark:bg-gray-900 text-black dark:text-indigo-300" name="{{ $attribute->slug }}" id="{{ $attribute->slug }}_select" onchange="singleHiddenValueInputID('{{ $attribute->slug }}', this.value)">
                        <option disabled>Select {{ $attribute->name }}</option>
                        <option value="{{ $attribute_prouct->first()->vid }}">{{ $attribute_prouct->first()->vName }}</option>
                        @foreach ($attribute_prouct as $attr)
                            @if ($attr->vid !== $attribute_prouct->first()->vid)
                                <option value="{{ $attr->vid }}">{{ $attr->vName }}</option>
                            @endif
                        @endforeach
                    </select>
                </td>
            </tr>
        @else
            <tr class="border border-dashed border-gray-300 dark:border-indigo-300">
                <td class="flex flex-wrap flex-col gap-2 p-2">
                    <label class="block mb-2 text-sm text-gray-900 dark:text-indigo-300">Select {{ $attribute->name }}:</label>
                    <div id="req_alart_{{ $attribute->slug }}" class="bg-red-500 text-white border-none p-3 hidden"></div>
                </td>
                <td class="p-2 text-right">
                    <div class="join">
                        @foreach ($attribute_prouct as $attr)
                            <input class="join-item btn   text-gray-900 dark:text-indigo-300 bg-gray-300 hover:bg-gray-400 dark:bg-indigo-900 border-gray-300 dark:border-indigo-300"
                                type="radio"
                                name="{{ $attribute->slug }}"
                                {{-- value="{{ $attr->vid }}" --}}
                                value="blank"
                                {{-- id="{{ $attribute->slug }}_{{ $attr->vid }}" --}}
                                id="single_attr_{{ $attribute->slug }}"
                                {{-- {{ $attr->vid === $attribute_prouct->first()->vid ? 'checked' : '' }} --}}
                                onclick="singleHiddenValueInputID('{{ $attribute->slug }}', '{{ $attr->vid }}')"
                                aria-label="{{ $attr->vName }}" required>
                        @endforeach
                    </div>
                </td>
            </tr>
        @endif
    @endif
@endforeach
{{-- <input type="hidden" name="{{ $attribute->slug }}"
id="single_attr_{{ $attribute->slug }}"
value="{{ $attribute_prouct->count() == 1 ? $vid : 'blank' }}"> --}}