{{ header }}{{ column_left }}
<div id="content">
	<div class="page-header">
		<div class="container-fluid">
			<div class="pull-right">
				<button type="submit" form="form" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary">
					<i class="fa fa-save"></i>&nbsp;&nbsp;{{ button_save }}
				</button>
				<button id="reinstall" data-toggle="tooltip" title="{{ button_reinstall }}" class="btn btn-danger">
					<i class="fa fa-repeat"></i>
				</button>
				<button id="export" data-toggle="tooltip" title="{{ button_export }}" class="btn btn-success">
					<i class="fa fa-download"></i>
				</button>				
				<button id="import" data-toggle="tooltip" title="{{ button_import }}" class="btn btn-success">
					<i class="fa fa-upload"></i>
				</button>
				<div class="btn-group" id="import-group" style="display: none;">
					<input type="file" id="import-file" accept=".json">
				</div>
				<a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default">
					<i class="fa fa-reply"></i>
				</a>
			</div>
			<h1>{{ heading_title }}</h1>
			<ul class="breadcrumb">
				{% for breadcrumb in breadcrumbs %}
					<li>
						<a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
					</li>
				{% endfor %}
			</ul>
		</div>
	</div>

	<div class="container-fluid">
		{% if error_warning %}
			<script>
				usNotify('warning', '{{ error_warning }}');
			</script>
		{% endif %}
		{% if success %}
			<script>
				usNotify('success', '{{ success }}');
			</script>
		{% endif %}
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">
					<i class="fa fa-pencil"></i>
					{{ text_edit }}</h3>
			</div>
			<div class="panel-body">
				<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-theme" class="form-horizontal">
					<ul class="nav nav-tabs">
						<li class="active">
							<a href="#setting-tab" data-toggle="tab">
								<i class="fa fa-cog"></i>
								{{ tab_setting }}</a>
						</li>
						<li>
							<a href="#user-settings-tab" data-toggle="tab">
								<i class="fa fa-user"></i>
								{{ tab_user }}</a>
						</li>
						<li>
							<a href="#delivery-settings-tab" data-toggle="tab">
								<i class="fa fa-cog"></i>
								{{ tab_delivery_settings }}</a>
						</li>						
						<li>
							<a href="#delivery-methods-tab" data-toggle="tab">
								<i class="fa fa-truck"></i>
								{{ tab_delivery_methods }}</a>
						</li>						
						<li>
							<a href="#payment-methods-tab" data-toggle="tab">
								<i class="fa fa-credit-card"></i>
								{{ tab_payment_settings }}</a>
						</li>						
						<li>
							<a href="#custom-fields" data-toggle="tab">
								<i class="fa fa-bars"></i>
								{{ tab_custom_fields }}</a>
						</li>
						<li>
							<a href="#recommended-products" data-toggle="tab">
								<i class="fa fa-thumbs-up"></i>
								{{ entry_recommended_products }}</a>
						</li>						
						<li>
						<a href="#sorting_blocks" data-toggle="tab">
								<i class="fa fa-sort"></i>
								{{ entry_sorting_blocks }}</a>
						</li>
						<li>
						<a href="#comment" data-toggle="tab">
								<i class="fa fa-comment"></i>
								{{ entry_comment }}</a>
						</li>
						<li>
						<a href="#phones" data-toggle="tab">
								<i class="fa fa-phone"></i>
								{{ tab_phones }}</a>
						</li>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="setting-tab">
							<fieldset>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="status">{{ entry_status }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[status]" {% if oct_smart_checkout_data.status %} checked="checked" {% endif %} id="status" tabindex="1">
											<label for="status"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="cart-status">{{ entry_cart_status }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[cart_status]" {% if oct_smart_checkout_data.cart_status %} checked="checked" {% endif %} id="cart-status" tabindex="1">
											<label for="cart-status"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="no-call">{{ entry_no_call }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[no_call]" {% if oct_smart_checkout_data.no_call %} checked="checked" {% endif %} id="no-call" tabindex="1">
											<label for="no-call"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[telegram_viber_contact]">{{ text_telegram_viber_contact }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[telegram_viber_contact]" {% if oct_smart_checkout_data.telegram_viber_contact %} checked="checked" {% endif %} id="oct_smart_checkout_data[telegram_viber_contact]" tabindex="1">
											<label for="oct_smart_checkout_data[telegram_viber_contact]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>		
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[authorization]">{{ text_authorization_options }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[authorization]" {% if oct_smart_checkout_data.authorization %} checked="checked" {% endif %} id="oct_smart_checkout_data[authorization]" tabindex="1">
											<label for="oct_smart_checkout_data[authorization]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>						
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[registration]">{{ text_registration_options }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[registration]" {% if oct_smart_checkout_data.registration %} checked="checked" {% endif %} id="oct_smart_checkout_data[registration]" tabindex="1">
											<label for="oct_smart_checkout_data[registration]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>	
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[cost_in_shipping_block]">{{ text_cost_in_shipping_block_options }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[cost_in_shipping_block]" {% if oct_smart_checkout_data.cost_in_shipping_block %} checked="checked" {% endif %} id="oct_smart_checkout_data[cost_in_shipping_block]" tabindex="1">
											<label for="oct_smart_checkout_data[cost_in_shipping_block]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[autoselect_first_shipping]">{{ text_autoselect_first_ship_method }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[autoselect_first_shipping]" {% if oct_smart_checkout_data.autoselect_first_shipping %} checked="checked" {% endif %} id="oct_smart_checkout_data[autoselect_first_shipping]" tabindex="1">
											<label for="oct_smart_checkout_data[autoselect_first_shipping]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>								
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[cart_weight]">{{ text_cart_weight_options }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[cart_weight]" {% if oct_smart_checkout_data.cart_weight %} checked="checked" {% endif %} id="oct_smart_checkout_data[cart_weight]" tabindex="1">
											<label for="oct_smart_checkout_data[cart_weight]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>	
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[coupon_status]">{{ text_coupon_status_options }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[coupon_status]" {% if oct_smart_checkout_data.coupon_status %} checked="checked" {% endif %} id="oct_smart_checkout_data[coupon_status]" tabindex="1">
											<label for="oct_smart_checkout_data[coupon_status]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[voucher_status]">{{ text_voucher_status_options }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[voucher_status]" {% if oct_smart_checkout_data.voucher_status %} checked="checked" {% endif %} id="oct_smart_checkout_data[voucher_status]" tabindex="1">
											<label for="oct_smart_checkout_data[voucher_status]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="oct_smart_checkout_data[autosubmit_payment]">{{ text_autosubmit_payment }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[autosubmit_payment]" {% if oct_smart_checkout_data.autosubmit_payment %} checked="checked" {% endif %} id="oct_smart_checkout_data[autosubmit_payment]" tabindex="1">
											<label for="oct_smart_checkout_data[autosubmit_payment]"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="minimum_order_amount">{{ entry_minimum_order_amount }}</label>
									<div class="col-sm-9">
										<input type="number" name="oct_smart_checkout_data[minimum_order_amount]" value="{{ oct_smart_checkout_data.minimum_order_amount }}" id="minimum_order_amount" class="form-control"/>
									</div>
								</div>		
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="free_shipping_from">{{ entry_free_shipping_from }}</label>
									<div class="col-sm-9">
										<input type="number" name="oct_smart_checkout_data[free_shipping_from]" value="{{ oct_smart_checkout_data.free_shipping_from }}" id="free_shipping_from" class="form-control"/>
									</div>
								</div>						
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="when-empty-email">{{ entry_when_empty_email }}</label>
									<div class="col-sm-9">
										<input type="text" name="oct_smart_checkout_data[when_empty_email]" value="{{ oct_smart_checkout_data.when_empty_email }}" id="when-empty-email" class="form-control"/>
									</div>
								</div>
							</fieldset>
						</div>
						<div class="tab-pane" id="user-settings-tab">
							<fieldset class="tabbable tabs-left row">
								<div class="col-sm-12"><legend>{{ text_tab_fields }}</legend></div>
								<div class="col-lg-3">
									<ul id="customer-tabs" class="nav nav-pills nav-stacked mb-3">
										{% for field, details in oct_smart_checkout_data.customer.fields %}
											<li>
												<a href="#customer_{{ field }}" data-toggle="tab" style="justify-content:space-between;">
													{{ shipping_methods[(field|split('-'))[0]].name }} {{ attribute(_context, 'customer_tab_' ~ field) }} ({{ field }})
													{% if field != 'default' %}
														<button type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="{{ button_remove }}" onclick="deleteTab('customer', 'customer_{{ field }}')"><i class="fa fa-trash"></i></button>
													{% endif %}
												</a>
											</li>
										{% endfor %}
									</ul>
									<div class="well">
										<select id="customer-shipping-method-selector" class="form-control mb-3">
											<option value="">{{ text_chose_delivery_method }}</option>
										</select>
	
										<button id="add-customer-shipping-method" class="btn btn-primary w-100">+ {{ text_add_delivery_method }}</button>
									</div>
								</div>
								<div class="col-lg-9">
									<div id="customer-tabs-content" class="tab-content">
										{% for section, fields in oct_smart_checkout_data.customer.fields %}
											<div class="tab-pane" id="customer_{{ section }}">
												<fieldset class="sortable-fields-container" id="customer-fields-container-{{ section }}">
													<legend>{{ shipping_methods[(section|split('-'))[0]].name }} ({{ section | capitalize }})</legend>
													{% for field, details in fields %}
														<div class="settings-item{% if not details.status %} opacity{% endif %}">
															<div class="d-flex" style="gap:12px;align-items:center;">
																{% set key = loop.index %} 
																<div class="d-flex settings-item-buttons" style="justify-content:space-between;align-items:center;">
																	<h5 style="width:150px;"><b>{{ custom_fields[details.custom_field_id].name }}{{ attribute(_context, 'field_' ~ field) }}</b><br><span class="badge badge-info">{{ field }}</span></h5>
																	<div class="d-flex" style="gap:12px;align-items:center;">
																		<button type="button" class="btn btn-info" style="cursor:grab;" title="{{ text_move }}"><i class="fa fa-hand-grab-o"></i></button>
																		<span class="settings-item-toggle btn btn-default" onclick="toggleMobile();"><i class="fa fa-angle-down"></i></span>
																	</div>
																</div>

																<div class="settings-item-collapse">
																	<div class="d-flex">
																		<div class="thumbnail d-flex" style="gap:2px;margin-bottom:0;padding:8px;">
																			<span class="required" style="color:red;">*</span>
																			<div class="btn-group" data-toggle="buttons">
																				<label class="btn btn-default {% if details.required == '1' %} active {% endif %}" data-toggle="tooltip" title="{{ text_required }}">
																					<input type="radio" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][required]" value="1" {% if details.required == '1' %} checked {% endif %}>{{ text_yes }}
																				</label>
																				<label class="btn btn-default {% if details.required == '0' %} active {% endif %}" data-toggle="tooltip" title="{{ text_required }}">
																					<input type="radio" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][required]" value="0" {% if details.required == '0' %} checked {% endif %}>{{ text_no }}
																				</label>
																			</div>
																		</div>
		
																		<div class="thumbnail d-flex" style="gap:8px;margin-bottom:0;padding:8px;align-items:center;">
																			<i class="fa fa-eye"></i>
																			<div class="btn-group" data-toggle="buttons">
																				<label class="btn btn-default {% if details.display == 'all' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																					<input type="radio" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][display]" value="all" {% if details.display == 'all' %} checked {% endif %}>{{ text_all }}
																				</label>
																				<label class="btn btn-default {% if details.display == 'guests' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																					<input type="radio" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][display]" value="guests" {% if details.display == 'guests' %} checked {% endif %}>{{ text_guests }}
																				</label>
																				<label class="btn btn-default {% if details.display == 'registered' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																					<input type="radio" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][display]" value="registered" {% if details.display == 'registered' %} checked {% endif %}>{{ text_registered }}
																				</label>
																			</div>
																		</div>
		
																		<input type="hidden" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][sort_order]" value="{{ details.sort_order }}">
		
																		<div class="toggle-group">
																			<input type="checkbox" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][status]" {% if details.status %} checked="checked" {% endif %} id="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][status]" tabindex="1" onclick="setStatus(this);">
																			<label for="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][status]" data-toggle="tooltip" title="{{ text_status_field }}"></label>
																			<div class="onoffswitch pull-left" aria-hidden="true">
																				<div class="onoffswitch-label">
																					<div class="onoffswitch-inner"></div>
																					<div class="onoffswitch-switch"></div>
																				</div>
																			</div>
																		</div>
		
																		<div title="{{ text_edit_field }}" data-toggle="tooltip">
																			<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#edit-local-{{ section }}-{{ field }}-{{ key }}" aria-expanded="false" aria-controls="edit-local{{ key }}"><i class="fa fa-edit"></i></button>
																		</div>
		
																		{% if details.custom_field %}
																			<button type="button" class="btn btn-danger" data-toggle="tooltip" title="{{ button_remove }}" onclick="$(this).closest('.settings-item').remove();"><i class="fa fa-trash"></i></button>
																		{% endif %}
		
																		<input type="hidden" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][custom_field]" value="{{ details.custom_field }}">
																		<input type="hidden" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][custom_field_id]" value="{{ details.custom_field_id }}">
																		<input type="hidden" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][type]" value="{{ details.type }}">
																	</div>
																</div>
															</div>

															<div id="edit-local-{{ section }}-{{ field }}-{{ key }}" class="collapse mb-3 pt-3">
																{% for language in languages %}
																	<div class="input-group mb-3">
																		<span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
																		<input type="text" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][localization][{{ language.language_id }}][name]" value="{{ details.localization[language.language_id].name }}" placeholder="{{ text_name }}" class="form-control" />
																		<input type="text" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][localization][{{ language.language_id }}][placeholder]" value="{{ details.localization[language.language_id].placeholder }}" placeholder="{{ text_placeholder }}" class="form-control" />
																		<input type="text" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][localization][{{ language.language_id }}][error_text]" value="{{ details.localization[language.language_id].error_text }}" placeholder="{{ text_error_text }}" class="form-control" />
																	</div>
																{% endfor %}
																<div class="form-group mx-0">
																	<label class="col-sm-2 control-label">{{ text_merge }}</label>
																	<div class="col-sm-10">
																		<div class="toggle-group">
																			<input type="checkbox" name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][merge]" {% if details.merge %} checked="checked" {% endif %} id="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][merge]" tabindex="1">
																			<label for="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][merge]"></label>
																			<div class="onoffswitch pull-left" aria-hidden="true">
																				<div class="onoffswitch-label">
																					<div class="onoffswitch-inner"></div>
																					<div class="onoffswitch-switch"></div>
																				</div>
																			</div>
																		</div>
																	</div>
																</div>
																<div class="form-group mx-0">
																	<label class="col-sm-2 control-label">{{ merge_field }}</label>
																	<div class="col-sm-10">
																		<select name="oct_smart_checkout_data[customer][fields][{{ section }}][{{ field }}][merge_field]" class="form-control">
																			<option value="">{{ text_none }}</option>
																			<option value="firstname"{% if details.merge_field == 'firstname' %} selected {% endif %}>{{ field_firstname }}</option>
																			<option value="lastname"{% if details.merge_field == 'lastname' %} selected {% endif %}>{{ field_lastname }}</option>
																			<option value="comment"{% if details.merge_field == 'comment' %} selected {% endif %}>{{ field_comment }}</option>
																			<option value="shipping_address_2"{% if details.merge_field == 'shipping_address_2' %} selected {% endif %}>{{ field_delivery }}</option>
																			<option value="payment_address_2"{% if details.merge_field == 'payment_address_2' %} selected {% endif %}>{{ field_payment }}</option>
																		</select>
																	</div>
																</div>
															</div>
														</div>
													{% endfor %}
												</fieldset>
												{% if custom_fields %}
													<div class="well col-sm-6">
														<select id="customer-custom-field-{{ section }}" class="form-control mb-3">
															<option value="">{{ text_chose_custom_field }}</option>
															{% for custom_field in custom_fields %}
																<option value="{{ custom_field.custom_field_id }}" data-name="{{ custom_field.name }}">{{ custom_field.name }}</option>
															{% endfor %}
														</select>

														<span id="add-{{ section }}-custom-field" class="btn btn-primary w-100">+ {{ text_add_custom_field }}</span>
													</div>
													<script>
														document.addEventListener("DOMContentLoaded", function() {
															addCustomField('customer', 'customer-fields-container-{{ section }}', 'customer-custom-field-{{ section }}', '{{ section }}', 'add-{{ section }}-custom-field');
														});
													</script>
												{% endif %}
											</div>
										{% endfor %}
									</div>
								</div>
							</fieldset>
						</div>
						<div class="tab-pane" id="delivery-settings-tab">
							<fieldset class="tabbable tabs-left row">
								<div class="col-sm-12"><legend>{{ text_tab_fields }}</legend></div>
								<div class="col-lg-3">
									<ul id="delivery-tabs" class="nav nav-pills nav-stacked mb-3">
										{% for field, details in oct_smart_checkout_data.delivery.fields %}
											<li>
												<a href="#delivery_{{ field }}" data-toggle="tab" style="justify-content:space-between;">
													{{ shipping_methods[(field|split('-'))[0]].name }} {{ attribute(_context, 'customer_tab_' ~ field) }} ({{ field }})
													{% if field != 'default' %}
														<button type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="{{ button_remove }}" onclick="deleteTab('delivery', 'delivery_{{ field }}')"><i class="fa fa-trash"></i></button>
													{% endif %}
												</a>
											</li>
										{% endfor %}
									</ul>
									<div class="well">
										<select id="delivery-shipping-method-selector" class="form-control mb-3">
											<option value="">{{ text_chose_delivery_method }}</option>
										</select>
	
										<button id="add-delivery-shipping-method" class="btn btn-primary w-100">+ {{ text_add_delivery_method }}</button>
									</div>
								</div>
								<div class="col-lg-9">
									<div id="delivery-tabs-content" class="tab-content">
										{% for section, fields in oct_smart_checkout_data.delivery.fields %}
											<div class="tab-pane" id="delivery_{{ section }}">
												<fieldset class="sortable-fields-container" id="delivery-fields-container-{{ section }}">
													<legend>{{ shipping_methods[(section|split('-'))[0]].name }} ({{ section | capitalize }})</legend>
													{% for field, details in fields %}
														<div class="settings-item{% if not details.status %} opacity{% endif %}">
															<div class="d-flex" style="gap:12px;align-items:center;">
																{% set key = loop.index %}
																<div class="d-flex settings-item-buttons" style="justify-content:space-between;align-items:center;">
																	<h5 style="width:150px;"><b>{{ custom_fields[details.custom_field_id].name }}{{ attribute(_context, 'field_' ~ field) }}</b><br><span class="badge badge-info">{{ field }}</span></h5>
																	<div class="d-flex" style="gap:12px;align-items:center;">
																		<button type="button" class="btn btn-info" style="cursor:grab;" title="{{ text_move }}"><i class="fa fa-hand-grab-o"></i></button>
																		<span class="settings-item-toggle btn btn-default" onclick="toggleMobile();"><i class="fa fa-angle-down"></i></span>
																	</div>
																</div>

																<div class="settings-item-collapse">
																	<div class="d-flex">
																		<div class="thumbnail d-flex" style="gap:2px;margin-bottom:0;padding:8px;">
																			<span class="required" style="color:red;">*</span>
																			<div class="btn-group" data-toggle="buttons">
																				<label class="btn btn-default {% if details.required == '1' %} active {% endif %}" data-toggle="tooltip" title="{{ text_required }}">
																					<input type="radio" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][required]" value="1" {% if details.required == '1' %} checked {% endif %}>{{ text_yes }}
																				</label>
																				<label class="btn btn-default {% if details.required == '0' %} active {% endif %}" data-toggle="tooltip" title="{{ text_required }}">
																					<input type="radio" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][required]" value="0" {% if details.required == '0' %} checked {% endif %}>{{ text_no }}
																				</label>
																			</div>
																		</div>
		
																		<div class="thumbnail d-flex" style="gap:8px;margin-bottom:0;padding:8px;align-items:center;">
																			<i class="fa fa-eye"></i>
																			<div class="btn-group" data-toggle="buttons">
																				<label class="btn btn-default {% if details.display == 'all' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																					<input type="radio" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][display]" value="all" {% if details.display == 'all' %} checked {% endif %}>{{ text_all }}
																				</label>
																				<label class="btn btn-default {% if details.display == 'guests' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																					<input type="radio" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][display]" value="guests" {% if details.display == 'guests' %} checked {% endif %}>{{ text_guests }}
																				</label>
																				<label class="btn btn-default {% if details.display == 'registered' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																					<input type="radio" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][display]" value="registered" {% if details.display == 'registered' %} checked {% endif %}>{{ text_registered }}
																				</label>
																			</div>
																		</div>
		
																		<input type="hidden" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][sort_order]" value="{{ details.sort_order }}">
		
																		<div class="toggle-group">
																			<input type="checkbox" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][status]" {% if details.status %} checked="checked" {% endif %} id="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][status]" tabindex="1" onclick="setStatus(this);">
																			<label for="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][status]" data-toggle="tooltip" title="{{ text_status_field }}"></label>
																			<div class="onoffswitch pull-left" aria-hidden="true">
																				<div class="onoffswitch-label">
																					<div class="onoffswitch-inner"></div>
																					<div class="onoffswitch-switch"></div>
																				</div>
																			</div>
																		</div>
		
																		<div title="{{ text_edit_field }}" data-toggle="tooltip">
																			<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#edit-local-{{ section }}-{{ field }}-{{ key }}" aria-expanded="false" aria-controls="edit-local{{ key }}"><i class="fa fa-edit"></i></button>
																		</div>
		
																		{% if details.custom_field %}
																			<button type="button" class="btn btn-danger" data-toggle="tooltip" title="{{ button_remove }}" onclick="$(this).closest('.settings-item').remove();"><i class="fa fa-trash"></i></button>
																		{% endif %}
		
																		<input type="hidden" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][custom_field]" value="{{ details.custom_field }}">
																		<input type="hidden" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][custom_field_id]" value="{{ details.custom_field_id }}">
																		<input type="hidden" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][type]" value="{{ details.type }}">
																	</div>
																</div>
															</div>

															<div id="edit-local-{{ section }}-{{ field }}-{{ key }}" class="collapse mb-3 pt-3">
																{% for language in languages %}
																	<div class="input-group mb-3">
																		<span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
																		<input type="text" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][localization][{{ language.language_id }}][name]" value="{{ details.localization[language.language_id].name }}" placeholder="{{ text_name }}" class="form-control" />
																		<input type="text" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][localization][{{ language.language_id }}][placeholder]" value="{{ details.localization[language.language_id].placeholder }}" placeholder="{{ text_placeholder }}" class="form-control" />
																		<input type="text" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][localization][{{ language.language_id }}][error_text]" value="{{ details.localization[language.language_id].error_text }}" placeholder="{{ text_error_text }}" class="form-control" />
																	</div>
																{% endfor %}
																<div class="form-group mx-0">
																	<label class="col-sm-2 control-label">{{ text_merge }}</label>
																	<div class="col-sm-10">
																		<div class="toggle-group">
																			<input type="checkbox" name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][merge]" {% if details.merge %} checked="checked" {% endif %} id="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][merge]" tabindex="1">
																			<label for="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][merge]"></label>
																			<div class="onoffswitch pull-left" aria-hidden="true">
																				<div class="onoffswitch-label">
																					<div class="onoffswitch-inner"></div>
																					<div class="onoffswitch-switch"></div>
																				</div>
																			</div>
																		</div>
																	</div>
																</div>
																<div class="form-group mx-0">
																	<label class="col-sm-2 control-label">{{ merge_field }}</label>
																	<div class="col-sm-10">
																		<select name="oct_smart_checkout_data[delivery][fields][{{ section }}][{{ field }}][merge_field]" class="form-control">
																			<option value="">{{ text_none }}</option>
																			<option value="firstname"{% if details.merge_field == 'firstname' %} selected {% endif %}>{{ field_firstname }}</option>
																			<option value="lastname"{% if details.merge_field == 'lastname' %} selected {% endif %}>{{ field_lastname }}</option>
																			<option value="comment"{% if details.merge_field == 'comment' %} selected {% endif %}>{{ field_comment }}</option>
																			<option value="shipping_address_2"{% if details.merge_field == 'shipping_address_2' %} selected {% endif %}>{{ field_delivery }}</option>
																			<option value="payment_address_2"{% if details.merge_field == 'payment_address_2' %} selected {% endif %}>{{ field_payment }}</option>
																		</select>
																	</div>
																</div>
															</div>
														</div>
													{% endfor %}
												</fieldset>
												{% if custom_fields %}
													<div class="well col-sm-6">
														<select id="delivery-custom-field-{{ section }}" class="form-control mb-3">
															<option value="">{{ text_chose_custom_field }}</option>
															{% for custom_field in custom_fields %}
																<option value="{{ custom_field.custom_field_id }}" data-name="{{ custom_field.name }}">{{ custom_field.name }}</option>
															{% endfor %}
														</select>

														<span id="add-{{ section }}-{{ field }}-{{ key }}-custom-field" class="btn btn-primary w-100">+ {{ text_add_custom_field }}</span>
													</div>
													<script>
														document.addEventListener("DOMContentLoaded", function() {
															addCustomField('delivery', 'delivery-fields-container-{{ section }}', 'delivery-custom-field-{{ section }}', '{{ section }}', 'add-{{ section }}-{{ field }}-{{ key }}-custom-field');
														});
													</script>
												{% endif %}
											</div>
										{% endfor %}
									</div>
								</div>
							</fieldset>	
						</div>
						<div class="tab-pane" id="delivery-methods-tab">

							<fieldset class="tabbable tabs-left row">
								<div class="col-sm-12"><legend>{{ tab_delivery_methods }}</legend></div>
								<div class="col-lg-3">
									<ul id="delivery-methods-tabs" class="nav nav-pills nav-stacked mb-3">
										{% for method, details in oct_smart_checkout_data.delivery.methods %}
											<li>
												<a href="#delivery-methods-{{ method }}" data-toggle="tab" style="justify-content:space-between;">
													{{ shipping_methods[(method|split('-'))[0]].name }} {{ attribute(_context, 'customer_tab_' ~ method) }} ({{ method }})
													{% if method != 'default' %}
														<button type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="{{ button_remove }}" onclick="deleteTab('delivery-methods', 'delivery-methods-{{ method }}')"><i class="fa fa-trash"></i></button>
													{% endif %}
												</a>
											</li>
										{% endfor %}
									</ul>
									<div class="well">
										<select id="delivery-methods-selector" class="form-control mb-3">
											<option value="">{{ text_chose_delivery_method }}</option>
										</select>

										<button id="add-delivery-methods" class="btn btn-primary w-100">+ {{ text_add_delivery_method }}</button>
									</div>
								</div>
								<div class="col-lg-9">
									<script>
										function bindFilterMfr(method){
											$('#filter_manu_ac_'+method).autocomplete({
												source:function(q,r){$.ajax({url:'index.php?route=catalog/manufacturer/autocomplete&user_token={{ user_token }}&filter_name='+encodeURIComponent(q),dataType:'json',success:function(j){r($.map(j,function(i){return{label:i.name,value:i.manufacturer_id};}));}});},
												select:function(i){
													if($('#filter_manu_selected_'+method+' input[value="'+i.value+'"]').length){return false;}
													$('#filter_manu_selected_'+method).append('<div class="rep-manu-badge">'+i.label+' <i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i><input type="hidden" name="oct_smart_checkout_data[delivery][methods]['+method+'][filter_manufacturers][]" value="'+i.value+'"/></div>');
													this.value='';
													return false;
												}
											});
										}
										function bindFilterCategory(method){
											$('#filter_cat_ac_'+method).autocomplete({
												source:function(q,r){$.ajax({url:'index.php?route=catalog/category/autocomplete&user_token={{ user_token }}&filter_name='+encodeURIComponent(q),dataType:'json',success:function(j){r($.map(j,function(i){return{label:i.name,value:i.category_id};}));}});},
												select:function(i){
													if($('#filter_cat_selected_'+method+' input[value="'+i.value+'"]').length){return false;}
													$('#filter_cat_selected_'+method).append('<div class="rep-manu-badge">'+i.label+' <i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i><input type="hidden" name="oct_smart_checkout_data[delivery][methods]['+method+'][filter_categories][]" value="'+i.value+'"/></div>');
													this.value='';
													return false;
												}
											});
										}
										function bindFilterMfrPayment(method){
											$('#filter_manu_ac_payment_'+method).autocomplete({
												source:function(q,r){$.ajax({url:'index.php?route=catalog/manufacturer/autocomplete&user_token={{ user_token }}&filter_name='+encodeURIComponent(q),dataType:'json',success:function(j){r($.map(j,function(i){return{label:i.name,value:i.manufacturer_id};}));}});},
												select:function(i){
													if($('#filter_manu_selected_payment_'+method+' input[value="'+i.value+'"]').length){return false;}
													$('#filter_manu_selected_payment_'+method).append('<div class="rep-manu-badge">'+i.label+' <i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i><input type="hidden" name="oct_smart_checkout_data[payment][methods]['+method+'][filter_manufacturers][]" value="'+i.value+'"/></div>');
													this.value='';
													return false;
												}
											});
										}
										function bindFilterCategoryPayment(method){
											$('#filter_cat_ac_payment_'+method).autocomplete({
												source:function(q,r){$.ajax({url:'index.php?route=catalog/category/autocomplete&user_token={{ user_token }}&filter_name='+encodeURIComponent(q),dataType:'json',success:function(j){r($.map(j,function(i){return{label:i.name,value:i.category_id};}));}});},
												select:function(i){
													if($('#filter_cat_selected_payment_'+method+' input[value="'+i.value+'"]').length){return false;}
													$('#filter_cat_selected_payment_'+method).append('<div class="rep-manu-badge">'+i.label+' <i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i><input type="hidden" name="oct_smart_checkout_data[payment][methods]['+method+'][filter_categories][]" value="'+i.value+'"/></div>');
													this.value='';
													return false;
												}
											});
										}
									</script>
									<div id="delivery-methods-tabs-content" class="tab-content">
										{% for method, details in oct_smart_checkout_data.delivery.methods %}
											<div class="tab-pane" id="delivery-methods-{{ method }}">
												<fieldset class="sortable-fields-container" id="delivery-methods-fields-container-{{ method }}">
													<legend>{{ shipping_methods[(method|split('-'))[0]].name }} ({{ method | capitalize }})</legend>

													<div class="form-group">
														<label class="col-sm-3 control-label">{{ text_status }}</label>
														<div class="col-sm-9">
															<div class="toggle-group">
																<input type="checkbox" name="oct_smart_checkout_data[delivery][methods][{{ method }}][status]" {% if details.status %} checked="checked" {% endif %} id="oct_smart_checkout_data[delivery][methods][{{ method }}][status]" tabindex="1">
																<label for="oct_smart_checkout_data[delivery][methods][{{ method }}][status]"></label>
																<div class="onoffswitch pull-left" aria-hidden="true">
																	<div class="onoffswitch-label">
																		<div class="onoffswitch-inner"></div>
																		<div class="onoffswitch-switch"></div>
																	</div>
																</div>
															</div>
														</div>
													</div>

													<div class="form-group">
														<label class="col-sm-3 control-label">{{ text_entry_image }}</label>
														<div class="col-sm-9">
															<a href="" id="thumb-image-{{ method }}" data-toggle="image" class="img-thumbnail">
																<img width="60" height="60" src="{% if details.image_cached %}{{ details.image_cached }}{% else %}{{ thumb }}{% endif %}" alt="" title="" data-placeholder="{{ thumb }}" />
															</a>
															<input type="hidden" name="oct_smart_checkout_data[delivery][methods][{{ method }}][image]" value="{{ details.image }}" id="input-image-{{ method }}" />
														</div>
													</div>

													<div class="form-group">
														<label class="col-sm-3 control-label">{{ text_display }}</label>
														<div class="col-sm-9">
															<div class="btn-group" data-toggle="buttons">
																<label class="btn btn-default {% if details.display == 'all' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																	<input type="radio" name="oct_smart_checkout_data[delivery][methods][{{ method }}][display]" value="all" {% if details.display == 'all' %} checked {% endif %}>{{ text_all }}
																</label>
																<label class="btn btn-default {% if details.display == 'guests' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																	<input type="radio" name="oct_smart_checkout_data[delivery][methods][{{ method }}][display]" value="guests" {% if details.display == 'guests' %} checked {% endif %}>{{ text_guests }}
																</label>
																<label class="btn btn-default {% if details.display == 'registered' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																	<input type="radio" name="oct_smart_checkout_data[delivery][methods][{{ method }}][display]" value="registered" {% if details.display == 'registered' %} checked {% endif %}>{{ text_registered }}
																</label>
															</div>
														</div>
													</div>

													<div class="form-group">
														<label class="col-sm-3 control-label" for="{{ method }}_free_shipping_from">{{ entry_free_shipping_from }}</label>
														<div class="col-sm-9">
															<input type="number" name="oct_smart_checkout_data[delivery][methods][{{ method }}][free_shipping_from]" value="{{ details.free_shipping_from }}" id="{{ method }}_free_shipping_from" class="form-control"/>
														</div>
													</div>

													<div class="form-group">
														<label class="col-sm-3 control-label" for="{{ method }}_min_order_amount">{{ entry_min_order_amount }}</label>
														<div class="col-sm-9">
															<input type="number" name="oct_smart_checkout_data[delivery][methods][{{ method }}][min_order_amount]" value="{{ details.min_order_amount|default(0) }}" id="{{ method }}_min_order_amount" class="form-control" min="0" step="0.01"/>
															<span class="help-block">{{ help_min_order_amount }}</span>
														</div>
													</div>

													<div class="form-group">
														<label class="col-sm-3 control-label" for="filter_manu_ac_{{ method }}">{{ entry_filter_manufacturers }}</label>
														<div class="col-sm-9">
															<input type="text" id="filter_manu_ac_{{ method }}" class="form-control" autocomplete="off"/>
															<div id="filter_manu_selected_{{ method }}" class="well well-sm" style="height:150px;overflow:auto">
																{% if details.filter_manufacturers %}
																	{% for m in details.filter_manufacturers %}
																		<div class="rep-manu-badge">
																			{{ m.name }}
																			<i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i>
																			<input type="hidden"
																				name="oct_smart_checkout_data[delivery][methods][{{ method }}][filter_manufacturers][]"
																				value="{{ m.manufacturer_id }}"/>
																		</div>
																	{% endfor %}
																{% endif %}
															</div>
															<label style="display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;cursor:pointer;">
																<input type="checkbox" style="margin:0;flex:0 0 auto;transform:scale(1.2);transform-origin:center;" name="oct_smart_checkout_data[delivery][methods][{{ method }}][filter_manufacturers_exclude]" value="1"{% if details.filter_manufacturers_exclude %} checked{% endif %}>
																{{ entry_filter_exclude }}
															</label>
														</div>
													</div>

													<script>
													bindFilterMfr('{{ method }}');
													</script>

													<div class="form-group">
														<label class="col-sm-3 control-label" for="filter_cat_ac_{{ method }}">{{ entry_filter_categories }}</label>
														<div class="col-sm-9">
															<input type="text" id="filter_cat_ac_{{ method }}" class="form-control" autocomplete="off"/>
															<div id="filter_cat_selected_{{ method }}" class="well well-sm" style="height:150px;overflow:auto">
																{% if details.filter_categories %}
																	{% for c in details.filter_categories %}
																		<div class="rep-manu-badge">
																			{{ c.name }}
																			<i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i>
																			<input type="hidden"
																				name="oct_smart_checkout_data[delivery][methods][{{ method }}][filter_categories][]"
																				value="{{ c.category_id }}"/>
																		</div>
																	{% endfor %}
																{% endif %}
															</div>
															<label style="display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;cursor:pointer;">
																<input type="checkbox" style="margin:0;flex:0 0 auto;transform:scale(1.2);transform-origin:center;" name="oct_smart_checkout_data[delivery][methods][{{ method }}][filter_categories_exclude]" value="1"{% if details.filter_categories_exclude %} checked{% endif %}>
																{{ entry_filter_exclude }}
															</label>
														</div>
													</div>

													<script>
													bindFilterCategory('{{ method }}');
													</script>

													<div class="form-group">
														<label class="col-sm-3 control-label" for="filter_currency_{{ method }}">{{ entry_filter_currencies }}</label>
														<div class="col-sm-9">
															<select name="oct_smart_checkout_data[delivery][methods][{{ method }}][filter_currencies][]" id="filter_currency_{{ method }}" class="form-control" multiple="multiple" style="height: 150px;">
																{% for currency in currencies %}
																	<option value="{{ currency.code }}"{% if details.filter_currencies is defined and currency.code in details.filter_currencies %} selected{% endif %}>{{ currency.title }} ({{ currency.code }})</option>
																{% endfor %}
															</select>
															<a href="javascript:void(0);" onclick="$('#filter_currency_{{ method }}').val([]).trigger('change');return false;" style="display:inline-block;margin-top:6px;font-size:12px;"><i class="fa fa-times-circle"></i> {{ text_filter_currencies_reset }}</a>
															<div class="help-block" style="margin:2px 0 0;">{{ entry_filter_currencies_help }}</div>
														</div>
													</div>
													
													<div class="form-group">
														<label class="col-sm-3 control-label" for="delivery-local-methods-{{ method }}">{{ text_edit_local }}</label>
														<div class="col-sm-9">
															<div class="toggle-group">
																<input type="checkbox" name="oct_smart_checkout_data[delivery][methods][{{ method }}][local_edit]" {% if details.local_edit %} checked="checked" {% endif %} id="delivery-local-methods-{{ method }}" tabindex="1">
																<label for="delivery-local-methods-{{ method }}"></label>
																<div class="onoffswitch pull-left" aria-hidden="true">
																	<div class="onoffswitch-label">
																		<div class="onoffswitch-inner"></div>
																		<div class="onoffswitch-switch"></div>
																	</div>
																</div>
															</div>
														</div>
													</div>

													<div id="local-{{ method }}" class="localization" style="display: {% if details.local_edit %}block{% else %}none{% endif %};">
														<div class="form-group">
															<label class="col-sm-3 control-label">{{ entry_title }}</label>
															<div class="col-sm-9">
																{% for language in languages %}
																	<div class="input-group">
																		<span class="input-group-addon">
																			<img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
																		<input type="text" name="oct_smart_checkout_data[delivery][methods][{{ method }}][localization][{{ language.language_id }}][title]" value="{{ details.localization[language.language_id].title }}" placeholder="{{ entry_title }}" class="form-control" />
																	</div>
																{% endfor %}
															</div>
														</div>
	
														<div class="form-group">
															<label class="col-sm-3 control-label">{{ text_entry_title }}</label>
															<div class="col-sm-9">
																{% for language in languages %}
																	<div class="input-group">
																		<span class="input-group-addon">
																			<img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" />
																		</span>
																		<input type="text" name="oct_smart_checkout_data[delivery][methods][{{ method }}][localization][{{ language.language_id }}][description]" value="{{ details.localization[language.language_id].description }}" placeholder="{{ text_entry_title }}" class="form-control" />
																	</div>
																{% endfor %}
															</div>
														</div>


														<script>
															$(document).ready(function() {
																$('#delivery-local-methods-{{ method }}').change(function() {
																	if(this.checked) {
																		$('#local-{{ method }}').show();
																	} else {
																		$('#local-{{ method }}').hide();
																	}
																});
															});
														</script>
													</div>
												</fieldset>
											</div>
										{% endfor %}
									</div>
								</div>
							</fieldset>
						</div>
						<div class="tab-pane" id="payment-methods-tab">
							<fieldset class="tabbable tabs-left row">
								<div class="col-sm-12"><legend>{{ tab_payment_settings }}</legend></div>
								<div class="col-lg-3">
									<ul id="payment-methods-tabs" class="nav nav-pills nav-stacked mb-3">
										{% for method, details in oct_smart_checkout_data.payment.methods %}
											<li>
												<a href="#payment-methods-{{ method }}" data-toggle="tab" style="justify-content:space-between;">
													{{ payment_methods[method].name }} {{ attribute(_context, 'customer_tab_' ~ method) }} ({{ method }})
													{% if method != 'default' %}
														<button type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="{{ button_remove }}" onclick="deleteTab('payment-methods', 'payment-methods-{{ method }}')"><i class="fa fa-trash"></i></button>
													{% endif %}
												</a>
											</li>
										{% endfor %}
									</ul>
									<div class="well">
										<select id="payment-methods-selector" class="form-control mb-3">
											<option value="">{{ text_chose_payment_method }}</option>
											{% for method in payment_methods %}
											<option value="{{ method.code }}">{{ method.name }}</option>
											{% endfor %}
										</select>

										<button id="add-payment-methods" class="btn btn-primary w-100">+ {{ text_add_payment_method }}</button>
									</div>
								</div>
								<div class="col-lg-9">
									<div id="payment-methods-tabs-content" class="tab-content">
										{% for method, details in oct_smart_checkout_data.payment.methods %}
											<div class="tab-pane" id="payment-methods-{{ method }}">
												<fieldset class="sortable-fields-container" id="payment-methods-fields-container-{{ method }}">
													<legend>{{ payment_methods[method].name }} ({{ method | capitalize }})</legend>

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label">{{ text_status }}</label>
														<div class="col-sm-9">
															<div class="toggle-group">
																<input type="checkbox" name="oct_smart_checkout_data[payment][methods][{{ method }}][status]" {% if details.status %} checked="checked" {% endif %} id="oct_smart_checkout_data[payment][methods][{{ method }}][status]" tabindex="1">
																<label for="oct_smart_checkout_data[payment][methods][{{ method }}][status]"></label>
																<div class="onoffswitch pull-left" aria-hidden="true">
																	<div class="onoffswitch-label">
																		<div class="onoffswitch-inner"></div>
																		<div class="onoffswitch-switch"></div>
																	</div>
																</div>
															</div>
														</div>
													</div>

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label">{{ text_entry_image }}</label>
														<div class="col-sm-9">
															<a href="" id="thumb-image-{{ method }}" data-toggle="image" class="img-thumbnail">
																<img width="60" height="60" src="{% if details.image_cached %}{{ details.image_cached }}{% else %}{{ thumb }}{% endif %}" alt="" title="" data-placeholder="{{ thumb }}" />
															</a>
															<input type="hidden" name="oct_smart_checkout_data[payment][methods][{{ method }}][image]" value="{{ details.image }}" id="input-image-{{ method }}" />
														</div>
													</div>	

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label">{{ text_display }}</label>
														<div class="col-sm-9">
															<div class="btn-group" data-toggle="buttons">
																<label class="btn btn-default {% if details.display == 'all' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																	<input type="radio" name="oct_smart_checkout_data[payment][methods][{{ method }}][display]" value="all" {% if details.display == 'all' %} checked {% endif %}>{{ text_all }}
																</label>
																<label class="btn btn-default {% if details.display == 'guests' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																	<input type="radio" name="oct_smart_checkout_data[payment][methods][{{ method }}][display]" value="guests" {% if details.display == 'guests' %} checked {% endif %}>{{ text_guests }}
																</label>
																<label class="btn btn-default {% if details.display == 'registered' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																	<input type="radio" name="oct_smart_checkout_data[payment][methods][{{ method }}][display]" value="registered" {% if details.display == 'registered' %} checked {% endif %}>{{ text_registered }}
																</label>
															</div>
														</div>
													</div>		

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label" for="{{ method }}_min_order_amount">{{ entry_min_order_amount }}</label>
														<div class="col-sm-9">
															<input type="number" name="oct_smart_checkout_data[payment][methods][{{ method }}][min_order_amount]" value="{{ details.min_order_amount|default(0) }}" id="{{ method }}_min_order_amount" class="form-control" min="0" step="0.01"/>
															<span class="help-block">{{ help_min_order_amount }}</span>
														</div>
													</div>

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label">{{ text_entry_delivery_payment }}</label>
														<div class="col-sm-9">
															<div class="well well-sm">
																{% for shipping_method in shipping_methods %}
																	<div class="checkbox">
																		<label>
																			<input type="checkbox" name="oct_smart_checkout_data[payment][methods][{{ method }}][disable_in_shipping_methods][]" value="{{ shipping_method.code }}"{% if shipping_method.code in oct_smart_checkout_data.payment.methods[method].disable_in_shipping_methods %} checked {% endif %}>
																			{{ shipping_method.name }}
																		</label>
																	</div>
																{% endfor %}
															</div>
														</div>
													</div>

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label" for="filter_manu_ac_payment_{{ method }}">{{ entry_filter_manufacturers }}</label>
														<div class="col-sm-9">
															<input type="text" id="filter_manu_ac_payment_{{ method }}" class="form-control" autocomplete="off"/>
															<div id="filter_manu_selected_payment_{{ method }}" class="well well-sm" style="height:150px;overflow:auto">
																{% if details.filter_manufacturers %}
																	{% for m in details.filter_manufacturers %}
																		<div class="rep-manu-badge">
																			{{ m.name }}
																			<i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i>
																			<input type="hidden"
																				name="oct_smart_checkout_data[payment][methods][{{ method }}][filter_manufacturers][]"
																				value="{{ m.manufacturer_id }}"/>
																		</div>
																	{% endfor %}
																{% endif %}
															</div>
															<label style="display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;cursor:pointer;">
																<input type="checkbox" style="margin:0;flex:0 0 auto;transform:scale(1.2);transform-origin:center;" name="oct_smart_checkout_data[payment][methods][{{ method }}][filter_manufacturers_exclude]" value="1"{% if details.filter_manufacturers_exclude %} checked{% endif %}>
																{{ entry_filter_exclude }}
															</label>
														</div>
													</div>

													<script>
													bindFilterMfrPayment('{{ method }}');
													</script>

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label" for="filter_cat_ac_payment_{{ method }}">{{ entry_filter_categories }}</label>
														<div class="col-sm-9">
															<input type="text" id="filter_cat_ac_payment_{{ method }}" class="form-control" autocomplete="off"/>
															<div id="filter_cat_selected_payment_{{ method }}" class="well well-sm" style="height:150px;overflow:auto">
																{% if details.filter_categories %}
																	{% for c in details.filter_categories %}
																		<div class="rep-manu-badge">
																			{{ c.name }}
																			<i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i>
																			<input type="hidden"
																				name="oct_smart_checkout_data[payment][methods][{{ method }}][filter_categories][]"
																				value="{{ c.category_id }}"/>
																		</div>
																	{% endfor %}
																{% endif %}
															</div>
															<label style="display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;cursor:pointer;">
																<input type="checkbox" style="margin:0;flex:0 0 auto;transform:scale(1.2);transform-origin:center;" name="oct_smart_checkout_data[payment][methods][{{ method }}][filter_categories_exclude]" value="1"{% if details.filter_categories_exclude %} checked{% endif %}>
																{{ entry_filter_exclude }}
															</label>
														</div>
													</div>

													<script>
													bindFilterCategoryPayment('{{ method }}');
													</script>

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label" for="filter_currency_payment_{{ method }}">{{ entry_filter_currencies }}</label>
														<div class="col-sm-9">
															<select name="oct_smart_checkout_data[payment][methods][{{ method }}][filter_currencies][]" id="filter_currency_payment_{{ method }}" class="form-control" multiple="multiple" style="height: 150px;">
																{% for currency in currencies %}
																	<option value="{{ currency.code }}"{% if details.filter_currencies is defined and currency.code in details.filter_currencies %} selected{% endif %}>{{ currency.title }} ({{ currency.code }})</option>
																{% endfor %}
															</select>
															<a href="javascript:void(0);" onclick="$('#filter_currency_payment_{{ method }}').val([]).trigger('change');return false;" style="display:inline-block;margin-top:6px;font-size:12px;"><i class="fa fa-times-circle"></i> {{ text_filter_currencies_reset }}</a>
															<div class="help-block" style="margin:2px 0 0;">{{ entry_filter_currencies_help }}</div>
														</div>
													</div>

													<div class="form-group mx-0">
														<label class="col-sm-3 control-label" for="payment-local-methods-{{ method }}">{{ text_edit_local }}</label>
														<div class="col-sm-9">
															<div class="toggle-group">
																<input type="checkbox" name="oct_smart_checkout_data[payment][methods][{{ method }}][local_edit]" {% if details.local_edit %} checked="checked" {% endif %} id="payment-local-methods-{{ method }}" tabindex="1">
																<label for="payment-local-methods-{{ method }}"></label>
																<div class="onoffswitch pull-left" aria-hidden="true">
																	<div class="onoffswitch-label">
																		<div class="onoffswitch-inner"></div>
																		<div class="onoffswitch-switch"></div>
																	</div>
																</div>
															</div>
														</div>
													</div>																					
													
													<div id="payment-local-{{ method }}" class="localization" style="display: {% if details.local_edit %}block{% else %}none{% endif %};">
														<div class="form-group mx-0">
															<label class="col-sm-3 control-label">{{ text_entry_title }}</label>
															<div class="col-sm-9">
																{% for language in languages %}
																	<div class="input-group">
																		<span class="input-group-addon">
																			<img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
																		<input type="text" name="oct_smart_checkout_data[payment][methods][{{ method }}][localization][{{ language.language_id }}][title]" value="{{ details.localization[language.language_id].title }}" placeholder="{{ entry_title }}" class="form-control" />
																	</div>
																{% endfor %}
															</div>
														</div>
	
														<div class="form-group mx-0">
															<label class="col-sm-3 control-label">{{ text_entry_description }}</label>
															<div class="col-sm-9">
																{% for language in languages %}
																	<div class="input-group">
																		<span class="input-group-addon">
																			<img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" />
																		</span>
																		<input type="text" name="oct_smart_checkout_data[payment][methods][{{ method }}][localization][{{ language.language_id }}][description]" value="{{ details.localization[language.language_id].description }}" placeholder="{{ text_entry_description }}" class="form-control" />
																	</div>
																{% endfor %}
															</div>
														</div>
														<script>
															$(document).ready(function() {
																$('#payment-local-methods-{{ method }}').change(function() {
																	if(this.checked) {
																		$('#payment-local-{{ method }}').show();
																	} else {
																		$('#payment-local-{{ method }}').hide();
																	}
																});
															});
														</script>
													</div>

													<fieldset class="sortable-fields-container" id="payment-fields-container-{{ method }}">
														<legend>{{ text_tab_fields }}</legend>
														{% for field, details in details.fields %}
															<div class="settings-item{% if not details.status %} opacity{% endif %}">
																<div class="d-flex" style="gap:12px;align-items:center;">
																	{% set key = loop.index %} 
																	<div class="d-flex settings-item-buttons" style="justify-content:space-between;align-items:center;">
																		<h5 style="width:150px;"><b>{{ custom_fields[details.custom_field_id].name }}{{ attribute(_context, 'field_' ~ field) }}</b><br><span class="badge badge-info">{{ field }}</span></h5>
																		<div class="d-flex" style="gap:12px;align-items:center;">
																			<button type="button" class="btn btn-info" style="cursor:grab;" title="{{ text_move }}"><i class="fa fa-hand-grab-o"></i></button>
																			<span class="settings-item-toggle btn btn-default" onclick="toggleMobile();"><i class="fa fa-angle-down"></i></span>
																		</div>
																	</div>

																	<div class="settings-item-collapse">
																		<div class="d-flex">
																			<div class="thumbnail d-flex" style="gap:2px;margin-bottom:0;padding:8px;">
																				<span class="required" style="color:red;">*</span>
																				<div class="btn-group" data-toggle="buttons">
																					<label class="btn btn-default {% if details.required == '1' %} active {% endif %}" data-toggle="tooltip" title="{{ text_required }}">
																						<input type="radio" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][required]" value="1" {% if details.required == '1' %} checked {% endif %}>{{ text_yes }}
																					</label>
																					<label class="btn btn-default {% if details.required == '0' %} active {% endif %}" data-toggle="tooltip" title="{{ text_required }}">
																						<input type="radio" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][required]" value="0" {% if details.required == '0' %} checked {% endif %}>{{ text_no }}
																					</label>
																				</div>
																			</div>

																			<div class="thumbnail d-flex" style="gap:8px;margin-bottom:0;padding:8px;align-items:center;">
																				<i class="fa fa-eye"></i>
																				<div class="btn-group" data-toggle="buttons">
																					<label class="btn btn-default {% if details.display == 'all' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																						<input type="radio" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][display]" value="all" {% if details.display == 'all' %} checked {% endif %}>{{ text_all }}
																					</label>
																					<label class="btn btn-default {% if details.display == 'guests' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																						<input type="radio" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][display]" value="guests" {% if details.display == 'guests' %} checked {% endif %}>{{ text_guests }}
																					</label>
																					<label class="btn btn-default {% if details.display == 'registered' %} active {% endif %}" data-toggle="tooltip" title="{{ text_display }}">
																						<input type="radio" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][display]" value="registered" {% if details.display == 'registered' %} checked {% endif %}>{{ text_registered }}
																					</label>
																				</div>
																			</div>

																			<input type="hidden" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][sort_order]" value="{{ details.sort_order }}">

																			<div class="toggle-group">
																				<input type="checkbox" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][status]" {% if details.status %} checked="checked" {% endif %} id="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][status]" tabindex="1" onclick="setStatus(this);">
																				<label for="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][status]" data-toggle="tooltip" title="{{ text_status_field }}"></label>
																				<div class="onoffswitch pull-left" aria-hidden="true">
																					<div class="onoffswitch-label">
																						<div class="onoffswitch-inner"></div>
																						<div class="onoffswitch-switch"></div>
																					</div>
																				</div>
																			</div>

																			<div title="{{ text_edit_field }}" data-toggle="tooltip">
																				<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#edit-local-{{ method }}-{{ field }}-{{ key }}" aria-expanded="false" aria-controls="edit-local{{ key }}"><i class="fa fa-edit"></i></button>
																			</div>

																			{% if details.custom_field %}
																				<button type="button" class="btn btn-danger" data-toggle="tooltip" title="{{ button_remove }}" onclick="$(this).closest('.settings-item').remove();"><i class="fa fa-trash"></i></button>
																			{% endif %}

																			<input type="hidden" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][custom_field]" value="{{ details.custom_field }}">
																			<input type="hidden" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][custom_field_id]" value="{{ details.custom_field_id }}">
																			<input type="hidden" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][type]" value="{{ details.type }}">
																		</div>
																	</div>
																</div>

																<div id="edit-local-{{ method }}-{{ field }}-{{ key }}" class="collapse mb-3 pt-3">
																	{% for language in languages %}
																		<div class="input-group mb-3">
																			<span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
																			<input type="text" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][localization][{{ language.language_id }}][name]" value="{{ details.localization[language.language_id].name }}" placeholder="{{ text_name }}" class="form-control" />
																			<input type="text" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][localization][{{ language.language_id }}][placeholder]" value="{{ details.localization[language.language_id].placeholder }}" placeholder="{{ text_placeholder }}" class="form-control" />
																			<input type="text" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][localization][{{ language.language_id }}][error_text]" value="{{ details.localization[language.language_id].error_text }}" placeholder="{{ text_error_text }}" class="form-control" />
																		</div>
																	{% endfor %}
																	<div class="form-group mx-0">
																		<label class="col-sm-2 control-label">{{ text_merge }}</label>
																		<div class="col-sm-10">
																			<div class="toggle-group">
																				<input type="checkbox" name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][merge]" {% if details.merge %} checked="checked" {% endif %} id="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][merge]" tabindex="1">
																				<label for="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][merge]"></label>
																				<div class="onoffswitch pull-left" aria-hidden="true">
																					<div class="onoffswitch-label">
																						<div class="onoffswitch-inner"></div>
																						<div class="onoffswitch-switch"></div>
																					</div>
																				</div>
																			</div>
																		</div>
																	</div>
																	<div class="form-group mx-0">
																		<label class="col-sm-2 control-label">{{ merge_field }}</label>
																		<div class="col-sm-10">
																			<select name="oct_smart_checkout_data[payment][methods][{{ method }}][fields][{{ field }}][merge_field]" class="form-control">
																				<option value="">{{ text_none }}</option>
																				<option value="firstname"{% if details.merge_field == 'firstname' %} selected {% endif %}>{{ field_firstname }}</option>
																				<option value="lastname"{% if details.merge_field == 'lastname' %} selected {% endif %}>{{ field_lastname }}</option>
																				<option value="comment"{% if details.merge_field == 'comment' %} selected {% endif %}>{{ field_comment }}</option>
																				<option value="shipping_address_2"{% if details.merge_field == 'shipping_address_2' %} selected {% endif %}>{{ field_delivery }}</option>
																				<option value="payment_address_2"{% if details.merge_field == 'payment_address_2' %} selected {% endif %}>{{ field_payment }}</option>
																			</select>
																		</div>
																	</div>
																</div>
															</div>
														{% endfor %}
													</fieldset>
													{% if custom_fields %}
														<div class="well col-sm-6">
															<select id="payment-custom-field-{{ method }}" class="form-control mb-3">
																<option value="">{{ text_chose_custom_field }}</option>
																{% for custom_field in custom_fields %}
																	<option value="{{ custom_field.custom_field_id }}" data-name="{{ custom_field.name }}">{{ custom_field.name }}</option>
																{% endfor %}
															</select>

															<span id="add-{{ method }}-custom-field" class="btn btn-primary w-100">+ {{ text_add_custom_field }}</span>
														</div>
														<script>
															document.addEventListener("DOMContentLoaded", function() {
																addCustomField('payment', 'payment-fields-container-{{ method }}', 'payment-custom-field-{{ method }}', '{{ method }}', 'add-{{ method }}-custom-field', 1);
															});
														</script>
													{% endif %}
												</fieldset>
											</div>
										{% endfor %}
									</div>
								</div>
							</fieldset>
																	
						</div>
						<div class="tab-pane" id="custom-fields">
							<fieldset>
								<legend>{{ tab_custom_fields }}</legend>
								<div class="table-responsive">
									{% if custom_fields %}
										<div class="btn-group mb-3">
											<button onclick="deleteAllSelected();" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false" disabled id="deleteButton">
												<i class="fa fa-trash-o"></i>
												{{ button_delete_selected }}
											</button>
										</div>
									{% endif %}
									<table class="table table-bordered table-hover" id="custom_fields_table">
										<thead>
											<tr>
												<td class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);checkCheckBoxes();"/></td>
												<td class="text-left">{{ column_name }}</td>
												<td class="text-left">{{ column_location }}</td>
												<td class="text-left">{{ column_type }}</td>
												<td class="text-right">{{ column_sort_order }}</td>
												<td class="text-right">{{ column_action }}</td>
											</tr>
										</thead>
										<tbody>
											{% if custom_fields %}
											{% for custom_field in custom_fields %}
											<tr>
												<td style="text-align: center;"><input type="checkbox" name="selected[]" value="{{ custom_field.custom_field_id }}"/></td>
												<td class="text-left">{{ custom_field.name }}</td>
												<td class="text-left">{{ custom_field.location }}</td>
												<td class="text-left">{{ custom_field.type }}</td>
												<td class="text-right">{{ custom_field.sort_order }}</td>
												<td class="text-right">
													<a href="javascript:;" onclick="editCustomField({{ custom_field.custom_field_id }});" data-toggle="tooltip" title="{{ button_edit }}" class="btn btn-warning"><i class="fa fa-pencil"></i></a>
												</td>
											</tr>
											{% endfor %}
											{% else %}
											<tr>
												<td class="text-center" colspan="6">{{ text_no_results }}</td>
											</tr>
											{% endif %}
										</tbody>
										<tfoot>
											<tr>
												<td colspan="5"></td>
												<td class="text-right">
													<span data-toggle="modal" data-target="#add-fields-modal">
														<a id="add_fields" href="javascript:;" data-toggle="tooltip" title="{{ button_add }}" class="btn btn-primary"><i class="fa fa-plus"></i></a>
													</span>
												</td>
											</tr>
										</tfoot>
									</table>
								</div>
							</fieldset>
						</div>
						<div class="tab-pane" id="recommended-products">
							<div class="form-group mx-0">
								<legend>{{ entry_recommended_products }}</legend>
								<label class="col-sm-3 control-label" for="recommended-poducts-status">{{ entry_recommended_poducts_status }}</label>
								<div class="col-sm-9">
									<div class="toggle-group">
										<input type="checkbox" name="oct_smart_checkout_data[recommended_poducts][status]" {% if oct_smart_checkout_data.recommended_poducts.status %} checked="checked" {% endif %} id="recommended-poducts-status" tabindex="1">
										<label for="recommended-poducts-status"></label>
										<div class="onoffswitch pull-left" aria-hidden="true">
											<div class="onoffswitch-label">
												<div class="onoffswitch-inner"></div>
												<div class="onoffswitch-switch"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="recomended_hidden" {% if not oct_smart_checkout_data.recommended_poducts.status %} style="display:none;" {% endif %}>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="recommended-poducts-autorelated">{{ entry_autorelated_status }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[recommended_poducts][autorelated]" {% if oct_smart_checkout_data.recommended_poducts.autorelated %} checked="checked" {% endif %} id="recommended-poducts-autorelated" tabindex="1">
											<label for="recommended-poducts-autorelated"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="recommended-poducts-relatedbysales">{{ entry_relatedbysales_status }}</label>
									<div class="col-sm-9">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_checkout_data[recommended_poducts][relatedbysales]" {% if oct_smart_checkout_data.recommended_poducts.relatedbysales %} checked="checked" {% endif %} id="recommended-poducts-relatedbysales" tabindex="1">
											<label for="recommended-poducts-relatedbysales"></label>
											<div class="onoffswitch pull-left" aria-hidden="true">
												<div class="onoffswitch-label">
													<div class="onoffswitch-inner"></div>
													<div class="onoffswitch-switch"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="input-related">
										<span data-toggle="tooltip" title="{{ help_related }}">{{ entry_recommended_products }}</span>
									</label>
									<div class="col-sm-9">
										<input type="text" name="oct_smart_checkout_data[recommended_poducts][products]" value="" placeholder="{{ entry_recommended_products }}" id="input-related" class="form-control"/>
										<div id="product-related" class="well well-sm" style="height: 150px; overflow: auto;">
											{% for product_related in product_relateds %}
												<div id="product-related{{ product_related.product_id }}">
													<i onclick="deleteProduct({{ product_related.product_id }});" class="fa fa-minus-circle"></i>
													{{ product_related.name }}
													<input type="hidden" name="oct_smart_checkout_data[recommended_poducts][products][]" value="{{ product_related.product_id }}"/>
												</div>
											{% endfor %}
										</div>
									</div>
								</div>
								<div class="form-group mx-0">
									<label class="col-sm-3 control-label" for="recommended_image_size">{{ entry_recommended_image_size }}</label>
									<div class="col-sm-9">
										<div class="row">
											<div class="col-sm-6">
												<input type="text" name="oct_smart_checkout_data[recommended_poducts][image_size][width]" value="{{ oct_smart_checkout_data.recommended_poducts.image_size.width }}" placeholder="{{ entry_width }}" id="recommended_image_width" class="form-control"/>
											</div>
											<div class="col-sm-6">
												<input type="text" name="oct_smart_checkout_data[recommended_poducts][image_size][height]" value="{{ oct_smart_checkout_data.recommended_poducts.image_size.height }}" placeholder="{{ entry_height }}" id="recommended_image_height" class="form-control"/>
											</div>
										</div>
									</div>
								</div>

								<ul class="nav nav-tabs" id="recommended_poducts_texts">
									{% for language in languages %}
										<li>
											<a href="#recommended-block-tab-{{ language.language_id }}" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}"/>
												{{ language.name }}</a>
										</li>
									{% endfor %}
								</ul>
								<div class="tab-content">
									{% for language in languages %}
										<div class="tab-pane {% if loop.first %}active{% endif %}" id="recommended-block-tab-{{ language.language_id }}">
											<div class="form-group mx-0">
												<label class="col-sm-3 control-label" for="recommended_title{{ language.language_id }}">{{ entry_recommended_title }}</label>
												<div class="col-sm-9">
													<input type="text" name="oct_smart_checkout_data[recommended_poducts][title][{{ language.language_id }}]" value="{{ oct_smart_checkout_data.recommended_poducts.title[language.language_id] }}" placeholder="{{ entry_recommended_title }}" id="recommended_title{{ language.language_id }}" class="form-control"/>
												</div>
											</div>
											<div class="form-group mx-0">
												<label class="col-sm-3 control-label" for="recommended_description{{ language.language_id }}">{{ entry_recommended_description }}</label>
												<div class="col-sm-9">
													<textarea name="oct_smart_checkout_data[recommended_poducts][description][{{ language.language_id }}]" rows="5" placeholder="{{ entry_recommended_description }}" id="recommended_description{{ language.language_id }}" class="form-control">{{ oct_smart_checkout_data.recommended_poducts.description[language.language_id] }}</textarea>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							</div>
						</div>
						<div class="tab-pane" id="sorting_blocks">
							<fieldset class="sortable-fields-container" id="sorting-blocks-fields-container">
								<legend>{{ tab_sorting_blocks }}</legend>
									{% for blocktype, sort_order in sorting_blocks %}
										<div class="settings-item d-flex" style="gap:12px;align-items:center;">
											<button type="button" class="btn btn-info" style="cursor:grab;" title="{{ text_move }}"><i class="fa fa-hand-grab-o"></i></button>
											 <input type="hidden" name="oct_smart_checkout_data[sorting_blocks][{{ blocktype }}]">
											<b>{{ attribute(_context, 'block_' ~ blocktype) }}</b>
										</div>
									{% endfor %}
							</fieldset>
						</div>
						<div class="tab-pane" id="comment">
							<fieldset class="sortable-fields-container" id="sorting-blocks-fields-container">
								<legend>{{ tab_comment }}</legend>
									<div class="form-group mx-0">
										<label class="col-sm-3 control-label" for="recommended-comment-status">{{ entry_status }}</label>
										<div class="col-sm-9">
											<div class="toggle-group">
												<input type="checkbox" name="oct_smart_checkout_data[comment][status]" {% if oct_smart_checkout_data.comment.status %} checked="checked" {% endif %} id="recommended-comment-status" tabindex="1">
												<label for="recommended-comment-status"></label>
												<div class="onoffswitch pull-left" aria-hidden="true">
													<div class="onoffswitch-label">
														<div class="onoffswitch-inner"></div>
														<div class="onoffswitch-switch"></div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="comment_hidden" {% if not oct_smart_checkout_data.comment.status %} style="display:none;" {% endif %}>
										<ul class="nav nav-tabs" id="comment_texts">
											{% for language in languages %}
												<li>
													<a href="#recommended-comment-block-tab-{{ language.language_id }}" data-toggle="tab"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}"/>
														{{ language.name }}</a>
												</li>
											{% endfor %}
										</ul>
										<div class="tab-content">
											{% for language in languages %}
												<div class="tab-pane {% if loop.first %}active{% endif %}" id="recommended-comment-block-tab-{{ language.language_id }}">
													<div class="form-group mx-0">
														<label class="col-sm-3 control-label" for="recommended_comment_title{{ language.language_id }}">{{ entry_recommended_title }}</label>
														<div class="col-sm-9">
															<input type="text" name="oct_smart_checkout_data[comment][title][{{ language.language_id }}]" value="{{ oct_smart_checkout_data.comment.title[language.language_id] }}" placeholder="{{ entry_recommended_title }}" id="recommended_comment_title{{ language.language_id }}" class="form-control"/>
														</div>
													</div>
													<div class="form-group mx-0">
														<label class="col-sm-3 control-label" for="recommended_comment_placeholder{{ language.language_id }}">{{ entry_recommended_placeholder }}</label>
														<div class="col-sm-9">
															<input type="text" name="oct_smart_checkout_data[comment][placeholder][{{ language.language_id }}]" value="{{ oct_smart_checkout_data.comment.placeholder[language.language_id] }}" placeholder="{{ entry_recommended_placeholder }}" id="recommended_comment_placeholder{{ language.language_id }}" class="form-control"/>
														</div>
													</div>
												</div>
											{% endfor %}
										</div>
									</div>
							</fieldset>
						</div>

						<div class="tab-pane" id="phones">
							<div class="phones-dashboard">
								<div class="phones-header">
									<div class="phones-title">
										<div class="phones-icon">
											<i class="fa fa-phone"></i>
										</div>
										<div>
											<h3>{{ text_phones_title }}</h3>
											<p>{{ text_phone_validation_desc }}</p>
										</div>
									</div>
									<div class="phones-actions">
										<button type="button" class="btn btn-primary" id="btn-refresh-phones">
											<i class="fa fa-refresh"></i> {{ button_analyze }}
										</button>
									</div>
								</div>

								<div class="phones-stats" id="phones-stats">
									<div class="stat-card stat-total">
										<div class="stat-icon"><i class="fa fa-users"></i></div>
										<div class="stat-content">
											<div class="stat-number" id="stat-total">-</div>
											<div class="stat-label">{{ text_total_customers }}</div>
										</div>
									</div>
									<div class="stat-card stat-valid">
										<div class="stat-icon"><i class="fa fa-check-circle"></i></div>
										<div class="stat-content">
											<div class="stat-number" id="stat-valid">-</div>
											<div class="stat-label">{{ text_valid_phones }}</div>
										</div>
									</div>
									<div class="stat-card stat-invalid">
										<div class="stat-icon"><i class="fa fa-exclamation-circle"></i></div>
										<div class="stat-content">
											<div class="stat-number" id="stat-invalid">-</div>
											<div class="stat-label">{{ text_invalid_phones }}</div>
										</div>
									</div>
									<div class="stat-card stat-empty">
										<div class="stat-icon"><i class="fa fa-question-circle"></i></div>
										<div class="stat-content">
											<div class="stat-number" id="stat-empty">-</div>
											<div class="stat-label">{{ text_empty_phones }}</div>
										</div>
									</div>
								</div>

								<div class="phones-progress" id="phones-progress" style="display:none;">
									<div class="progress-info">
										<span class="progress-text">{{ text_loading }}</span>
										<span class="progress-percent">0%</span>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-striped active" style="width: 0%"></div>
									</div>
								</div>

								<div class="phones-actions-bar" id="phones-actions-bar" style="display:none;">
									<div class="actions-info">
										<span class="badge badge-success" id="can-fix-count">0</span> {{ text_can_fix }}
										<span class="badge badge-warning" id="cannot-fix-count">0</span> {{ text_cannot_fix }}
									</div>
									<div class="actions-buttons">
										<button type="button" class="btn btn-success" id="btn-fix-phones" disabled>
											<i class="fa fa-magic"></i> {{ button_fix }}
										</button>
									</div>
								</div>

								<div class="phones-table-container" id="phones-table-container" style="display:none;">
									<div class="table-header">
										<div class="table-search">
											<input type="text" class="form-control" id="phones-search" placeholder="{{ text_search }}">
										</div>
										<div class="table-actions">
											<label class="checkbox-inline">
												<input type="checkbox" id="select-all-phones"> {{ text_select_all }}
											</label>
										</div>
									</div>
									<div class="table-responsive">
										<table class="table table-hover" id="phones-table">
											<thead>
												<tr>
													<th width="40"></th>
													<th>ID</th>
													<th>{{ column_name }}</th>
													<th>{{ text_phone_current }}</th>
													<th>{{ text_phone_new }}</th>
													<th>{{ text_operator }}</th>
													<th width="50"></th>
												</tr>
											</thead>
											<tbody></tbody>
										</table>
									</div>
									<div class="phones-pagination" id="phones-pagination" style="display:none;"></div>
								</div>

								<div class="phones-empty" id="phones-empty" style="display:none;">
									<div class="empty-icon"><i class="fa fa-check-circle"></i></div>
									<h4>{{ text_no_invalid_phones }}</h4>
								</div>

								<div class="phones-loading" id="phones-loading">
									<div class="loading-spinner">
										<i class="fa fa-spinner fa-spin fa-3x"></i>
									</div>
									<p>{{ text_loading }}</p>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="add-fields-modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<form class="form-horizontal" method="POST" action="javascript:;" id="add-fields-form">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">{{ tab_custom_fields }}</h4>
				</div>
				<div class="modal-body">
					<div class="form-group required">
						<label class="col-sm-3 control-label">{{ entry_name }}</label>
						<div class="col-sm-9">
							{% for language in languages %}
								<div class="input-group"><span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
									<input type="text" name="custom_field_description[{{ language.language_id }}][name]" value="" placeholder="{{ entry_name }}" class="form-control" />
								</div>
							{% endfor %}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label" for="input-location">{{ entry_location }}</label>
						<div class="col-sm-9">
							<select name="location" id="input-location" class="form-control">
								<option value="account">{{ text_account }}</option>
								<option value="address">{{ text_address }}</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label" for="input-type">{{ entry_type }}</label>
						<div class="col-sm-9">
							<select name="type" id="input-type" class="form-control">
								<optgroup label="{{ text_input }}">
									<option value="text">{{ text_text }}</option>
									<option value="textarea">{{ text_textarea }}</option>
								</optgroup>
								<optgroup label="{{ text_choose }}">
									<option value="select">{{ text_select }}</option>
									<option value="radio">{{ text_radio }}</option>
									<option value="checkbox">{{ text_checkbox }}</option>
								</optgroup>
								<optgroup label="{{ text_file }}">
									<option value="file">{{ text_file }}</option>
								</optgroup>
								<optgroup label="{{ text_date }}">
									<option value="date">{{ text_date }}</option>
									<option value="time">{{ text_time }}</option>
									<option value="datetime">{{ text_datetime }}</option>
								</optgroup>
							</select>
						</div>
					</div>
					<div class="form-group" id="display-value">
						<label class="col-sm-3 control-label" for="input-value">{{ entry_value }}</label>
						<div class="col-sm-9">
							<input type="text" name="value" value="" placeholder="{{ entry_value }}" id="input-value" class="form-control" />
						</div>
					</div>
					<div class="form-group" id="display-validation">
						<label class="col-sm-3 control-label" for="input-validation"><span data-toggle="tooltip" title="{{ help_regex }}">{{ entry_validation }}</span></label>
						<div class="col-sm-9">
							<input type="text" name="validation" id="input-validation" value="" placeholder="{{ text_regex }}"  class="form-control"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">{{ entry_customer_group }}</label>
						<div class="col-sm-9">
                            {% set customer_group_row = 0 %}
							{% for customer_group in customer_groups %}
								<div class="checkbox">
									<label>
										<input type="checkbox" name="custom_field_customer_group[{{ customer_group_row }}][customer_group_id]" value="{{ customer_group.customer_group_id }}" />
										{{ customer_group.name }}
									</label>
								</div>
								{% set customer_group_row = customer_group_row + 1 %}
							{% endfor %}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">{{ entry_required }}</label>
						<div class="col-sm-9">
							{% set customer_group_row = 0 %}
							{% for customer_group in customer_groups %}
								<div class="checkbox">
									<label>
										<input type="checkbox" name="custom_field_customer_group[{{ customer_group_row }}][required]" value="{{ customer_group.customer_group_id }}" />
										{{ customer_group.name }}
									</label>
								</div>
								{% set customer_group_row = customer_group_row + 1 %}
							{% endfor %}
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label" for="input-status">{{ entry_status }}</label>
						<div class="col-sm-9">
							<select name="status" id="input-status" class="form-control">
								<option value="1">{{ text_enabled }}</option>
								<option value="0">{{ text_disabled }}</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label" for="input-sort-order"><span data-toggle="tooltip" title="{{ help_sort_order }}">{{ entry_sort_order }}</span></label>
						<div class="col-sm-9">
							<input type="text" name="sort_order" value="" placeholder="{{ entry_sort_order }}" id="input-sort-order" class="form-control" />
						</div>
					</div>
					<table id="custom-field-value" class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<td class="text-left required">{{ entry_custom_value }}</td>
								<td class="text-right">{{ entry_sort_order }}</td>
								<td></td>
							</tr>
						</thead>
						<tbody></tbody>
						<tfoot>
							<tr>
								<td colspan="2"></td>
								<td class="text-left"><button id="addCustomFieldValue" type="button" data-toggle="tooltip" title="{{ button_custom_field_value_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
							</tr>
						</tfoot>
					</table>
				</div>
				<div class="modal-footer">
					<i class="fa fa-circle-o-notch fa-spin add-redirect-loading hidden"></i>
					<button type="button" class="btn btn-warning" data-dismiss="modal">{{ button_cancel }}</button>
					<button type="button" id="addCustomerField" class="btn btn-primary">{{ button_create }}</button>
				</div>
			</form>
		</div>
	</div>
