package dev_mdusergroupview

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

templ MdUserGroupScreen(
	tableID string,
	paginationID string,
	searchID string,
	dialogAddID string,
	dialogAddBodyID string,
	dialogEditID string,
	dialogEditBodyID string,
	dialogDeleteID string,
	dialogDeleteBodyID string,
	breadcrumb templ.Component,
	tablecontent templ.Component,
	filterComponent templ.Component,
	paginationComponent templ.Component,
	modalAddForm templ.Component,
	modalEditForm templ.Component,
	modalDeleteForm 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: "dialogEditID",
			Name:  "dialogEditID",
			Type:  "hidden",
			Value: dialogEditID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogEditBodyID",
			Name:  "dialogEditBodyID",
			Type:  "hidden",
			Value: dialogEditBodyID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteID",
			Name:  "dialogDeleteID",
			Type:  "hidden",
			Value: dialogDeleteID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDeleteBodyID",
			Name:  "dialogDeleteBodyID",
			Type:  "hidden",
			Value: dialogDeleteBodyID})
		<div class="row align-items-center mb-10">
			<div class="col-md-10 col-sm-12 p-0 ">
				@breadcrumb
			</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={ "#" + 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>
		@filterComponent
		<div id="loading-parent" class=" rounded">
			@tablecontent
			@paginationComponent
			@modalAddForm
			@modalEditForm
			@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>
}

templ CssMdUserGroup() {
	<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 JsMdUserGroup() {
	<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();
            }
        });
    </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");
}

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