<div>
	<form id="js-shopeefichatecnica" action="{{ action }}" method="post" enctype="multipart/form-data">
		<div class="js-adm-modal-container adm-modal-container-full" data-product-id="{{ product_id is defined ? product_id : 0 }}" data-image-manager="{{ text_image_manager }}">

			<div class="adm-modal-header">
				<div class="flex between-xs">
					<div class="padding-large">
						<span class="text-x-large text-dark text-bold">Configurações Shopee</span>
					</div>
					<i class="fas fa-times text-small text-dark padding-large cursor-pointer js-adm-modal-close"></i>
				</div>
			</div>

			<div class="adm-modal-content horizontal-padding-large">
				<input type="hidden" name="redirect" value="{{ redirect }}"/>
				<div class="row small-space-xs">
					{% if unique_product %}
						<div class="col-xs-12 form unique_produto" id="tabela_temp">
							<span class="text-large text-dark">{{ products[0].name }}</span>
							<input type="hidden" name="product_id" id="idproduto" value="{{ products[0].product_key_id }}"/>
							<input type="hidden" name="type_product[{{ products[0].product_key_id }}]" value="{{ type_product }}"/>
							<hr class="top-margin-medium bottom-border-gray">
						</div>
						<div class="col-xs-12 field-group">
							<label for="custom_title" class="field-label">{{ text_custom_title }}</label>
							<input type="text" maxlength="100" name="custom_title" id="custom_title" value="{{ mkt_custom_title }}" class="field-entry field-entry-medium" {{ custom_title_enabled }}/>
						</div>
					{% else %}
						<div class="col-xs-12 form" id="tabela_temp">
							<input type="text" name="ml" id="ml" value="" class="field-entry field-entry-medium bottom-margin-small full-width" placeholder="Digite o nome do produto"/>
							<div id="product-id" class="scrollbox full-width">
								{% for product in products %}
									<div id="product_id{{ product.product_key_id }}">
										{{ product.name }}
										<img src="view/image/delete.png" alt=""/>
										<input type="hidden" name="product_id[]" value="{{ product.product_key_id }}"/>
										<input type="hidden" name="type_product[{{ product.product_key_id }}]" value="{{ product.IsGrid ? constant('Type_ProdutoMkt::Tp_MktProd_Grade') : constant('Type_ProdutoMkt::Tp_MktProd_Normal') }}"/>
									</div>
								{% endfor %}
							</div>
						</div>
					{% endif %}

					<div class="col-xs-6 field-group">
						<label for="" class="field-label">{{ text_table_price }}</label>
						<select name="shopee_table_price" class="field-entry field-entry-medium">
							{% for marketplace_price in marketplace_prices %}
								<option value="{{ marketplace_price.getMarketplacePriceId() }}" {{ ((marketplace_price_id != '' and marketplace_price.getMarketplacePriceId() == marketplace_price_id) or (marketplace_price_id == '' and marketplace_price.getStandard())) ? 'selected' : '' }}>{{ marketplace_price.title }}</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-xs-6 field-group">
						<label for="shopeeCondition" class="field-label">{{ text_shopee_condition }}</label>
						<select name="shopeeCondition" id="shopeeCondition" {{ option_disable ? 'readonly' : '' }} class="field-entry field-entry-medium">
							{% for shopee_conditions in shopee_conditions_array %}
								<option value="{{ shopee_conditions.value }}" {{ shopee_conditions.active }}>{{ shopee_conditions.label }}</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-xs-6 field-group js-gtin_section {% if not shopeeCategoryId %}hidden{% endif %}">
						<label for="codigo_barras" class="field-label">{{ text_codigo_barras }}</label>
						<input type="text" name="codigo_barras" id="codigo_barras" value="{{ codigo_barras }}" class="field-entry field-entry-medium text-bold" readonly />

						<div class="flex gap-1 top-margin-x-small {% if not Tp_Flexible %}hidden{% endif %}" id="shopeeItemNoGtinDIV">
							<input type="checkbox" class="cursor-pointer" name="shopeeItemNoGtin" id="shopeeItemNoGtin">
							<span class="text-dark text-bold">Item sem GTIN</span>
						</div>
					</div>

					<div class="col-xs-6 field-group js-gtin_section {% if not shopeeCategoryId %}hidden{% endif %}">
						<div class="background-info border-primary padding-small">
							<div class="flex bottom-margin-x-small">
								<i class="fa-solid fa-circle-info text-info text-small"></i>
								<span class="text-info text-small text-bold">{{ text_obs_GTIN_title }}</span>
							</div>

							<span class="visible-block text-info text-small">{{ text_obs_GTIN_description }} 
								<span class="text-bold" id="itemTypeGTIN">{{ itemTypeGTIN }}.</span>
							</span>
							<span class="visible-block top-margin-x-small text-info text-small" id="GTIN_description_by_type">{{ GTIN_description_by_type }}</span>
						</div>
					</div>

					<div class="col-xs-12 hidden flex center-xs middle-xs" id="loading">
                    	<img src="../assets/img/loading-black.svg" alt="Carregando..." />
					</div>
				</div>

				<hr class="vertical-margin-x-large bottom-border-gray">

				<div class="row small-space-xs">
					<div class="col-xs-6">
						<span class="text-large text-dark">{{ text_shopee_category }}</span>
						<div class="flex middle-xs top-margin-small">
							<div class="padding-small circle" style="background:green"></div>
							<span class="text-x-small left-padding-small right-padding-large category_ok">Listagem permitida</span>
							<div class="padding-small circle" style="background:red"></div>
							<span class="text-x-small left-padding-small category_nok">Listagem não permitida</span>
						</div>
						<span id="category_tree_span" class="category_ok top-margin-medium">
							{{ shopeeCategoryTree }}
						</span>
						<div id="category_shipping_preferences" class="top-margin-small text-small text-dark border-gray padding-small rounded-small hidden">
							<div id="category_shipping_preferences_items"></div>
						</div>
					</div>

					<div class="col-xs-6 field-group">
						<input type="hidden" name="shopeeCategoryTree" value="{{ shopeeCategoryTree }}" id="shopeeCategoryTree"/>
						<input type="hidden" name="shopeeCategoryId" value="{{ shopeeCategoryId }}" id="shopeeCategoryId"/>
						<select name="shopee_cat_selection[]" id="shopeeCategoryId" class="shopee_cat_selection field-entry field-entry-medium bottom-margin-small">
							<option value="">{{ shopee_text_select }}</option>
							{% for shopee_cats in shopee_cats_array %}
								<option value="{{ shopee_cats.value }}" {{ shopee_cats.active }}>{{ shopee_cats.label }}</option>
							{% endfor %}
						</select>
						<div id="ml_attr_row_wrapper" style="display:none"></div>
					</div>
				</div>

				<hr class="vertical-margin-x-large bottom-border-gray">

				<div class="row small-space-xs logistics" id="logistics">
					{{ html_logistics }}
				</div>

				<hr class="vertical-margin-x-large bottom-border-gray">

				<div class="{% if not shopeeCategoryId %}hidden{% endif %}" id="attribute_not_variable_title">
					<div class="row small-space-xs">
						<div class="col-xs">
							<span class="text-large">Ficha Técnica</span>
						</div>
					</div>

					<div class="row small-space-xs attribute_not_variable" id="attribute_not_variable">
						{{ html_options }}
					</div>
					<hr class="vertical-margin-x-large bottom-border-gray">
				</div>

				<div class="row small-space-xs" id="attribute_variation">
					{{ html_variations }}
				</div>
			</div>

			<div class="adm-modal-footer padding-large">
				<div class="flex end-xs">
					<button type="button" class="btn-default btn-medium btn-outline right-margin-small js-adm-modal-close">
						<span>{{ button_cancel }}</span>
					</button>
					<button type="button" class="btn-default btn-medium btn-primary js-modal-save" data-sincro="{{ product_marketId }}" title="Esta ação sincronizará o produto com o marketplace">
						<span>{{ button_save }}
							/ Sincronizar
						</span>
					</button>
				</div>
			</div>

		</div>
	</form>

	<style type="text/css">
		#category_tree_span {
			display: block;
			font-weight: bold;
			margin-bottom: 8px;
		}		
	</style>

	<script src="view/javascript/template/module/bulksetting-shopee.js"></script>
</div>