</div>

<script>

function addCustomField(tabsGroup, containerId, selectorId, fieldGroup, buttonId, paymentMethod) {
    const container = document.getElementById(containerId);
    const selector = document.getElementById(selectorId);
	const button = document.getElementById(buttonId);
	let arrayStructure = paymentMethod ? `[${tabsGroup}][methods][${fieldGroup}][fields]` : `[${tabsGroup}][fields][${fieldGroup}]`;

	paymentMethod = paymentMethod || 0;

    if (!container || !selector) {
        console.error('Container or selector not found');
        return;
    }

    button.addEventListener('click', (e) => {
        e.preventDefault();

        const selectedOption = selector.options[selector.selectedIndex];
        const fieldId = selectedOption.value;
        const fieldName = selectedOption.getAttribute('data-name');

        if (selector.value == '') {
            return;
        }

        let fieldsCount = document.querySelectorAll(`#${containerId} .settings-item`).length + 1;
        const nameToCheck = `oct_smart_checkout_data${arrayStructure}[custom_${fieldId}][custom_field_id]`;
        const existingInputs = Array.from(document.querySelectorAll(`input[name='${nameToCheck}']`));

        if (existingInputs.length > 0) {
            if (!confirm('{{ text_confirm_rewrite }}')) {
                return;
            } else {
                existingInputs.forEach(input => {
                    let parent = input.closest('.settings-item'); 
                    if (parent) {
                        parent.remove();
                    }
                });
            }
        }

        const newItemHtml = generateSettingsItem(tabsGroup, fieldGroup, `custom_${fieldId}`, fieldName, fieldsCount, customField = true, fieldType = 'text', fieldText = '', 1, paymentMethod);

        container.insertAdjacentHTML('beforeend', newItemHtml);

        $('[data-toggle="tooltip"]').tooltip();
    });
}

