package dev_mdgroupresultview

import "cpone/component/table"
import "cpone/models"
import "strconv"

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%"},
			RowGroupResult(data,
				hxGetEdit,
				hxTargetEdit,
				hxSwapEdit,
				hxIncludeEdit,
				hxGetDelete,
				hxTargetDelete,
				hxSwapDelete,
				hxIncludeDelete,
			))
	</div>
}

templ RowGroupResult(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
			type="button"
			class="btnactiongr col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2 btn-sm"
			hx-get={ hxGetEdit + "?id=" + strconv.Itoa(id) }
			hx-target={ hxTargetEdit }
			hx-swap={ hxSwapEdit }
			hx-include={ hxIncludeEdit }
			hx-indicator={ "#spnredt" + strconv.Itoa(id) }
			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
		>
			<span id={ "spnredt" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
			Edit
		</a>
		<a
			type="button"
			class=" btnactiongr col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2 btn-sm"
			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
			hx-target={ hxTargetDelete }
			hx-swap={ hxSwapDelete }
			hx-include={ hxIncludeDelete }
			hx-indicator={ "#spnrdel" + strconv.Itoa(id) }
			hx-on::before-request={ HandleBeforeRequestRow(strconv.Itoa(id)) }
			hx-on::after-request={ HandleAfterRequestRow(strconv.Itoa(id)) }
		>
			<span id={ "spnrdel" + strconv.Itoa(id) } class="htmx-indicator spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
			Hapus
		</a>
	</div>
}

script HandleBeforeRequestRow(id string) {
	var cusid_ele = document.getElementsByClassName('btnactiongr');
	for (var i = 0; i < cusid_ele.length; ++i) {
		var item = cusid_ele[i];  
		item.classList.add('disabled');
	}
	console.log(id)
}

script HandleAfterRequestRow(id string) {
	var cusid_ele = document.getElementsByClassName('btnactiongr');
	for (var i = 0; i < cusid_ele.length; ++i) {
		var item = cusid_ele[i];  
		item.classList.remove('disabled');
	}
	console.log(id)
}
