{% extends "../../layouts/master.njk" %}

{% block csslib %}
	<link href="/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block jslib %}
	{# // begin::Vendors Javascript(used by this page) #}
	<script src='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.js'></script>
	{# // end::Vendors Javascript #}
	<script src='/cms-static/admin/assets/plugins/custom/formrepeater/formrepeater.bundle.js'></script>
	{# // end::Custom Javascript #}

	<script src='/cms-static/common/js/form-data-json.min.js'></script>
	<script src='/cms-static/common/js/es-form.js'></script>
{% endblock %}

{% block customScript %}
	<script>
		$('#beaver_docs_repeater_nested').repeater({
			repeaters: [
				{
					selector: '.inner-repeater',
					show: function () {
						$(this).slideDown();
					},

					hide: function (deleteElement) {
						$(this).slideUp(deleteElement);
					}
				}
			],

			show: function () {
				$(this).slideDown();
				// Re-init select2
				$(this)
					.find('[data-beaver-repeate="select2"]')
					.select2();
			},

			hide: function (deleteElement) {
				$(this).slideUp(deleteElement);
			},
			ready: function () {
				// Init select2
				$('[data-beaver-repeate="select2"]').select2();
			}
		});
	</script>
{% endblock %}

{% block content %}
	{% block title %}
		<title>Content Type Field Customization - {{browserTitle | upper()}} CMS</title>
	{% endblock %}

	<div class="d-flex flex-column flex-column-fluid">
		<div id="beaver_app_toolbar" class="app-toolbar py-3 py-lg-6">
			<div id="beaver_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
					<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
						Content Type Field Customization
					</h1>
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
						<li class="breadcrumb-item text-muted">
							<a class="text-muted text-hover-primary" href='{{LANDING_URL}}'>Dashboard</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span>
						</li>
						<li class="breadcrumb-item text-muted">Content Type</li>
						<li class="breadcrumb-item text-muted">
							<span class="bullet bg-gray-400 w-5px h-2px ms-1"></span>
						</li>
						<li class="breadcrumb-item text-muted">
							{{'Edit' if contentType else 'New'}}
						</li>
					</ul>
				</div>
				<div class="d-flex align-items-center gap-2 gap-lg-3">
					<a class="btn btn-sm fw-bold btn-primary" href=`/admin/config/content-type/view/{{contentType._id}}`>Back</a>
				</div>
			</div>
		</div>
		<div class="app-content flex-column-fluid" id="beaver_app_content">
			<div class="app-container container-xxl" id="beaver_app_content_container">
				.card.mb-5.mb-xl-10
					<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#beaver_account_profile_details" aria-expanded="true" aria-controls="beaver_account_profile_details">
					<div class="card-title m-0">
						<h3 class="fw-bold m-0">Fields</h3>
					</div>
				</div>

				<form id="beaver_account_profile_details_form" class="form es-form" action="/admin/config/content-type/save-fields" data-redirect-url="/admin/config/content-type" method="post" autocomplete="off">
					<input type="hidden" name="id" value="{{ contentType._id }}">
					<div id="beaver_account_settings_profile_details">
						<div class="card-body border-top">
							<div class="row" id="beaver_docs_repeater_nested">
								{% if contentType and contentType.custom_field_groups and contentType.custom_field_groups.length %}
									<div class="form-group mt-10">
										<div data-repeater-list="beaver_docs_repeater_nested_outer">
											{% for cfg, i in contentType.custom_field_groups %}
												<div class="border rounded p-6 pt-12 mb-4 position-relative" data-repeater-item="" style="background-color: #ebebeb">
													<div class="position-absolute" style="top:10px; right:10px;">
														<a class="btn btn-sm btn-light-danger border border-danger py-2 px-3" href="javascript:;" data-repeater-delete="">
															<i class="la la-trash-o fs-4"></i>Delete Row
															</a>
													</div>
													<div class="form-group row mb-5 mt-2">
														<h5 class="badge badge-success">Field Group</h5>
														<div class="col-md-6">
															<label class="form-label">Row Label:</label>
															<input type="text" name="label" placeholder="Enter Row Label" value="{{cfg.row_label || ''}}" class="form-control form-control-solid mb-2 mb-md-0">
														</div>
														<div class="col-md-6">
															<label class="form-label">Row Name:</label>
															<input type="text" name="name" placeholder="Enter Row name" value="{{cfg.row_name || ''}}" class="form-control form-control-solid mb-2 mb-md-0">
														</div>
														<div class="col-md-6">
															<label class="form-label">Row Type:</label>
															<select name="repeater_group" class="form-select form-control select2 form-select-lg form-select-solid mb-2 mb-md-0">
																<option value="">Select Row type</option>
																<option value="false" {% if cfg and cfg.repeater_group == false %}selected{% endif %}>Normal</option>
																<option value="true" {% if cfg and cfg.repeater_group == true %}selected{% endif %}>Repeater</option>
															</select>
														</div>
														<div class="mt-2 col-md-6">
															<label class="form-label">Row Language type</label>
															<select name="localisation" class="form-select form-control select2 form-select-lg form-select-solid mb-2">
																<option value="">Select language type</option>
																<option value="true" {% if cfg and cfg.localisation == true %}selected{% endif %}>localisation</option>
																<option value="false" {% if cfg and cfg.localisation == false %}selected{% endif %}>English Only</option>
															</select>
														</div>
													</div>

													<div>
														<h5 class="badge badge-success"></h5>
														<div class="inner-repeater">
															<div class="mb-5" data-repeater-list="beaver_docs_repeater_nested_inner">
																{% for cf, j in cfg.fields %}
																	<div class="position-relative border rounded p-6 pt-10 bg-white mt-4" data-repeater-item="">
																		<div class="position-absolute" style="top:10px; right:10px;">
																			<button class="btn-sm btn btn-light-danger border border-danger py-2 px-3" data-repeater-delete="" type="button">
																				<i class="la la-trash-o fs-4"></i>Delete field</button>
																		</div>
																		<label class="form-label">Field:</label>
																		<div class="row">
																			<div class="col-md-6">
																				<input class="form-control form-control-lg form-control-solid" type="text" name="field_label" placeholder="Field Label" value="{{cf.field_label || ''}}">
																				<div class="fv-plugins-message-container invalid-feedback" id="field-error-field_label"></div>
																			</div>
																			<div class="col-md-6">
																				<input class="form-control form-control-lg form-control-solid" type="text" name="field_name" placeholder="Field Name" value="{{cf.field_name || ''}}">
																				<div class="fv-plugins-message-container invalid-feedback" id="field-error-field_name"></div>
																			</div>
																			<div class="col-md-6">
																				<input class="form-control form-control-lg form-control-solid" type="text" name="placeholder" placeholder="Placeholder" value="{{cf.placeholder || ''}}">
																				<div class="fv-plugins-message-container invalid-feedback" id="field-error-placeholder"></div>
																			</div>
																			<div class="col-md-6">
																				<input class="form-control form-control-lg form-control-solid" type="text" name="validation" placeholder="Validation" value="{{cf.validation || ''}}">
																				<div class="fv-plugins-message-container invalid-feedback" id="field-error-validation"></div>
																			</div>
																			<div class="mt-2 col-md-6">
																				<select name="field_type" class="form-select form-control select2 form-select-lg form-select-solid mb-2" data-beaver-repeater='select2' data-close-on-select='true' data-allow-clear="true" data-placeholder='Select field type'>
																					<option value="">Select Field Type</option>
																					{% if cf.field_type == 'text' %}
																						<option value="text" selected>Text</option>
																					{% else %}
																						<option value="text">Text</option>
																					{% endif %}
																					{% if cf.field_type == 'wysiwyg' %}
																						<option value="wysiwyg" selected>WYSIWYG</option>
																					{% else %}
																						<option value="wysiwyg">WYSIWYG</option>
																					{% endif %}
																					{% if cf.field_type == 'textarea' %}
																						<option value="textarea" selected>Textarea</option>
																					{% else %}
																						<option value="textarea">Textarea</option>
																					{% endif %}
																					{% if cf.field_type == 'date' %}
																						<option value="date" selected>Date</option>
																					{% else %}
																						<option value="date">Date</option>
																					{% endif %}
																					{% if cf.field_type == 'dropdown' %}
																						<option value="dropdown" selected>Dropdown</option>
																					{% else %}
																						<option value="dropdown">Dropdown</option>
																					{% endif %}
																					{% if cf.field_type == 'radio' %}
																						<option value="radio" selected>Radio</option>
																					{% else %}
																						<option value="radio">Radio</option>
																					{% endif %}
																					{% if cf.field_type == 'checkbox' %}
																						<option value="checkbox" selected>Checkbox</option>
																					{% else %}
																						<option value="checkbox">Checkbox</option>
																					{% endif %}
																					{% if cf.field_type == 'file' %}
																						<option value="file" selected>File</option>
																					{% else %}
																						<option value="file">File</option>
																					{% endif %}
																				</select>
																			</div>
																			{% set optionLabels = cf.options
																				? cf
																					.options
																					.map(op => op.label) %}
																			{% set optionValues = cf.options
																				? cf
																					.options
																					.map(op => op.value) %}
																			<div class="mt-2 col-md-6">
																				<textarea name="option_label" class="form-control form-control-lg form-control-solid" type="text" placeholder="Dropdown option label separated by comma(,)">{{ optionLabels }}</textarea>
																				<div id="field-error-option_label" class="fv-plugins-message-container invalid-feedback"></div>
																			</div>
																			<div class="mt-2 col-md-6">
																				<textarea name="option_value" class="form-control form-control-lg form-control-solid" type="text" placeholder="Dropdown option value seperated by comma(,)">{{ optionValues }}</textarea>
																				<div id="field-error-option_value" class="fv-plugins-message-container invalid-feedback"></div>
																			</div>
																		</div>
																	</div>
																{% endfor %}
															</div>
															<div class="text-center">
																<button class="btn btn-sm btn-light-primary border border-primary py-2 px-3" data-repeater-create="" type="button">
																	<i class="la la-plus"></i>
																		Add Field
																	</button>
															</div>
														</div>
													</div>
												</div>
											{% endfor %}
										</div>
										<div class="form-group mt-4 text-center">
											<a class="btn btn-sm btn-light-primary border border-primary py-2 px-3" href="javascript:;" data-repeater-create="">
												<i class="la la-plus"></i>Add Row
												</a>
										</div>
									</div>
								{% else %}
									<div class="form-group mt-10">
										<div data-repeater-list="beaver_docs_repeater_nested_outer">
											<div class="border rounded p-6 pt-12 mb-4 position-relative" data-repeater-item="" style="background-color: #ebebeb">
												<div class="position-absolute" style="top:10px; right:10px;">
													<a class="btn btn-sm btn-light-danger border border-danger py-2 px-3" href="javascript:;" data-repeater-delete="">
														<i class="la la-trash-o fs-4"></i>Delete Row
														</a>
												</div>
												<div class="form-group row mb-5">
													<h5>Field Group</h5>
													<div class="col-md-6">
														<label class="form-label">Row Label:</label>
														<input type="text" name="label" class="form-control form-control-solid mb-2 mb-md-0" placeholder="Enter Row Label">
													</div>
													<div class="col-md-6">
														<label class="form-label">Row Name:</label>
														<input type="text" name="name" class="form-control form-control-solid mb-2 mb-md-0" placeholder="Enter Row name">
													</div>
													<div class="col-md-6">
														<label class="form-label">Row Type:</label>
														<select name="repeater_group" class="form-select form-control select2 form-select-lg form-select-solid mb-2 mb-md-0" data-beaver-repeater="select2" data-close-on-select="true" data-allow-clear="true" data-placeholder="Select row type">
																//- <!-- TODO::edit selection list item -->
															<option value="">Select Row type</option>
															{% if contentType and contentType.repeater_group == false %}
																<option value="false" selected>Normal</option>
															{% else %}
																<option value="false">Normal</option>
															{% endif %}
															{% if contentType and contentType.repeater_group == true %}
																<option value="true" selected>Repeater</option>
															{% else %}
																<option value="true">Repeater</option>
															{% endif %}
														</select>
													</div>
													<div class="mt-2 col-md-6">
														<label class="form-label">Row Language type</label>
														<select name="localisation" class="form-select form-control select2 form-select-lg form-select-solid mb-2" data-beaver-repeater="select2" data-close-on-select="true" data-allow-clear="true" data-placeholder="Select language type">
															<!-- TODO::edit selection list item -->
															<option value="">Select language type</option>
															{% if contentType and contentType.localisation == true %}
																<option value="true" selected>localisation</option>
															{% else %}
																<option value="true">localisation</option>
															{% endif %}
															{% if contentType and contentType.localisation == false %}
																<option value="false" selected>English Only</option>
															{% else %}
																<option value="false">English Only</option>
															{% endif %}
														</select>
													</div>
												</div>

												<div>
													<h5 class="badge badge-success">Fields</h5>
													<div class="inner-repeater">
														<div class="mb-5" data-repeater-list="beaver_docs_repeater_nested_inner">
															<div class="position-relative border rounded p-6 pt-10 bg-white mt-4" data-repeater-item="">
																<div class="position-absolute" style="top:10px; right:10px;">
																	<button class="btn-sm btn btn-light-danger border border-danger py-2 px-3" data-repeater-delete="" type="button">
																		<i class="la la-trash-o fs-4"></i>Delete field</button>
																</div>
																<label class="form-label">Field:</label>
																<div class="row">
																	<div class="mt-2 col-md-6">
																		<input class="form-control form-control-lg form-control-solid" type="text" name="field_label" placeholder="Field Label"/>
																		<div class="fv-plugins-message-container invalid-feedback" id="field-error-field_label"></div>
																	</div>
																	<div class="mt-2 col-md-6">
																		<input class="form-control form-control-lg form-control-solid" type="text" name="field_name" placeholder="Field Name"/>
																		<div class="fv-plugins-message-container invalid-feedback" id="field-error-field_name"></div>
																	</div>
																	<div class="mt-2 col-md-6">
																		<input class="form-control form-control-lg form-control-solid" type="text" name="placeholder" placeholder="Placeholder"/>
																		<div class="fv-plugins-message-container invalid-feedback" id="field-error-placeholder"></div>
																	</div>
																	<div class="mt-2 col-md-6">
																		<input class="form-control form-control-lg form-control-solid" type="text" name="validation" placeholder="Validation"/>
																		<div class="fv-plugins-message-container invalid-feedback" id="field-error-validation"></div>
																	</div>
																	<div class="mt-2 col-md-6">
																		<select class="form-select form-control select2 form-select-lg form-select-solid mb-2" name="field_type" data-beaver-repeater="select2" data-close-on-select="true" data-allow-clear="true" data-placeholder="Select field type">
																			<option value="">Select Field Type</option>
																			<option value="text">Text</option>
																			<option value="wysiwyg">WYSIWYG</option>
																			<option value="textarea">Textarea</option>
																			<option value="date">Date</option>
																			<option value="dropdown">Dropdown</option>
																			<option value="radio">Radio</option>
																			<option value="checkbox">Checkbox</option>
																			<option value="file">File</option>
																		</select>
																	</div>
																	<div class="mt-2 col-md-6">
																		<textarea class="form-control form-control-lg form-control-solid" type="text" name="option_label" placeholder="Dropdown option label seperated by comma(,)"></textarea>
																		<div class="fv-plugins-message-container invalid-feedback" id="field-error-option_label"></div>
																	</div>
																	<div class="mt-2 col-md-6">
																		<textarea class="form-control form-control-lg form-control-solid" type="text" name="option_value" placeholder="Dropdown option value seperated by comma(,)"></textarea>
																		<div class="fv-plugins-message-container invalid-feedback" id="field-error-option_value"></div>
																	</div>
																</div>
															</div>
														</div>
														<div class="text-center">
															<button class="btn btn-sm btn-light-primary border border-primary py-2 px-3" data-repeater-create="" type="button">
																<i class="la la-plus"></i> Add Field</button>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>

									<div class="form-group mt-4 text-center">
										<a class="btn btn-sm btn-light-primary border border-primary py-2 px-3" href="javascript:;" data-repeater-create="">
											<i class="la la-plus"></i>Add Row
											</a>
									</div>
								{% endif %}
							</div>
							<button class="btn btn-primary form-submit-btn" id="beaver_account_profile_details_submit" type="submit">
								<span class="preloader d-none">Saving...</span>
								<span class="label">Save</span>
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
{% endblock %}