function toggleMobile() {
	const element = event.target,
		parent = element.closest('.settings-item'),
		collapse = parent.querySelector('.settings-item-collapse'),
		icon = element.querySelector('.fa');

	collapse.classList.toggle('show');
	icon.classList.toggle('fa-angle-down');
	icon.classList.toggle('fa-angle-up');
}

function generateSettingsItem(tabsGroup, group, fieldId, fieldName, fieldsCount = 0, customField = false, fieldType = 'text', fieldText, fieldStatus = 1, paymentMethod = 0) {

	let fieldIdInt = parseInt(fieldId.replace('custom_', ''));
	let dataCustomFiled = customField ? 1 : 0;
	let fieldIdIntVal = isNaN(fieldIdInt) ? 0 : fieldIdInt;
	let deleteButton = customField ? `<button type="button" class="btn btn-danger" data-toggle="tooltip" title="Remove" onclick="this.closest('.settings-item').remove();"><i class="fa fa-trash"></i></button>` : '';
	let fieldNameText = fieldText ? fieldText : fieldName;
	let opacityClass = fieldStatus ? '' : ' opacity';
	let checkedStatus = fieldStatus ? ' checked' : '';
	let arrayStructure = paymentMethod ? `[${tabsGroup}][methods][${group}][fields]` : `[${tabsGroup}][fields][${group}]`;

	return `
		<div class="settings-item${opacityClass}">
			<div class="d-flex" style="gap:12px;align-items:center;">
				<div class="d-flex settings-item-buttons" style="justify-content:space-between;align-items:center;">
					<h5 style="width:150px;"><b>${fieldNameText}</b><br><span class="badge badge-info">${fieldId}</span></h5>
					<div class="d-flex" style="gap:12px;align-items:center;">
						<button type="button" class="btn btn-info" style="cursor:grab;" title="{{ text_move }}"><i class="fa fa-hand-grab-o"></i></button>
						<span class="settings-item-toggle btn btn-default" onclick="toggleMobile();"><i class="fa fa-angle-down"></i></span>
					</div>
				</div>

				<div class="settings-item-collapse">
					<div class="d-flex">
						<div class="thumbnail d-flex" style="gap:2px;margin-bottom:0;padding:8px;">
							<span class="required" style="color:red;">*</span>
							<div class="btn-group" data-toggle="buttons">
								<label class="btn btn-default active" data-toggle="tooltip" title="{{ text_required }}">
									<input type="radio" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][required]" value="1" checked>{{ text_yes }}
								</label>
								<label class="btn btn-default" data-toggle="tooltip" title="{{ text_required }}">
									<input type="radio" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][required]" value="0">{{ text_no }}
								</label>
							</div>
						</div>
		
						<div class="thumbnail d-flex" style="gap:8px;margin-bottom:0;padding:8px;align-items:center;">
							<i class="fa fa-eye"></i>
							<div class="btn-group" data-toggle="buttons">
								<label class="btn btn-default active" data-toggle="tooltip" title="{{ text_display }}">
									<input type="radio" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][display]" value="all" checked>{{ text_all }}
								</label>
								<label class="btn btn-default" data-toggle="tooltip" title="{{ text_display }}">
									<input type="radio" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][display]" value="guests">{{ text_guests }}
								</label>
								<label class="btn btn-default" data-toggle="tooltip" title="{{ text_display }}">
									<input type="radio" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][display]" value="registered">{{ text_registered }}
								</label>
							</div>
						</div>
		
						<input type="hidden" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][sort_order]" value="1">
		
						<div class="toggle-group">
							<input type="checkbox" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][status]" id="status_${tabsGroup}_${group}_${fieldId}" ${checkedStatus} tabindex="1" onclick="setStatus(this);">
							<label for="status_${tabsGroup}_${group}_${fieldId}" data-toggle="tooltip" title="{{ text_status_field }}"></label>
							<div class="onoffswitch pull-left" aria-hidden="true">
								<div class="onoffswitch-label">
									<div class="onoffswitch-inner"></div>
									<div class="onoffswitch-switch"></div>
								</div>
							</div>
						</div>
						
						<div title="{{ text_edit_field }}" data-toggle="tooltip">
							<button type="button" class="btn btn-warning" data-toggle="collapse" data-target="#edit-local-${group}-${fieldsCount}" aria-expanded="false"><i class="fa fa-edit"></i></button>
						</div>
		
						${deleteButton}
		
						<input type="hidden" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][custom_field]" value="${dataCustomFiled}">
						<input type="hidden" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][custom_field_id]" value="${fieldIdIntVal}">
						<input type="hidden" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][type]" value="${fieldType}">
					</div>
				</div>
			</div>

			<div id="edit-local-${group}-${fieldsCount}" class="collapse mb-3 pt-3">
				{% for language in languages %}
					<div class="input-group mb-3">
						<span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}"/></span>
						<input type="text" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][localization][{{ language.language_id }}][name]" value="" placeholder="{{ text_name }}" class="form-control"/>
						<input type="text" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][localization][{{ language.language_id }}][placeholder]" value="" placeholder="{{ text_placeholder }}" class="form-control"/>
						<input type="text" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][localization][{{ language.language_id }}][error_text]" value="" placeholder="{{ text_error_text }}" class="form-control"/>
					</div>
				{% endfor %}
				<div class="form-group mx-0">
					<label class="col-sm-2 control-label">{{ text_merge }}</label>
					<div class="col-sm-10">
						<div class="toggle-group">
							<input type="checkbox" name="oct_smart_checkout_data${arrayStructure}[${fieldId}][merge]" id="merge_${fieldId}_${group}_${fieldsCount}" tabindex="1">
							<label for="merge_${fieldId}_${group}_${fieldsCount}"></label>
							<div class="onoffswitch pull-left" aria-hidden="true">
								<div class="onoffswitch-label">
									<div class="onoffswitch-inner"></div>
									<div class="onoffswitch-switch"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group mx-0">
					<label class="col-sm-2 control-label">{{ merge_field }}</label>
					<div class="col-sm-10">
						<select name="oct_smart_checkout_data${arrayStructure}[${fieldId}][merge_field]" class="form-control">
							<option value="">{{ text_none }}</option>
							<option value="firstname">{{ field_firstname }}</option>
							<option value="lastname">{{ field_lastname }}</option>
							<option value="comment">{{ entry_comment }}</option>
							<option value="shipping_address_2">{{ field_delivery }}</option>
							<option value="payment_address_2">{{ field_payment }}</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	`;
}

