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

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

{% block toolbar_actions %}
    {% if menus.getPaginationData.totalCount != shop.menus.count %}
        <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>
    {% endif %}
{% endblock %}

{% block component_body %}
    <div class="card card-flush">
        <div class="card-body pt-0">
            <div class="table-responsive">
                <table class="table table-row-bordered table-row-dashed gy-4 align-middle fw-bold">
                    <thead>
                        <tr>
                            <th class="ps-4 min-w-50px rounded-start">{{ 'app.global.fields.menu'|trans }}</th>
                            <th class="text-center text-center ps-4 min-w-100px">{{ 'app.global.fields.products'|trans }}</th>
							<th class="w-50px text-end rounded-end"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for menu in menus %}
                            <tr id="menuCrossSelling_{{menu.id}}">
                                <td class="text-dark fw-bolder text-hover-primary mb-1 fs-6 p-4">
                                    {{menu}}
                                </td>
                                <td class="text-center text-dark fw-bolder text-hover-primary mb-1 fs-6 p-2">
                                    {% for product in menu.crossSellingProducts %}
                                        <div class="text-center badge badge-light-primary fw-bolder">{{ product }}</div>
                                    {% endfor %}
                                </td>
                                <td class="text-end">
									<div class="d-flex justify-content-end flex-shrink-0">
										{{ link('edit','modal', 'success', {'entity-id' : menu.id, 'modalId': 'foxorders_modal_form_shop' }) }}
                                        {% include 'Includes/delete.html.twig' with {
											'route': path('foxorders_shop_menu_cross_selling_delete', {'id': menu.id}) ,
											'token': csrf_token('delete' ~ menu.id),
											'button': 'list_delete'
										} %}
									</div>
								</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
			{% include 'List/pagination.html.twig' with { 'data' : menus } %}
        </div>
    </div>
{% endblock %}


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


{% block javascripts %}
	{{ parent() }}
	<script>
		var shop = {{ shop.id }};
        var translations = {
			"menu": '{{ 'app.global.validation.cross_selling.menu'|trans }}',
			"products": '{{ 'app.global.validation.cross_selling.products'|trans }}',
            "modal": {
                'add': '{{ 'app.shop_owner.pages.menu_cross.new.title'|trans }}',
                }
        }
        var foxorders_media_directory = "{{ foxorders_media_directory }}"
        var products_images = "{{ products_images }}"
    </script>
    <script src="{{asset('foxorders/js/shop/menu-cross-selling/menu-cross-selling.js') }}"></script>
    <script src="{{ asset('foxorders/js/inputs/select2-image.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/fr.js"></script>

{% endblock %}