package public_kartukontrol

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

templ MainContentKartuKontrolLayout(dataKartuKontrol []models.KartuKontrolModel, hxGet string, hxTrigger string, idModal string, urlSurveyMcu string, nomorRegistrasi 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 hide"
			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-white">
		<div class="card-control py-19 px-9">
			if len(dataKartuKontrol) > 0 {
				@ContentDataPasienList(dataKartuKontrol[0].KartuKontrolDataPasienList)
				@ContentPemeriksaanLayout(dataKartuKontrol[0].KartuKontrolDataPemeriksaanList, dataKartuKontrol[0].KartuKontrolDataPemeriksaanPengambilanSample)
			}
		</div>
	</div>
	@ModalMcuWordingProcessShow(hxTrigger, hxGet, idModal, urlSurveyMcu, nomorRegistrasi)
}

templ ContentDataPasienList(dataPasienList []models.DataPasien) {
	<!-- begin::Data Pasien -->
	<div class="left pt-6 pl-7" style="position: relative">
		<div class="foto top-right mt-7 mr-6"></div>
		<div class="card-label">
			<h4>Data Pasien</h4>
		</div>
		<div class="pt-4">
			<h5 class="text-primary">No Registrasi</h5>
			<h5>{ dataPasienList[0].NomorRegistrasi }</h5>
		</div>
		<div class="pt-4">
			<h5 class="text-primary">Nomor Lab</h5>
			<h5>{ dataPasienList[0].NomorLab }</h5>
		</div>
		<div class="pt-4">
			<h5 class="text-primary">Nama Pasien</h5>
			<h5>{ dataPasienList[0].NamaPasien }</h5>
		</div>
		<div class="pt-4">
			<h5 class="text-primary">Tanggal Lahir / Umur</h5>
			<h5>{ dataPasienList[0].TanggalLahir } / { dataPasienList[0].Umur }</h5>
		</div>
		<div class="pt-4">
			<h5 class="text-primary">Jenis Kelamin</h5>
			<h5>{ dataPasienList[0].JenisKelamin }</h5>
		</div>
		<div class="pt-4">
			<h5 class="text-primary">Divisi</h5>
			<h5>{ dataPasienList[0].NamaDivisi }</h5>
		</div>
		<div class="pt-4">
			<h5 class="text-primary">Company</h5>
			<h5>{ dataPasienList[0].NamaCompany }</h5>
		</div>
	</div>
	<!-- end::Data Pasien -->
}

templ ContentPemeriksaanLayout(dataPemeriksaanList []models.DataPemeriksaanList, dataPemeriksaanPengambilanSample []models.DataPemeriksaanPengambilanSample) {
	<div class="card shadow-sm py-2 mt-29">
		@ContentPemeriksaanList(dataPemeriksaanList)
	</div>
	@ContentPengambilanSampleList(dataPemeriksaanPengambilanSample)
}

templ ContentPemeriksaanList(dataPemeriksaan []models.DataPemeriksaanList) {
	<div class="card-body px-3 py-2">
		<h5 class="card-title">Daftar Pemeriksaan</h5>
		if len(dataPemeriksaan) > 0 {
			<ul class="list-group text-grey ml-7 mt-1">
				for _, v := range dataPemeriksaan {
					<li><h6>{ v.NamaPemeriksaanList }</h6></li>
				}
			</ul>
		} else {
			<h6>Belum Ada Daftar Pemeriksaan</h6>
		}
	</div>
}

