package dev_mdbahanview

import "cpone/layout"
import "cpone/models"
import "cpone/component/customtextfield"
import "cpone/component/customdropdown"
import "strconv"

templ MdBahanScreen(
	tableID string,
	paginationID string,
	dialogAddID string,
	dialogAddBodyID string,
	dialogEditID string,
	dialogEditBodyID string,
	dialogDeleteID string,
	dialogDeleteBodyID string,
	breadcrumb templ.Component,
	tablecontent templ.Component,
	filterComponent templ.Component,
	pagination templ.Component,
	dialogAddCmp templ.Component,
	dialogEditCmp templ.Component,
	dialogDeleteCmp templ.Component,
) {
	<div class="container-fluid">
		@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})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
			Name:  "tableID",
			Type:  "hidden",
			Value: tableID})
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
			Name:  "paginationID",
			Type:  "hidden",
			Value: paginationID})
		<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>
		<div id="loading-parent" class=" rounded">
			@filterComponent
			@tablecontent
			@pagination
			<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>
		@dialogAddCmp
		@dialogEditCmp
		@dialogDeleteCmp
	</div>
}

templ CssMdUserGroup() {
}

templ JsMdBahan() {
	<script>
		document.addEventListener('htmx:afterSwap', function(event) {
			// Reinitialize selectpicker after HTMX content swap
			$('.selectpicker').selectpicker('refresh');
		});
    
        document.addEventListener('htmx:beforeRequest', function(event) {
            console.log("Before Request")
			console.log(event.detail.xhr)
			console.log(event.detail.target)
            
        });

        document.addEventListener('htmx:afterRequest', function(event) {
            console.log("After Request")
            console.log(event.detail.xhr)
			console.log(event.detail.target)
        });
        document.addEventListener('htmx:historyCacheError', function(event) {
            console.log("Error History Cache Error")
            console.log(event.detail.cause)
			
        });
        document.addEventListener('htmx:historyCacheMissError', function(event) {
            console.log("Error History Cache Miss Error")
            console.log(event.detail.xhr)
            console.log(event.detail.path)
			
        });
        document.addEventListener('htmx:oobErrorNoTarget', function(event) {
            console.log("Error OOB No Target")
            console.log(event.detail.content)
        });
        document.addEventListener('htmx:onLoadError', function(event) {
            console.log("Error On Load")
            console.log(event.detail.xhr)
            console.log(event.detail.elt)
            console.log(event.detail.target)
            console.log(event.detail.exception)
            console.log(event.detail.requestConfig)
        });
        document.addEventListener('htmx:responseError', function(event) {
            console.log("Error Response")
            console.log(event.detail.xhr)
            console.log(event.detail.elt)
            console.log(event.detail.requestConfig)
        });
        document.addEventListener('htmx:sendError', function(event) {
            console.log("Error Send Error")
            console.log(event.detail.xhr)
            console.log(event.detail.elt)
            console.log(event.detail.requestConfig)
        });
        document.addEventListener('htmx:sseError', function(event) {
            console.log("Error Sse ")
            console.log(event.detail.xhr)
            console.log(event.detail.error)
            console.log(event.detail.source)
        });
		document.addEventListener('htmx:swapError', function(event) {
            console.log("Error Swap Error")
            console.log(event.detail.xhr)
            console.log(event.detail.elt)
            console.log("Target Swap: "+event.detail.target)
            console.log(event.detail.requestConfig)
        });
		document.addEventListener('htmx:targetError', function(event) {
            console.log("Error target")
            console.log(event.detail.elt)
            console.log("Target ID: "+event.detail.target)
        });
    </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 MdBahanFilter(
	hxGet string,
	hxTrigger string,
	hxInclude string,
	hxSwap string,
	hxTarget string,
	dataStation []models.TmpSampleStation,
	selectedIdStation int,
	hxBeforeRequest templ.ComponentScript,
	hxAfterRequest templ.ComponentScript,
) {
	<div class="container p-0">
		<div class="row">
			<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6  mb-2">
				<input
					id="filter-name"
					class="form-control form-control-lg bg-field border-0  rounded-lg"
					type="text"
					name="filtername"
					placeholder="Name/Kode"
					autocomplete="off"
					hx-target={ hxTarget }
					hx-trigger={ hxTrigger }
					hx-include={ hxInclude }
					hx-get={ hxGet }
					hx-swap={ hxSwap }
					hx-on::before-request={ hxBeforeRequest }
					hx-on::after-request={ hxAfterRequest }
				/>
			</div>
			<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 mb-2">
				@customdropdown.CustomDropdownFilter("filter-station",
					"filterstation",
					hxInclude,
					hxGet,
					hxSwap,
					hxTarget,
					"change",
					hxBeforeRequest,
					hxAfterRequest, ListItemStation(dataStation, selectedIdStation))
			</div>
		</div>
	</div>
}

templ ListItemStation(
	dataStation []models.TmpSampleStation,
	selectedIdStation int) {
	for _, v := range dataStation {
		if v.T_SampleStationID == selectedIdStation {
			<option value={ strconv.Itoa(v.T_SampleStationID) } selected="selected">{ v.T_SampleStationName }</option>
		} else {
			<option value={ strconv.Itoa(v.T_SampleStationID) }>{ v.T_SampleStationName }</option>
		}
	}
}

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