package groupresult

import (
	"cpone/layout"
	"cpone/models"
	"cpone/component/modal"
	"strconv"
	"cpone/component/table"
	"cpone/component/customtextfield"
)

// "cpone/component/sidebar_user_profile"
templ ContentGroupResultV1(
	tableID string,
	paginationID string,
	searchID string,
	dialogAddID string,
	dialogAddBodyID string,
	dialogEditID string,
	dialogEditBodyID string,
	dialogDeleteID string,
	dialogDeleteBodyID string,
	breadcrumb templ.Component,
	tablecontent templ.Component,
	filter templ.Component,
	paginationGroupResult templ.Component,
	modaladdform templ.Component,
	modalEditform templ.Component,
	modalDeleteform templ.Component,
) {
	<div class="container-fluid">
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
			Name:  "tableID",
			Type:  "hidden",
			Value: tableID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
			Name:  "paginationID",
			Type:  "hidden",
			Value: paginationID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "searchID",
			Name:  "searchID",
			Type:  "hidden",
			Value: searchID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddID",
			Name:  "dialogAddID",
			Type:  "hidden",
			Value: dialogAddID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAddBodyID",
			Name:  "dialogAddBodyID",
			Type:  "hidden",
			Value: dialogAddBodyID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditID",
			Name:  "dialogEditID",
			Type:  "hidden",
			Value: dialogEditID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
			Name:  "dialogEditBodyID",
			Type:  "hidden",
			Value: dialogEditBodyID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
			Name:  "dialogDeleteID",
			Type:  "hidden",
			Value: dialogDeleteID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
			Name:  "dialogDeleteBodyID",
			Type:  "hidden",
			Value: dialogDeleteBodyID})
		<div class="row align-items-center mb-10">
			<div class="col-md-10 col-sm-12 p-0 ">
				@breadcrumb
			</div>
			<div class="col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none">
				// <div class="d-block align-items-center">
				<div class="d-flex justify-content-end">
					<button
						type="button"
						class="btn btn-primary"
						data-toggle="modal"
						data-target={ "#" + dialogAddID }
					>Add New</button>
				</div>
			</div>
			<div class="col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5">
				<button
					type="button"
					class="btn btn-primary btn-block"
					data-toggle="modal"
					data-target={ "#" + dialogAddID }
				>Add New</button>
			</div>
		</div>
		@filter
		// table content
		@tablecontent
		@paginationGroupResult
		<div class="d-flex justify-content-center text-primary">
			<div class="htmx-indicator spinner-border text-primary" role="status" id="indicator">
				<span class="sr-only"></span>
			</div>
		</div>
		// hx-on::after-request="showtoast()"
		// hx-on::reponse-error="cobaerror()"
		// hx-on::send-error="cobaerror()"
		@modaladdform
		@modalEditform
		@modalDeleteform
		// @modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew())
		@JSkuGroupResultV1()
	</div>
}

templ TableRowGroupResultV1(data []models.GroupResult,
	hxGetEdit string,
	hxTargetEdit string,
	hxSwapEdit string,
	hxIncludeEdit string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string) {
	if len(data) == 0 {
		<tr>
			<td colspan="3" class="text-center">Data Tidak Ditemukan</td>
		</tr>
	}
	for _, v := range data {
		<tr>
			<td>{ v.Group_ResultName }</td>
			<td>{ v.Group_ResultFlagPerTest }</td>
			<td>{ v.Group_ResultFlagNonLab }</td>
			<td>{ v.Group_ResultResumeMcu }</td>
			<td>
				@TableAction(v.Group_ResultID, hxGetEdit, hxTargetEdit, hxSwapEdit, hxIncludeEdit, hxGetDelete, hxTargetDelete, hxSwapDelete, hxIncludeDelete)
			</td>
		</tr>
	}
}

templ TableAction(
	id int,
	hxGetEdit string,
	hxTargetEdit string,
	hxSwapEdit string,
	hxIncludeEdit string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string,
) {
	<div class="row px-5 d-flex justify-content-around">
		<a
			id="btneditug"
			type="button"
			class="btneditug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
			hx-get={ hxGetEdit + "?id=" + strconv.Itoa(id) }
			hx-target={ hxTargetEdit }
			hx-swap={ hxSwapEdit }
			hx-include={ hxIncludeEdit }
		>
			// { "/dev/usergroupshoweditform?id=" + strconv.Itoa(v.M_UserGroupID) }
			// data-toggle="modal"
			// data-target={ "#dialogEdit" + strconv.Itoa(v.M_UserGroupID) }
			Edit
		</a>
		<a
			id="btndeleteug"
			type="button"
			class=" btndeleteug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
			hx-target={ hxTargetDelete }
			hx-swap={ hxSwapDelete }
			hx-include={ hxIncludeDelete }
		>
			// hx-get={ "/dev/usergroupshowdeleteform?id=" + strconv.Itoa(v.M_UserGroupID) }
			// data-toggle="modal"
			// data-target={ "#dialogDelete" + strconv.Itoa(v.M_UserGroupID) }
			Hapus
		</a>
	</div>
}