function initializeSortable(container) {
	$(`${container}`).sortable({
		items: '.settings-item',
		cursor: 'move',
		opacity: 0.9,
		axis: 'y',
		handle: 'button',
		update: function(event, ui) {
			var sort_order = 0;
			$(this).find('.settings-item').each(function() {
				$(this).find('input[name*="[sort_order]"]').val(sort_order);
				sort_order++;
			});

			$('[data-toggle="tooltip"]').tooltip('hide');
		}
	});

}

function deleteTab(tabGroup, tabId) {
	$(`#${tabGroup}-tabs a[href="#${tabId}"]`).parent().remove();
	$(`#${tabId}`).remove();
	$(`#${tabGroup}-tabs a:first`).tab('show');
}

function setStatus(element) {
	element.closest('.settings-item').classList.toggle('opacity');
}

const phonesApi = 'index.php?route=octemplates/module/oct_smart_checkout';
const userToken = '{{ user_token }}';
let phonesData = null;
let phonesLoaded = false;
let allInvalidPhones = [];
let currentPage = 1;
let totalPages = 1;

function loadPhones(page = 1) {
	currentPage = page;
	$('#phones-loading').show();
	$('#phones-stats .stat-number').text('-');
	$('#phones-table-container, #phones-actions-bar, #phones-empty, #phones-pagination').hide();

	$.ajax({
		url: phonesApi + '/analyzePhones&user_token=' + userToken + '&page=' + page,
		type: 'GET',
		dataType: 'json',
		success: function(data) {
			$('#phones-loading').hide();
			phonesData = data;
			phonesLoaded = true;

			if (data.error) {
				usNotify('error', data.error);
				return;
			}

			$('#stat-total').text(data.total);
			$('#stat-valid').text(data.valid);
			$('#stat-invalid').text(data.invalid);
			$('#stat-empty').text(data.empty);

			totalPages = data.total_pages || 1;

			if (data.invalid > 0) {
				$('#can-fix-count').text(data.can_fix);
				$('#cannot-fix-count').text(data.cannot_fix);
				$('#phones-actions-bar').show();

				if (data.can_fix > 0) {
					$('#btn-fix-phones').prop('disabled', false);
				}

				allInvalidPhones = data.invalid_list;
				renderPhonesTable(data.invalid_list);
				$('#phones-table-container').show();

				if (totalPages > 1) {
					renderPagination();
					$('#phones-pagination').show();
				}
			} else {
				$('#phones-empty').show();
			}
		},
		error: function() {
			$('#phones-loading').hide();
			usNotify('error', '{{ text_status_error }}');
		}
	});
}

