{% set blankImage = foxorders_media_directory ~ 'blank.png' %}
{% macro optionVariant(form, blankImage) %}
	{% set index = form.vars.name %}
	{% set identifer = "imageField"~ index %}
	<div class="row pb-7 js-options-item">
		<div class="row">
			<div class="separator separator-dashed my-4"></div>
			<div class="col-lg-4 col-sm-4">
				<div class="row">
					<div class="col-12 option-variant-div" data-id="__name__"  id="{{identifer}}" onchange="loadImage(event)">
						<div class="text-center image-input-div pt-0">
							{{ form.imageType|form_radio_row('_styled') }}
							<div id="imageOptionVariantFileField___name__" class="image-file-input" data-index="__name__" style="display:block" >
								{{ form.imageFile|form_image_row(form.vars.value.image.name ?? null, option_variant_images, 150, 150) }}
							</div>
							<div id="imageOptionVariantUrlField___name__" class="image-url-input" data-index="__name__" style="display:none"  >
								{{ form.imageUrl|form_image_url_with_preview }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-sm-4">
				<div class="row">
					<div class="col-12" id="name-input-field-div-__name__">
					</div>
					<div class="col-12 pb-2 price">
						{{ form.price|form_row }}
					</div>
					<div class="col-12">
						{{ form.externalId|form_row }}
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-sm-3">
				<div class="row">
					<div class="col-12 pb-5">
						{{ form.outOfStock|form_checkbox_with_top_label_row }}
					</div>
					<div class="col-12 pb-5">
						{{ form.enabled|form_checkbox_with_top_label_row }}
					</div>
				</div>
			</div>
			<div class="col-lg-1 col-sm-1">
				<div class="row height-100 align-center" style="height: 100%;align-content: center;">
					<div class="col-12">
						<button type="button" class="btn btn-icon btn-light-danger me-2 mb-2 js-remove-option float-end" data-id={{form.vars.id}}>
							<span class="svg-icon svg-icon-2">
								<i class="fas fa-trash-alt text-red"></i>
							</span>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endmacro optionVariant %}
{% import _self as formMacros %}
{{
	form_start(form, {
    'action': path('foxorders_shop_option_save' , { 'menu': menu.id, 'option': option.id ?? null }),
	'attr': {
		'id': 'kt_modal_' ~ form.vars.id ~ '_form' ,
		'class': 'kt-fx-form mx-auto px-15 w-100 py-10','novalidate':'novalidate'}
    })
}}
<div class="modal-body scroll-y modal-content-body">
	<div class="row col-lg-12">
		<div class="col-md-4">
			<div class="d-flex flex-column gap-1 gap-lg-3 w-150 w-lg-300px me-lg-10">
				<div class="card card-flush">
					<div class="card-body py-0">
						<div class="text-center pt-0 image-input-div">
							{{ form.imageType|form_radio_row('_styled') }}
							<div id="imageFileField" class="image-file-input" {% if option.image.name or option.id is null or option.imageUrl is null  %} style="display:block" {% else %} style="display:none" {% endif %}>
								{{ form.imageFile|form_image_row(option.image.name, options_images) }}
							</div>
							<div id="imageUrlField" class="image-url-input" {% if option.imageUrl %} style="display:block" {% else %} style="display:none" {% endif %}>
								{{ form.imageUrl|form_image_url_with_preview }}
							</div>
						</div>
						<div class="pb-10">
							<div class="separator separator-dashed my-3"></div>
							<div class="pb-10">
								{% if form.vars.value.id is not null %}
									<div class="d-flex flex-stack">
										<div class="text-gray-700 fw-semibold fs-6 me-2">{{ 'app.shop_owner.pages.products.form.label.id'|trans }}
											:</div>
										<div class="d-flex align-items-senter">
											<span class="fw-bolder fs-6 copy-text">
												{{ form.vars.value.id }}
											</span>
										</div>
									</div>
								{% endif %}
							</div>
							{{ form.required|form_checkbox_row }}
							{{ form.enabled|form_checkbox_row }}
							{{ form.sideComponent|form_checkbox_row }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-8">
			<div class="card card-flush">
				<div class="card-body pt-0">
					<ul class="nav nav-stretch nav-line-tabs fw-semibold fs-3 border-transparent flex-nowrap" role="tablist">
						{% set locales = [] %}
						{% set newLocale = [] %}
						{% for item in form.optionTranslations %}
							{% set newLocale = {
							id: item.vars.value.locale.id,
							code: item.vars.value.locale.code
						} %}
							{% set locales = locales|merge([newLocale]) %}
							<li class="nav-item">
								<a class="nav-link {% if loop.first %} active {% endif %}" data-bs-toggle="tab" data-id="kt_tab_pane_{{item.vars.value.locale.code}}">
									{{ ('app.global.locales.' ~ item.vars.value.locale.code)|trans }}
								</a>
							</li>
						{% endfor %}
					</ul>
					<div class="tab-content mt-5" id="productsContent">
						{% for item in form.optionTranslations %}
							<div class="tab-pane fade {% if loop.first %} show active {% endif %} kt_tab_pane_{{item.vars.value.locale.code}}" role="tabpanel">
								{{ item.name|form_row(null, {'dataId' : 'name_' ~ item.vars.value.locale.code, 'dataClass' : 'translate_name_' ~ item.vars.value.locale.code|split('_')|first}) }}
							</div>
						{% endfor %}
					</div>
					{% if form.type is defined %}
						{{ form.type|form_row }}
					{% endif %}
					{% if form.maxQuantity is defined %}
						{{ form.maxQuantity|form_row }}
					{% endif %}
					{% if form.min is defined %}
						{{ form.min|form_row }}
					{% endif %}
					{% if form.max is defined %}
						{{ form.max|form_row }}
					{% endif %}
					{{ form.externalId|form_row }}
				</div>
			</div>
		</div>
	</div>
	<div class="card-header">
		<div class="card-title m-0">
			<h3>{{ 'app.order.infos.variants'|trans }}</h3>
		</div>
	</div>
	<div class="row js-options-wrapper" data-prototype="{{ formMacros.optionVariant(form.optionVariants.vars.prototype, blankImage)|e('html_attr') }}" data-index="{{ form.optionVariants|length }}">
		{% for optionVariant in form.optionVariants %}
			{% set currentOptionVariantIndex = loop.index - 1 %}
			<div class="row pb-7 js-options-item" data-id="{{optionVariant.vars.data.id}}">
				<div class="d-flex flex-row-fluid justify-content-end gap-7">
					{% include 'Product/show_ids_option.html.twig' with { 'optV': optionVariant } %}
				</div>
				<div class="separator separator-dashed my-4"></div>
				<div class="row">
					<div class="col-lg-4 col-sm-4">
						<div class="row">
							<div class="col-12 option-variant-div" data-id="{{currentOptionVariantIndex}}">
								<div class="text-center image-input-div pt-0">
									{{ optionVariant.imageType|form_radio_row('_styled') }}
									<div id="imageOptionVariantFileField_{{currentOptionVariantIndex}}"  class="image-file-input" data-index="{{currentOptionVariantIndex}}"  {% if optionVariant.vars.value.image.name or optionVariant.vars.value.id is null or optionVariant.vars.value.imageUrl is null %} style="display:block" {% else %} style="display:none" {% endif %}>
										{{ optionVariant.imageFile|form_image_row(optionVariant.vars.value.image.name, option_variant_images, 150, 150) }}
									</div>
									<div id="image-preview-container-{{currentOptionVariantIndex}}"  class="image-url-input" data-index="{{currentOptionVariantIndex}}"  {% if optionVariant.vars.value.imageUrl %} style="display:block" {% else %} style="display:none" {% endif %}>
										{{ optionVariant.imageUrl|form_image_url_with_preview }}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-4">
						<div class="row">
							<div class="col-12" id="name-input-field-div-{{currentOptionVariantIndex}}">
								<div class="tab-content" >
									{% set index = loop.index %}
									{% for item in optionVariant.optionVariantTranslations %}
										<div class="tab-pane fade {% if loop.first %} show active {% endif %} kt_tab_pane_{{item.vars.value.locale.code}}" role="tabpanel">
											{{ item.name|form_row(null, {'dataId' : 'name_' ~ (index - 1) ~ '_' ~ item.vars.value.locale.code, 'dataClass' : 'translate_name_' ~ (index - 1) ~ '_' ~ item.vars.value.locale.code|split('_')|first}) }}
											<div class="hidden">{{ item.locale|form_hidden_row() }}</div>
										</div>
									{% endfor %}
								</div>
							</div>
							<div class="col-12 pb-2 price">
								{{ optionVariant.price|form_row }}
							</div>
							<div class="col-12">
								{{ optionVariant.externalId|form_row }}
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-sm-3">
						<div class="row">
							<div class="col-12 pb-5">
								{{ optionVariant.outOfStock|form_checkbox_with_top_label_row }}
							</div>
							<div class="col-12 pb-5">
								{{ optionVariant.enabled|form_checkbox_with_top_label_row }}
							</div>
						</div>
					</div>
					<div class="col-lg-1 col-sm-1">
						<div class="row height-100 align-center" style="height: 100%;align-content: center;">
							<div class="col-12">
								{% if false == loop.first %}
									<button type="button" class="btn btn-icon btn-light-danger me-2 mb-2 js-remove-option float-end" data-id={{ loop.index }}>
										<span class="svg-icon svg-icon-2">
											<i class="fas fa-trash-alt text-danger"></i>
										</span>
									</button>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
		<a href="" class="mb-5 js-options-add">
			<span class="fa fa-plus-circle"></span>
			{{ 'app.shop_owner.pages.options.form.add_variant'|trans }}
		</a>
	</div>
</div>

<div class="modal-footer modal-content-footer">
	{% include 'Includes/Form/submit.html.twig' with {'id': id ?? null, 'customSubmitValidation': ''} %}
</div>
{{ form_end(form) }}

<script type="text/javascript">
	var optionTranslationsLength = {{ form.optionTranslations|length|json_encode|raw }};
	var locales = {{ locales|json_encode|raw }};
	var initialStatus = {{ form.vars.value.enabled|json_encode|raw }};
	var id = {{ form.vars.value.id|json_encode|raw }};
</script>
<script src="{{ asset('metronic/v8.1.5/js/scripts.bundle.js') }}"></script>
<script src="{{asset('foxorders/js/validation/rules/shop/product/option.js') }}"></script>
<script src="{{ asset('foxorders/js/validation/form-validation.js') }}"></script>
<script src="{{ asset('foxorders/js/shop/product/option-form.js') }}"></script>
<script src="{{ asset('foxorders/js/global/image-url-preview.js') }}"></script>
<script src="{{ asset('foxorders/js/global/image-type-input.js') }}"></script>
<script src="{{ asset('foxorders/js/translation/translation.js') }}"></script>
<script src="{{ asset('foxorders/js/translation/option-variant/collection.js') }}"></script>
<script src="{{ asset('foxorders/js/copy-clipboard.js') }}"></script>
{% if  menu.shop.shopSettings.autoTranslate %}
	<script src="{{ asset('foxorders/js/translation/translate.js') }}"></script>
{% endif %}