{{-- Bundle Items Modal --}}
@if ($product->is_bundle && !empty($bundleItems))
    <div class="modal fade" id="bundleModal" tabindex="-1" aria-labelledby="bundleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content" style="border-radius: 12px; border: none;">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold" id="bundleModalLabel">Bundle Items</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2">
                    @foreach ($bundleItems as $item)
                        <div class="d-flex align-items-center gap-3 py-3 {{ !$loop->last ? 'border-bottom' : '' }}">
                            {{-- Thumbnail --}}
                            <div class="bundle-item-thumb flex-shrink-0">
                                @if ($item['thumbnail'])
                                    <img src="{{ $item['thumbnail'] }}" alt="{{ $item['name'] }}" class="rounded-circle"
                                        style="width: 50px; height: 50px; object-fit: cover; border: 1px solid #eee;">
                                @else
                                    <div class="rounded-circle bg-light d-flex align-items-center justify-content-center"
                                        style="width: 50px; height: 50px;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            fill="#ccc" viewBox="0 0 16 16">
                                            <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
                                            <path
                                                d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z" />
                                        </svg>
                                    </div>
                                @endif
                            </div>

                            {{-- Details --}}
                            <div class="flex-grow-1">
                                <p class="mb-1 fw-semibold small">{{ $item['name'] }}</p>
                                <div class="d-flex align-items-center gap-3 text-muted" style="font-size: 12px;">
                                    @if ($item['size'])
                                        <span>Size: <strong>{{ $item['size'] }}</strong></span>
                                    @endif
                                    @if ($item['color_code'])
                                        <span class="d-flex align-items-center gap-1">
                                            Color:
                                            <span class="d-inline-block rounded-circle"
                                                style="width: 12px; height: 12px; background-color: {{ $item['color_code'] }}; border: 1px solid #ddd;"></span>
                                        </span>
                                    @endif
                                    <span>QTY: <strong>{{ $item['quantity'] }} pc</strong></span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endif


<!-- FREE SHIPPING MODAL -->

<div class="modal fade" tabindex="-1" id="freeShippingModal" aria-hidden="true"
    aria-labelledby="freeShippingModalToggleLabel">
    <div class="modal-dialog modal-dialog-centered modal-md">
        <div class="modal-content" style="border-radius: 25px;">
            <div class="modal-header border-0 pb-0" style="position: relative; z-index: 10;">
                <button type="button" class="btn-close ms-auto me-1 mt-1" data-bs-dismiss="modal" aria-label="Close"
                    style="background-color: #fff; border-radius: 50%; opacity: 0.8; padding: 10px;"></button>
            </div>

            <div class="modal-body d-flex justify-content-center align-items-center p-1 pt-0">
                <img src="{{ asset('frontend_assets/images/Rectangle1964.png') }}" class="img-fluid free-shipping-img"
                    alt="Free Shipping" onerror="this.src='https://via.placeholder.com/300x150?text=Free+Shipping'">
            </div>
            <div class="text-center pb-0 px-4">
                @php
                    $target = $currentCountry->free_order_delivery_value ?? 0;
                    $symbol = $currentCountry->currency_symbol ?? 'AED';
                    $cartTotalAmt = $cartTotal ?? 0;
                    $remaining = $target - $cartTotalAmt;
                @endphp

                @if ($target > 0)
                    @if ($remaining > 0)
                        <p class="ship-text-1 mx-auto">
                            {{ webTrans('add', 'product') }} &nbsp; <span>{{ formatPriceWithSymbol($remaining, $currentCountry) }}</span>
                            &nbsp;{{ webTrans('more_to_your_cart_and_enjoy', 'product') }}
                            <span>{{ webTrans('free_shipping', 'product') }}&nbsp;</span>{{ webTrans('on_your_order') }}
                        </p>
                        <p class="ship-text-1 mx-auto">{{ webTrans('free_shipping_on_orders_above', 'product') }} <br>
                            <span>{{ formatPriceWithSymbol($target, $currentCountry) }}</span>.
                            {{ webTrans('hurry_dont_miss_out', 'product') }}
                        </p>
                    @else
                        <p class="ship-text-1 mx-auto text-success fw-bold">
                            {{ webTrans('congratulations_you_qualify_for', 'product') }}
                            <span>&nbsp;{{ webTrans('free_shipping', 'product') }}</span>!
                        </p>
                        <p class="ship-text-1 mx-auto">
                            {{ webTrans('free_shipping_applied_on_orders_above', 'product') }} &nbsp;<br>
                            <span>{{ formatPriceWithSymbol($target, $currentCountry) }}</span>.
                        </p>
                    @endif
                @else
                    <p class="ship-text-1 mx-auto">{{ webTrans('free_shipping_is_currently_unavailable') }}</p>
                @endif
            </div>

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