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

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

{% block toolbar_actions %}
    {% if isPreviousAdmin  %}
        <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_search %}
	{% include 'Search/list.html.twig' %}
{% endblock %}

{% block component_body %}
    {% set defaultDeviceType = constant('APP\\Entity\\Device\\DeviceInterface::DEVICE_TYPE_WEB_SITE') ?? null %}
    {% include 'List/switch_table_list.html.twig' with {'totalCountPagination': devices.getPaginationData.totalCount, 'cardView': true} %}
    <div class="tab-content">
        {% include 'Shop/Device/Lists/table.html.twig' %}
        {% include 'Shop/Device/Lists/cards.html.twig' %}
        <!--begin::Pagination-->
        {% include 'List/pagination.html.twig' with { 'data' : devices } %}
        <!--end::Pagination-->
    </div>
{% endblock %}

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

{% block javascripts %}
    <script>
        $(document).on("click", ".delete-entity", function (e) {
            var cashRegister = '{{ constant('APP\\Entity\\Device\\DeviceInterface::DEVICE_TYPE_CASH_REGISTER') }}';
            var deviceType = $(this).closest(".device-row").attr('data-device-type');

            if (deviceType === cashRegister) {
                modalTranslations['delete']['message'] = '{{ 'app.shop_owner.pages.flash_messages.modal.delete.cash_register.message'|trans|nl2br|e("js") }}';
            } else {
                modalTranslations['delete']['message'] = '{{ 'app.global.validation.modal.delete.message'|trans }}';
            }
        });
    </script>
	{{ parent() }}
	<script>
		var shop = {{ shop.id }};
        var franchise = {{ franchise.id }};
		var inputPin = "#device_pin";
        var typeKiosk = "{{ constant('APP\\Entity\\Device\\DeviceInterface::DEVICE_TYPE_KIOSK') }}";
		var translations = {
            "name": {
                'empty': '{{ 'app.global.validation.devices.name.empty'|trans }}',
                'exist': '{{ 'app.global.validation.devices.name.exist'|trans }}',
            },
             "type": {
                'empty': '{{ 'app.global.validation.devices.type.empty'|trans }}',
            },
            "posNumber": {
                'positive': '{{ 'app.global.validation.devices.pos_number.positive'|trans }}',
            },
            "pin": {
                'numeric': '{{ 'app.global.validation.devices.pin.numeric'|trans }}',
                'exist': '{{ 'app.global.validation.devices.pin.exist'|trans }}',
                'required': '{{ 'app.global.validation.required'|trans }}',
            },
            "modal": {
                'add': '{{ 'app.shop_owner.pages.devices.new.title'|trans }}',
                'edit': '{{ 'app.shop_owner.pages.devices.edit.title'|trans }}',
                'history': '{{ 'app.shop_owner.pages.devices.history.title'|trans }}',
            },
            "device": {
                'pairing_name': '{{ 'app.shop_owner.pages.devices.list.pairing_name'|trans }}',
                'identifier': '{{ 'app.shop_owner.pages.devices.list.identifier'|trans }}',
                'model': '{{ 'app.shop_owner.pages.devices.list.model'|trans }}',
                'ip': '{{ 'app.shop_owner.pages.devices.list.ip'|trans }}',
                'created_at': '{{ 'app.shop_owner.pages.devices.list.created_at'|trans }}',
                'messages': {
                    'no_history': '{{ 'app.shop_owner.pages.devices.messages.no_history'|trans }}',
                    'loading': '{{ 'app.shop_owner.pages.devices.messages.loading'|trans }}',
                },
            },
        };
	</script>
	<script src="{{ asset('foxorders/js/validation/rules/shop/device.js') }}"></script>
	<script src="{{ asset('foxorders/js/shop/device.js') }}"></script>
	<script src="{{ asset('foxorders/js/global/copy-keys.js') }}"></script>
{% endblock %}