<section>
    <h2 class="text-center">1 Tester gratis für Dich</h2>
    <p class="text-center">Wähle nun eines der aufgeführten Produkte.</p>

    <div class="row justify-content-center">
        @php($free_product_id = Yard::instance('shopping')->getFreeProductId())

        @foreach ($promotion_user->promotion_user_products_active as $promotion_user_product)
            @if ($promotion_user_product->isShow())
                <div class="col-md-6 col-lg-4 text-center mb-4">
                    @if ($promotion_user_product->product->images)
                        @if ($image = $promotion_user_product->product->images->first())
                            <img src="{{ route('product_image', [$image->slug]) }}" class="mb-2 img-fluid" alt="">
                        @endif
                    @endif
                    <h4 class="product-title">
                        {{ $promotion_user_product->product->name }}
                    </h4>
                    <div class="mb-2 product-description">
                        {{ $promotion_user_product->product->getShortCopy(true, 110) }}
                    </div>
                    <div class="more_details">
                        <a href="" class="" data-modal="modal-lg" data-toggle="modal"
                            data-target="#modals-load-content"
                            data-id="{{ $promotion_user_product->product->id }}"
                            data-route="{{ route('web_promotion_modal_load') }}"
                            data-action="web-show-product" data-view="no-price">
                            <i class="fa fa-search"></i> Mehr Details</a>
                    </div>
                    <div class="mt-4 mb-3">
                        <div class="switcher-holder btn-add-free-product">
                            <label class="switcher switcher-success">
                                <input type="radio" class="switcher-input" name="free_product_id" 
                                value="{{ $promotion_user_product->id }}" data-product_id={{ $promotion_user_product->product->id }} data-error="#error-free_product_id" 
                                @if($free_product_id === $promotion_user_product->id) checked @endif 
                                required>
                                <span class="switcher-indicator">
                                    <span class="switcher-yes">
                                        <span class="ion ion-md-checkmark"></span>
                                    </span>
                                    <span class="switcher-no">
                                        <span class="ion ion-md-close"></span>
                                    </span>
                                </span>
                                <span class="switcher-label"> möchte ich haben</span>
                            </label>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
        <div class="col-12">
            <div id="error-free_product_id" class="text-center"></div>
            <hr class="mt-0">
        </div>
    </div>
</section>