package dev_mdgroupresultview

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

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

// for item dropdown
templ ItemDropdown(dataDropdown []models.GroupResultResumeMcu, selectedId int) {
	if len(dataDropdown) == 0 {
		<option value="0" disabled selected>Tidak Ada Data</option>
	} else {
		for _, v := range dataDropdown {
			if (selectedId == v.ID) {
				<option value={ strconv.Itoa(v.ID) } selected>{ v.Text }</option>
			} else {
				<option value={ strconv.Itoa(v.ID) }>{ v.Text }</option>
			}
		}
	}
}

// for empty div
templ EmptyDiv1() {
	<div></div>
}

templ CssMdGroupResult() {
	<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;
    }
	
    .dropdown-menu{
		transform: translate3d(0px, 0px, 0px)!important;
	}

	.filter-option-inner-inner {
		margin-top: 1.2vh;
		color: var(--text-disabled);
	}

	.bootstrap-select > .dropdown-toggle.bs-placeholder.btn {
		color: var(--text-disabled);
	}

	.bootstrap-select.btn-group .dropdown-menu {
	min-width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: sticky;
	}
    
</style>
}

templ JsMdGroupResult() {
	<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 BeforeRequestContentMdGroupResult() {
			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 AfterRequestContentMdGroupResult() {
			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 ShowMdGroupResultScreen(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
	}
}
