@php use App\Libraries\Icon; @endphp
{{-- 用於參考: cms.product.create --}}
<div class="card js-product-variant-block mt-3" data-variant-index="{{ $index }}">
    <input type="hidden" name="variantIds[]" value="{{ $variantIds ?? "" }}">
    <div class="card-header">
        <div class="row align-items-center g-3">

            <div class="col-auto text-dark js-variant-title"
                 data-bs-toggle="collapse"
                 data-bs-target="#collapse-target-{{ $index }}"
                 aria-expanded="false"
                 aria-controls="collapse-target-"
            >
                @if (isset($variantIds))
                    <label class="form-label fw-bolder" style="cursor: pointer">* #{{ $variantIds }}規格名稱</label>
                @else
                    <label class="form-label fw-bolder" style="cursor: pointer">*規格名稱</label>
                @endif
            </div>
            <div class="col-auto">
                <input type="text" class="form-control variantTitles"
                       name="variantTitles[{{ $index }}]"
                       value="{{ $variantTitles ?? "預設規格" }}"
                       placeholder="後台用來辨識使用，請保持填寫"
                       required
                >
            </div>
            <div class="col-auto">
                @if (is_null($variantIds))
                    <button
                        {{ \App\Libraries\Directive::hidden() }}
                        class="btn btn-secondary btn-sm js-remove-variant" type="button">
                        {!! Icon::delete() !!}
                    </button>
                @endif
            </div>
        </div>
    </div>
    <div class="card-body collapse" id="collapse-target-{{ $index }}">

        <div class="attribute-blocks">
            @foreach($attributes as $indexAttribute => $attribute)
                @include("cms.product.attribute-block", [
                    "index" => $indexAttribute,
                    "variantIndex" => $index,
                    "attribute" => $attribute
                ])
            @endforeach
        </div>

        <template class="attributes">
            @include("cms.product.attribute-block", [
                "index" => 0,
                "variantIndex" => $index,
                "attribute" => null
            ])
        </template>

        <div class="button-blocks">
            <div class="row">
                <div class="col-auto">
                    <button class="btn btn-secondary btn-sm js-add-attribute" type="button">新增項目</button>
                </div>
            </div>
        </div>


    </div>
</div>