package corporate_mcudetail

import "cpone/component/modal"
import "cpone/models"
import "cpone/component/customtextfield"

templ DialogGeneratePass(
    IDComponent string,
    postLink string,
    hxTarget string,
    hxSwap string,
    hxInclude string,
    modalID string,
    modalTitle string,
    modalBody templ.Component,
    modalClose templ.Component,
    modalAction templ.Component,
) {
    <div>
        <form
            id={ IDComponent }
            class="form"
            hx-post={ postLink }
            hx-target={ hxTarget }
            hx-swap={ hxSwap }
            hx-include={ hxInclude }
            hx-indicator=".formloading"           
        >
            @modalcomponent.Modal(modalID,
                modalTitle,
                modalBody,
                modalAction,
                modalClose,
            )
        </form>
    </div>
}

script HandleFormBeforeRequest() {
    const btnCancel = document.querySelectorAll('.btncancel');
    const btnSimpan = document.querySelectorAll('.btnsimpan');

    for (let i = 0; i < btnCancel.length; i++) {
        btnCancel[i].setAttribute('disabled', 'true');
    }
    for (let i = 0; i < btnSimpan.length; i++) {
        btnSimpan[i].setAttribute('disabled', 'true');
    }    
}

script HandleFormAfterRequest() {
    const btnCancel = document.querySelectorAll('.btncancel');
    const btnSimpan = document.querySelectorAll('.btnsimpan');

    for (let i = 0; i < btnCancel.length; i++) {
        btnCancel[i].removeAttribute('disabled');
    }
    for (let i = 0; i < btnSimpan.length; i++) {
        btnSimpan[i].removeAttribute('disabled');
    }
}

templ ModalGenPassBody(
    IDComponent string,
    message string,
    hxOnLoad templ.ComponentScript,
) {
    <div id={ IDComponent } hx-on::load={ hxOnLoad }>
        <p>{ message }</p>
    </div>
}

templ ModalGenPassAction(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
    <div>
        <button 
            type="button"
            class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btncancel"
            data-dismiss="modal"
            hx-on::after-request={ JsHideModal(modalID) }
            hx-post={ LinkClose }
            hx-target={ targetClose }
            hx-swap={ hxSwapClose }
            hx-indicator=".cancelloading"
        >
            <span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
            Batal
        </button>
        <button 
            type="submit"
            class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnsimpan"
        >
            <span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
            Yakin
        </button>
    </div>
}

script JsGenPassReload(modalID string, link string) {
    $(modalID).modal('hide');
    htmx.ajax('POST', link, {target:'#contentlayout', swap:'outerHTML'});
}

templ ModalViewAkunBody(
    IDComponent string,
    akunID models.CustomTextFieldv2Prm,
    akunEmail models.CustomTextFieldv2Prm,
    newPass models.CustomTextFieldv2Prm,
    newPassCek models.CustomTextFieldv2Prm,
    hxOnLoad templ.ComponentScript,
) {
    <div id={ IDComponent } hx-on::load={ hxOnLoad }>
        @customtextfield.CustomTextFieldv2(akunID)
        @customtextfield.CustomTextFieldv2(akunEmail)
        @customtextfield.CustomTextFieldv2(newPass)
        @customtextfield.CustomTextFieldv2(newPassCek)
    </div>
}