@props([
    // 有動作  [default:true]
    'hasActionMode' => !isset($attributes['has-action']) || $attributes['has-action'] === '1' ? true : false,

    // 有圖片模式 [default:true]
    'hasImageMode' => !isset($attributes['has-image']) || $attributes['has-image'] === '1' ? true : false,
])

@php
    // 商品價格
    // $price = optional($product->activity_product)->price ?? $product->price ?? $product->original_price;
    $price = $product->sell_price;
@endphp

<div>
    @if(isset($product)) 
        <div 
            class="row border-bottom mb-1 product-item"
            data-id="{{ $product->id }}" 
            data-property-id="{{ optional($product->activity_product)->product_property_id  ?? '1' }}" 
            data-image-path="{{ $product->image_path }}"
            data-name="{{ $product->name }}" 
            data-price="{{ $price }}"
            data-stock="{{ optional($product->activity_product)->stock ?? 0}}" >
            <div {{ $attributes->merge([
                'class' =>
                    ($hasImageMode === true ? 'col-md-1' : 'col-md-2') . ' ' . 
                    ($hasActionMode === true ? 'd-flex' : 'd-none') . ' ' . 
                    ' align-content-center flex-wrap '
                ]) }}>
                {{-- add_product_to_cart 是訂單使用的 | add_product_to_combination 是商品管理用的 --}}
                {{-- 我再想想怎麼優化，夠亂了 (ΦωΦ) --}}
                <i class="cursor-pointer badge-circle badge-circle-success bx bx-plus font-medium-1 add_product_to_cart add_product_to_combination" ></i>
            </div>

            <div {{ $attributes->merge(['class' => 'col-md-3 align-content-center flex-wrap '. ($hasImageMode === true ? 'd-flex' : 'd-none') ]) }}>
                <img class="w-100" src="{{ $product->image_path }}" alt="">
            </div>    
      
            <div {{ $attributes->merge(['class' => ($hasImageMode === true ? 'col-md-8' : 'col-md-10') ]) }} >
                <div class="row product-information">
                    <div class="col-md-12 product-name-block">
                        <span class="product-name"><h3>{{ $product->name }}</h3></span>
                        <span class="product-code">{{ $product->code }}</span>

                        @if (optional($product->activity_product)->product_property_id == \App\Constants\ProductPropertyConstant::PROPERTY_ADDITIONAL)
                            <div class="badge badge-light-danger ml-1">加價購</div>
                        @elseif (optional($product->activity_product)->product_property_id == \App\Constants\ProductPropertyConstant::PROPERTY_TRY)
                            <div class="badge badge-light-success ml-1">試吃品</div>
                        @endif
                    </div>
                    <div class="col-sm-12 price-block">

                        @if($product->original_price > $price)
                            <small>
                                <del style="color: gray;">
                                    $ <span>{{ number_format($product->original_price) }}</span>
                                </del>
                            </small>
                        @endif

                        <span class="price">
                            $ <span class="price_number">{{ number_format($price) }}</span>
                        </span>
                    </div>
                    
                    @if ($product->combinations->isNotEmpty())
                        @foreach ($product->combinations as $product_combination)

                            {{-- 只有一個規格就不顯示了--}}
                            {{--  @continue($product_combination->material_specifications->count() == 1)--}}

                            <div class="col-md-2 justify-content-center pt-1 pl-1">
                                {{ $product_combination->name ?:  '組合' . $product_combination->index  }}
                            </div>
                            <div class="col-md-10">
                                <div class="btn-group btn-group-toggle mb-1 product-material-spec-button-group" data-toggle="buttons">
                                    @if ($product_combination->material_specifications->isNotEmpty())
                                        @foreach ($product_combination->material_specifications as $spec)
                                            <label 
                                                class="btn btn-outline-light mr-1 mb-1 product-material-spec-button {{ $loop->first ? 'active' : '' }}"
                                                data-spec-id="{{ $spec->id }}"
                                                data-spec-name="{{ $spec->name }}"
                                                >
                                                <input type="radio" checked=""> {{ $spec->name }} 
                                            </label>
                                        @endforeach
                                    @endif
                                </div> 
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>