function renderPagination() {
	let html = '<ul class="pagination">';
	
	html += '<li class="' + (currentPage <= 1 ? 'disabled' : '') + '">';
	html += '<a href="#" data-page="' + (currentPage - 1) + '">&laquo;</a></li>';
	
	let startPage = Math.max(1, currentPage - 2);
	let endPage = Math.min(totalPages, currentPage + 2);
	
	if (startPage > 1) {
		html += '<li><a href="#" data-page="1">1</a></li>';
		if (startPage > 2) html += '<li class="disabled"><span>...</span></li>';
	}
	
	for (let i = startPage; i <= endPage; i++) {
		html += '<li class="' + (i === currentPage ? 'active' : '') + '">';
		html += '<a href="#" data-page="' + i + '">' + i + '</a></li>';
	}
	
	if (endPage < totalPages) {
		if (endPage < totalPages - 1) html += '<li class="disabled"><span>...</span></li>';
		html += '<li><a href="#" data-page="' + totalPages + '">' + totalPages + '</a></li>';
	}
	
	html += '<li class="' + (currentPage >= totalPages ? 'disabled' : '') + '">';
	html += '<a href="#" data-page="' + (currentPage + 1) + '">&raquo;</a></li>';
	
	html += '</ul>';
	html += '<span class="pagination-info">{{ text_page }} ' + currentPage + ' / ' + totalPages + '</span>';
	
	$('#phones-pagination').html(html);
}

