package mastermenuusergroup

import (
	"cpone/component/breadcrumbadmin"
	"cpone/models"
	"cpone/component/table"
	"cpone/component/modal"
	"strconv"
	"cpone/component/pagination"
)

// "cpone/component/sidebar_user_profile"
templ ContentMasterMenuUserGroup(ugData []models.UserGroup, contentID string) {
	<div class="container-fluid">
		<div class="row align-items-center mb-10">
			<div class="col-md-10 col-sm-12 p-0 ">
				@breadcrumadmin.MainBreadcrumbAdmin()
			</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="#dialogNew"
					>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">Add New</button>
			</div>
		</div>
		<div id={ contentID }>
			@tablecomponent.Table([]string{"KODE", "USERGROUP", "AKSI"}, []string{"40%", "40%", "20%"}, TableRow(ugData), pagination.Pagination(20, 1, "dev/usergroup/pagination", contentID))
		</div>
		<div class="d-flex justify-content-center text-primary">
			<div class="htmx-indicator spinner-border" role="status" id="indicator">
				<span class="sr-only"></span>
			</div>
		</div>
		@modalcomponent.Modal("dialogNew", "New - User Group", DialogNewBody("", "", "", "", ""), DialogNewAction(), BtnCloseNew())
		@modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew())
		@JSku()
	</div>
}

templ TableRow(data []models.UserGroup) {
	// /usergroup/edit
	// <a
	// 	id="btneditug"
	// 	type="button"
	// 	class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
	// 	onclick="htmx.trigger('#btneditug', 'htmx:abort')"
	// 	hx-target="#modalbdyEdit"
	// 	hx-swap="innerHTML"
	// 	hx-get={ "/client/usergroup/edit?id=" + strconv.Itoa(v.UserGroupID) }
	// 	hx-on::before-request="ShowLoading()"
	// 	hx-on::after-request="ShowForm()"
	// 	data-toggle="modal"
	// 	data-target="#dialogEdit"
	// >
	// 	Edit
	// </a>
	for _, v := range data {
		<tr>
			<td>{ v.UserGroupKode }</td>
			<td>{ v.UserGroupName }</td>
			<td>
				<div class="row px-5 d-flex justify-content-around">
					<a
						id="btneditug"
						type="button"
						class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
						data-toggle="modal"
						data-target={ "#dialogEdit" + strconv.Itoa(v.UserGroupID) }
					>
						Edit
					</a>
					<a
						type="button"
						class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
						data-toggle="modal"
						data-target={ "#dialogDelete" + strconv.Itoa(v.UserGroupID) }
					>Hapus</a>
					@modalcomponent.Modal("dialogEdit"+strconv.Itoa(v.UserGroupID),
						"Edit - User Group",
						DialogEditBody(v.UserGroupKode, v.UserGroupName),
						DialogEditAction(),
						BtnCloseNew())
					@modalcomponent.ModalConfirmation(
						"dialogDelete"+strconv.Itoa(v.UserGroupID),
						"Konfirmasi",
						"Apakah anda yakin menghapus user group berikut ?", BtnCloseDelete(),
						[]string{"Kode", "User Group"}, []string{v.UserGroupKode, v.UserGroupName}, DialogDeleteAction())
				</div>
			</td>
		</tr>
	}
}

templ DialogDeleteAction() {
	<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 BtnCloseDelete() {
	<button
		type="button"
		class="close"
		data-dismiss="modal"
		aria-label="Close"
	>
		<i aria-hidden="true" class="ki ki-close"></i>
	</button>
}

templ JSku() {
	<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 Pagination() {
	<div class="d-flex justify-content-between align-items-center flex-wrap">
		<div class="d-flex flex-wrap py-2 mr-3">
			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-back icon-xs"></i></a>
			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-back icon-xs"></i></a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">23</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1">24</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">25</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">26</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">27</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">28</a>
			<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">...</a>
			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-arrow-next icon-xs"></i></a>
			<a href="#" class="btn btn-icon btn-sm btn-light mr-2 my-1"><i class="ki ki-bold-double-arrow-next icon-xs"></i></a>
		</div>
	</div>
}

templ CssMasterMenuUserGroup() {
	<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;
    }
    
</style>
}

templ JsMasterMenuUserGroup() {
}

// templ ShowMasterMenuUserGroup(title string, cmp templ.Component, css templ.Component, js templ.Component, dataMenu []services.MasterMenu, dataUser models.User) {
// 	@layout.CorporateLayout(title, css, js, dataMenu, dataUser) {
// 		@cmp
// 	}
// }
