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

@if($cartContentGroup->isNotEmpty())
    <div class="group-normal mb-3">

        {{-- 觸發選取該選溫層群組底下所有商品使用 --}}
        <button @class([
                    "collapseBtn", "btn" ,"w-100", "p-3", "d-flex", "align-items-center",
                    // "active" =>  $isCollapseMatch($inputCheckedThisGroupValue),
                    "active" =>  true,
                ])
                {{-- id="cart-list-collapse" --}}
                type="button"
                {{-- data-bs-toggle="collapse" --}}
                {{-- data-bs-target="#collapseExample_{{ $inputCheckedThisGroupValue }}" --}}
                {{-- aria-expanded="false" --}}
                {{-- aria-controls="collapseExample_{{ $inputCheckedThisGroupValue }}" --}}
                {{--  onclick="toggleChevron('#collapseExample_{{ $inputCheckedThisGroupValue }}', '{{ $inputCheckedThisGroupValue }}')" --}}
                onclick="toggleChevron2('#collapseExample_{{ $inputCheckedThisGroupValue }}', '{{ $inputCheckedThisGroupValue }}')"
        >
            <input name="checkedThisGroup"
                   type="radio"
                   class="form-check-input p-2"
                   wire:model.live="checkedThisGroup"
                   value="{{ $inputCheckedThisGroupValue }}"
                   id="collapseExample_{{ $inputCheckedThisGroupValue }}_radio"
            >
            <div class="ms-3" id="whufgerwigerhui">
                <p class="fs-4 text-yiran-dark-green">{{ $title }} </p>
            </div>
            <!-- <i id="collapseExample_{{ $inputCheckedThisGroupValue }}_chevron"
                @class(["fa-solid", "fa-chevron-down", "rotate-180" => $isCollapseMatch($inputCheckedThisGroupValue)])></i> -->
        </button>

        <div @class(["collapse", "ContentSpacing",
                // "show" => $isCollapseMatch($inputCheckedThisGroupValue),
                "show" => true,
            ])
             id="collapseExample_{{ $inputCheckedThisGroupValue }}">
            <div class="card-body">
                <div class="CartMain mx-auto">

                    <ul class="ps-0 py-3 mb-0 row border-bottom border-3 border-yiran-dark-green">
                        <li class="col-md-2 col-8 text-yiran-dark-green text-start d-md-block ">
                            商品 / 規格
                        </li>
                        <li class="col-md-2 text-yiran-dark-green text-center d-md-block d-none"></li>
                        <li class="col-md-2 text-yiran-dark-green text-center d-md-block d-none">單價</li>
                        <li class="col-md-2 text-yiran-dark-green text-center d-md-block d-none">數量</li>
                        <li class="col-md-2 text-yiran-dark-green text-center d-md-block d-none">價格</li>
                        <li class="col-md-2 col-4 text-yiran-dark-green text-center d-md-block">刪除</li>
                    </ul>
                    <ul class="cart-list  bg-white ps-0 pb-5 mx-0 border-bottom border-3 border-yiran-dark-green">
                        @foreach($cartContentGroup as $item)
                            {{-- 務必加入 wire:key uniqid 強制渲染: https://livewire.laravel.com/docs/components#adding-wirekey-to-foreach-loops --}}
                            <li class="cart-list-item" wire:key="{{ uniqid() }}">
                                <ul class="ps-0 py-3 mb-0 row align-items-center">
                                    <li class="col-md-2 col-4 d-flex align-items-center">

                                        {{-- @dump($item->options->isChecked)--}}
                                        {{-- 已納入計算的勾選 --}}
                                        <input @checked($item->options->isChecked === true)
                                               type="checkbox"
                                               name="isChecked"
                                               class="form-check-input"

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

                                        <div class="cartProductImg bg-black rounded ms-3">
                                            <img class="img-fluid"
                                                 src="{{ Image::publicOnPublic($item->options->productVariantAttribute->cover?->id, 100) }}"
                                                 alt="{{ $this->itemTitle($item) }}">
                                        </div>
                                    </li>

                                    <li class="col-md-8 col-4 text-yiran-green text-center">
                                        <ul class="ps-0 row align-items-center flex-md-row flex-column">
                                            <li class="col-md-4 col mb-md-0 mb-3">
                                                <p class="productTitle text-yiran-black text-start mb-0 text-ellipsis">
                                                    {{ $this->itemTitle($item) }}
                                                </p>
                                            </li>

                                            <li class="col text-yiran-black text-center d-md-block d-none">
                                                NT{!! $this->itemSalePrice($item) !!}
                                            </li>

                                            <li class="col text-center  mb-md-0 mb-3">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div class="border border-yiran-green rounded px-2"
                                                         wire:click="updateQuantity('{{ $item->rowId }}', 'decrease', '{{ $cartChannelValue }}')">
                                                        <i class="fa-solid fa-minus"></i>
                                                    </div>
                                                    <div class="w-100">
                                                        <p class="text-yiran-black mb-0">
                                                            {{ $this->itemQuantity($item) }}
                                                        </p>
                                                    </div>
                                                    <div class="border border-yiran-green rounded px-2"
                                                         wire:click="updateQuantity('{{ $item->rowId }}', 'increase', '{{ $cartChannelValue }}')">
                                                        <i class="fa-solid fa-plus"></i>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="col text-yiran-black text-center d-md-block">
                                                <p class="text-md-center text-start mb-0">
                                                    NT{!! $this->itemTotal($item) !!}</p>
                                            </li>
                                        </ul>
                                    </li>


                                    <li class="col-md-2 col-4 text-center">
                                        <a wire:click="delete('{{ $item->rowId }}', '{{ $cartChannelValue }}')"
                                           class="text-decoration-none text-yiran-green border border-yiran-green d-inline-block p-2 rounded">
                                            <p>刪除</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

<style>
    .rotate-180 {
        transition: transform 0.3s ease-in-out;
        transform: rotate(180deg);
    }
</style>

<script>

    function toggleChevron2(targetId, inputCheckedThisGroupValue) {
        const currentRadio = document.querySelector(`${targetId}` + "_radio");
        currentRadio.click();
    }


    // function toggleChevron(targetId, inputCheckedThisGroupValue) {
    //     const currentRadio = document.querySelector(`${targetId}`+"_radio");
    //     const chevronIcon = document.querySelector(`${targetId}`+"_chevron");
    //
    //     currentRadio.click();
    //     setTimeout(function () {
    //         // chevronIcon.classList.toggle('rotate-180');
    //     }, 100)
    //
    //     rememberCollapseStatus(inputCheckedThisGroupValue)
    // }
    //
    // // 讓 AJAX Response 可以展開對應的溫層群組。觸發 livewire component 的 styleToToggleCollapse() 方法
    // function rememberCollapseStatus(inputCheckedThisGroupValue) {
    //     let component = Livewire.getByName("cart.cart-content-of-normal")
    //     let wire = component[0]
    //     // console.log(inputCheckedThisGroupValue);
    //     wire.styleToToggleCollapse(inputCheckedThisGroupValue)
    // }
</script>