templ ContentPengambilanSampleList(dataPemeriksaanPengambilanSample []models.DataPemeriksaanPengambilanSample) {
	<div class="card shadow-sm py-2 mt-6">
		<div class="card-body px-3 py-2">
			<!-- begin::Pemeriksaan/Pengambilan Sample -->
			<h5 class="card-title">Pemeriksaan / Pengambilan Sample</h5>
			if len(dataPemeriksaanPengambilanSample) > 0 {
				for _, v := range dataPemeriksaanPengambilanSample {
					<div class="text-grey mb-3">
						<h5>{ v.NamaPemeriksaanPengambilanSample }</h5>
						if len(v.SampleTypeListData) > 0 {
							<ul class="list-group ml-7 mt-1">
								for _, k := range v.SampleTypeListData {
									<li class="justify-content-center align-items-center mb-3">
										<div class="row">
											<div class="col-9 d-flex">
												<h6>{ k.SampleTypeName }</h6>
												if len(k.SampleTypeDateTime) > 0 {
													<span class="smallf pl-5 vertical">{ k.SampleTypeDateTime }</span>
												}
											</div>
											<div class="col-3">
												<span class="label label-inline font-weight-bold kartukontrol-sudah-label mr-2 shadow-sm">{ k.SampleTypeStatus }</span>
											</div>
										</div>
									</li>
								}
							</ul>
						} else {
							<h6>Belum Ada Data Pengambilan Sample</h6>
						}
					</div>
				}
			} else {
				<h6>Belum Ada Data Pemeriksaan & Pengambilan Sample</h6>
			}
			<!-- end::Pemeriksaan/Pengambilan Sample -->
		</div>
	</div>
	<div style="height: 14vh;"></div>
}

templ ModalMcuWordingProcessShow(hxTrigger string, hxGet string, idModal string, urlSurveyMcu string, nomorRegistrasi string) {
	<input type="hidden" name="nomorRegistrasi" value={ nomorRegistrasi }/>
	<input type="hidden" name="urlSurveyMcu" value={ urlSurveyMcu }/>
	<div hx-trigger={ hxTrigger } hx-get={ hxGet } hx-include="[name='urlSurveyMcu'], [name='nomorRegistrasi']"></div>
	<div id={ idModal }></div>
}

templ ModalMcuWordingShow(idModal string, messageWording string, urlSurvey string) {
	<!-- modal wording start -->
	<div
		class="modal fade show modalcover"
		id={ idModal }
		hx-swap-oob="true"
		tabindex="-1"
		role="dialog"
		data-backdrop="static"
		aria-hidden="true"
		style="display: block;"
	>
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content rounded-lg">
				<div class="modal-header border-bottom-0">
					<h1 class="text-black font-weight-bolder">Perhatian</h1>
				</div>
				<div class="modal-body border-bottom-0">
					<div id="spinnerDiv" class="d-flex justify-content-center align-items-center">
						<div id="spinnerLoading" class="spinner-border text-primary" role="status">
							<span class="sr-only">Loading...</span>
						</div>
					</div>
					<h6 id="modal-text" class="text-black" style="display: none;">
						{ messageWording }
					</h6>
				</div>
				<div class="modal-footer border-top-0">
					<button
						id="redirectToSurveyMcu"
						type="submit"
						class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
						style="display:none"
						hx-get={ urlSurvey }
						hx-swap="none"
						hx-include="[name='urlSurveyMcu'], [name='nomorRegistrasi']"
					>
						OK
					</button>
				</div>
			</div>
		</div>
	</div>
	<script>

	// show spinner
	setTimeout(function() {
		document.getElementById('spinnerDiv').style.display = 'none';
		document.getElementById('spinnerLoading').style.display = 'none';
		document.getElementById('modal-text').style.display = 'block';
		document.getElementById('redirectToSurveyMcu').style.display = 'block';
	}, 2000); // 2000 milidetik atau 2 detik
	</script>
}

templ CssKartuKontrol() {
	<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(--white)
        }
		.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;
		}
		.foto {
			width: 70px;
			height: 79px;
			background-image: url("assets/media/svg/avatars/001-boy.svg");
			background-size: 70px 79px;
			background-repeat: no-repeat;
		}
		.top-right {
			position: absolute;
			top: 0;
			right: 0;
		}
		h5 {
			font-size: 14px;
		}
		h6 {
			font-size: 12px;
		}
		.smallf {
			font-size: 10px;
		}
		.modalcover {
			background-color: #00000073;
		}
	</style>
}

templ JsKartuKontrol() {
}

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