{{ 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>
				<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>
					</ul>
					<div class="tab-content">
						<div class="tab-pane active" id="setting-tab">

							<div class="form-group mx-0">
								<label class="col-sm-2 control-label" for="status">{{ text_status_field }}</label>
								<div class="col-sm-10">
									<div class="toggle-group">
										<input type="checkbox" name="oct_smart_register_data[status]" {% if oct_smart_register_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 id="fields_list"{% if not oct_smart_register_data.status %} style="display: none;"{% endif %}>
								<div class="form-group mx-0">
									<label class="col-sm-2 control-label" for="phone_mask">{{ entry_mask }}</label>
									<div class="col-sm-10">
										<input type="text" name="oct_smart_register_data[phone_mask]" value="{{ oct_smart_register_data.phone_mask }}" id="phone_mask" class="form-control"/>
										<span class="help-block">{{ help_phone_mask }}</span>
									</div>
								</div>							
								
								<div class="form-group mx-0">
									<label class="col-sm-2 control-label" for="newsletter">{{ entry_newsletter }}</label>
									<div class="col-sm-10">
										<div class="toggle-group">
											<input type="checkbox" name="oct_smart_register_data[newsletter]" {% if oct_smart_register_data.newsletter %} checked="checked" {% endif %} id="newsletter" tabindex="1">
											<label for="newsletter"></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>

								<fieldset class="tabbable tabs-left row">
									<div class="col-sm-12"><legend>{{ text_tab_fields }}</legend></div>
									<div class="col-sm-12">
											{% for section, fields in oct_smart_register_data.customer.fields %}
												<div class="tab-pane" id="customer_{{ section }}">
													<fieldset class="sortable-fields-container" id="customer-fields-container-{{ section }}">
														{% 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_register_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_register_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="display: none; 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_register_data[customer][fields][{{ section }}][{{ field }}][display]" value="all" {% if details.display == 'all' %} checked {% endif %}>{{ text_all }}
																					</label>
																				</div>
																			</div>
			
																			<input type="hidden" name="oct_smart_register_data[customer][fields][{{ section }}][{{ field }}][sort_order]" value="{{ details.sort_order }}">
			
																			<div class="toggle-group">
																				<input type="checkbox" name="oct_smart_register_data[customer][fields][{{ section }}][{{ field }}][status]" {% if details.status %} checked="checked" {% endif %} id="oct_smart_register_data[customer][fields][{{ section }}][{{ field }}][status]" tabindex="1" onclick="setStatus(this);">
																				<label for="oct_smart_register_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_register_data[customer][fields][{{ section }}][{{ field }}][custom_field]" value="{{ details.custom_field }}">
																			<input type="hidden" name="oct_smart_register_data[customer][fields][{{ section }}][{{ field }}][custom_field_id]" value="{{ details.custom_field_id }}">
																			<input type="hidden" name="oct_smart_register_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_register_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_register_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_register_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>
															</div>
														{% endfor %}
													</fieldset>
												</div>
											{% endfor %}
									
									</div>
								</fieldset>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script>
$('#status').change(function() {
	var $input = $(this);
	if ($input.is(":checked")) {
		$("#fields_list").slideDown('slow');
	} else {
		$("#fields_list").slideUp('slow');
	}
});

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 setStatus(element) {
	element.closest('.settings-item').classList.toggle('opacity');
}

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');
		}
	});

}
initializeSortable('.sortable-fields-container');
</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;
	}

	.position-sticky {
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		z-index: 1020;
	}

	.h-100 {
		height: 100% !important;
	}

	.d-flex {
		display: flex
	}

	.flex-column {
		flex-direction: column !important;

	}

	.mx-0 {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.mb-3 {
		margin-bottom: 16px !important;
	}

	.pt-3 {
		padding-top: 16px !important;
	}

	.w-100 {
		width: 100% !important;
	}

	.opacity {
		opacity: 0.5;
		transition: opacity 0.3s ease;
	}
</style>
{{ footer }}