package public_surveymcu

import (
	"cpone/models"
	"cpone/layout"
)

func concatIdErrorMessage(idPertanyaan string) string {
	return "errorMessage-" + idPertanyaan
}

func concatNameDefault(NameRadioButton string) string {
	return "default-" + NameRadioButton
}

func isIDInClearList(IDItemSurvey string, idclear []models.IdClearErrorMessage) bool {
	for _, item := range idclear {
		if item.IdItem == IDItemSurvey {
			return true
		}
	}
	return false
}

templ MainContentSurveyMcuLayout(dataSurveyMcu []models.SurveyMcu, urlPost string, errorComp templ.Component, hxInclude string) {
	// toast
	<div class="toast-top-right" id="container-system-notification-x01" style="position: fixed; top: 1vh; right: 0vw; z-index: 999;">
		<!-- toast success -->
		<div
			id="notification-kartukontrol-001"
			class="toast fade fade"
			role="alert"
			aria-live="assertive"
			aria-atomic="true"
		>
			<div class="toast-header bg-success text-white">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
				<strong class="mr-auto">Success</strong>
				<small class="text-muted text-white">just now</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="toast-body bg-success-transparent">
				This is a success toast.
			</div>
		</div>
	</div>
	// end toast
	<div class="content-fluid bg-field">
		<!-- judul start -->
		<div class="py-15 px-9">
			<h1 class="title text-primary text-center">Survey MCU</h1>
		</div>
		<!-- judul end -->
		<div class="mb-2"></div>
		// <form hx-post={ urlPost }>
		<div class="px-10">
			if len(dataSurveyMcu) > 0 {
				for _, v := range dataSurveyMcu {
					// radio button
					if len(v.DataListItemSurveyMcu) > 0 {
						for _, k := range v.DataListItemSurveyMcu {
							<!-- pertanyaan 1 start -->
							<div class="card shadow-sm py-2 mb-8" style="border-radius: 12px">
								<div class="card-body px-10 py-10">
									<!-- pertanyaan -->
									<div class="flex-container">
										<h5
											class="title-pertanyaan text-black no-margin-padding flex-number"
										>
											{ k.Nomor }.&nbsp;
										</h5>
										<h5
											class="title-pertanyaan text-black no-margin-padding flex-question"
										>
											{ k.Pertanyaan }
										</h5>
									</div>
									<!-- jawaban start -->
									<div class="mt-5">
										<div class="row">
											<div class="col-12">
												<div class="form-group">
													<input type="hidden" name={ concatNameDefault(k.NameRadioButton) } value={ concatNameDefault(k.NameRadioButton) }/>
													<input type="hidden" name="id-radio" value={ k.IDItemSurvey }/>
													<div class="radio-list">
														<label class="radio">
															<input type="radio" name={ k.NameRadioButton } value="Baik"/>
															<span></span>
															<h3 class="text-jawaban">Baik</h3>
														</label>
														<label class="radio">
															<input type="radio" name={ k.NameRadioButton } value="Kurang"/>
															<span></span>
															<h3 class="text-jawaban">Kurang</h3>
														</label>
													</div>
												</div>
											</div>
										</div>
									</div>
									<!-- jawaban end -->
									<div
										id={ concatIdErrorMessage(k.IDItemSurvey) }
										class="form-group validated"
										style="display: none"
									>
										<div class="invalid-feedback">
											hello
										</div>
									</div>
								</div>
							</div>
							<!-- pertanyaan 1 end -->
						}
					}
					// text area
					if len(v.DataListItemSurveyMcuSaran) > 0 {
						for _, q := range v.DataListItemSurveyMcuSaran {
							<input type="hidden" name={ concatNameDefault(q.NameSurveyMcuSaran) } value={ concatNameDefault(q.NameSurveyMcuSaran) }/>
							<input type="hidden" name="id-saran" value={ q.IDItemSurveyMcuSaran }/>
							<!-- text area saran start -->
							<textarea
								class="form-control saran-mcu mb-10"
								name={ q.NameSurveyMcuSaran }
								rows="9"
								placeholder="Saran"
							></textarea>
							<div
								id={ concatIdErrorMessage(q.IDItemSurveyMcuSaran) }
								class="form-group validated"
								style="display: none"
							>
								<div class="invalid-feedback">
									hello
								</div>
							</div>
							<!-- text area saran end -->
						}
					}
				}
			}
			<!-- button submit start -->
			<button
				class="btn btn-lg btn-primary text-white"
				style="border-radius: 8px; width: 100%"
				type="submit"
				hx-swap="none"
				hx-post={ urlPost }
				hx-include={ hxInclude }
			>
				<span class="title-button text-center">Submit</span>
			</button>
			<!-- button submit end -->
			<!-- atur spacing bottom -->
			<div style="height: 14vh"></div>
		</div>
		// </form>
	</div>
}

templ ErrorMessageSurveyMcu(ErrorMessage string, IDItemSurvey string, idclear []models.IdClearErrorMessage, idSaranMcuAlert string, toast templ.Component) {
	if len(idclear) > 0 {
		for _, v := range idclear {
			<!-- error pertanyaan kosong start -->
			<div
				id={ concatIdErrorMessage(v.IdItem) }
				hx-swap-oob="true"
				class="form-group validated"
				style="display:none"
			>
				<div class="invalid-feedback">
					{ ErrorMessage }
				</div>
			</div>
			<!-- error pertanyaan kosong end -->
		}
	}
	<!-- error pertanyaan kosong start -->
	<div
		id={ concatIdErrorMessage(IDItemSurvey) }
		hx-swap-oob="true"
		class="form-group validated"
	>
		<div class="invalid-feedback">
			{ ErrorMessage }
		</div>
	</div>
	@toast
}

templ CssSurveyMcu() {
	<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: var(--fieldbg);
      }
      .card-control {
        width: 390px;
        height: 1212px;
        /* background-image: url("asset-corporate-portal/media/kartukontrol/bg-kartuKontrol.svg");
        background-size: 390px 1212px;
        background-repeat: no-repeat; */
        margin: auto;
      }

      .title {
        font-family: Poppins;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
      }

      .title-pertanyaan {
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
      }

      .no-margin-padding {
        margin: 0;
        padding: 0;
      }

      .flex-container {
        display: flex;
        align-items: center;
        align-items: flex-start;
      }

      .flex-number {
        margin-right: 5px;
      }

      .flex-question {
        flex-grow: 1;
      }

      .text-jawaban {
        color: var(--textjawabansurveymcu);
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
      }

      .radio-list {
        display: flex;
        flex-direction: column;
      }

      .radio {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }

      .radio h3 {
        margin: 0;
        padding-left: 10px;
      }

      .saran-mcu::placeholder {
        color: var(--text-disabled);
        font-family: Poppins, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      .title-button {
        font-family: "Public Sans";
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
      }
	</style>
}

templ JsSurveyMcu() {
}

templ ShowSurveyMcu(title string, cmp templ.Component, css templ.Component, js templ.Component) {
	@layout.PlaygroundLayout(title, css, js) {
		@cmp
	}
}
