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

@if($cartContentGroup->isNotEmpty())

    {{-- cartTable-舊 --}}
    {{-- <div @class(["collapse", "detaiInner px-0 pt-0",
            // "show" => $isCollapseMatch($inputCheckedThisGroupValue),
            "show" => true,
        ])
        id="collapseExample_{{ $inputCheckedThisGroupValue }}"> --}}

    {{-- 觸發選取該選溫層群組底下所有商品使用-舊 --}}
    {{-- <button @class([
                "collapseBtn", "btn" ,"w-100", "p-3", "d-flex", "align-items-center", "bg-gray-light",
                // "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">{{ $title }} </p>
        </div>
    </button> --}}
    <!-- <table class="cartTable">
        <colgroup>
            <col span="1" class="w30per">
            <col span="3" class="w20per">
            <col span="1" class="w10per">
        </colgroup>
        <tbody class="border-bottom border-black">
            <tr>
                <th>商品 / 規格</th>
                <th class="d-none d-md-table-cell">單價</th>
                <th class="d-none d-md-table-cell">數量</th>
                <th class="d-none d-md-table-cell">價格</th>
                <th class="d-table-cell d-md-none"></th>
                <th>刪除</th>
            </tr>
            {{-- @foreach($cartContentGroup as $item) --}}
                <tr>
                    <td>
                        <div class="tableFlexBox">
                            {{-- <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="imageTrimmingSquare">
                                {{-- <img src="{{ Image::publicOnPublic($item->options->productVariantAttribute->cover?->id, 100) }}" alt="{{ $this->itemTitle($item) }}"> --}}
                            </div>
                            <p class="productTitle text-ellipsis">
                                {{-- {{ $this->itemTitle($item) }} --}}
                            </p>
                        </div>
                    </td>
                    {{-- <td class="d-none d-md-table-cell">NT{!! $this->itemSalePrice($item) !!}</td> --}}
                    <td class="d-none d-md-table-cell">
                        <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>
                    </td>
                    {{-- <td class="d-none d-md-table-cell">NT{!! $this->itemTotal($item) !!}</td> --}}
                    <td class="d-table-cell 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> --}}
                    </td>
                    <td>
                        {{-- <a wire:click="delete('{{ $item->rowId }}', '{{ $cartChannelValue }}')" class="text-decoration-none text-black border border-medium-brown d-inline-block p-2 rounded">
                            刪除
                        </a> --}}
                    </td>
                </tr>
            {{-- @endforeach --}}
        </tbody>
    </table> -->

    {{-- 新增：加購商品 --}}
    <div class="mb-5 accordion" id="accordionOrder">
        <div class="accordion-item border-0">
            <h2 class="accordion-header border border-black">
                <button class="accordion-button productTypeTitle shadow-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionExample_{{ $inputCheckedThisGroupValue }}" aria-expanded="true" aria-controls="accordionExample_{{ $inputCheckedThisGroupValue }}" 
                onclick="toggleChevron2(
                    '#accordionExample_{{ $inputCheckedThisGroupValue }}', '{{ $inputCheckedThisGroupValue }}'
                )"
                >
                    
                    <input name="checkedThisGroup"
                    type="radio"
                    class="form-check-input p-2"
                    wire:model.live="checkedThisGroup"
                    value="{{ $inputCheckedThisGroupValue }}"
                    id="accordionExample_{{ $inputCheckedThisGroupValue }}_radio"
                    >

                    {{ $title }} 

                </button>
            </h2>

            <div id="accordionExample_{{ $inputCheckedThisGroupValue }}" class="accordion-collapse collapse" aria-labelledby="headingOne">
                <div class="accordion-body p-0">

                    {{-- 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

<script>

    $(document).ready(function() {

        // 讓購物車只會有一個商品清單被打開並且會打開加購商品清單
        $('.productTypeTitle:first').trigger('click');

        $('.productTypeTitle').click(function() {

            // 判斷點擊的按鈕是否已經是展開狀態
            if (!$(this).hasClass('collapsed')) {
                // 選擇所有除了當前被點擊的按鈕以外的其他按鈕
                $('.productTypeTitle').not(this).each(function() {
                    // 判斷其他按鈕是否展開，如果是，則收起它
                    if (!$(this).hasClass('collapsed')) {
                        $(this).addClass('collapsed');
                        const target = $(this).attr('data-bs-target');
                        $(target).collapse('hide');
                    }
                });

                // 打開加購商品清單
                if ($('.addOnAccordionBtn').hasClass('collapsed')) {
                    $('.addOnAccordionBtn').each(function() {
                        $(this).trigger('click');
                    });
                }
            }
        });
    });

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

    // 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>