js

(function () {
    window.onload = init;

    String.prototype.toTitle = function () {
        return this.replace(/(^|\s)\S/g, function (t) { return t.toUpperCase() });
    }

    function resetDropdown(targets) {
        // submitBtn.attr('disabled')
        targets.forEach(t => {
            t.html(null)
            t.attr('disabled', true)
            t.val(undefined)
            t.select2('destroy')
            t.select2('')
        });
    };

    function generateSelectOptions(target, list) {
        resetDropdown([target]);
        target.append(`<option value="---------">---------</option>`);
        list.forEach(val => {
            target.append(`<option value="${val}">${val.toTitle()}</option>`);
        });
        target.attr('disabled', false);
        target.select2('destroy')
        target.select2('')
    };

    function ajaxBase(ask, data) {
        return {
            url: '/api/prices/national/reference',
            type: 'get',
            data: {
                ask,
                ...data
            }
        }
    }

    function init() {
        var pricePerWeight = -1;
        var priceList = [];

        const inputElements = {
            orig_province: $('#id_orig_province'),
            orig_city: $('#id_orig_city'),
            dest_province: $('#id_dest_province'),
            dest_city: $('#id_dest_city'),
            dest_subdistrict: $('#id_dest_subdistrict'),
        };

        Object.keys(inputElements).forEach(function(k) {
            inputElements[k].select2();
        })

        // console.log(inputElements)

        function updateTotalPrice() {
            // console.log('Updating total price...');
            let newTotalPrice = pricePerWeight * Number($('#id_order_weight').val())
            if (newTotalPrice > 0) $('#id_order_total_price').val(newTotalPrice);
            else $('#id_order_total_price').val()
        }

        $('#id_order_weight').change(updateTotalPrice);

        inputElements.orig_province.on("select2:select", function() {
            console.log('province changed');
            $.ajax({
                ...ajaxBase('orig_city', { orig_province: inputElements.orig_province.val() }),
                success: function (resp) {
                    generateSelectOptions(inputElements.orig_city, resp.data);
                    resetDropdown([inputElements.dest_province, inputElements.dest_city, inputElements.dest_subdistrict,]);
                }
            });
        });

        inputElements.orig_city.on("select2:select", function() {
            $.ajax({
                ...ajaxBase('dest_province', {
                    orig_province: inputElements.orig_province.val(),
                    orig_city: inputElements.orig_city.val(),
                }),
                success: function (resp) {
                    generateSelectOptions(inputElements.dest_province, resp.data);
                    resetDropdown([inputElements.dest_city, inputElements.dest_subdistrict,]);
                }
            });
        });

        inputElements.dest_province.on("select2:select", function() {
            $.ajax({
                ...ajaxBase('dest_city', {
                    orig_province: inputElements.orig_province.val(),
                    orig_city: inputElements.orig_city.val(),
                    dest_province: inputElements.dest_province.val()
                }),
                success: function (resp) {
                    generateSelectOptions(inputElements.dest_city, resp.data);
                    resetDropdown([inputElements.dest_subdistrict,]);
                }
            });
        });

        inputElements.dest_city.on("select2:select", function() {
            $.ajax({
                ...ajaxBase('dest_subdistrict',
                    {
                        orig_province: inputElements.orig_province.val(),
                        orig_city: inputElements.orig_city.val(),
                        dest_province: inputElements.dest_province.val(),
                        dest_city: inputElements.dest_city.val()
                    }),
                success: function (resp) {
                    priceList = resp.data;
                    resetDropdown([inputElements.dest_subdistrict]);
                    priceList.forEach(val => {
                        inputElements.dest_subdistrict.append(`<option value="${val.dest_subdistrict}">${val.dest_subdistrict.toTitle()}</option>`);
                    });
                    inputElements.dest_subdistrict.attr('disabled', false);
                    inputElements.dest_subdistrict.select2('destroy')
                    inputElements.dest_subdistrict.select2('')
                }
            });
        });

        inputElements.dest_subdistrict.on("select2:select", function() {
            // submitBtn.removeAttr('disabled');
            let price = priceList.filter(p => p.dest_subdistrict === inputElements.dest_subdistrict.val())
            pricePerWeight = price.length > 0 ? Number(price[0].price) : -1
            updateTotalPrice()
        })
    }
})();