package masterkelainan

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

templ ContentMasterKelainan(
	tableID string,
	paginationID string,
	searchID string,
	dialogAddID string,
	dialogAddBodyID string,
	dialogDeleteID string,
	dialogDeleteBodyID string,
	tableDetailID string,
	paginationDetailID string,
	searchDetailID string,
	dialogDetailAddID string,
	dialogDetailAddBodyID string,
	dialogDetailDeleteID string,
	dialogDetailDeleteBodyID string,
	breadcrumb templ.Component,
	tablecontent templ.Component,
	filterComponent templ.Component,
	paginationComponent templ.Component,
	modalAddform templ.Component,
	modalDeleteForm templ.Component,
	tabledetailcontent templ.Component,
	filterDetailComponent templ.Component,
	paginationDetailComponent templ.Component,
	modalDetailAddForm templ.Component,
	modalDetailForm 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: "dialogDeleteID",
			Name:  "dialogDeleteID",
			Type:  "hidden",
			Value: dialogDeleteID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
			Name:  "dialogDeleteBodyID",
			Type:  "hidden",
			Value: dialogDeleteBodyID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableDetailID",
			Name:  "tableDetailID",
			Type:  "hidden",
			Value: tableDetailID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationDetailID",
			Name:  "paginationDetailID",
			Type:  "hidden",
			Value: paginationDetailID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "searchDetailID",
			Name:  "searchDetailID",
			Type:  "hidden",
			Value: searchDetailID})
		@CustomTextFieldSelected(models.CustomTextFieldSelected{
			ID:    "selectedID",
			Name:  "selectedID",
			Type:  "hidden",
			Value: "0"})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDetailAddID",
			Name:  "dialogDetailAddID",
			Type:  "hidden",
			Value: dialogDetailAddID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDetailAddBodyID",
			Name:  "dialogDetailAddBodyID",
			Type:  "hidden",
			Value: dialogDetailAddBodyID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDetailDeleteID",
			Name:  "dialogDetailDeleteID",
			Type:  "hidden",
			Value: dialogDetailDeleteID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDetailDeleteBodyID",
			Name:  "dialogDetailDeleteBodyID",
			Type:  "hidden",
			Value: dialogDetailDeleteBodyID})
		<div class="row align-items-center mb-10">
			<div class="col-md-10 col-sm-12 p-0 ">
				@breadcrumb
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6">
				<div class="row">
					<div class="col-lg-10">
						@filterComponent
					</div>
					<div class="col-md-2 mt-3 d-none d-lg-block d-xl-block d-md-block d-sm-none">
						<div class="d-flex">
							<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>
				<div id="loading-parent" class=" rounded">
					@tablecontent
					@paginationComponent
					@modalAddform
					@modalDeleteForm
					<div id="loading-child" class=" rounded bg-transparent">
						// <div class="spinner spinner-lg spinner-primary"></div>
						<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
							<span class="sr-only">Loading...</span>
						</div>
					</div>
				</div>
				<div id="loadingcontent"></div>
			</div>
			<div class="col-lg-6" style="border-left: 1px dashed #ddd">
				<div class="row">
					<div class="col-lg-10">
						@filterDetailComponent
					</div>
					<div class="col-md-2 mt-3 d-none d-lg-block d-xl-block d-md-block d-sm-none">
						<div class="d-flex">
							<button
								type="button"
								class="btn btn-primary"
								data-toggle="modal"
								data-target={ "#" + dialogDetailAddID }
							>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={ "#" + dialogDetailAddID }
						>Add New</button>
					</div>
				</div>
				<div id="loading-parent-detail" class=" rounded">
					@tabledetailcontent
					@paginationDetailComponent
					@modalDetailAddForm
					@modalDetailForm
					<div id="loading-child-detail" class=" rounded bg-transparent">
						// <div class="spinner spinner-lg spinner-primary"></div>
						<div id="loading-spinner-detail" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
							<span class="sr-only">Loading...</span>
						</div>
					</div>
				</div>
				<div id="loadingcontentdetail"></div>
			</div>
		</div>
	</div>
}

