{% extends 'Shop/base.html.twig' %}

{% block title %}
	{{ 'app.shop_owner.pages.promotional_offers.title'|trans }}
{% endblock %}

{% block toolbar_actions %}
    <a class="btn btn-sm fw-bold btn-primary new-entity" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_shop">
        {{ 'app.global.buttons.add'|trans }}
    </a>
{% endblock %}

{% block component_body %}
	<div class="post d-flex flex-column-fluid" id="kt_post">
		<div id="kt_content_container" class="container-xxl">
			<div class="row g-5 g-xxl-8">
                <div class="card card-xl-stretch mb-xl-8">
                    <div class="card-body mb-5 mb-xxl-8">
                            {% for menu in menus %}
                                <li class="dd-item dd3-item">
                                    <div class="dd3-content pt-4" style="padding-left : 20px; box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 1px;">
                                        <span class="badge badge-light-primary position-relative fs-7">
                                            {{ menu.name|upper }}
                                        </span>
                                        <span class="text-muted fw-bold" style="position: absolute; right:20px; top:7px">
                                            {{ link('edit','modal', 'success', {'entity-id' : menu.id, 'entity-name' : menu, 'modalId': 'foxorders_modal_form_shop' }) }}
                                             {% include 'Includes/delete.html.twig' with {
                                                'route': path('foxorders_shop_promotional_offer_delete', {'id': menu.id}) ,
                                                'token': csrf_token('delete' ~ menu.id),
                                                'button': 'list_delete'
                                            } %}
                                        </span>
                                    </div>
                                </li>
                                <div class="dd" id="nestable3">
                                    <ol class="dd-list">
                                        {% for offer in menu.promotionalOffers|sort((a, b) => b.position < a.position) %}
                                            <li class="dd-item dd3-item" style="margin-left: 30px" data-id="{{ offer.id }}">
                                                <div class="dd-handle"></div>
                                                {% set image = getImage(promotional_offers_images ~ offer.image.name) %}
                                                <div class="dd3-handle symbol symbol-45px symbol-2by3" style="position:absolute;padding : 2px 2px;">
                                                    <div class="symbol-label" style="background-image:url({{ asset(image) }})"></div>
                                                </div>
                                                <div class="dd3-content pt-4" style="padding-left : 80px; box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 1px;">
                                                    <span class="badge badge-light-primary position-relative fs-7">
                                                        {% if offer.product %}
                                                            {{ offer.product|upper }}
                                                        {% endif %}
                                                        {% if offer.category %}
                                                            {{ offer.category|upper }}
                                                        {% endif %}
                                                    </span>
                                                    <span class="text-muted fw-bold" style="position: absolute; right:70px">
                                                        {% if offer.start and offer.end %}
                                                            <span class="badge badge-light-warning">{{ offer.start|date('d/m/Y') }}</span> => <span class="badge badge-light-warning">{{ offer.end|date('d/m/Y') }}</span>
                                                        {% endif %}
                                                        {% if offer.product %}
                                                            <span class="badge badge-primary">Produit</span>
                                                        {% endif %}
                                                        {% if offer.category %}
                                                            <span class="badge badge-primary">Catégorie</span>
                                                        {% endif %}
                                                        {% if offer.enabled %}
                                                            <span class="badge badge-success">{{ 'app.shop_owner.pages.products.list.enabled'|trans }}</span>
                                                        {% else %}
                                                            <span class="badge badge-danger">{{ 'app.shop_owner.pages.products.list.disabled'|trans }}</span>
                                                        {% endif %}
                                                    </span>
                                                </div>
                                            </li>
                                        {% endfor %}
                                    </ol>
                                </div>
                            {% endfor %}
                    </div>
                </div>
			</div>
		</div>
	</div>
{% endblock %}

{% block modals %}
	{% include 'Modal/form.html.twig' with {
        'title': 'app.shop_owner.pages.promotional_offers.new.title'|trans,
        'id': 'shop',
    } %}
{% endblock %}

{% block stylesheets %}
	<link href="{{asset('foxorders/css/nestable.css')}}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script>
		var shop = {{ shop.id }}
        var translations = {
			"menu": '{{ 'app.global.validation.promotional_offers.menu'|trans }}',
            "end": {
                'empty': '{{ 'app.global.validation.promotional_offers.end.empty'|trans }}',
            },
            "start": {
                'empty': '{{ 'app.global.validation.promotional_offers.start.empty'|trans }}',
            },
            'greaterThan': '{{ 'app.global.validation.greater_than.starting_date'|trans }}',
            'entitySelection': '{{ 'app.global.validation.promotional_offers.entity_selection'|trans }}',
            'selectOption': '{{ 'app.global.placeholder.choice'|trans }}',
            "modal": {
                'add': '{{ 'app.shop_owner.pages.promotional_offers.new.title'|trans }}',
                'edit': '{{ 'app.shop_owner.pages.promotional_offers.new.title'|trans }}',
                }
        }
        var foxorders_media_directory = "{{ foxorders_media_directory }}"
        var promotional_offers_images = "{{ promotional_offers_images }}"
    </script>
    <script src="{{ asset('foxorders/js/shop/promotional-offer/promotional-offer.js') }}"></script>
	<script src="{{asset('foxorders/js/global/jquery.nestable.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/fr.js"></script>
{% endblock %}