<div class="modal fade" id="knbaseEditEntryForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Редагування запису</h5>
				<button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form action="update_entry" class="edit-entry">
					<input type="hidden" name="id" value="">
					@@include("knbase-form.html")
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary submit-form">Зберегти</button>
				<button type="button" class="btn btn-secondary reset-form" data-coreui-dismiss="modal">Відмінити зміни</button>
				<button type="button" class="btn btn-outline-danger" data-coreui-toggle="modal" data-coreui-target="#knbaseRemoveEntryForm"><span class="mdi mdi-delete-outline"></span> Видалити</button>
			</div>
		</div>
	</div>
</div>


<div class="modal fade" id="knbaseRemoveEntryForm" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Підтвердіть видалення запису</h5>
				<button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<button type="button" class="btn btn-danger apply-remove-entry" data-coreui-dismiss="modal"><span class="mdi mdi-delete-outline"></span> Так, видалити</button>
				<button type="button" class="btn btn-primary cancel" data-coreui-toggle="modal" data-coreui-target="#knbaseEditEntryForm">Відмінити дію</button>
			</div>
		</div>
	</div>
</div>

<script>
	document.addEventListener("DOMContentLoaded", e => {
		const editForm = document.getElementById("knbaseEditEntryForm");
		editForm.viewEntryData = function(entry){
			console.log("viewEntryData", entry);
			const form = this.querySelector("form.edit-entry");
			form.reset();
			
			form.querySelector(`[name="id"]`).value = entry.id;
			
			const selectType = form.querySelector("select.knbase");
			selectType.value = entry.type;

			form.querySelector(`[name="title"]`).value = entry.title;
			form.querySelector(`[name="content"]`).value = entry.content;
			form.querySelector(`[name="hlink"]`).value = entry.hlink;
			form.querySelector(`[name="price"]`).value = entry.price;

			let includes = entry.include_to.split(",");
			for(let i of includes) {
				form.querySelector(`[name="${i}"]`).checked = true;
			}
		}


		const form = editForm.querySelector(".edit-entry");
		const modal = new coreui.Modal(editForm);

		form.validityChecking = function(e){
      return validityChecking(this);
    }

		form.submitting = function(e){
			e.preventDefault();

			const data = {};
			data["type"] = form.querySelector("select.knbase").value;
			data["include_to"] = getSwitchersVal(form.querySelector(".bots-multi"));

			data["id"] = form.querySelector('[name="id"]').value;
			data["title"] = form.querySelector('[name="title"]').value;
			data["content"] = form.querySelector('[name="content"]').value;
			data["hlink"] = form.querySelector('[name="hlink"]').value;
			data["price"] = form.querySelector('[name="price"]').value;

			if(!this.validityChecking()) {
        return;
      }
			
			doAction("knbase.update_entry", data, resp => {
				document.querySelector("table.entries").loadDataFromServer();
			});

			document.activeElement.blur();
			modal.hide();
			form.reset();
		}

		form.addEventListener("submit", e => {
			form.submitting(e);
		});

		editForm.querySelector(".submit-form").addEventListener("click", e => {
			form.submitting(e);
		});

		editForm.querySelector(".reset-form").addEventListener("click", e => {
			document.activeElement.blur();
			form.reset();
		});

		document.querySelector("#knbaseRemoveEntryForm .apply-remove-entry").addEventListener("click", e => {
			const id = form.querySelector('[name="id"]').value;
			doAction("knbase.remove_entry", {
				"id": id
			}, resp => {
				document.querySelector("table.entries").loadDataFromServer();
				
			});
		});
	});
</script>