kaunter/public/js/postcode-concerns.js

let handlePoskodDetail_NotFound_MyKad = (modal) => {


    let input_negeri = modal.querySelector('input#negeri');
    let input_daerah = modal.querySelector('input#daerah');
    let select_daerah = modal.querySelector('select#select-daerah');

    handlePoskodDetail_NotFound(modal, input_negeri, input_daerah, select_daerah);
}

let handlePoskodDetail_Found_MyKad = (modal) => {

    let input_negeri = modal.querySelector('input#negeri');
    let input_daerah = modal.querySelector('input#daerah');
    let select_daerah = modal.querySelector('select#select-daerah');

    handlePoskodDetail_Found(input_negeri, input_daerah, select_daerah);
}

let handlePoskodDetail_NotFound_Passport = (modal) => {

    let input_negeri = modal.querySelector('input#passport_negeri');
    let input_daerah = modal.querySelector('input#passport_daerah');
    let select_daerah = modal.querySelector('select#select-daerah');

    handlePoskodDetail_NotFound(modal, input_negeri, input_daerah, select_daerah);
}

let handlePoskodDetail_Found_Passport = (modal) => {

    let input_negeri = modal.querySelector('input#passport_negeri');
    let input_daerah = modal.querySelector('input#passport_daerah');
    let select_daerah = modal.querySelector('select#select-daerah');

    handlePoskodDetail_Found(input_negeri, input_daerah, select_daerah);
}

let handlePoskodDetail_NotFound = (modal, input_negeri, input_daerah, select_daerah) => {

    input_daerah.closest('div.col-md-8').style.display = 'none';
    input_daerah.disabled = true;
    input_daerah.required = false;

    select_daerah.closest('div.col-md-8').style.display = 'block';
    select_daerah.disabled = false;
    select_daerah.readOnly = false;
    select_daerah.required = true;

    input_negeri.value = '';
    input_negeri.placeholder = '';

    let getAllNegeri = () => {
        return fetch(api_url + '/api/daerah');
    };

    $(select_daerah).attr("data-placeholder","Sila pilih daerah");
    $(select_daerah).val('').trigger('change');

    getAllNegeri()
        .then(response => response.json())
        .then(x => x.map(y => {
            return {
                "id": y.namadaerah,
                "text": y.namadaerah + ' - ' + y.negeri.negeri,
                "data-koddaerah": y.koddaerah,
            }
        }))
        .then(x => {
            $(select_daerah).select2({
                placeholder: "Sila pilih daerah pelanggan",
                closeOnSelect: true,
                dropdownPosition: 'below',
                data: x,
                dropdownParent: $(modal),
            });
        })
        .then(() => $(select_daerah).val('').trigger('change'));

};

let handlePoskodDetail_Found = (input_negeri, input_daerah, select_daerah) => {

    select_daerah.closest('div.col-md-8').style.display = 'none';
    select_daerah.disabled = 'true';
    select_daerah.required = false;

    input_daerah.closest('div.col-md-8').style.display = 'block';
    input_daerah.disabled = false;
    input_daerah.required = true;

    input_negeri.readOnly = true;
    input_negeri.placeholder = '';
    input_daerah.readOnly = true;
    input_daerah.placeholder = '';
};

$('select.select2-daerah').on('select2:select', function (e) {

    let caller = e.target || e.srcElement;
    let modal = caller.closest('div.modal.fade');
    let input_negeri = modal.querySelector('input[name="negeri"]');

    let selected_daerah = e.params.data;
    let selected_kod_daerah = selected_daerah['data-koddaerah'];

    let getDaerahDetail = (koddaerah) => {
        return fetch(api_url + '/api/daerah/' + koddaerah)
            .then(response => response.json())
            .then(x => fetch(api_url + '/api/negeri/' + x.kodnegeri))
            .then(response => response.json())
    };

    let populatePostcodeRegistrationInputs = (koddaerah, kodnegeri) => {
        const input_koddaerah = document.createElement("input");
        input_koddaerah.className = "d-none";
        input_koddaerah.name = "koddaerah";
        input_koddaerah.value = koddaerah;

        const input_kodnegeri = document.createElement("input");
        input_kodnegeri.className = "d-none";
        input_kodnegeri.name = "kodnegeri";
        input_kodnegeri.value = kodnegeri;

        modal.querySelector('form').appendChild(input_koddaerah);
        modal.querySelector('form').appendChild(input_kodnegeri);
    }

    getDaerahDetail(selected_kod_daerah)
        .then(x => {
            populatePostcodeRegistrationInputs(selected_kod_daerah, x.kodnegeri)
            return x;
        })
        .then(x => input_negeri.value = x.negeri);
});

$('#daftar_pelanggan_mykad_reader textarea#alamat').change(function(){
    let modal = document.querySelector('#daftar_pelanggan_mykad_reader');
    let input_poskod  = modal.querySelector('input#poskod');
    let input_daerah  = modal.querySelector('input#daerah');
    let input_negeri  = modal.querySelector('input#negeri');
    let select_daerah = modal.querySelector('select#select-daerah');

    input_poskod.value = '';
    input_poskod.readOnly = false;

    input_daerah.value = '';
    input_daerah.closest('div.col-md-8').style.display = 'none';
    input_daerah.disabled = true;
    input_daerah.readOnly = true;

    select_daerah.closest('div.col-md-8').style.display = 'block';
    select_daerah.disabled = true;
    select_daerah.readOnly = false;

    // Handle stubborn select2
    let isSelect2exist = modal.querySelector('span.select2');

    if(isSelect2exist){
       modal.querySelector('span.select2')
            .querySelector('span.select2-selection__rendered')
            .textContent = '';

       $(select_daerah).select2('destroy');
    }

    select_daerah.value = ''

    input_negeri.value = '';
    input_negeri.readOnly = true;

    input_poskod.focus();
});