@php use App\Enums\ShippingTemperatureForSystem;use App\Libraries\Image; @endphp


@if($cartContentGroup->isNotEmpty())

    {{-- 新增：加購商品 --}}
    <div class="mb-5 accordion" id="accordionOrder">
        <div class="accordion-item border-0">
            <h2 class="accordion-header border border-black">

                {{-- 如果要關閉，添加 .collapsed 和 aria-expanded="false" --}}
                <button
                    @class([
                        "accordion-button",
                        "productAccordionButton",
                        "shadow-none",
                        "collapsed" => !$isExpanded($checkedThisGroup, $inputCheckedThisGroupValue)
                    ])
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#accordionExample_{{ $inputCheckedThisGroupValue }}"
                    aria-expanded="{{ $checkedThisGroup === $inputCheckedThisGroupValue ? 'true' : 'false' }}"
                    aria-controls="accordionExample_{{ $inputCheckedThisGroupValue }}">

                    {{-- 這個 radio 只是好看用。實際有功能的其實在 .checkedThisGroupRadio --}}
                    <input type="radio"
                           name="just-display"
                           class="just-display form-check-input p-2 checkedThisGroupRadio"
                        @checked($isExpanded($checkedThisGroup, $inputCheckedThisGroupValue))>

                    <span>{{ $title }}</span>

                </button>
            </h2>

            {{-- 如果要關閉，添加 .collapse--}}
            <div id="accordionExample_{{ $inputCheckedThisGroupValue }}"
                 @class([
                    "accordion-collapse",
                    "collapse" => !($isExpanded($checkedThisGroup, $inputCheckedThisGroupValue))
                    ])
                 aria-labelledby="headingOne">
                <div class="accordion-body p-0">

                    {{-- 這顆 radio 可以觸發 livewire 改為選取當前的溫層內的所有商品 --}}
                    <input name="checkedThisGroup"
                           type="radio"
                           class="form-check-input p-2 checkedThisGroupRadio"
                           wire:model.live="checkedThisGroup"
                           value="{{ $inputCheckedThisGroupValue }}"
                           id="accordionExample_{{ $inputCheckedThisGroupValue }}_radio"
                           hidden
                    >


                    {{-- cartGrid --}}
                    <div class="cartGrid container">
                        <div class="row border-bottom border-black text-center fw-bold py-4 px-2">
                            <div class="col-md-4 col-3">商品 / 規格</div>
                            <div class="col  d-none d-md-block">單價</div>
                            <div class="col  d-none d-md-block">數量</div>
                            <div class="col  d-none d-md-block">價格</div>
                            <div class="col  d-block d-md-none"></div>
                            <div class="col-2 col-md-1 ">刪除</div>
                            <div class="col-2 col-md-1 ">加購</div>
                        </div>
                        @foreach($cartContentGroup as $item)

                            <div class="border-bottom border-black">
                                {{-- 商品 --}}
                                <div class="row p-4 border-bottom-0">
                                    <div class="col-md-4 col-3 p-0">
                                        <div class="row tableFlexBox align-content-center ">
                                            <input @checked($item->options->isChecked === true)
                                                   type="checkbox"
                                                   name="isChecked"
                                                   class="form-check-input me-5"

                                                   {{-- 避免跨溫層點擊 --}}
                                                   @disabled($inputCheckedThisGroupValue !== $checkedThisGroup)
                                                   wire:change="toggleItemChecked('{{ $item->rowId }}')"
                                            >

                                            <div class="col-1 imageTrimmingSquare">
                                                <img
                                                    src="{{ Image::publicOnPublic($item->options->productVariantAttribute->cover?->id, 100) }}"
                                                    alt="{{ $this->itemTitle($item) }}">
                                            </div>
                                            <p class="col d-none d-md-inline text-left productTitle align-content-center">{{ $this->itemTitle($item) }}</p>
                                        </div>
                                    </div>
                                    <div class="col text-center text-nowrap d-none d-md-block align-content-center">
                                        NT{!! $this->itemSalePrice($item) !!}</div>
                                    <div class="col text-center text-nowrap d-none d-md-block align-content-center">
                                        <div class="spinnerBtn border-0 w-auto align-content-center">
                                            <span
                                                wire:click="updateQuantity('{{ $item->rowId }}', 'decrease', '{{ $cartChannelValue }}')"
                                                class="sub border border-black bg-white fs-6"><i
                                                    class="fa-solid fa-minus text-black"></i></span>
                                            <span class="text-black">{{ $this->itemQuantity($item) }}</span>
                                            <span
                                                wire:click="updateQuantity('{{ $item->rowId }}', 'increase', '{{ $cartChannelValue }}')"
                                                class="add border border-black bg-white fs-6"><i
                                                    class="fa-solid fa-plus text-black"></i></span>
                                        </div>
                                    </div>
                                    <div
                                        class="col text-center text-nowrap d-none d-md-block align-content-center align-content-center">
                                        NT{!! $this->itemTotal($item) !!}</div>

                                    {{-- mobile --}}
                                    <div class="col text-center text-nowrap d-block d-md-none align-content-center">
                                        <p class="productTitle02 text-ellipsis">{{ $this->itemTitle($item) }}</p>
                                        <div class="spinnerBtn border-0 w-auto my-3 d-inline-flex">
                                            <span
                                                wire:click="updateQuantity('{{ $item->rowId }}', 'decrease', '{{ $cartChannelValue }}')"
                                                class="sub border border-black bg-white fs-6"><i
                                                    class="fa-solid fa-minus text-black"></i></span>
                                            <span class="text-black">{{ $this->itemQuantity($item) }}</span>
                                            <span
                                                wire:click="updateQuantity('{{ $item->rowId }}', 'increase', '{{ $cartChannelValue }}')"
                                                class="add border border-black bg-white fs-6"><i
                                                    class="fa-solid fa-plus text-black"></i></span>
                                        </div>
                                        <p class="">NT{!! $this->itemTotal($item) !!}</p>
                                    </div>
                                    {{-- mobile --}}

                                    <div class="col-2 col-md-1 text-center text-nowrap align-content-center">
                                        <a wire:click="delete('{{ $item->rowId }}', '{{ $cartChannelValue }}')"
                                           class="text-decoration-none text-black border border-medium-brown d-inline-block p-2 rounded">刪除</a>
                                    </div>
                                    <div class="col-2 col-md-1 text-center text-nowrap align-content-center">
                                        <button class="accordion-button addOnAccordionBtn shadow-none bg-white"
                                                type="button" data-bs-toggle="collapse" data-bs-target="#orderOne"
                                                aria-expanded="true" aria-controls="orderOne">
                                        </button>
                                    </div>
                                </div>

                                {{-- 加購 --}}
                                <div id="orderOne" class="accordion-collapse show"
                                     aria-labelledby="addOnHeadingOne"> {{-- 此id要跟上面的按鈕連動 --}}
                                    <div class="accordion-body p-0">

                                        <div class="row tableFlexBox p-4 border-bottom-0">
                                            <div class="col-md-4 col-3 align-content-center">
                                                <div class="row justify-content-center align-content-center">
                                                    <input @checked($item->options->isChecked === true)
                                                           type="checkbox"
                                                           name="isChecked"
                                                           class="form-check-input align-self-center me-5"

                                                        {{-- 避免跨溫層點擊 --}}
                                                        {{-- @disabled($inputCheckedThisGroupValue !== $checkedThisGroup)
                                                        wire:change="toggleItemChecked('{{ $item->rowId }}')" --}}
                                                    >

                                                    <p class="col-md-2 col text-center align-self-center text-nowrap bg-brown text-white p-2">
                                                        加購</p>
                                                    <p class="col d-none d-md-inline text-left productTitle">{{ $this->itemTitle($item) }}</p>
                                                </div>
                                            </div>
                                            <div class="col text-center text-nowrap d-none d-md-block">
                                                NT{!! $this->itemSalePrice($item) !!}</div>
                                            <div class="col text-center text-nowrap d-none d-md-block">
                                                <div class="spinnerBtn border-0 w-auto">
                                                    <span
                                                        wire:click="updateQuantity('{{ $item->rowId }}', 'decrease', '{{ $cartChannelValue }}')"
                                                        class="sub border border-black bg-white fs-6"><i
                                                            class="fa-solid fa-minus text-black"></i></span>
                                                    <span class="text-black">{{ $this->itemQuantity($item) }}</span>
                                                    <span
                                                        wire:click="updateQuantity('{{ $item->rowId }}', 'increase', '{{ $cartChannelValue }}')"
                                                        class="add border border-black bg-white fs-6"><i
                                                            class="fa-solid fa-plus text-black"></i></span>
                                                </div>
                                            </div>
                                            <div class="col text-center text-nowrap d-none d-md-block">
                                                NT{!! $this->itemTotal($item) !!}</div>
                                            <div class="col text-center text-nowrap d-block d-md-none">
                                                <p class="productTitle02 text-ellipsis">{{ $this->itemTitle($item) }}</p>
                                                <div class="spinnerBtn border-0 w-auto my-3 d-inline-flex">
                                                    <span
                                                        wire:click="updateQuantity('{{ $item->rowId }}', 'decrease', '{{ $cartChannelValue }}')"
                                                        class="sub border border-black bg-white fs-6"><i
                                                            class="fa-solid fa-minus text-black"></i></span>
                                                    <span class="text-black">{{ $this->itemQuantity($item) }}</span>
                                                    <span
                                                        wire:click="updateQuantity('{{ $item->rowId }}', 'increase', '{{ $cartChannelValue }}')"
                                                        class="add border border-black bg-white fs-6"><i
                                                            class="fa-solid fa-plus text-black"></i></span>
                                                </div>
                                                <p class="">NT{!! $this->itemTotal($item) !!}</p>
                                            </div>
                                            <div class="col-2 col-md-1 text-center text-nowrap align-content-center">
                                                <a wire:click="delete('', '')"
                                                   class="text-decoration-none text-black border border-medium-brown d-inline-block p-2 rounded">刪除</a>
                                            </div>
                                            <div class="col-2 col-md-1 text-center text-nowrap align-content-center">

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        @endforeach
                    </div>

                </div>
            </div>
        </div>
    </div>

@endif