package dev_mdnatunitview

import "cpone/models"
import "cpone/component/modal"
import "cpone/component/customtextfield"

templ NatUnitForm(data models.NatUnitFormComponent) {
	<div class="">
		<form
			id={ data.IDComponent }
			hx-post={ data.Link }
			class="form"
			hx-target={ data.HxTarget }
			hx-swap={ data.HxSwap }
			hx-include={ data.HxInclude }
			hx-indicator=".formloading"
			hx-on::before-request={ HandleFormBeforeRequest() }
			hx-on::after-request={ HandleFormAfterRequest() }
		>
			@modalcomponent.Modal(data.ModalID,
				data.ModalTitle,
				data.DialogBody,
				data.DialogAction,
				data.ButtonCLose)
		</form>
	</div>
}

script HandleFormBeforeRequest() {
	console.log("handle disable btn add");
	const btnActCancel = document.querySelectorAll('.btnactcancel');
	const btnactsavedata = document.querySelectorAll('.btnactsavedata');

	for (let i = 0; i < btnActCancel.length; i++) {
		btnActCancel[i].setAttribute('disabled', 'true');
		
	}
	for (let i = 0; i < btnactsavedata.length; i++) {
		btnactsavedata[i].setAttribute('disabled', 'true');
		
	}
}

script HandleFormAfterRequest() {
	console.log("handle enable btn add");

	const btnactcancel = document.querySelectorAll('.btnactcancel');
	const btnactsavedata = document.querySelectorAll('.btnactsavedata');


	for (let i = 0; i < btnactcancel.length; i++) {
			btnactcancel[i].removeAttribute('disabled');
		
	}
	for (let i = 0; i < btnactsavedata.length; i++) {
			btnactsavedata[i].removeAttribute('disabled');
		
	}
}

templ BodyFormNatUnit(inputId models.CustomTextFieldv2Prm,
	inputCode models.CustomTextFieldv2Prm,
	inputName models.CustomTextFieldv2Prm,
	componentID string,
	hxOnLoad templ.ComponentScript) {
	<div id={ componentID } hx-on::load={ hxOnLoad }>
		@customtextfield.CustomTextFieldv2(
			inputId)
		@customtextfield.CustomTextFieldv2(
			inputCode)
		@customtextfield.CustomTextFieldv2(
			inputName)
	</div>
}

script JsHideModal(modalID string) {
	$(modalID).modal('hide')
}

script JsShowModal(modalID string) {
	$(modalID).modal('show')
	const btnactcancel = document.querySelectorAll('.btnactcancel');
	const btnactsavedata = document.querySelectorAll('.btnactsavedata');


	for (let i = 0; i < btnactcancel.length; i++) {
			btnactcancel[i].removeAttribute('disabled');
		
	}
	for (let i = 0; i < btnactsavedata.length; i++) {
			btnactsavedata[i].removeAttribute('disabled');
		
	}
}

templ ActionFormNatUnit(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
	<div>
		<button
			hx-on::after-request={ JsHideModal(modalID) }
			hx-post={ LinkClose }
			hx-target={ targetClose }
			hx-swap={ hxSwapClose }
			hx-indicator=".cancelloading"
			type="button"
			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel "
			data-dismiss="modal"
		>
			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
			Batal
		</button>
		<button
			type="submit"
			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
		>
			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
			Simpan
		</button>
	</div>
}

templ BtnCloseFormNatUnit(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
	<button
		hx-post={ LinkClose }
		hx-target={ targetClose }
		hx-swap={ hxSwapClose }
		type="button"
		hx-on::after-request={ JsHideModal(modalID) }
		class="close btnactcancel"
		data-dismiss="modal"
		aria-label="Close"
	>
		<i aria-hidden="true" class="ki ki-close"></i>
	</button>
}

templ DeleteConfirmationBody(inputId models.CustomTextFieldv2Prm,
	componentID string,
	message string,
	datHeader []string,
	dataText []string,
	hxOnLoad templ.ComponentScript) {
	<div id={ componentID } hx-on::load={ hxOnLoad }>
		<p>{ message }</p>
		<div class="card rounded-lg">
			<div class="card-body d-flex flex-row">
				<div class="d-flex flex-column">
					for _, v := range datHeader {
						<div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
					}
				</div>
				<div class="d-flex flex-column ">
					for _, v := range dataText {
						<div class="mb-1 mt-1 font-weight-bold">
							{ v }
						</div>
					}
				</div>
			</div>
		</div>
		@customtextfield.CustomTextFieldv2(inputId)
	</div>
}

templ ActionFormUserGroupDelete(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
	<div>
		<button
			hx-on::after-request={ JsHideModal(modalID) }
			hx-post={ LinkClose }
			hx-target={ targetClose }
			hx-swap={ hxSwapClose }
			hx-indicator=".cancelloading"
			type="button"
			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
			data-dismiss="modal"
		>
			<span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
			Batal
		</button>
		<button
			type="submit"
			class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
		>
			<span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
			Yakin
		</button>
	</div>
}