templ DialogDeleteGroupResultActionV1() {
	<div>
		<button
			type="button"
			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
			data-dismiss="modal"
		>
			Batal
		</button>
		<button
			type="button"
			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
		>
			Yakin
		</button>
	</div>
}

templ BtnCloseDeleteGroupResultV1() {
	<button
		type="button"
		class="close"
		data-dismiss="modal"
		aria-label="Close"
	>
		<i aria-hidden="true" class="ki ki-close"></i>
	</button>
}

templ JSkuGroupResultV1() {
	<script>
		 function ShowLoading(evt) {
        document
          .getElementById("modalLoadEdit")
          .setAttribute("style", "display:block !important;");
        document
          .getElementById("modalbdyEdit")
          .setAttribute("style", "display:none !important;");
		  console.log(evt);
      }
      function ShowForm() {
        document
          .getElementById("modalLoadEdit")
          .setAttribute("style", "display:none !important;");
        document
          .getElementById("modalbdyEdit")
          .setAttribute("style", "display:block !important;;");
      }
	</script>
}

templ CssMasterGroupResultV1x() {
	<link
		rel="stylesheet"
		href="assets/css/googlefont/poppins.css"
	/>
	<link
		rel="stylesheet"
		href="assets/css/googlefont/publicsans.css"
	/>
	<link
		rel="stylesheet"
		href="assets/css/googlefont/roboto.css"
	/>
	<style>
    body {
      background-color: white;
      /* padding-right: 100px;
            padding-left: 100px; */
    }
    #div-chart {
        /* overflow-x: scroll; */
        margin: 40px 10vw 40px 10vw;
    }
    .title {
        font-size:20px;
        font-weight: bold;
    }
    #title {
        font-weight: 600;
    }
	.dropdown-menu{
		transform: translate3d(0px, 35px, 0px)!important;
	}
</style>
}

// for item dropdown
templ ItemDropdown(dataDropdown []models.GroupResultResumeMcu, selectedId int) {
	if len(dataDropdown) == 0 {
		<option value="0" disabled selected>Tidak Ada Data</option>
	} else {
		for _, v := range dataDropdown {
			if (selectedId == v.ID) {
				<option value={ strconv.Itoa(v.ID) } selected>{ v.Text }</option>
			} else {
				<option value={ strconv.Itoa(v.ID) }>{ v.Text }</option>
			}
		}
	}
}

// for empty div
templ EmptyDiv1() {
	<div></div>
}

templ ShowGroupResultV1x(title string, cmp templ.Component, css templ.Component, js templ.Component,
	navbarmenu templ.Component,
	navbaruser templ.Component,
	userprofile templ.Component) {
	@layout.CorporateLayout(title, css, js, navbarmenu, navbaruser, userprofile) {
		@cmp
	}
}

// table
templ TableGroupResult(data []models.GroupResult, tableID string,
	hxGetEdit string,
	hxTargetEdit string,
	hxSwapEdit string,
	hxIncludeEdit string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string) {
	<div id={ tableID } hx-swap-oob="true">
		@tablecomponent.TableV3([]string{"GROUP RESULT NAME", "RESULT FLAG PER TEST", "RESULT FLAG NON LAB", "RESULT RESUME MCU", "AKSI"},
			[]string{"20%", "20%", "20%", "20%", "20%"},
			TableRowGroupResultV1(data, hxGetEdit, hxTargetEdit, hxSwapEdit, hxIncludeEdit, hxGetDelete, hxTargetDelete, hxSwapDelete, hxIncludeDelete))
	</div>
}

templ SwapTableGroupResult(pagination templ.Component, table templ.Component) {
	@pagination
	@table
}

templ GroupResultForm(data models.GroupResultFormComponent) {
	<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-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 boxes = document.querySelectorAll('.btnaddact');

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

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

	const boxes = document.querySelectorAll('.btnaddact');

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

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>
}
