{# todo modal design !!! #}
{% set oCurrency = oView.getActCurrency() %}
<div id="c4s-basket-wrapping-modal" class="modal fade" tabindex="-1" aria-labelledby="c4s-basket-wrapping-modal-title" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                {% block checkout_wrapping_header %}
                    <h5 class="modal-title" id="c4s-basket-wrapping-modal-title">{{ translate({ ident: "GIFT_OPTION" }) }}</h5>
                {% endblock %}
                <button type="button" class="btn ms-auto" data-bs-dismiss="modal" tabindex="1">
                    <span aria-hidden="true"><i class="fa-solid fa-xmark"></i></span><span class="visually-hidden">{{ translate({ ident: "CLOSE_BOX" }) }}</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3">
                        <img src="{{ oViewConf.getImageUrl("gift-wrapping.jpg") }}" alt="{{ translate({ ident: "ADD_WRAPPING" }) }}" class="img-thumbnail">
                    </div>
                    <div class="col-md-9">
                        <p>{{ translate({ ident: "WRAPPING_DESCRIPTION" }) }}</p>
                    </div>
                </div>

                {% block checkout_wrapping_contents %}
                    <h1 class="c4s-page-header blockHead">{{ translate({ ident: "ADD_WRAPPING" }) }}</h1>

                    {% if not oxcmp_basket.getProductsCount() %}
                        <div class="alert alert-danger" role="alert">{{ translate({ ident: "BASKET_EMPTY" }) }}</div>
                    {% else %}
                        <form id="c4s-wrapping-modal-form" name="basket" action="{{ oViewConf.getSelfActionLink()|raw }}" method="post" role="form">
                            {{ oViewConf.getHiddenSid()|raw }}
                            <input type="hidden" name="cl" value="basket">
                            <input type="hidden" name="fnc" value="changewrapping">

                            {% set oWrapList = oView.getWrappingList() %}
                            {% if oWrapList.count() %}
                                {# basket items #}
                                {% set iCounter = "0" %}
                                {% set aBasketArticles = oView.getBasketArticles() %}
                                {% for basketindex, oBasketItem in oxcmp_basket.getContents() %}
                                    <div class="well well-sm">
                                        <div class="row">
                                            {% block checkout_wrapping_item %}
                                                {% set basketproduct = aBasketArticles[basketindex] %}
                                                <div class="col-4">
                                                    <img src="{{ basketproduct.getIconUrl() }}" alt="{{ oBasketItem.getTitle()|striptags }}" class="img-thumbnail img-fluid">
                                                </div>
                                                <div class="col-8">
                                                    <p class="lead">{{ oBasketItem.getTitle() }}</p>
                                                </div>
                                        </div>


                                        <div id="wrapp_{{ loop.index }}" class="row">
                                            <div class="col-md-12">
                                                <div class="col-3">
                                                </div>
                                                <div class="col-9 col-sm-offset-3">
                                                    <div class="form-group">
                                                        <div class="radio">
                                                            <label class="form-label">
                                                                <input class="radiobox" type="radio" name="wrapping[{{ basketindex }}]" id="wrapping_{{ basketindex }}" value="0" {% if not oBasketItem.getWrappingId() %}CHECKED{% endif %}>
                                                                {{ translate({ ident: "NONE" }) }} <strong>0,00 {{ oCurrency.sign }}</strong>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {% set ictr = "1" %}
                                            {% for wrapping in oView.getWrappingList() %}
                                                <div class="col-md-12">
                                                    {% if wrapping.oxwrapping__oxpic.value %}
                                                        <div class="col-3">
                                                            <img src="{{ wrapping.getPictureUrl() }}" alt="{{ wrapping.oxwrapping__oxname.value }}" class="img-thumbnail">
                                                        </div>
                                                        <div class="col-9">
                                                    {% else %}
                                                        <div class="col-12">
                                                    {% endif %}
                                                        <div class="form-group">
                                                            <div class="radio">
                                                                <label class="form-label">
                                                                    <input class="radiobox" type="radio" name="wrapping[{{ basketindex }}]" id="wrapping_{{ wrapping.oxwrapping__oxid.value }}" value="{{ wrapping.oxwrapping__oxid.value }}" {% if oBasketItem.getWrappingId() == wrapping.oxwrapping__oxid.value %}CHECKED{% endif %}>
                                                                    {{ wrapping.oxwrapping__oxname.value }} <strong>{{ wrapping.getFPrice() }} {{ oCurrency.sign }}</strong>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% set ictr = ictr+1 %}
                                            {% endfor %}
{# todo {{ script({ add: "$( '#wrapp_`$loop.index` img' ).click(function(){ $(this).parent().parent().find('input').click(); });", dynamic: __oxid_include_dynamic }) }} #}
                                        </div>

                                                {% set iCounter = iCounter+1 %}
                                            {% endblock %}
                                        </div>
                                {% endfor %}
                            {% endif %}

                            {% set oCardList = oView.getCardList() %}
                            {% if oCardList.count() %}
                                {% block checkout_wrapping_cards %}
                                    <h1 class="c4s-page-header blockHead">{{ translate({ ident: "GREETING_CARD" }) }}</h1>
                                    <div class="wrappingCard clear" id="wrappCard">
                                        <div class="well well-sm">
                                            <div class="row">
                                                <div class="col-sm-9 col-sm-offset-3">
                                                    <div class="form-group">
                                                        <div class="radio">
                                                            <label class="form-label">
                                                                <input type="radio" class="radiobox" name="chosencard" id="chosencard" value="0" {% if not oxcmp_basket.getCardId() %}CHECKED{% endif %}> {{ translate({ ident: "NO_GREETING_CARD" }) }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        {% set iCounter = "0" %}
                                        {% set defaultCounter = ( defaultCounter | default(-1) ) + 1 %}
                                        {% for card in oCardList %}
                                            <div class="well well-sm">
                                                <div class="row">
                                                    {% if card.oxwrapping__oxpic.value %}
                                                        <div class="col-3">
                                                            <img src="{{ card.getPictureUrl() }}" alt="{{ card.oxwrapping__oxname.value }}" class="img-thumbnail">
                                                        </div>
                                                        <div class="col-9">
                                                    {% else %}
                                                        <div class="col-12">
                                                    {% endif %}
                                                        <div class="form-group">
                                                            <div class="radio">
                                                                <label class="form-label">
                                                                    <input class="radiobox" type="radio" name="chosencard" id="chosen_{{ card.oxwrapping__oxid.value }}" value="{{ card.oxwrapping__oxid.value }}" {% if oxcmp_basket.getCardId() == card.oxwrapping__oxid.value %}CHECKED{% endif %}> {{ card.oxwrapping__oxname.value }} <strong>{{ card.getFPrice() }} {{ oCurrency.sign }}</strong>
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {% set iCounter = iCounter+1 %}
                                        {% endfor %}
{# todo {{ script({ add: "$( '#wrappCard img' ).click(function(){ $(this).parent().siblings().find('input').click(); });", dynamic: __oxid_include_dynamic }) }} #}
                                    </div>

                                {% endblock %}
                                {% block checkout_wrapping_comment %}
                                    <div class="form-group wrappingComment">
                                        <label for="c4s-wrapping-message" class="form-label">{{ translate({ ident: "GREETING_MESSAGE" }) }}</label>
                                        <textarea id="c4s-wrapping-message"  cols="102" rows="5" name="giftmessage" class="form-control">{{ oxcmp_basket.getCardMessage() }}</textarea>
                                    </div>
                                {% endblock %}
                            {% endif %}
                        </form>
                    {% endif %}
                {% endblock %}
            </div>
            <div class="modal-footer">
                {% block checkout_wrapping_submit %}
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translate({ ident: "CANCEL" }) }}</button>
                    <button type="submit" class="btn btn-primary" onclick="document.getElementById('c4s-wrapping-modal-form').submit();">{{ translate({ ident: "APPLY" }) }}</button>
                {% endblock %}
            </div>
        </div>
    </div>
</div>