package corporate_mcudetail

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

templ TabDaftarPesertaScreen(
    tableID string,
    paginationID string,
    dialogReportID string,
    dialogReportBodyID string,
    dialogGenPassID string,
    dialogGenPassBodyID string,
    dialogAkunID string,
    dialogAkunBodyID string,
    dialogDetailID string,
    dialogDetailBodyID string,
    content templ.Component,
    dialogReport templ.Component,
    dialogGenPass templ.Component,
    dialogViewAkun templ.Component,
    dialogDetail 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: "dialogReportID",
            Name: "dialogReportID",
            Type: "hidden",
            Value: dialogReportID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogReportBodyID",
            Name: "dialogReportBodyID",
            Type: "hidden",
            Value: dialogReportBodyID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogGenPassID",
            Name: "dialogGenPassID",
            Type: "hidden",
            Value: dialogGenPassID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogGenPassBodyID",
            Name: "dialogGenPassBodyID",
            Type: "hidden",
            Value: dialogGenPassBodyID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAkunID",
            Name: "dialogAkunID",
            Type: "hidden",
            Value: dialogAkunID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogAkunBodyID",
            Name: "dialogAkunBodyID",
            Type: "hidden",
            Value: dialogAkunBodyID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDetailID",
            Name: "dialogDetailID",
            Type: "hidden",
            Value: dialogDetailID})
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "dialogDetailBodyID",
            Name: "dialogDetailBodyID",
            Type: "hidden",
            Value: dialogDetailBodyID})
        <div class="row align-items-center justify-content-center py-10">
            <div class="col-md-2 col-sm-12 p-0">               
            </div>
            <div class="col-md-8 col-sm-12 p-0">
                <h2 class="title text-black" style="margin-bottom: 0; text-align: center;">Daftar Peserta</h2>
            </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={"#" + dialogGenPassID}
                    >
                    Generate Password
                    </button>
                </div>
            </div>
        </div>
        <div id="loading-parent" class="rounded">
            @content
            @dialogReport
            @dialogGenPass
            @dialogViewAkun
            @dialogDetail
            <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 CSSTabDaftarPeserta() {
    <style>
        .container-rpt {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
        }
    </style>
}

templ JsTabDaftarPeserta() {
}

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 ShowTabDafterPeserta(
    title string,
    cmp templ.Component,
    css templ.Component,
    js templ.Component,
) {
    @layout.PlaygroundLayout(title, css, js) {
        @cmp
    }
}