@php
    $choicesMatrix = $product->choices_matrix ?? [];
    if(is_object($choicesMatrix)) $choicesMatrix = (array)$choicesMatrix;
@endphp

@once
    @include('themes.includes.components.product-choices.styles')
    @include('themes.includes.components.product-choices.scripts')
@endonce

@if(isset($choicesMatrix['choices']) && count($choicesMatrix['choices']) > 0)
    <div class="product-choices-section mb-4" id="product-choices-{{ $product->products_id }}">
        @foreach($choicesMatrix['choices'] as $choice)
            @php $choice = (array)$choice; @endphp
            <div class="choice-group mb-4">
                <h6 class="text_4 mb-3 font-16">{{ $choice['choices_name'] }}</h6>
                <div class="d-flex flex-wrap gap-3">
                    @foreach($choice['childs'] as $option)
                        @php
                            $option = (array)$option;
                            $firstWord = explode(' ', $option['choices_name'])[0];
                            $hasImage = isset($option['choices_image']) && $option['choices_image'];
                            $imgSrc = $hasImage ? ($imagesBaseUrl ?? '') .'uploads/'.env('accountId').'/choices/original/'.$option['choices_image'] : '';

                            // Safe retrieval of show_name with explicit casting
                            $showName = 1; // Default to 1 (Show Name)
                            if (isset($choice['choices_show_name']) && $choice['choices_show_name'] !== null && $choice['choices_show_name'] !== '') {
                                $showName = (int)$choice['choices_show_name'];
                            }

                            // Determine Display Mode
                            // 1. Full (Name + Image): ShowName=1 && HasImage
                            // 2. Circle Only (Image): ShowName=0 && HasImage
                            // 3. Text Only: !HasImage (Fallback to text even if ShowName=0)

                            $isFull = ($showName === 1 && $hasImage);
                            $isCircleOnly = ($showName === 0 && $hasImage);
                            $isTextOnly = (!$hasImage);

                            $containerClass = 'choice-item d-flex align-items-center justify-content-center position-relative cursor-pointer';
                            if ($isFull) $containerClass .= ' has-icon';
                            if ($isTextOnly) $containerClass .= ' text-only';
                            if ($isCircleOnly) $containerClass .= ' circle-only';
                        @endphp
                        <div class="{{ $containerClass }}"
                             data-group="{{ $choice['choices_name'] }}"
                             data-option="{{ $option['choices_name'] }}"
                             data-choice-id="{{ $choice['choices_id'] }}"
                             data-option-id="{{ $option['choices_id'] }}"
                             data-product-id="{{ $product->products_id }}"
                             data-show-name="{{ $showName }}"
                             title="{{ $option['choices_name'] }}"
                             onclick="selectProductChoice(this)">

                            {{-- Icon / Circle Wrapper --}}
                            @if(!$isTextOnly)
                                <div class="choice-icon-wrapper">
                                    @if($hasImage)
                                        <img src="{{ $imgSrc }}"
                                             alt="{{ $option['choices_name'] }}"
                                             class="choice-img"
                                             onerror="handleChoiceImageError(this)">
                                        {{-- Fallback if image fails to load --}}
                                        <div class="fallback-icon" style="display:none;">{{ $firstWord }}</div>
                                    @else
                                        {{-- Fallback for Circle Only Mode when no image exists in DB --}}
                                        <div class="fallback-icon">{{ $firstWord }}</div>
                                    @endif
                                </div>
                            @endif

                            {{-- Text Label (Show if Full OR Text Only) --}}
                            @if(!$isCircleOnly)
                                <span class="font-14 fw-bold">{{ $option['choices_name'] }}</span>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
        <input type="hidden" id="products_choices_id_{{ $product->products_id }}" name="products_choices_id">
    </div>

    <script>

        document.addEventListener('DOMContentLoaded', function() {
            if (!window.ProductChoicesData) window.ProductChoicesData = {};
            window.ProductChoicesData['{{ $product->products_id }}'] = {
                availableChoices: @json( ((array)($product->choices_matrix ?? []))['products_choices'] ?? [] ),
                choicesMatrix: @json( ((array)($product->choices_matrix ?? []))['choices'] ?? [] ),
                imagesBaseUrl: "{{ $imagesBaseUrl ?? '' }}",
                accountId: "{{ env('accountId') }}",
                addToCartRoute: "{{ route('addCart') }}",
                currencySymbol: "{{ $settings_currency ?? '' }}",
                showStocks: "{{ $account->accounts_show_stocks ?? 0 }}",
                productStock: {{ $product->products_stocks ?? 0 }},
                basePrice: {{ $product->products_price ?? 0 }},
                basePriceAfterDiscount: {{ ($product->offer && $product->offer->offers_additional_number == 0 && $product->offer->offers_main_number == 1) ? ($product->products_price - (($product->products_price * $product->offer->offers_discount) / 100 )) : 0 }},
                hasOffer: {{ ($product->offer && $product->offer->offers_additional_number == 0 && $product->offer->offers_main_number == 1) ? 1 : 0 }},
                allImages: @json($product->all_images ?? []),
                mainImage: "{{ $product->products_img ?? '' }}",
                productVideo: "{{ $product->products_video ?? '' }}",
                videoThumbnail: "{{ $product->products_video ? (getVideoThumbnail($product->products_video) ?: asset('images/video.png')) : '' }}",
                currentSelection: {}
            };

            if(typeof updateQuantityButtons === 'function') {
                updateQuantityButtons('{{ $product->products_id }}');
            }
        });
    </script>
@endif