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

{% block csslib %}
	<link href="/cms-static/admin/assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css"/>
	<link href='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.css' rel='stylesheet' type='text/css'/>
	<link href='/cms-static/admin/article-editor/css/article-editor.min.css' rel='stylesheet' type='text/css'/>
	<link href='/cms-static/admin/assets/plugins/global/plugins.bundle.css' rel='stylesheet' type='text/css'/>
	<link href='/cms-static/admin/assets/css/style.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/fullcalendar/fullcalendar.bundle.js') #}
	<script src='/cms-static/admin/assets/plugins/custom/datatables/datatables.bundle.js'></script>
	{# // end::Vendors Javascript #}

	{# // CKEditor #}
	<script src="https://cdn.ckeditor.com/ckeditor5/41.2.0/classic/ckeditor.js"></script>

	<script src='/cms-static/admin/assets/js/scripts.bundle.js'></script>

	{# // Form Submission Script #}
	<script src='/cms-static/common/js/form-data-json.min.js'></script>
	<script src='/cms-static/common/js/es-form.js'></script>

	{# //- custom functions  #}
	<script src='/cms-static/common/js/custom-functions.js'></script>
	<script src='/cms-static/admin/article-editor/article-editor.min.js'></script>
{% endblock %}

{% block customScript %}
	<script>
		document
			.querySelectorAll('.content_wysiwyg')
			.forEach(function (e) {
				ClassicEditor
					.create(document.querySelector(`#${e.getAttribute('id')}`))
					.then(editor => {})
					.catch(error => {
						console.error(error);
					});
			})

		document
			.querySelectorAll('.kt_daterangepicker input')
			.forEach((picker) => {
				$(`#${picker.id}`).flatpickr({
					altInput: !0,
					altFormat: 'd F, Y',
					dateFormat: 'Y-m-dTH:i:00.000\\Z'
				})
			})

		document
			.querySelectorAll('[data-cf-control="select2"] ')
			.forEach((item) => {
				$(item).select2()
			})

		function addEventListenerToTypeSelect() {
			const fieldTypeSelectField = document.querySelectorAll('.field_type_select')
			fieldTypeSelectField.forEach(select => {
				// Find the closest parent element that contains the content_type select field
				const card = select.closest('.cf-card');
				if (card) {
					const contentTypeSelect = card.querySelector('.content_type_select');
					const selectValue = select.value
					if (selectValue === 'content_type') {
						// Show the content_type select field
						contentTypeSelect
							.classList
							.remove('d-none');
					} else {
						// Hide the content_type select field
						contentTypeSelect
							.classList
							.add('d-none');
					}
				}
				select.addEventListener('change', (event) => {
					const selectedValue = event.target.value;
					if (card) {
						const contentTypeSelect = card.querySelector('.content_type_select');
						if (selectedValue === 'content_type') {
							// Show the content_type select field
							contentTypeSelect
								.classList
								.remove('d-none');
						} else {
							// Hide the content_type select field
							contentTypeSelect
								.classList
								.add('d-none');
						}
					}
				});
			});
		}
		addEventListenerToTypeSelect()

		var childIndex = document
			.querySelectorAll(".cf-card")
			.length - 1
		function cloneChild() {
			childIndex++
			let listCfCards = document.querySelectorAll(".cf-card")
			let p = listCfCards[listCfCards.length - 1]
			//- console.log(listCfCards.length)
			let p_prime = p.cloneNode(true)
			let newElement = document
				.getElementById('field-holder')
				.appendChild(p_prime)
			newElement.setAttribute("id", "cf-card-" + childIndex) //setting ID for newly created card
			//- document.querySelector(`#cf-card-${childIndex} .title`).textContent = `Custom Field ${childIndex + 1}`
			document
				.querySelectorAll(`#cf-card-${childIndex} .cf `)
				.forEach(function (element) {
					if (element.type == 'select-one') {
						//- console.log(element.value)
					} else if (element.type == 'text') {
						element.value = null
					} else if (element.type == 'number') {
						element.value = 0
					} else if (element.type == 'textarea') {
						element.value = ''
					} else if (element.type == 'checkbox') {
						element.checked = false
					}
				})
			document
				.querySelectorAll(`#cf-card-${childIndex} .fv-plugins-message-container `)
				.forEach(function (element) {
					let id = element
						.id
						.split('_')
					id.pop()
					let newId = id.join('_')
					element.setAttribute('id', `${newId}_${childIndex}`)
				})

			document
				.querySelectorAll(`#cf-card-${childIndex} .field-validation-rule-section .rule-field`)
				.forEach(function (element) {
					let name = element.name
					//- console.log()
					let array_pos = name.match(/\[(\d+)\]/)
					let index = childIndex
					//- console.log(`#cf-card-${childIndex} :: ${name} :: ${array_pos[1]}`)
					let updated_name = name.replace(/\[\d+\]/, `[${childIndex}]`);
					//- console.log(index)
					//- let newId = id.join('_')
					element.setAttribute('name', `${updated_name}`)
					//- document.querySelectorAll(`[name="${updated_name}"]`).forEach(function(new_element) {
					//- 	console.log(new_element)
					//- 	new_element.checked = false
					//- })
				})

			document
				.querySelectorAll(` [data-cf-control="select2"] `)
				.forEach((item) => {
					$(item).select2()
				})

			const contentTypeSelect = newElement.querySelector('.content_type_select');
			if (contentTypeSelect) {
				contentTypeSelect
					.classList
					.add('d-none');
			}
			addEventListenerToTypeSelect()
		}

		function deleteField(e) {
			var fieldLength = document
				.querySelectorAll(".cf-card")
				.length - 1
			if (e && fieldLength) {
				e
					.parentElement
					.parentElement
					.parentElement
					.parentElement
					.remove();
			}
		}

		ArticleEditor('.page_builder_content', {
			css: '/admin/article-editor/css/',
			image: {
				upload: '/admin/upload-article-image'
			}
		})
	</script>

{% endblock %}

{% block content %}
	{% block title %}
		<title>Create New Custom Form - {{browserTitle | upper()}} CMS</title>
	{% endblock %}
	
	<div class="d-flex flex-column flex-column-fluid">
		<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
			<div id="kt_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">Create New Form</h1>
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
						<li class="breadcrumb-item text-muted">
							<a href="/admin/custom-forms" class="text-muted text-hover-primary">Form</a>
						</li>
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-400 w-5px h-2px"></span>
						</li>
						<li class="breadcrumb-item text-muted">Add New</li>
					</ul>
				</div>
			</div>
		</div>

		<div id="kt_app_content" class="app-content flex-column-fluid">
			<div id="kt_app_content_container" class="app-container container-xxl">
				<div class="d-flex flex-column flex-lg-row">
					<div class="flex-lg-row-fluid me-lg-15 order-2 order-lg-1 mb-10 mb-lg-0">
						<form id="kt_subscriptions_create_new" class="form es-form" action="/admin/custom-forms/save" method="post" data-redirect-url="/admin/custom-forms">
							<div class="card card-flush pt-3 mb-5 mb-lg-10">
								<div class="card-header">
									<div class="card-title">
										<h2 class="fw-bold">Form Info</h2>
									</div>
									<div class="card-toolbar">
										<button type="submit" class="btn btn-sm btn-success form-submit-btn">
											<span class="label">Save</span>
											<span class="preloader d-none">Saving...</span>
										</button>
									</div>
								</div>
								<div class="card-body pt-0" id="form-holder">
									<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
										<li class="nav-item">
											<a class="nav-link active" data-bs-toggle="tab" href="#kt_tab_pane_general">General</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_fields">Fields</a>
										</li>
									</ul>
									<div class="tab-content tab-content-fields" id="myTabContent">
										<div class="tab-pane fade active show" role="tabpanel" id="kt_tab_pane_general">
											{% include './_general-tab-form.njk' %}
										</div>
										<div class="tab-pane fade" role="tabpanel" id="kt_tab_pane_fields">
											<div id="field-holder">
												{% include './_field-to-clone.njk' %}
											</div>

											<div class="row text-center mt-5">
												<a class="btn btn-primary btn-sm mb-5" onClick="cloneChild()">Add New Field</a>
											</div>

										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}