templ CssKelainan() {
	<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;
    }
	.selected {
		background-color: #dfe3e8;
	}
	.dot-text {
		position: relative;
		padding-left: 1.5em; /* Menambahkan padding untuk memberi ruang pada titik */
	}

	.dot-text::before {
		content: '•'; /* Menambahkan titik di depan teks */
		position: absolute;
		left: 1em; /* Atur posisi titik */
		top: 0;
		transform: translateX(-100%);
	}
</style>
}

templ JsMdKelainan() {
	<script>
        function onLoadingStart() {
            // const loadingParent = document.getElementById("loading-parent");
			// const loadingChild = document.getElementById("loading-child");
			// const loadingSpinner = document.getElementById("loading-spinner");

			// loadingParent.classList.add("overlay");
			// loadingParent.classList.add("overlay-block");
			// loadingChild.classList.add("overlay-layer");
			// loadingSpinner.classList.remove("d-none");

            // Additional logic when loading starts
        }

        function onLoadingEnd() {
            console.log('Loading ended');
            // const loadingParent = document.getElementById("loading-parent");
			// const loadingChild = document.getElementById("loading-child");
			// const loadingSpinner = document.getElementById("loading-spinner");

			// loadingParent.classList.remove("overlay");
			// loadingParent.classList.remove("overlay-block");
			// loadingChild.classList.remove("overlay-layer");
			// loadingSpinner.classList.add("d-none");
        }

        document.addEventListener('htmx:beforeRequest', function(event) {
            var indicator = document.querySelector('#loadingcontent');
			console.log(event.detail.xhr)
			console.log(event.detail.elt)
            if (indicator) {
                onLoadingStart();
            }
        });

        document.addEventListener('htmx:afterRequest', function(event) {
            var indicator = document.querySelector('#loadingcontent');
            if (indicator) {
                onLoadingEnd();
            }
        });

        // detail
        document.addEventListener('htmx:beforeRequest', function(event) {
            var indicator = document.querySelector('#loadingcontentdetail');
			console.log(event.detail.xhr)
			console.log(event.detail.elt)
            if (indicator) {
                onLoadingStart();
            }
        });

        document.addEventListener('htmx:afterRequest', function(event) {
            var indicator = document.querySelector('#loadingcontentdetail');
            if (indicator) {
                onLoadingEnd();
            }
        });
    </script>
}

script BeforeRequestContent() {
			const loadingParent = document.getElementById("loading-parent");
			const loadingChild = document.getElementById("loading-child");
			const loadingSpinner = document.getElementById("loading-spinner");

			loadingParent.classList.add("overlay");
			loadingParent.classList.add("overlay-block");
			loadingChild.classList.add("overlay-layer");
			loadingSpinner.classList.remove("d-none");
}

script AfterRequestContent() {
			const loadingParent = document.getElementById("loading-parent");
			const loadingChild = document.getElementById("loading-child");
            const loadingSpinner = document.getElementById("loading-spinner");

			loadingParent.classList.remove("overlay");
			loadingParent.classList.remove("overlay-block");
			loadingChild.classList.remove("overlay-layer");
			loadingSpinner.classList.add("d-none");
}

// kelainan detail

script BeforeRequestContentDetail() {
			const loadingParentDetail = document.getElementById("loading-parent-detail");
			const loadingChildDetail = document.getElementById("loading-child-detail");
			const loadingSpinnerDetail = document.getElementById("loading-spinner-detail");

			loadingParentDetail.classList.add("overlay");
			loadingParentDetail.classList.add("overlay-block");
			loadingChildDetail.classList.add("overlay-layer");
			loadingSpinnerDetail.classList.remove("d-none");
}

script AfterRequestContentDetail() {
			const loadingParentDetail = document.getElementById("loading-parent-detail");
			const loadingChildDetail = document.getElementById("loading-child-detail");
			const loadingSpinnerDetail = document.getElementById("loading-spinner-detail");

			loadingParentDetail.classList.remove("overlay");
			loadingParentDetail.classList.remove("overlay-block");
			loadingChildDetail.classList.remove("overlay-layer");
			loadingSpinnerDetail.classList.add("d-none");
}

templ ShowKelainan(
	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
	}
}
