package corporate_patient

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


templ DashboardPat(
    listID string,
    paginationID string,
    dialogID string,
    dialogBodyID string,
) {
    <div id="content-container" class="container-fluid">
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "listID",
            Name: "listID",
            Type: "hidden",
            Value: listID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "paginationID",
            Name: "paginationID",
            Type: "hidden",
            Value: paginationID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogID",
            Name: "dialogID",
            Type: "hidden",
            Value: dialogID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogBodyID",
            Name: "dialogBodyID",
            Type: "hidden",
            Value: dialogBodyID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "userEmail",
            Name: "userEmail",
            Type: "hidden"})        
        <div
            id="content-page"
            hx-get="/corp/dashboard_pat/content"
            hx-swap="outerHTML"
            hx-trigger="load delay:500ms"
            hx-target="#content-page"
            hx-include="#listID, #paginationID, #dialogID, #dialogBodyID, #userEmail"
            hx-on::after-request={ AfterRequestContent() }
        >
            <div id="loading-parent" class="rounded overlay overlay-block" style="display: flex; align-items: center; justify-content: center; height: 70vh;">
                <div id="loading-child" class="rounded bg-transparent overlay-layer">
                    <div id="loading-spinner" class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

templ ContentPage(
    breadcrumb templ.Component,
    content templ.Component,
    modaldialog templ.Component,    
) {
    // <div
    //     id="content-page"
    // >
    <div class="row align-item-center mb-10">
        <div class="col-md-10 col-sm-12 p-0">
            @breadcrumb
        </div>
    </div>
    <div id="loading-parent" class="rounded">
        @content
        @modaldialog
        <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 ContentP(
    listingcomponent templ.Component,
    paginationcomponent templ.Component,
) {
    <div id="contentlayout" hx-on::load={ AfterRequestContent() }>
        @listingcomponent
        @paginationcomponent
    </div>
}

templ CSSDashboardPat() {
    <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;
        }
        #div-chart {
            margin: 40px 10vw 40px 10vw;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
        }
        #title {
            font-weight: 600;
        }
    </style>
}

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 JSDashboardPat() {
    <script>
        document.addEventListener(`DOMContentLoaded`, (event) => {
            const data = localStorage.getItem(`user`);
            if (data) {
                const parsedData = JSON.parse(data);
                // console.log(parsedData.M_UserEmail);
                document.getElementById('userEmail').value = parsedData.M_UserEmail;
                
            }
        }); 
    </script>
}

templ ShowDashboardPat(
    title string,
    cmp templ.Component,
    css templ.Component,
    js templ.Component,
    navbaruser templ.Component,
    userprofile templ.Component,
) {
    @layout.DashboardLayout(title, css, js, navbaruser, userprofile) {
        @cmp
    }
}
