package dev_mdsamplestationview

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

templ MDSampleStationForm(data models.MDSampleStationForm) {
    <div class="">
        <form
            id={ data.IDComponent }
            hx-post={ data.Link }
            class="form"
            hx-target={ data.HxTarget }
            hx-swap={ data.HxSwap }
            hx-include={ data.HxInclude }
            hx-indicator=".formloading"
            hx-on::before-request={ HandleFormBeforeRequest() }
            hx-on::after-request={ HandleFormAfterRequest() }
        >
            @modalcomponent.Modal(data.ModalID,
                data.ModalTitle,
                data.DialogBody,
                data.DialogAction,
                data.ButtonClose,
            )
        </form>
    </div>
}

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 HandleFormAfterRequest() {
    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');
    }
}

templ BodyFormMDSampleStation(
    componentID string,
    inputID models.CustomTextFieldv2Prm,
    inputCode models.CustomTextFieldv2Prm,
    inputName models.CustomTextFieldv2Prm,
    inputGroup models.CustomDropdownv1Prm,
    listGroup templ.Component,
    hxOnLoad templ.ComponentScript,
) {
    <div id={ componentID } hx-on::load={ hxOnLoad }>
        @customtextfield.CustomTextFieldv2(inputID)
        @customtextfield.CustomTextFieldv2(inputCode)
        @customtextfield.CustomTextFieldv2(inputName)
        @customdropdown.MainCustomDropdownInput(inputGroup, listGroup)
    </div>
    <script>
        document.addEventListener('htmx:afterSwap', function(event) {
            $('.selectpicker').selectpicker('refresh');
        })
    </script>
}

templ ItemGroupDropdown(itemGroup []models.MDSampleStationGroup, selectedId int) {
    if len(itemGroup) == 0 {
        <option value="0" disabled selected>Tidak Ada Data</option>
    } else {
        for _, v := range itemGroup {
            if (selectedId == v.ID) {
                <option value={ strconv.Itoa(v.ID) } selected>{ v.Group }</option>
            } else {
                <option value={ strconv.Itoa(v.ID) }>{ v.Group }</option>
            }
        }
    }
}

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');
    }
}

templ ActionFormMDSampleStation(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
    <div>
        <button 
            hx-on::after-request={ JSHideModal(modalID) }
            hx-post={ LinkClose }
            hx-target={ targetClose }
            hx-swap={ hxSwapClose }
            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 BtnCloseFormMDSampleStation(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
    <button 
        hx-post={ LinkClose }
        hx-target={ targetClose }
        hx-swap={ hxSwapClose }
        type="button" 
        hx-on::after-request={ JSHideModal(modalID) }
        class="close btnactcancel"
        data-dismiss="modal"
        aria-label="Close"
    >
        <i aria-hidden="true" class="ki ki-close"></i>
    </button>
}

templ DeleteConfirmationBody(
    inputID models.CustomTextFieldv2Prm,
    componentID string,
    message string,
    dataHeader []string,
    dataText []string,
    hxOnLoad templ.ComponentScript,
) {
    <div id={ componentID } hx-on::load={ hxOnLoad }>
        <p>{ message }</p>
        <div class="card rounded-lg">
            <div class="card-body d-flex flex-row">
                <div class="d-flex flex-column">
                    for _, v := range dataHeader {
                        <div class="mb-1 mt-1 text-disabled font-weight-bold mr-5">{ v }</div>
                    }
                </div>
                <div class="d-flex flex-column">
                    for _, v := range dataText {
                        <div class="mb-1 mt-1 font-weight-bold">{ v }</div>
                    }
                </div>
            </div>
        </div>
        @customtextfield.CustomTextFieldv2(inputID)
    </div>
}

templ ActionFormMDSampleStationDelete(LinkClose string, targetClose string, hxSwapClose string, modalID string) {
    <div>
        <button
            hx-on::after-request={ JSHideModal(modalID) }
            hx-post={ LinkClose }
            hx-target={ targetClose }
            hx-swap={ hxSwapClose }
            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>
            Yakin
        </button>
    </div>
}