{{ script({ include: "js/wrapping.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}

{% set currency = oView.getActCurrency() %}

<div class="modal fade gift-options" id="giftoptions" tabindex="-1" role="dialog" aria-labelledby="giftoptions_modal_label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                {% block checkout_wrapping_header %}
                <span class="h4 modal-title float-start" id="giftoptions_modal_label">{{ translate({ ident: "GIFT_OPTION" }) }}</span>
                {% endblock %}

                <span class="close float-end" data-bs-dismiss="modal" aria-hidden="true">
                    <svg>
                        <use xlink:href="#times"></use>
                    </svg>
                </span>
            </div>
            <div class="modal-body">
                <p>{{ translate({ ident: "WRAPPING_DESCRIPTION" }) }}</p>
            </div>
            {% block checkout_wrapping_contents %}
                <h5 class="px-3">{{ translate({ ident: "ADD_WRAPPING" }) }}</h5>

                {% if not oxcmp_basket.getProductsCount() %}
                    <div class="alert alert-danger">{{ translate({ ident: "BASKET_EMPTY" }) }}</div>
                {% else %}
                    <form name="basket" action="{{ oViewConf.getSelfActionLink()|raw }}" method="post" id="giftoptions_modal_form">
                        {{ oViewConf.getHiddenSid()|raw }}
                        <input type="hidden" name="cl" value="basket">
                        <input type="hidden" name="fnc" value="changewrapping">
                        <div class="list-group list-group-flush">
                            {% set oWrapList = oView.getWrappingList() %}
                            {% if oWrapList|length > 0 %}
                                {# basket items #}
                                {% set icounter = "0" %}
                                {% set basketitemlist = oView.getBasketArticles() %}
                                {% for basketindex, basketitem in oxcmp_basket.getContents() %}
                                    {% block checkout_wrapping_item %}
                                        <div class="list-group-item">
                                            <div class="row">
                                                {% set basketproduct = basketitemlist[basketindex] %}
                                                <div class="col-4 col-md-3 col-lg-2">
                                                    <img loading="lazy" src="{{ basketproduct.getIconUrl()|raw }}" alt="{{ basketitem.getTitle()|striptags }}" class="cart-img img-fluid">
                                                </div>

                                                <div class="col-8 col-md-9 col-lg-10">
                                                    <p><strong>{{ basketitem.getTitle() }}</strong></p>
                                                    <div class="btn-group-vertical w-100 wrapping-select" role="group">
                                                        <input type="radio" class="btn-check" name="wrapping[{{ basketindex }}]" id="wrapping_{{ basketindex }}" autocomplete="off" checked>
                                                        <label class="btn" for="wrapping_{{ basketindex }}">
                                                            <span class="img"></span>
                                                            {{ translate({ ident: "NONE" }) }}
                                                            <strong>0,00 {{ currency.sign }}</strong>
                                                        </label>

                                                        {% set ictr = "1" %}
                                                        {% for wrapping in oView.getWrappingList() %}
                                                            <input type="radio" class="btn-check" name="wrapping[{{ basketindex }}]" id="wrapping_[{{ basketindex }}]{{ wrapping.oxwrapping__oxid.value }}" autocomplete="off" value="{{ wrapping.oxwrapping__oxid.value }}"{% if basketitem.getWrappingId() == wrapping.oxwrapping__oxid.value %} checked{% endif %}>
                                                            <label class="btn" for="wrapping_[{{ basketindex }}]{{ wrapping.oxwrapping__oxid.value }}">
                                                                {% if wrapping.oxwrapping__oxpic.value %}
                                                                <span class="img">
                                                                    <img data-bs-target="wrapping_{{ wrapping.oxwrapping__oxid.value }}" loading="lazy" src="{{ wrapping.getPictureUrl()|raw }}" alt="{{ wrapping.oxwrapping__oxname.value }}" class="wrappingTargetImg">
                                                                </span>
                                                                {% endif %}
                                                                {{ wrapping.oxwrapping__oxname.value }}
                                                                <strong>{{ wrapping.getFPrice() }} {{ currency.sign }}</strong>
                                                            </label>
                                                            {% set ictr = ictr+1 %}
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            </div>
                                            {% set icounter = icounter+1 %}
                                        </div>
                                    {% endblock %}
                                {% endfor %}
                            {% endif %}
                        </div>
                        {% set oCardList = oView.getCardList() %}
                        {% if oCardList|length > 0 %}
                            {% block checkout_wrapping_cards %}
                                <h5 class="px-3">{{ translate({ ident: "GREETING_CARD" }) }}</h5>
                                <div class="list-group list-group-flush wrappingCard" id="wrappCard">
                                    <div class="list-group-item">
                                        <div class="row">
                                            <div class="col-8 col-md-9 col-lg-10 offset-4 offset-md-3 offset-lg-2">
                                                <div class="form-check">
                                                    <input type="radio" class="radiobox form-check-input" name="chosencard" id="chosencard" value="0" {% if not oxcmp_basket.getCardId() %}CHECKED{% endif %}>
                                                    <label class="form-check-label" for="chosencard">
                                                        {{ translate({ ident: "NO_GREETING_CARD" }) }}
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {% set icounter = "0" %}
                                    {% set defaultCounter = ( defaultCounter | default(-1) ) + 1 %}
                                    {% set icounter = "0" %}
                                    {% for card in oCardList %}

                                    <div class="list-group-item">
                                        <div class="row">
                                            {% if card.oxwrapping__oxpic.value %}

                                            <div class="col-4 col-md-3 col-lg-2">
                                                <img loading="lazy" src="{{ card.getPictureUrl()|raw }}" alt="{{ card.oxwrapping__oxname.value }}">
                                            </div>
                                            <div class="col-8 col-md-9 col-lg-10">

                                            {% else %}

                                            <div class="col-12">

                                            {% endif %}

                                                <div class="mb-3">
                                                    <div class="form-check">
                                                        <input class="radiobox form-check-input" 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 %}>
                                                        <label class="form-check-label" for="chosen_{{ card.oxwrapping__oxid.value }}">
                                                            {{ card.oxwrapping__oxname.value }} <strong>{{ card.getFPrice() }} {{ currency.sign }}</strong>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {% set icounter = icounter+1 %}
                                    {% endfor %}
                                </div>
                            {% endblock %}
                            {% block checkout_wrapping_comment %}
                                <div class="modal-body">
                                    <div class="mb-3 wrappingComment">
                                        <h5>{{ translate({ ident: "GREETING_MESSAGE" }) }}</h5>
                                        <textarea cols="102" rows="5" name="giftmessage" id="giftmessage" class="form-control">{{ oxcmp_basket.getCardMessage() }}</textarea>
                                    </div>
                                </div>
                            {% endblock %}
                        {% endif %}
                    </form>
                {% endif %}
            {% endblock %}
            <div class="modal-footer">
                {% block checkout_wrapping_submit %}
                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">{{ translate({ ident: "CANCEL" }) }}</button>
                    <button type="submit" class="btn btn-primary" onclick="window.giftoptions_modal_form.submit();return false;">{{ translate({ ident: "APPLY" }) }}</button>
                {% endblock %}
            </div>
        </div>
    </div>
</div>