$(document).on('click', '#phones-pagination a[data-page]', function(e) {
	e.preventDefault();
	let page = parseInt($(this).data('page'));
	if (page >= 1 && page <= totalPages && page !== currentPage) {
		loadPhones(page);
	}
});

function renderPhonesTable(phones) {
	let html = '';
	phones.forEach(function(item) {
		let rowClass = item.can_fix ? 'row-can-fix' : 'row-cannot-fix';
		html += '<tr class="' + rowClass + '" data-id="' + item.customer_id + '">';
		html += '<td>' + (item.can_fix ? '<input type="checkbox" class="phone-cb" value="' + item.customer_id + '">' : '<i class="fa fa-ban text-muted"></i>') + '</td>';
		html += '<td><a href="index.php?route=customer/customer/edit&user_token=' + userToken + '&customer_id=' + item.customer_id + '" target="_blank" class="customer-link">' + item.customer_id + '</a></td>';
		html += '<td>' + item.name + '</td>';
		html += '<td class="phone-old">' + item.phone + '</td>';
		html += '<td class="phone-new">' + (item.can_fix ? '<i class="fa fa-arrow-right"></i> ' + item.normalized : '<span class="text-danger">-</span>') + '</td>';
		html += '<td>' + (item.operator ? '<span class="operator-badge operator-' + item.operator.toLowerCase() + '">' + item.operator + '</span>' : '') + '</td>';
		html += '<td><a href="index.php?route=customer/customer/edit&user_token=' + userToken + '&customer_id=' + item.customer_id + '" target="_blank" class="btn btn-xs btn-default"><i class="fa fa-external-link"></i></a></td>';
		html += '</tr>';
	});
	$('#phones-table tbody').html(html);
	$('#select-all-phones').prop('checked', false);
}

function fixSelectedPhones() {
	let ids = [];
	$('.phone-cb:checked').each(function() {
		ids.push($(this).val());
	});

	if (ids.length === 0) {
		$('.phone-cb').each(function() {
			ids.push($(this).val());
		});
	}

	if (ids.length === 0) {
		usNotify('warning', '{{ text_no_results }}');
		return;
	}

	if (!confirm('{{ text_confirm_fix }}')) return;

	$('#phones-progress').show();
	$('#btn-fix-phones').prop('disabled', true);

	let total = ids.length;
	let batchSize = 300;
	let processed = 0;
	let totalFixed = 0;

	function processBatch(startIndex) {
		let batch = ids.slice(startIndex, startIndex + batchSize);
		
		if (batch.length === 0) {
			$('#phones-progress').hide();
			usNotify('success', '{{ text_phones_fixed_count }}'.replace('%s', totalFixed));
			loadPhones(currentPage);
			return;
		}

		$.ajax({
			url: phonesApi + '/fixPhones&user_token=' + userToken,
			type: 'POST',
			data: { customer_ids: batch },
			dataType: 'json',
			success: function(data) {
				processed += batch.length;
				totalFixed += data.fixed || 0;
				let percent = Math.round((processed / total) * 100);
				$('#phones-progress .progress-bar').css('width', percent + '%');
				$('#phones-progress .progress-percent').text(percent + '%');
				$('#phones-progress .progress-text').text('{{ text_processing }} ' + processed + ' / ' + total);

				processBatch(processed);
			},
			error: function() {
				$('#phones-progress').hide();
				$('#btn-fix-phones').prop('disabled', false);
				usNotify('error', '{{ text_status_error }}');
			}
		});
	}

	processBatch(0);
}

$(document).ready(function() {
	const activeTabs = document.querySelectorAll('.nav-stacked li:first-child a');

	activeTabs.forEach(tab => {
		tab.click();
	});

	$('a[href="#phones"]').on('shown.bs.tab', function() {
		if (!phonesLoaded) {
			loadPhones();
		}
	});

	$('#btn-refresh-phones').on('click', function() {
		phonesLoaded = false;
		loadPhones(1);
	});

	$('#btn-fix-phones').on('click', fixSelectedPhones);

	$('#select-all-phones').on('change', function() {
		$('.phone-cb').prop('checked', $(this).is(':checked'));
	});

	$('#phones-search').on('keyup', function() {
		let val = $(this).val().toLowerCase();
		$('#phones-table tbody tr').each(function() {
			let text = $(this).text().toLowerCase();
			$(this).toggle(text.indexOf(val) > -1);
		});
	});

	$('body').on('click', '#reinstall', function() {
		if (confirm('{{ text_confirm_reinstall }}')) {
			location = 'index.php?route=octemplates/module/oct_smart_checkout/reinstall&user_token={{ user_token }}';
		}
	});

	$('body').on('click', '#export', function() {
		location = 'index.php?route=octemplates/module/oct_smart_checkout/exportSettings&user_token={{ user_token }}';
	});

	$('body').on('click', '#import', function() {
		$('#import-file').trigger('click');
	});

	$('#import-file').on('change', function(event) {
		
		if (confirm('{{ text_confirm_import_message }}')) {
			let fileInput = $('#import-file')[0];

			if (fileInput.files.length > 0) {
				let file = fileInput.files[0];
				let reader = new FileReader();
				
				reader.onload = function(e) {
					let contents = e.target.result;

					try {
						JSON.parse(contents);

						$.ajax({
							url: 'index.php?route=octemplates/module/oct_smart_checkout/importSettings&user_token={{ user_token }}',
							type: 'POST',
							dataType: 'json',
							data: {json_data: contents},
							success: function(response) {
								if (response.success) {
									alert('{{ text_success_import }}');
									location.reload();
								} else if (response.error) {
									alert('Error: ' + response.error);
								}
							},
							error: function(xhr, status, error) {
								console.error('Error importing settings:', status, error);
							}
						});
					} catch (error) {
						alert('Invalid JSON file: ' + error.message);
					}
				};
				reader.readAsText(file);
			} else {
				alert('Please select a file to import.');
			}
		}
	});

	initializeSortable('.sortable-fields-container');

    $('#add-customer-shipping-method').on('click', function(e) {
		e.preventDefault();
        let methodCode = $('#customer-shipping-method-selector').val();
        let methodName = $('#customer-shipping-method-selector option:selected').text();
		let settingsItem = '';
		
		const fields = [
			{name: 'firstname', type: 'text', translation: '{{ field_firstname }}', status: 1},
			{name: 'lastname', type: 'text', translation: '{{ field_lastname }}', status: 1},
			{name: 'telephone', type: 'text', translation: '{{ field_telephone }}', status: 1},
			{name: 'email', type: 'text', translation: '{{ field_email }}', status: 1},
			{name: 'fax', type: 'text', translation: '{{ field_fax }}', status: 0},
		];

		fields.forEach((field, i) => {
			settingsItem += generateSettingsItem('customer', methodCode, field.name, field.name, i, customField = false, field.type, field.translation, field.status);
		});


        if (methodCode) {
            const tabId = `customer_${methodCode}`;

            if (!$('#' + tabId).length) {
				$('#customer-tabs').append(`
					<li>
						<a href="#${tabId}" data-toggle="tab" style="justify-content:space-between;">
							${methodName}
							<button class="btn btn-sm btn-danger" onclick="deleteTab('customer', '${tabId}')">
								<i class="fa fa-trash"></i>
							</button>
						</a>
					</li>
				`);
				$('#customer-tabs-content').append(`<div class="tab-pane" id="${tabId}">
					<fieldset class="sortable-fields-container" id="customer-fields-container-${tabId}">
						<legend>${methodName}</legend>
						${settingsItem}
					</fieldset>
					{% if custom_fields %}
						<div class="well col-sm-6">
							<select id="customer-custom-field-${tabId}" class="form-control mb-3">
								<option value="">{{ text_chose_custom_field }}</option>
								{% for custom_field in custom_fields %}
									<option value="{{ custom_field.custom_field_id }}" data-name="{{ custom_field.name }}">{{ custom_field.name }}</option>
								{% endfor %}
							</select>

							<span id="add-${methodCode}-custom-field" class="btn btn-primary w-100">+ {{ text_add_custom_field }}</span>
						</div>
						<script>
							addCustomField('customer', 'customer-fields-container-${tabId}', 'customer-custom-field-${tabId}', '${methodCode}', 'add-${methodCode}-custom-field');
						<` + `/script>
					{% endif %}
				</div>`);

                $('#customer-tabs a:last').tab('show');

				initializeSortable('.sortable-fields-container');
            } else {
				alert('{{ text_method_exists }}');
			}
        }
    });

	$('#add-delivery-shipping-method').on('click', function(e) {
		e.preventDefault();
		let methodCode = $('#delivery-shipping-method-selector').val();
		let methodName = $('#delivery-shipping-method-selector option:selected').text();
		let settingsItem = '';
		
		const fields = [
			{name: 'country_id', type: 'select', translation: '{{ field_country_id }}', status: 1},
			{name: 'zone_id', type: 'select', translation: '{{ field_zone_id }}', status: 1},
			{name: 'city', type: 'text', translation: '{{ field_city }}', status: 1},
			{name: 'address_1', type: 'text', translation: '{{ field_address_1 }}', status: 1},
			{name: 'address_2', type: 'text', translation: '{{ field_address_2 }}', status: 0},
			{name: 'postcode', type: 'text', translation: '{{ field_postcode }}', status: 0},
			{name: 'company', type: 'text', translation: '{{ field_company }}', status: 0},
		];

		fields.forEach((field, i) => {
			settingsItem += generateSettingsItem('delivery', methodCode, field.name, field.name, i, customField = false, field.type, field.translation, field.status);
		});


		if (methodCode) {
			const tabId = `delivery_${methodCode}`;

			if (!$('#' + tabId).length) {
				$('#delivery-tabs').append(`
					<li>
						<a href="#${tabId}" data-toggle="tab" style="justify-content:space-between;">
							${methodName}
							<button class="btn btn-sm btn-danger" onclick="deleteTab('delivery', '${tabId}')">
								<i class="fa fa-trash"></i>
							</button>
						</a>
					</li>
				`);
				$('#delivery-tabs-content').append(`<div class="tab-pane" id="${tabId}">
					<fieldset class="sortable-fields-container" id="delivery-fields-container-${tabId}">
						<legend>${methodName}</legend>
						${settingsItem}
					</fieldset>
					{% if custom_fields %}
						<div class="well col-sm-6">
							<select id="delivery-custom-field-${tabId}" class="form-control mb-3">
								<option value="">{{ text_chose_custom_field }}</option>
								{% for custom_field in custom_fields %}
									<option value="{{ custom_field.custom_field_id }}" data-name="{{ custom_field.name }}">{{ custom_field.name }}</option>
								{% endfor %}
							</select>

							<span id="add-delivery-${methodCode}-custom-field" class="btn btn-primary w-100">+ {{ text_add_custom_field }}</span>
						</div>
						<script>
							addCustomField('delivery', 'delivery-fields-container-${tabId}', 'delivery-custom-field-${tabId}', '${methodCode}', 'add-delivery-${methodCode}-custom-field');
						<` + `/script>
					{% endif %}
				</div>`);

				$('#delivery-tabs a:last').tab('show');

				initializeSortable('.sortable-fields-container');
			} else {
				alert('{{ text_method_exists }}');
			}
		}
	});

	$('#add-delivery-methods').on('click', function(e) {
		e.preventDefault();
		let methodCode = $('#delivery-methods-selector').val();
		let methodName = $('#delivery-methods-selector option:selected').text();
		
		if (methodCode) {
			const tabId = `delivery-methods-${methodCode}`;

			if (!$('#' + tabId).length) {
				$('#delivery-methods-tabs').append(`
					<li>
						<a href="#${tabId}" data-toggle="tab" style="justify-content:space-between;">
							${methodName}
							<button class="btn btn-sm btn-danger" onclick="deleteTab('delivery-methods', '${tabId}')">
								<i class="fa fa-trash"></i>
							</button>
						</a>
					</li>
				`);
				$('#delivery-methods-tabs-content').append(`<div class="tab-pane" id="${tabId}">
					<fieldset class="sortable-fields-container" id="delivery-methods-fields-container-${tabId}">
						<legend>${methodName}</legend>

						<div class="form-group">
							<label class="col-sm-3 control-label">${methodName}</label>
							<div class="col-sm-9">
								<div class="toggle-group">
									<input type="checkbox" name="oct_smart_checkout_data[delivery][methods][${methodCode}][status]" checked id="oct_smart_checkout_data[delivery][methods][${methodCode}][status]" tabindex="1">
									<label for="oct_smart_checkout_data[delivery][methods][${methodCode}][status]"></label>
									<div class="onoffswitch pull-left" aria-hidden="true">
										<div class="onoffswitch-label">
											<div class="onoffswitch-inner"></div>
											<div class="onoffswitch-switch"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label">{{ text_entry_image }}</label>
							<div class="col-sm-9">
								<a href="" id="thumb-image-${methodCode}" data-toggle="image" class="img-thumbnail">
									<img width="60" height="60" src="{{ thumb }}" alt="" title="" data-placeholder="{{ thumb }}" />
								</a>
								<input type="hidden" name="oct_smart_checkout_data[delivery][methods][${methodCode}][image]" value="{{ details.image }}" id="input-image-${methodCode}" />
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label">{{ text_display }}</label>
							<div class="col-sm-9">
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-default active" data-toggle="tooltip" title="{{ text_display }}">
										<input type="radio" name="oct_smart_checkout_data[delivery][methods][${methodCode}][display]" value="all" checked>{{ text_all }}
									</label>
									<label class="btn btn-default data-toggle="tooltip" title="{{ text_display }}">
										<input type="radio" name="oct_smart_checkout_data[delivery][methods][${methodCode}][display]" value="guests">{{ text_guests }}
									</label>
									<label class="btn btn-default" data-toggle="tooltip" title="{{ text_display }}">
										<input type="radio" name="oct_smart_checkout_data[delivery][methods][${methodCode}][display]" value="registered">{{ text_registered }}
									</label>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="${methodCode}_free_shipping_from">{{ entry_free_shipping_from }}</label>
							<div class="col-sm-9">
								<input type="number" name="oct_smart_checkout_data[delivery][methods][${methodCode}][free_shipping_from]" value="0" id="${methodCode}_free_shipping_from" class="form-control"/>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="${methodCode}_min_order_amount">{{ entry_min_order_amount }}</label>
							<div class="col-sm-9">
								<input type="number" name="oct_smart_checkout_data[delivery][methods][${methodCode}][min_order_amount]" value="0" id="${methodCode}_min_order_amount" class="form-control" min="0" step="0.01"/>
								<span class="help-block">{{ help_min_order_amount }}</span>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="filter_manu_ac_${methodCode}">{{ entry_filter_manufacturers }}</label>
							<div class="col-sm-9">
								<input type="text" id="filter_manu_ac_${methodCode}" class="form-control" autocomplete="off"/>
								<div id="filter_manu_selected_${methodCode}" class="well well-sm" style="height:150px;overflow:auto">
									{% if details.filter_manufacturers %}
										{% for m in details.filter_manufacturers %}
											<div class="rep-manu-badge">
												{{ m.name }}
												<i class="fa fa-minus-circle text-danger" onclick="$(this).parent().remove();"></i>
												<input type="hidden"
													name="oct_smart_checkout_data[delivery][methods][${methodCode}][filter_manufacturers][]"
													value="{{ m.manufacturer_id }}"/>
											</div>
										{% endfor %}
									{% endif %}
								</div>
								<label style="display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;cursor:pointer;">
									<input type="checkbox" style="margin:0;flex:0 0 auto;transform:scale(1.2);transform-origin:center;" name="oct_smart_checkout_data[delivery][methods][${methodCode}][filter_manufacturers_exclude]" value="1">
									{{ entry_filter_exclude }}
								</label>
							</div>
						</div>

						<script>
							bindFilterMfr('${methodCode}');
							bindFilterCategory('${methodCode}');
						<` + `/script>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="filter_cat_ac_${methodCode}">{{ entry_filter_categories }}</label>
							<div class="col-sm-9">
								<input type="text" id="filter_cat_ac_${methodCode}" class="form-control" autocomplete="off"/>
								<div id="filter_cat_selected_${methodCode}" class="well well-sm" style="height:150px;overflow:auto">
								</div>
								<label style="display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;cursor:pointer;">
									<input type="checkbox" style="margin:0;flex:0 0 auto;transform:scale(1.2);transform-origin:center;" name="oct_smart_checkout_data[delivery][methods][${methodCode}][filter_categories_exclude]" value="1">
									{{ entry_filter_exclude }}
								</label>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="filter_currency_${methodCode}">{{ entry_filter_currencies }}</label>
							<div class="col-sm-9">
								<select name="oct_smart_checkout_data[delivery][methods][${methodCode}][filter_currencies][]" id="filter_currency_${methodCode}" class="form-control" multiple="multiple" style="height: 150px;">
									{% for currency in currencies %}
										<option value="{{ currency.code }}">{{ currency.title }} ({{ currency.code }})</option>
									{% endfor %}
								</select>
								<a href="javascript:void(0);" onclick="$('#filter_currency_${methodCode}').val([]).trigger('change');return false;" style="display:inline-block;margin-top:6px;font-size:12px;"><i class="fa fa-times-circle"></i> {{ text_filter_currencies_reset }}</a>
								<div class="help-block" style="margin:2px 0 0;">{{ entry_filter_currencies_help }}</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="delivery-local-methods-${methodCode}">{{ text_edit_local }}</label>
							<div class="col-sm-9">
								<div class="toggle-group">
									<input type="checkbox" name="oct_smart_checkout_data[delivery][methods][${methodCode}][local_edit]" id="delivery-local-methods-${methodCode}" tabindex="1">
									<label for="delivery-local-methods-${methodCode}"></label>
									<div class="onoffswitch pull-left" aria-hidden="true">
										<div class="onoffswitch-label">
											<div class="onoffswitch-inner"></div>
											<div class="onoffswitch-switch"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div id="local-${methodCode}" class="localization" style="display:none;">
							<div class="form-group">
								<label class="col-sm-3 control-label">{{ entry_title }}</label>
								<div class="col-sm-9">
									{% for language in languages %}
										<div class="input-group">
											<span class="input-group-addon">
												<img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
											<input type="text" name="oct_smart_checkout_data[delivery][methods][${methodCode}][localization][{{ language.language_id }}][title]" value="{{ details.localization[language.language_id].title }}" placeholder="{{ entry_title }}" class="form-control" />
										</div>
									{% endfor %}
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label">{{ text_entry_title }}</label>
								<div class="col-sm-9">
									{% for language in languages %}
										<div class="input-group">
											<span class="input-group-addon">
												<img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" />
											</span>
											<input type="text" name="oct_smart_checkout_data[delivery][methods][${methodCode}][localization][{{ language.language_id }}][description]" value="{{ details.localization[language.language_id].description }}" placeholder="{{ text_entry_title }}" class="form-control" />
										</div>
									{% endfor %}
								</div>
							</div>


							<script>
								$(document).ready(function() {
									$('#delivery-local-methods-${methodCode}').change(function() {
										if(this.checked) {
											$('#local-${methodCode}').show();
										} else {
											$('#local-${methodCode}').hide();
										}
									});
								});
							<` + `/script>


					</fieldset>
				</div>`);

				$('#delivery-methods-tabs a:last').tab('show');
			} else {
				alert('{{ text_method_exists }}');
			}
		
		}
	});

	$('#add-payment-methods').on('click', function(e) {
		e.preventDefault();
		let methodCode = $('#payment-methods-selector').val();
		let methodName = $('#payment-methods-selector option:selected').text();
		
		if (methodCode) {
			const tabId = `payment-methods-${methodCode}`;

			if (!$('#' + tabId).length) { 
				$('#payment-methods-tabs').append(`
					<li>
						<a href="#${tabId}" data-toggle="tab" style="justify-content:space-between;">
							${methodName} (${methodCode})
							<button class="btn btn-sm btn-danger" onclick="deleteTab('payment-methods', '${tabId}')">
								<i class="fa fa-trash"></i>
							</button>
						</a>
					</li>
				`);
				$('#payment-methods-tabs-content').append(`
				<div class="tab-pane" id="${tabId}">
					<fieldset class="sortable-fields-container" id="payment-methods-fields-container-${tabId}">
						<legend>${methodName} (${methodCode})</legend>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label">{{ text_status }}</label>
							<div class="col-sm-9">
								<div class="toggle-group">
									<input type="checkbox" name="oct_smart_checkout_data[payment][methods][${methodCode}][status]" checked id="oct_smart_checkout_data[payment][methods][${methodCode}][status]" tabindex="1">
									<label for="oct_smart_checkout_data[payment][methods][${methodCode}][status]"></label>
									<div class="onoffswitch pull-left" aria-hidden="true">
										<div class="onoffswitch-label">
											<div class="onoffswitch-inner"></div>
											<div class="onoffswitch-switch"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label">{{ text_entry_image }}</label>
							<div class="col-sm-9">
								<a href="" id="thumb-image-${methodCode}" data-toggle="image" class="img-thumbnail">
									<img width="60" height="60" src="{{ thumb }}" alt="" title="" data-placeholder="{{ thumb }}" />
								</a>
								<input type="hidden" name="oct_smart_checkout_data[payment][methods][${methodCode}][image]" value="{{ details.image }}" id="input-image-${methodCode}" />
							</div>
						</div>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label">{{ text_display }}</label>
							<div class="col-sm-9">
								<div class="btn-group" data-toggle="buttons">
									<label class="btn btn-default active" data-toggle="tooltip" title="{{ text_display }}">
										<input type="radio" name="oct_smart_checkout_data[payment][methods][${methodCode}][display]" value="all" checked>{{ text_all }}
									</label>
									<label class="btn btn-default data-toggle="tooltip" title="{{ text_display }}">
										<input type="radio" name="oct_smart_checkout_data[payment][methods][${methodCode}][display]" value="guests">{{ text_guests }}
									</label>
									<label class="btn btn-default" data-toggle="tooltip" title="{{ text_display }}">
										<input type="radio" name="oct_smart_checkout_data[payment][methods][${methodCode}][display]" value="registered">{{ text_registered }}
									</label>
								</div>
							</div>
						</div>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label" for="${methodCode}_min_order_amount">{{ entry_min_order_amount }}</label>
							<div class="col-sm-9">
								<input type="number" name="oct_smart_checkout_data[payment][methods][${methodCode}][min_order_amount]" value="0" id="${methodCode}_min_order_amount" class="form-control" min="0" step="0.01"/>
								<span class="help-block">{{ help_min_order_amount }}</span>
							</div>
						</div>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label">{{ text_entry_delivery_payment }}</label>
							<div class="col-sm-9">
								<div class="well well-sm">
									{% for shipping_method in shipping_methods %}
										<div class="checkbox">
											<label>
												<input type="checkbox" name="oct_smart_checkout_data[payment][methods][${methodCode}][disable_in_shipping_methods][]" value="{{ shipping_method.code }}">
												{{ shipping_method.name }}
											</label>
										</div>
									{% endfor %}
								</div>
							</div>
						</div>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label" for="filter_manu_ac_payment_${methodCode}">{{ entry_filter_manufacturers }}</label>
							<div class="col-sm-9">
								<input type="text" id="filter_manu_ac_payment_${methodCode}" class="form-control" autocomplete="off"/>
								<div id="filter_manu_selected_payment_${methodCode}" class="well well-sm" style="height:150px;overflow:auto">
								</div>
								<label style="display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;cursor:pointer;">
									<input type="checkbox" style="margin:0;flex:0 0 auto;transform:scale(1.2);transform-origin:center;" name="oct_smart_checkout_data[payment][methods][${methodCode}][filter_manufacturers_exclude]" value="1">
									{{ entry_filter_exclude }}
								</label>
							</div>
						</div>

						<script>
							bindFilterMfrPayment('${methodCode}');
						<` + `/script>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label" for="filter_cat_ac_payment_${methodCode}">{{ entry_filter_categories }}</label>
							<div class="col-sm-9">
								<input type="text" id="filter_cat_ac_payment_${methodCode}" class="form-control" autocomplete="off"/>
								<div id="filter_cat_selected_payment_${methodCode}" class="well well-sm" style="height:150px;overflow:auto">
								</div>
								<label style="display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-weight:normal;cursor:pointer;">
									<input type="checkbox" style="margin:0;flex:0 0 auto;transform:scale(1.2);transform-origin:center;" name="oct_smart_checkout_data[payment][methods][${methodCode}][filter_categories_exclude]" value="1">
									{{ entry_filter_exclude }}
								</label>
							</div>
						</div>

						<script>
							bindFilterCategoryPayment('${methodCode}');
						<` + `/script>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label" for="filter_currency_payment_${methodCode}">{{ entry_filter_currencies }}</label>
							<div class="col-sm-9">
								<select name="oct_smart_checkout_data[payment][methods][${methodCode}][filter_currencies][]" id="filter_currency_payment_${methodCode}" class="form-control" multiple="multiple" style="height: 150px;">
									{% for currency in currencies %}
										<option value="{{ currency.code }}">{{ currency.title }} ({{ currency.code }})</option>
									{% endfor %}
								</select>
								<a href="javascript:void(0);" onclick="$('#filter_currency_payment_${methodCode}').val([]).trigger('change');return false;" style="display:inline-block;margin-top:6px;font-size:12px;"><i class="fa fa-times-circle"></i> {{ text_filter_currencies_reset }}</a>
								<div class="help-block" style="margin:2px 0 0;">{{ entry_filter_currencies_help }}</div>
							</div>
						</div>

						<div class="form-group mx-0">
							<label class="col-sm-3 control-label" for="payment-local-methods-${methodCode}">{{ text_edit_local }}</label>
							<div class="col-sm-9">
								<div class="toggle-group">
									<input type="checkbox" name="oct_smart_checkout_data[payment][methods][${methodCode}][local_edit]" id="payment-local-methods-${methodCode}" tabindex="1">
									<label for="payment-local-methods-${methodCode}"></label>
									<div class="onoffswitch pull-left" aria-hidden="true">
										<div class="onoffswitch-label">
											<div class="onoffswitch-inner"></div>
											<div class="onoffswitch-switch"></div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div id="local-${methodCode}" class="localization" class="localization" style="display:none;">
							<div class="form-group mx-0">
								<label class="col-sm-3 control-label">{{ text_entry_title }}</label>
								<div class="col-sm-9">
									{% for language in languages %}
										<div class="input-group">
											<span class="input-group-addon">
												<img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span>
											<input type="text" name="oct_smart_checkout_data[payment][methods][${methodCode}][localization][{{ language.language_id }}][title]" value="{{ details.localization[language.language_id].title }}" placeholder="{{ entry_title }}" class="form-control" />
										</div>
									{% endfor %}
								</div>
							</div>

							<div class="form-group mx-0">
								<label class="col-sm-3 control-label">{{ text_entry_description }}</label>
								<div class="col-sm-9">
									{% for language in languages %}
										<div class="input-group">
											<span class="input-group-addon">
												<img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" />
											</span>
											<input type="text" name="oct_smart_checkout_data[payment][methods][${methodCode}][localization][{{ language.language_id }}][description]" value="{{ details.localization[language.language_id].description }}" placeholder="{{ text_entry_description }}" class="form-control" />
										</div>
									{% endfor %}
								</div>
							</div>

							<script>
								$(document).ready(function() {
									$('#payment-local-methods-${methodCode}').change(function() {
										if(this.checked) {
											$('#local-${methodCode}').show();
										} else {
											$('#local-${methodCode}').hide();
										}
									});
								});
							<` + `/script>
						</div>
					</fieldset>
					{% if custom_fields %}
						<div class="well col-sm-6">
							<select id="payment-custom-field-${methodCode}" class="form-control mb-3">
								<option value="">{{ text_chose_custom_field }}</option>
								{% for custom_field in custom_fields %}
									<option value="{{ custom_field.custom_field_id }}" data-name="{{ custom_field.name }}">{{ custom_field.name }}</option>
								{% endfor %}
							</select>

							<span id="add-payment-${methodCode}-custom-field" class="btn btn-primary w-100">+ {{ text_add_custom_field }}</span>
						</div>
						<script>
							addCustomField('payment', 'payment-methods-fields-container-${tabId}', 'payment-custom-field-${methodCode}', '${methodCode}', 'add-payment-${methodCode}-custom-field', 1);
						<` + `/script>
					{% endif %}
				</div>`);

				$('#payment-methods-tabs a:last').tab('show');

				initializeSortable('.sortable-fields-container');
			} else {
				alert('{{ text_method_exists }}');
			}
		}
	});
});
</script>

