var base_url = $('meta[name="chimasistaker_url"]').attr('content');

$(document).ready(function() {
    $.get(base_url + '/api/extra/provinsi', function(data, status) {
        var option = '';
        $.each(data,function(index, element){
            option += '<option value="'+element.id+'">'+element.text+'</option>';
        });
        $('select[name="provinsi"] option').remove();
        $('select[name="provinsi"]').append(option).select2({
            theme: "bootstrap",
            placeholder:'Pilih kota'
        }).trigger('change')

        var value = $('select[name="provinsi"]').data('val');
        var data_value = data.find(function(element, index) {
            return element.id == value;
        });
        if (data_value != undefined) {
            var selected_option = new Option(data_value.name, data_value.name, true, true);
            $(selected_option).data('id', data_value.id)
            $('select[name="provinsi"]').append(selected_option).trigger('change');
        }
    });

    $('select[name="provinsi"]').on('change',function(){
        var id = $('select[name="provinsi"]').val();
        if(id)
        {
            $.get(base_url + '/api/extra/kabupaten?q='+id, function(data, status) {
                var option = '';
                $.each(data,function(index,element){
                    option += '<option value="'+element.id+'" >'+element.text+'</option>';
                });
                $('select[name="kota"] option').remove();
                $('select[name="kota"]').append(option).select2({
                    theme: "bootstrap",
                    placeholder:'Pilih kota'
                }).trigger('change')

                var value = $('select[name="kota"]').data('val');
                var data_value = data.find(function(element, index) {
                    return element.id == value;
                });
                if (data_value != undefined) {
                    var selected_option = new Option(data_value.name, data_value.name, true, true);
                    $(selected_option).data('id', data_value.id)
                    $('select[name="kota"]').append(selected_option).trigger('change');
                }
            });
        }
        else
        {
            $('select[name="kota"]').empty();
        }
    });

    $('select[name="kota"]').on('change',function(){
        var id = $('select[name="kota"]').val();
        if(id)
        {
            $.get(base_url + '/api/extra/kecamatan?q='+id, function(data, status) {
                var option = '';
                $.each(data,function(index,element){
                    option += '<option value="'+element.id+'" >'+element.text+'</option>';
                });
                $('select[name="kecamatan"] option').remove();
                $('select[name="kecamatan"]').append(option).select2({
                    theme: "bootstrap",
                    placeholder:'Pilih kecamatan'
                }).trigger('change')

                var value = $('select[name="kecamatan"]').data('val');
                var data_value = data.find(function(element, index) {
                    return element.id == value;
                });
                if (data_value != undefined) {
                    var selected_option = new Option(data_value.name, data_value.name, true, true);
                    $(selected_option).data('id', data_value.id)
                    $('select[name="kecamatan"]').append(selected_option).trigger('change');
                }
            });
        }
        else
        {
            $('select[name="kecamatan"]').empty();
        }
    });

    $('select[name="kecamatan"]').on('change',function(){
        var id = $('select[name="kecamatan"]').val();
        if(id)
        {
            $.get(base_url + '/api/extra/kelurahan?q='+id, function(data, status) {
                var option = '';
                $.each(data,function(index,element){
                    option += '<option value="'+element.id+'" >'+element.text+'</option>';
                });
                $('select[name="kelurahan"] option').remove();
                $('select[name="kelurahan"]').append(option).select2({
                    theme: "bootstrap",
                    placeholder:'Pilih kelurahan'
                }).trigger('change')

                var value = $('select[name="kelurahan"]').data('val');
                var data_value = data.find(function(element, index) {
                    return element.id == value;
                });
                if (data_value != undefined) {
                    var selected_option = new Option(data_value.name, data_value.name, true, true);
                    $(selected_option).data('id', data_value.id)
                    $('select[name="kelurahan"]').append(selected_option).trigger('change');
                }
            });
        }
        else
        {
            $('select[name="kelurahan"]').empty();
        }
    });
})