package dev_mdsamplestationview

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

templ ContentMDSampleStation(
    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,
    paginationtable 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-item-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-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
            @paginationtable
            @modalAddForm
            @modalEditForm
            @modalDeleteForm
            <div id="loading-child" class="rounded bg-transparent">
                <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 CSSMDSampleStation() {
    <linl
        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;
        }
        #div-chart {
            margin: 40px 10vw 40px 10vw;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
        }
        #title {
            font-weight: 600;
        }
    </style>
}

templ JSMDSampleStation() {
    <script>
        document.addEventListener('htmx:beforeRequest', function(event) {
            var indicator = document.querySelector('#loadingcontent');
			console.log(event.detail.xhr)
			console.log(event.detail.elt)
            if (indicator) {
                console.log('loading start');
            }
        });

        document.addEventListener('htmx:afterRequest', function(event) {
            var indicator = document.querySelector('#loadingcontent');
            if (indicator) {
                console.log('loading end');
            }
        });        
    </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 ShowMDSampleStation(
    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
        }
}