<script>
const baseUrl = 'index.php?route=octemplates/module/oct_smart_checkout/';

$(function(){
	$('select[name=\'type\']').on('change', function() {
		if (this.value == 'select' || this.value == 'radio' || this.value == 'checkbox') {
			$('#custom-field-value').show();
			$('#display-value, #display-validation').hide();
		} else {
			$('#custom-field-value').hide();
			$('#display-value, #display-validation').show();
		}
		
		if (this.value == 'date') {
			$('#display-value > div').html('<div class="input-group date"><input type="text" name="value" value="' + $('#input-value').val() + '" placeholder="{{ entry_value }}" data-date-format="YYYY-MM-DD" id="input-value" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>');
		} else if (this.value == 'time') {
			$('#display-value > div').html('<div class="input-group time"><input type="text" name="value" value="' + $('#input-value').val() + '" placeholder="{{ entry_value }}" data-date-format="HH:mm" id="input-value" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>');
		} else if (this.value == 'datetime') {
			$('#display-value > div').html('<div class="input-group datetime"><input type="text" name="value" value="' + $('#input-value').val() + '" placeholder="{{ entry_value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-value" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>');
		} else if (this.value == 'textarea') {
			$('#display-value > div').html('<textarea name="value" placeholder="{{ entry_value }}" id="input-value" class="form-control">' + $('#input-value').val() + '</textarea>');
		} else {
			$('#display-value > div').html('<input type="text" name="value" value="' + $('#input-value').val() + '" placeholder="{{ entry_value }}" id="input-value" class="form-control" />');
		}
		
		$('.date').datetimepicker({
			pickTime: false
		});
		
		$('.time').datetimepicker({
			pickDate: false
		});	
			
		$('.datetime').datetimepicker({
			pickDate: true,
			pickTime: true
		});
	});

	$('select[name=\'type\']').trigger('change');
});

function editCustomField(custom_field_id) {
	$.ajax({
		url: 'index.php?route=octemplates/module/oct_smart_checkout/editCustomFieldForm&user_token={{ user_token }}',
		type: 'post',
		data: 'custom_field_id=' + custom_field_id,
		dataType: 'html',
		beforeSend: function() {
			$('#button-customer-field').button('loading');
		},
		complete: function() {
			$('#button-customer-field').button('reset');
		},
		success: function(html) {
			const box = document.createElement('div');
			box.innerHTML = html;
			const form = box.querySelector('#custom-fields-form');

			const modal = document.createElement('div');
			modal.classList.add('modal');
			modal.classList.add('fade');
			modal.id = 'custom-field-modal';

			const modalContent = document.createElement('div');
			modalContent.classList.add('modal-content');
			modalContent.appendChild(form);
			
			const modalDialog = document.createElement('div');
			modalDialog.classList.add('modal-dialog');
			modalDialog.appendChild(modalContent);

			modal.appendChild(modalDialog);

			document.body.appendChild(modal);

			$('#custom-field-modal').modal('show');
			$('#input-edit-type').trigger('change');

			$('#input-edit-type').on('change', function() {

                if (this.value == 'select' || this.value == 'radio' || this.value == 'checkbox') {
                    $('#custom-field-edit-value').show();
                    $('#display-edit-value, #display-edit-validation').hide();
                } else {
                    $('#custom-field-edit-value').hide();
                    $('#display-edit-value, #display-edit-validation').show();
                }

                if (this.value == 'date') {
                    $('#display-edit-value > div').html('<div class="input-group date"><input type="text" name="value" value="' + $('#input-value').val() + '" placeholder="{{ entry_value }}" data-date-format="YYYY-MM-DD" id="input-value" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>');
                } else if (this.value == 'time') {
                    $('#display-edit-value > div').html('<div class="input-group time"><input type="text" name="value" value="' + $('#input-value').val() + '" placeholder="{{ entry_value }}" data-date-format="HH:mm" id="input-value" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>');
                } else if (this.value == 'datetime') {
                    $('#display-edit-value > div').html('<div class="input-group datetime"><input type="text" name="value" value="' + $('#input-value').val() + '" placeholder="{{ entry_value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-value" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div>');
                } else if (this.value == 'textarea') {
                    $('#display-edit-value > div').html('<textarea name="value" placeholder="{{ entry_value }}" id="input-value" class="form-control">' + $('#input-value').val() + '</textarea>');
                } else {
                    $('#display-edit-value > div').html('<input type="text" name="value" value="' + $('#input-value').val() + '" placeholder="{{ entry_value }}" id="input-value" class="form-control" />');
                }

                $('.date').datetimepicker({
                    pickTime: false
                });

                $('.time').datetimepicker({
                    pickDate: false
                });

                $('.datetime').datetimepicker({
                    pickDate: true,
                    pickTime: true
                });
            });

			let custom_field_value_row = $('#custom-field-edit-value tbody tr').length;
	
			$("#addEditCustomFieldValue").click(function(){
				html  = '<tr id="custom-field-value-row' + custom_field_value_row + '">';	
				html += '  <td class="text-left" style="width: 70%;"><input type="hidden" name="custom_field_value[' + custom_field_value_row + '][custom_field_value_id]" value="" />';
				{% for language in languages %}
				html += '    <div class="input-group">';
				html += '      <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span><input type="text" name="custom_field_value[' + custom_field_value_row + '][custom_field_value_description][{{ language.language_id }}][name]" value="" placeholder="{{ entry_custom_value }}" class="form-control" />';
				html += '    </div>';
				{% endfor %}
				html += '  </td>';
				html += '  <td class="text-right"><input type="text" name="custom_field_value[' + custom_field_value_row + '][sort_order]" value="" placeholder="{{ entry_sort_order }}" class="form-control" /></td>';
				html += '  <td class="text-left"><button type="button" onclick="$(\'#custom-field-value-row' + custom_field_value_row + '\').remove();" data-toggle="tooltip" title="{{ button_delete }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
				html += '</tr>';	
				
				$('#custom-field-edit-value tbody').append(html);
				
				custom_field_value_row++;
			});

			$('#EditCustomFieldSend').click(function(){
				const baseUrl = 'index.php?route=octemplates/module/oct_smart_checkout/';
				const userToken = '{{ user_token }}';

				$.ajax({
					url: 'index.php?route=octemplates/module/oct_smart_checkout/editCustomField&user_token={{ user_token }}',
					type: 'post',
					data: $("#custom-fields-form").serialize(),
					dataType: 'json',
					beforeSend: function() {
						$('#EditCustomerField').attr('disabled', 'disabled');
						$('#EditCustomerField').button('loading');
					},
					complete: function() {
						$('#EditCustomerField').button('reset');
						$('#EditCustomerField').removeAttr('disabled');
					},
					success: function(json) {
						if(json['success']) {
							window.location.href = `index.php?route=octemplates/module/oct_smart_checkout&tab=custom-fields&user_token=${userToken}`;
						}
						
						if(json['error']) {					
							if (json['error']['name']) {
								$.each(json['error']['name'], function(i, val) {
									$("#custom-fields-form").find('[name="custom_field_description[' + i + '][name]"]').parent().parent().parent().addClass('has-error');
									$("#custom-fields-form").find('[name="custom_field_description[' + i + '][name]"]').parent().parent().append('<div class="text-danger">'+ val +'</div>');
								});
							}
							
							if (json['error']['custom_field_value']) {
								$.each(json['error']['custom_field_value'], function(i, val) {
									$("#custom-fields-form").find('[name="custom_field_value[' + i + '][custom_field_value_description]['+ val +'][name]"]').parent().addClass('has-error');
								});
							}
						}
					},
					error: function(xhr, ajaxOptions, thrownError) {
						alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
					}
				});
			});

			$('#custom-field-modal').on('hidden.bs.modal', function (e) {
				$(this).remove();
			});
		},
		error: function(xhr, status, error) {
			console.error('AJAX Error:', status, error);
		}
	});
}
			
			
function sendRequest(type, action, data = {}) {
	$.ajax({
		type: type,
		url: `${baseUrl}${action}&user_token=${userToken}`,
		data: data,
		dataType: 'json',
		cache: false,
		success: function(json) {
		window.location.href = `index.php?route=octemplates/module/oct_smart_checkout&tab=custom-fields&user_token=${userToken}`;
		},
		error: function(xhr, status, error) {
			console.error('AJAX Error:', status, error);
		}
	});
}

