@php
    $name = $item['name'] ?? '';
    $colors = null;
    $materials = null;
    $colors = array_filter($itemsProductAttribute, function ($arrItem) {
        return $arrItem['attribute_id'] == 1;
    });
    $materials = array_filter($itemsProductAttribute, function ($arrItem) {
        return $arrItem['attribute_id'] == 3;
    });
@endphp

<div class="container product-detail">
    <div class="card">
        <div class="container-fliud">
            <div class="wrapper row">
                <div class="preview col-md-6">

                    <div class="preview-pic tab-content">
                        <div class="tab-pane active" id="pic-1"><img src="http://placekitten.com/400/252" /></div>
                    </div>

                </div>
                <div class="details col-md-6">
                    <h3 class="product-title">{{ $name }}</h3>
                    <h4 class="price">Giá: <span>0</span></h4>
                    @if ($colors)
                        <h5 class="colors properties">Màu sắc:
                            @foreach ($colors as $arrItem)
                                @php
                                    $arrItemName = $arrItem['value'] ?? '';
                                    $arrItemId = $arrItem['id'];
                                    $arrItemIsActive = $arrItem['default'] ? 'active' : '';
                                @endphp
                                <span class="color {{ $arrItemIsActive }}" data-id="{{ $arrItemId }}" data-value="{{ $arrItemName }}"
                                    data-toggle="tooltip" title="{{ $arrItemName }}">{{ $arrItemName }}</span>
                            @endforeach
                        </h5>
                    @endif

                    @if ($materials)
                        <h5 class="sizes properties">Chất liệu:
                            @foreach ($materials as $arrItem)
                                @php
                                    $arrItemName = $arrItem['value'] ?? '';
                                    $arrItemId = $arrItem['id'];
                                    $arrItemValuePrice = $arrItem['value_price'] ?? 0;
                                    $arrItemIsActive = $arrItem['default'] ? 'active' : '';
                                @endphp
                                <span class="size {{ $arrItemIsActive }}" data-id="{{ $arrItemId }}" data-value="{{ $arrItemName }}"
                                    data-price="{{ $arrItemValuePrice }}" data-toggle="tooltip"
                                    title="{{ $arrItemName }}">{{ $arrItemName }} {{ $arrItemValuePrice }}</span>
                            @endforeach
                        </h5>
                    @endif

                    <div class="action">
                        <button data-id="{{ $item["id"] }}" data-name="{{ $name }}" class="add-to-cart btn btn-success text-uppercase" type="button">add to cart</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container cart-section">
    <h3>Giỏ hàng</h3>
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Tên sản phẩm</th>
                <th>Giá sản phẩm</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>