package sidebaruserprofile

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

templ SidebarForm() {
    <div>
        <form
            id="form-ganti-password"
            class="form"
            hx-post="/corp/dashboard_pic/gantipassword"
            hx-target="#body-ganti-pass"
            hx-swap="outerHTML"
            hx-indicator=".formloading"
            hx-on::before-request={ HandleFormBeforeRequest() }
            hx-on::after-request={ HandleFormAfterGantiPass() }
        >
            @modalcomponent.Modal("modal-ganti-pass",
                "Ganti Password",
                ModalGantiPassword(),
                ActionFormGantiPassword(),
                CloseFormGantiPassword(),
            )
        </form>
    </div>
}

templ ModalGantiPassword() {
    <div id="body-ganti-pass">
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "oldPassID",
            Name: "oldpassid",
            Type: "password",
            Placeholder: "Masukan password lama",
            Label: "Password Lama",
        })
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "newPassID",
            Name: "newpassid",
            Type: "password",
            Placeholder: "Masukan password baru",
            Label: "Password Baru",
        })
        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "reNewPassID",
            Name: "renewpassid",
            Type: "password",
            Placeholder: "Masukan ulang password baru",
            Label: "Ulangi Password Baru",
        })
    </div>
    <script>
        document.addEventListener('htmx:afterSwap', function(event) {
            $('.selectpicker').selectpicker('refresh');
        })
    </script>
}


templ RetModalGantiPassword(
    oldPass models.CustomTextFieldv2Prm,
    newPass models.CustomTextFieldv2Prm,
    renewPass models.CustomTextFieldv2Prm,
    hxOnLoad templ.ComponentScript,
) {
    <div id="body-ganti-pass" hx-on::load={ hxOnLoad }>
        @customtextfield.CustomTextFieldv2(oldPass)
        @customtextfield.CustomTextFieldv2(newPass)
        @customtextfield.CustomTextFieldv2(renewPass)
    </div>
    <script>
        document.addEventListener('htmx:afterSwap', function(event) {
            $('.selectpicker').selectpicker('refresh');
        })
    </script>
}

templ ActionFormGantiPassword() {
    <div>
        <button 
            hx-on::after-request={ JSHideModal("#modal-ganti-pass") }
            hx-post="/corp/dashboard_pic/tutupgantipassword"
            hx-target="#body-ganti-pass"
            hx-swap="outerHTML"
            hx-indicator=".cancelloading"
            type="button" 
            class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
            data-dismiss="modal"
        >
            <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 btnactsavedata"
        >
            <span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
            Simpan
        </button>
    </div>
}

templ CloseFormGantiPassword() {
    <button 
        type="button" 
        hx-on::after-request={ JSHideModal("#modal-ganti-pass") }
        hx-post="/corp/dashboard_pic/tutupgantipassword"
        hx-target="#body-ganti-pass"
        hx-swap="outerHTML"
        class="close btnactcancel"
        data-dismiss="modal"
        aria-label="Close"
    >
        <i aria-hidden="true" class="ki ki-close"></i>
    </button>
}

script JSHideModal(modalID string) {
    $(modalID).modal('hide')
}

script JSShowModal(modalID string) {
    $(modalID).modal('show')
    const btnActCancel = document.querySelectorAll('.btnactcancel');
    const btnActSaveData = document.querySelectorAll('.btnactsavedata');

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

script HandleFormBeforeRequest() {
    const btnActCancel = document.querySelectorAll('.btnactcancel');
    const btnActSaveData = document.querySelectorAll('.btnactsavedata');

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

script HandleFormAfterGantiPass() {
    const btnActCancel = document.querySelectorAll('.btnactcancel');
    const btnActSaveData = document.querySelectorAll('.btnactsavedata');

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