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

{% block title %}{{ 'app.shop_owner.pages.options.head_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_menu">
        {{ '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="col-xl-12">
					<div class="card">
						<div class="card-header">
							<div class="card-title m-0">
								<h3>{{ 'app.global.pages.header.menu'|trans }} : {{ menu.name|capitalize }}</h3>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-12">
					<div class="card card-xl-stretch mb-xl-8">
						<div class="card-body mb-5 mb-xxl-8">
							<div class="draggable-zone">
								{% if options|length > 0 %}
									{{ include('Product/Option/option_tree.html.twig') }}
								{% else %}
									<div style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

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

{% endblock %}

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

{% block javascripts %}
	{{ parent() }}
	<script type="text/javascript">
		var menu = {{ menu.id }};
		var shop = {{ menu.shop.id }};
        var translations = {
            'name': '{{ 'app.global.validation.option.name'|trans }}',
            'type': '{{ 'app.global.validation.option.type'|trans }}',
			'label': '{{ 'app.global.fields.name'|trans }}',
            'greaterThan': '{{ 'app.global.validation.option.greater_than.min' | trans }}',
			'max_quantity': {
				'empty': '{{ 'app.global.validation.option.max_quantity.empty'|trans }}',
				'greaterThan': '{{ 'app.global.validation.option.max_quantity.greater_than'|trans }}',
			},
			'min': {
				'empty': '{{ 'app.global.validation.option.min.empty'|trans }}',
				'greaterThan': '{{ 'app.global.validation.option.min.greater_than'|trans }}',
			},
			'external_id': {
				'exist': '{{ 'app.global.validation.external_id.exist'|trans }}',
			},
			'option_variants': {
				'name': '{{ 'app.global.validation.option.option_variants.name'|trans }}',
				'price': '{{ 'app.global.validation.option.option_variants.price'|trans }}',
				'invalid': '{{ 'app.global.validation.option.option_variants.invalid'|trans }}',
				'image_url': '{{ 'app.global.validation.domains.url.valid'|trans }}',
			},
			"modal": {
				'add': '{{ 'app.shop_owner.pages.options.new.title'|trans }}',
				'edit': '{{ 'app.shop_owner.pages.options.edit.title'|trans }}',
			},
			"duplicate": {
				'message': '{{ 'app.global.validation.option.duplicate.message'|trans }}',
				'yes': '{{ 'app.global.validation.option.duplicate.yes'|trans }}',
				'no': '{{ 'app.global.validation.option.duplicate.no'|trans }}',
				'cancel': {
					'message': '{{ 'app.global.validation.option.duplicate.cancel.message'|trans }}',
					'ok': '{{ 'app.global.validation.option.duplicate.cancel.ok'|trans }}',
				}
			},
			'translation_failed': '{{ 'app.global.translation.messages.error'|trans }}',
			"ok": '{{ 'app.global.buttons.ok'|trans }}',
			"disable": {
				'message': '{{ 'app.global.validation.option.disable.message'|trans }}',
			},
        }
	</script>
    <script src="{{asset('foxorders/js/shop/product/option.js') }}"></script>
{% endblock %}