<style>
.gray {
background: #dddddd;
}
</style>
{% set formId = "form-#{loop.index0}" %}
{% set anchor = "goods-#{item.goods.goodsId}" %}
{% if parent %}
<input type="hidden" name="returnUrl" value="{{ url('item/detail', { 'id': parent.goods.itemId }) }}#{{ anchor }}">
{% endif %}
<div class="anchor-wrapper">
<a class="anchor" id="{{ anchor }}"></a>
<div class="new-cart-area">
{% if NewUI.ColorSelector.Enabled %}
<div class="col1">
<div class="current-sku-info">
<div class="current-color">
<div class="image-holder">
<img class="current-color-img" src="">
</div>
<div class="tile-name"></div>
<div class="title">選択中のカラー</div>
</div>
<div class="goods-label-list">
{{ showGoodsLabelList(item.goods) | raw }}
</div>
</div>
</div>
{% endif %}
<div class="col2">
<div class="select-sku-panel">
{% if NewUI.ColorSelector.Enabled %}
<div class="select-color-panel">
{% if NewUI.ColorSelector.ShowCaption %}
<div class="title required">カラーを選択</div>
{% endif %}
<div class="horizontal-menu color-selector">
{% for index, color in item.colorList %}
{% if not color.isHidden %}
<div class="menu-item">
<div class="color-tile{% if index == "main" or 0 %} selected{% endif %}" data-gcl-id="{{ color.gclId }}">
<div class="image-holder{% if color.isSokujitsuHassou %} sokujitsu-hassou{% endif %}">
{% if color.itemSashikomiImage is not empty %}
<img src="https://img0.land-mark.biz/ut_img/{{ color.itemSashikomiImage.path }}">
{% elseif item.itemHiraokiImage is not empty %}
<img src="{{ item.itemHiraokiImage.path }}">
{% endif %}
</div>
<div class="tile-name">{{ color.colorName }}({{ color.janShiireColor }})</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% if NewUI.SizeSelector.Enabled %}
<div class="select-size-panel">
{% if NewUI.SizeSelector.ShowCaption %}
<div class="title required">サイズ・数量を選択</div>
{% endif %}
{% for j, color in item.goods.goodsColorList %}
<div class="size-selector{% if j == 0 %} active{% endif %}" data-gcl-id="{{ color.gclId }}">
<table>
<colgroup>
<col class="size" />
<col class="price" />
<col class="quantity" />
<col class="stock" />
</colgroup>
<thead>
<tr class="head">
<th>サイズ</th>
<th>販売価格(税込)</th>
<th>数量</th>
<th>在庫状況</th>
</tr>
</thead>
<tbody>
{% if visibleSizes is empty %}
{% set visibleSizes = item.sizeList|filter(size => not size.hidden) %}
{% endif %}
{% set indexLoop = 0 %}
{% for size in visibleSizes %}
{% if skuMap is empty %}
{% set sku = item.getSkuByIdentifiers(color.gclId, size.gpId , indexLoop) %}
{% else %}
{% set sku = skuMap[color.gclId][size.gpId] ?? null %}
{% endif %}
{% set indexLoop = indexLoop + 1 %}
{% if sku is not empty %}
<tr>
<td class="size">
<span class="size_name{% if sku.isSokujitsuHassouAvailable %} sokujitsu{% endif %}">{{ size.sizeName }}</span>
</td>
<td class="price"><span class="price">{{ size.price|LmPrice }}(税込)</span></td>
{% set gray = sku.noDisp %}
<td class="quantity">
{% if isMobile() %}
<select name="product_matrix[{{ sku.janId }}]" class="kazu{% if sku.backOrder == constant('\\Lm\\Entity\\Sku::BACK_ORDER_RESERVATION') %} reservation{% endif %}"{% if (sku.backOrder != constant('\\Lm\\Entity\\Sku::BACK_ORDER_RESERVATION') and sku.stockAvailability == constant('\\Lm\\Entity\\Sku::STOCK_AVL_OUT_OF_STOCK')) or gray %} disabled{% endif %}>
{% for i in range(0, 100) %}
<option value="{{ i }}">{% if i == 0 %}数量{% else %}{{ i }}{% endif %}</option>
{% endfor %}
</select>
{% else %}
<input type="text" name="product_matrix[{{ sku.janId }}]" class="kazu{% if sku.backOrder == constant('\\Lm\\Entity\\Sku::BACK_ORDER_RESERVATION') %} reservation{% endif %}"{% if (sku.backOrder != constant('\\Lm\\Entity\\Sku::BACK_ORDER_RESERVATION') and sku.stockAvailability == constant('\\Lm\\Entity\\Sku::STOCK_AVL_OUT_OF_STOCK')) %} disabled{% endif %} min="0" value="0">
<div class="btn-up-down">{#
#}<span class="btn-up">▲</span>{#
#}<span class="btn-down">▼</span>{#
#}</div>
{% endif %}
</td>
<td class="stock{% if gray is defined and gray %} gray{% endif %}">
<span class="zaiko">
{% if sku.backOrder > constant('\\Lm\\Entity\\Sku::BACK_ORDER_UNAVAILABLE') %}
{% elseif sku.stockAvailability != constant('\\Lm\\Entity\\Sku::STOCK_AVL_OUT_OF_STOCK') %}
{% if not gray %}
<span class="zaiko_number{% if sku.stockAvailability == constant('\\Lm\\Entity\\Sku::STOCK_AVL_LOW_STOCK') %} low-stock{% endif %}">{{ sku.stockTotal }}</span>
{% endif %}
{% else %}
{% if not gray %}
在庫切れ
{% endif %}
{% endif %}
{% if sku.sokujitsuHassouAvailable and not gray %}
{# dump({ "sku.stockBichiku": sku.stockBichiku, "sku.isBichikuReady": sku.isBichikuReady }) #}
<span class="zaiko_number sokujitsu">{{ sku.stockSokujitsu }}</span>
{% endif %}
{% if sku.backOrder > constant('\\Lm\\Entity\\Sku::BACK_ORDER_UNAVAILABLE') %}
<div class="nyuka-yotei">
入荷予定日<br>
{{ formatStockArrivalDate(sku.bichikuNyukaDate ?: sku.nyukaDate) }}
</div>
{% else %}
{% endif %}
</span>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% if parent %}
<div>
<button type="button" class="btn-v2 forward btn_next_item" alt="※クリックすると画面が下に移動します">次のセット商品を選ぶ</button>
</div>
{% endif %}
</div>
</div>
</div>