function deleteSelected(subscription_id) {
	if (confirm('{{ text_confirm }}')) {
		sendRequest('post', `deleteSelected&delete=${subscription_id}`);
	}
}

function deleteAllSelected() {
	if (confirm('{{ text_confirm }}')) {
		const checkedInputs = $('#custom_fields_table input[type=\'checkbox\']:checked');
		sendRequest('post', 'deleteAllSelected', checkedInputs);
	}
}

function checkCheckBoxes() {
	if ($('input[name="selected[]"]:checked').length > 0) {
		$('#deleteButton').removeAttr('disabled');
	} else {
		$('#deleteButton').attr('disabled', 'disabled');
	}
}

function deleteProduct(product_id) {
	$('#product-related' + product_id).remove();
}

$(document).ready(function() {

	let formButton = document.querySelector('button[form="form"]');
	let form = document.getElementById('form-theme');

	form.addEventListener('submit', function(e) {
		e.preventDefault();
	});

	formButton.addEventListener('click', function() {
		form.submit();
	});

    $('#recommended_poducts_texts a:first').tab('show');
    
    $('#recommended-poducts-status').change(function() {
        var $input = $(this);
        if ($input.is(":checked")) {
            $(".recomended_hidden").slideDown('slow');
        } else {
            $(".recomended_hidden").slideUp('slow');
        }
    });

	$('#comment_texts a:first').tab('show');
    
    $('#recommended-comment-status').change(function() {
        var $input = $(this);
        if ($input.is(":checked")) {
            $(".comment_hidden").slideDown('slow');
        } else {
            $(".comment_hidden").slideUp('slow');
        }
    });


	$.ajax({
		url: '{{ store_url }}index.php?route=checkout/oct_smartcheckout/shippingMethodsFront',
		type: 'GET',
		dataType: 'json',
		success: function(data) {
			let methodTitle;

			for (let key in data) {
				if (data.hasOwnProperty(key)) {
					let method = data[key];
					methodTitle = method.title;

					for (let quote_key in method.quote) {
						if (method.quote.hasOwnProperty(quote_key)) {
							let quote = method.quote[quote_key];
							let methodQuoteCode = quote.code.replace(/\./g, '-');

							$('#customer-shipping-method-selector, #delivery-shipping-method-selector, #delivery-methods-selector').each(function() {
								$(this).append(new Option(methodTitle + ' (' + methodQuoteCode + ')', methodQuoteCode));
							});
						}
					}
				}
			}

		},
		error: function(jqXHR, textStatus, errorThrown) {
			console.error(textStatus, errorThrown);
		}
	});

	$('input[name=\'oct_smart_checkout_data[recommended_poducts][products]\']').autocomplete({
		'source': function(request, response) {
			$.ajax({
				url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
				dataType: 'json',
				success: function(json) {
					response($.map(json, function(item) {
						return {
							label: item['name'],
							value: item['product_id']
						}
					}));
				}
			});
		},
		'select': function(item) {
			$('input[name=\'related\']').val('');

			$('#product-related' + item['value']).remove();

			$('#product-related').append('<div id="product-related' + item['value'] + '"><i onclick="deleteProduct(' + item['value'] + ');" class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="oct_smart_checkout_data[recommended_poducts][products][]" value="' + item['value'] + '" /></div>');
		}
	});

	var custom_field_value_row = 0;
	
	$("#addCustomFieldValue").click(function(){
		html  = '<tr id="custom-field-value-row' + custom_field_value_row + '">';	
		html += '  <td class="text-left" style="width: 70%;"><input type="hidden" name="custom_field_value[' + custom_field_value_row + '][custom_field_value_id]" value="" />';
		{% for language in languages %}
		html += '    <div class="input-group">';
		html += '      <span class="input-group-addon"><img src="language/{{ language.code }}/{{ language.code }}.png" title="{{ language.name }}" /></span><input type="text" name="custom_field_value[' + custom_field_value_row + '][custom_field_value_description][{{ language.language_id }}][name]" value="" placeholder="{{ entry_custom_value }}" class="form-control" />';
		html += '    </div>';
		{% endfor %}
		html += '  </td>';
		html += '  <td class="text-right"><input type="text" name="custom_field_value[' + custom_field_value_row + '][sort_order]" value="" placeholder="{{ entry_sort_order }}" class="form-control" /></td>';
		html += '  <td class="text-left"><button type="button" onclick="$(\'#custom-field-value-row' + custom_field_value_row + '\').remove();" data-toggle="tooltip" title="{{ button_delete }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
		html += '</tr>';	
		
		$('#custom-field-value tbody').append(html);
		
		custom_field_value_row++;
	});

	let urlParams = new URLSearchParams(window.location.search);
    
    if(urlParams.get('tab') === 'custom-fields') {
        $('.nav-tabs li:eq(5) a').click();
    }

	$('input[name="selected[]"]').change(function() {
		checkCheckBoxes();
	});
	
	$('#addCustomerField').click(function(){
		const baseUrl = 'index.php?route=octemplates/module/oct_smart_checkout/';
		const userToken = '{{ user_token }}';

		$.ajax({
			url: 'index.php?route=octemplates/module/oct_smart_checkout/addCustomerField&user_token={{ user_token }}',
			type: 'post',
			data: $("#add-fields-form").serialize(),
			dataType: 'json',
			beforeSend: function() {
				$('#addCustomerField').attr('disabled', 'disabled');
				$('#addCustomerField').button('loading');
			},
			complete: function() {
				$('#addCustomerField').button('reset');
				$('#addCustomerField').removeAttr('disabled');
			},
			success: function(json) {
				if(json['success']) {
					window.location.href = `index.php?route=octemplates/module/oct_smart_checkout&tab=custom-fields&user_token=${userToken}`;
				}
				
				if(json['error']) {					
					if (json['error']['name']) {
						$.each(json['error']['name'], function(i, val) {
							$("#add-fields-modal").find('[name="custom_field_description[' + i + '][name]"]').parent().parent().parent().addClass('has-error');
							$("#add-fields-modal").find('[name="custom_field_description[' + i + '][name]"]').parent().parent().append('<div class="text-danger">'+ val +'</div>');
						});
					}
					
					if (json['error']['custom_field_value']) {
						$.each(json['error']['custom_field_value'], function(i, val) {
							$("#add-fields-modal").find('[name="custom_field_value[' + i + '][custom_field_value_description]['+ val +'][name]"]').parent().addClass('has-error');
						});
					}
				}
			},
			error: function(xhr, ajaxOptions, thrownError) {
				alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
			}
		});
	});
});
</script>

<script>
$('select[name*=\'default_country\']').on('change', function() {
  $.ajax({
    url: 'index.php?route=octemplates/module/oct_smart_checkout/country&user_token={{ user_token }}&country_id=' + this.value,
    dataType: 'json',
    beforeSend: function() {
      $('select[name*=\'default_country\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>');
    },
    complete: function() {
      $('.fa-spin').remove();
    },
    success: function(json) {
      html = '<option value="">{{ text_select }}</option>';

      if (json['zone'] && json['zone'] != '') {
        for (i = 0; i < json['zone'].length; i++) {
                html += '<option value="' + json['zone'][i]['zone_id'] + '"';

          if (json['zone'][i]['zone_id'] == "{{ oct_smart_checkout_data.default_region }}") {
                  html += ' selected="selected"';
          }

          html += '>' + json['zone'][i]['name'] + '</option>';
        }
      } else {
        html += '<option value="0" selected="selected">{{ text_none }}</option>';
      }

      $('select[name*=\'default_region\']').html(html);
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
  });
});

$('select[name*=\'default_country\']').trigger('change');
</script>

<style>
	@media (max-width: 768px) {
		.settings-item > .d-flex {
			flex-direction: column;
			align-items: flex-start !important;
		}

		.settings-item h5 {
			width: auto !important;
		}

		.settings-item-buttons {
			width: 100%;
		}

		.settings-item-buttons .fa {
			font-size: 16px;
		}

		.settings-item-collapse {
			display: grid; 
			grid-template-rows: 0fr;
			transition: 250ms grid-template-rows ease;
		}

		.settings-item-collapse.show {
			grid-template-rows: 1fr;
		}

		.settings-item-collapse > div {
			flex-direction: column;
			align-items: flex-start;
			overflow: hidden;
		}
	}

	@media (min-width: 768px) {
		.modal-dialog{width:70%;}

		.settings-item-buttons .btn-default {
			display: none;
		}

		.settings-item-collapse > div {
			flex-direction: row;
			align-items: center;
		}
	}

	.settings-item {
		background: #f9f9f9;
		border-radius: 10px;
		padding: 12px
	}
	.settings-item + .settings-item {
		margin-top: 16px
	}

	.settings-item-buttons .btn-default > * {
		pointer-events: none;
	}

	.settings-item-collapse > div {
		gap: 12px;
	}

	.sortable-fields-container {
		margin-bottom: 16px;
	}

	.nav-stacked .btn-danger i {
		font-size: 12px !important;
	}

	.badge-info {
		background-color: #4bc78e;
		font-weight: 400;
		display: inline-block;
		margin-top: 4px;
	}

	/* Phones Dashboard Styles */
	.phones-dashboard {
		padding: 20px;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		min-height: 400px;
		border-radius: 8px;
	}

	.phones-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25px;
		flex-wrap: wrap;
		gap: 15px;
	}

	.phones-title {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.phones-icon {
		width: 60px;
		height: 60px;
		background: #23a1d1;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.phones-icon i {
		font-size: 28px;
		color: #fff;
	}

	.phones-title h3 {
		margin: 0 0 5px 0;
		font-size: 22px;
		font-weight: 600;
		color: #2d3748;
	}

	.phones-title p {
		margin: 0;
		color: #718096;
		font-size: 14px;
	}

	.phones-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 15px;
		margin-bottom: 25px;
	}

	.stat-card {
		background: #fff;
		border-radius: 12px;
		padding: 20px;
		display: flex;
		align-items: center;
		gap: 15px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.stat-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 15px rgba(0,0,0,0.12);
	}

	.stat-card .stat-icon {
		width: 50px;
		height: 50px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
	}

	.stat-card.stat-total .stat-icon {
		background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
		color: #4f46e5;
	}

	.stat-card.stat-valid .stat-icon {
		background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
		color: #059669;
	}

	.stat-card.stat-invalid .stat-icon {
		background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
		color: #dc2626;
	}

	.stat-card.stat-empty .stat-icon {
		background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
		color: #d97706;
	}

	.stat-content .stat-number {
		font-size: 28px;
		font-weight: 700;
		color: #1a202c;
		line-height: 1.2;
	}

	.stat-content .stat-label {
		font-size: 13px;
		color: #718096;
		margin-top: 2px;
	}

	.phones-progress {
		background: #fff;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	}

	.phones-progress .progress-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 14px;
		color: #4a5568;
	}

	.phones-progress .progress {
		height: 10px;
		border-radius: 5px;
		background: #e2e8f0;
		overflow: hidden;
	}

	.phones-progress .progress-bar {
		background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
		border-radius: 5px;
	}

	.phones-actions-bar {
		background: #fff;
		border-radius: 12px;
		padding: 15px 20px;
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 15px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	}

	.phones-actions-bar .actions-info {
		display: flex;
		align-items: center;
		gap: 15px;
		font-size: 14px;
		color: #4a5568;
	}

	.phones-actions-bar .badge {
		padding: 5px 10px;
		font-size: 13px;
		font-weight: 600;
		border-radius: 6px;
	}

	.phones-actions-bar .badge-success {
		background: #059669;
	}

	.phones-actions-bar .badge-warning {
		background: #d97706;
	}

	.phones-actions-bar .actions-buttons {
		display: flex;
		gap: 10px;
	}

	.phones-table-container {
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	}

	.phones-table-container .table-header {
		padding: 15px 20px;
		border-bottom: 1px solid #e2e8f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 15px;
	}

	.phones-table-container .table-search input {
		border-radius: 8px;
		border: 1px solid #e2e8f0;
		padding: 8px 15px;
		min-width: 250px;
	}

	.phones-table-container .table-search input:focus {
		border-color: #667eea;
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
	}

	#phones-table {
		margin: 0;
	}

	#phones-table thead th {
		background: #f8fafc;
		border-bottom: 2px solid #e2e8f0;
		font-weight: 600;
		color: #4a5568;
		padding: 12px 15px;
		font-size: 13px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	#phones-table tbody tr {
		transition: background 0.15s;
	}

	#phones-table tbody tr:hover {
		background: #f8fafc;
	}

	#phones-table tbody td {
		padding: 12px 15px;
		vertical-align: middle;
		border-bottom: 1px solid #e2e8f0;
	}

	#phones-table .row-can-fix {
		background: rgba(5, 150, 105, 0.05);
	}

	#phones-table .row-cannot-fix {
		background: rgba(217, 119, 6, 0.05);
	}

	.operator-badge {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 6px;
		font-size: 12px;
		font-weight: 500;
		background: #e2e8f0;
		color: #4a5568;
	}

	.operator-badge.kyivstar { background: #fee2e2; color: #dc2626; }
	.operator-badge.vodafone { background: #fee2e2; color: #b91c1c; }
	.operator-badge.lifecell { background: #fef3c7; color: #b45309; }
	.operator-badge.intertelecom { background: #d1fae5; color: #047857; }
	.operator-badge.trimob { background: #e0e7ff; color: #4338ca; }

	.phones-empty {
		text-align: center;
		padding: 60px 20px;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	}

	.phones-empty .empty-icon {
		width: 80px;
		height: 80px;
		background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 20px;
	}

	.phones-empty .empty-icon i {
		font-size: 40px;
		color: #059669;
	}

	.phones-empty h4 {
		margin: 0;
		color: #2d3748;
		font-weight: 600;
	}

	.phones-loading {
		text-align: center;
		padding: 60px 20px;
	}

	.phones-loading .loading-spinner {
		margin-bottom: 15px;
	}

	.phones-loading .loading-spinner i {
		color: #667eea;
	}

	.phones-loading p {
		color: #718096;
		margin: 0;
	}

	.phones-pagination {
		padding: 15px 20px;
		border-top: 1px solid #e2e8f0;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 15px;
		flex-wrap: wrap;
	}

	.phones-pagination .pagination {
		margin: 0;
	}

	.phones-pagination .pagination li a {
		border-radius: 6px;
		margin: 0 2px;
		color: #4a5568;
		border-color: #e2e8f0;
	}

	.phones-pagination .pagination li.active a {
		background: #23a1d1;
		border-color: #23a1d1;
	}

	.phones-pagination .pagination li a:hover {
		background: #f8fafc;
		border-color: #e2e8f0;
		color: #23a1d1;
	}

	.phones-pagination .pagination-info {
		font-size: 13px;
		color: #718096;
	}

	@media (max-width: 768px) {
		.phones-dashboard {
			padding: 15px;
		}

		.phones-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.phones-stats {
			grid-template-columns: repeat(2, 1fr);
		}

		.stat-card {
			padding: 15px;
		}

		.stat-content .stat-number {
			font-size: 22px;
		}

		.phones-actions-bar {
			flex-direction: column;
			align-items: flex-start;
		}

		.phones-table-container .table-search input {
			min-width: 100%;
		}
	}
</style>
{{ footer }}