<div class="panel"> 
    <div class="panel-body" id="region_div_insert">
        <form role="form" class="form-horizontal" action="<?= base_url('create_new_region'); ?>" method="POST">
            <h2 class="text-center">Create New Region</h2>  
            <hr class="colorgraph">
            <div class="append-div">
                <div class="row">
                    <div class="col-md-6 col-md-push-3" style="margin-left: 10px">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i aria-hidden="true"></i>Select Create Region Level</span>
                                <select id="region_level" name="region_level" required class="form-control">
                                    <option value="0" disabled="true" selected> Select Region Level</option>
                                    <?php for ($i = 0; $i < count($user_levels); $i++) { ?>
                                        <option value=<?= $user_levels[$i]['hierar_level_id'] ?>> <?= $user_levels[$i]['hierar_level_name'] ?></option>
                                    <?php } ?>

                                </select>
                                <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>
                            </div>                    
                        </div> 
                    </div>
                    <div class="col-md-1 col-md-push-3 spinner" id="region_level_spinner" style="display: none;margin-top: 5px">
                        <i class="fa fa-spinner fa-spin"></i>
                    </div>
                </div>
                <hr class="colorgraph">
            </div>
            <input type="hidden" name="create_level" value="0" id="create_level">
            <hr class="colorgraph">
            <div class="row">
                <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2"><input type="submit" value="Register" class="btn btn-primary btn-lg btn-block"></div>            
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#region_level').change(function () {
            $('#region_level_spinner').css('display', 'block');
            $('.remove').remove();
            $('#create_level').val($('#region_level').val());
            $.ajax({
                url: '<?= base_url('get_region') ?>',
                data: {
                    level_id: $('#region_level').val()
                },
                type: "POST",
                success: function (json) {
                    var data = $.parseJSON(json);

                    var a = '<div class="row remove"><div class="col-md-6 col-md-push-3" style="margin-left: 10px"><div class="form-group" ><div class="input-group" ><span class="input-group-addon" ><i aria-hidden="true"></i>' + "Enter" + $("#region_level option:selected").text() + " Name" + '</span><input class="form-control" required name="region_name" type="text" placeholder="Enter Region Name"></div></div></div></div>'
                    if (data['level']) {
                        for (var i = 0; i < data['level'].length; i++) {
                            var b = '<div class="row remove">\n\
                              <div class="col-md-6 col-md-push-3" style="margin-left: 10px">\n\
                                 <div class="form-group">\n\
                                      <div class="input-group">\n\
                                        <span class="input-group-addon"><i aria-hidden="true"></i>' + "Select " + data['level'][i]['hierar_level_name'] + '</span> \n\
                                        <select id=' + "level_name" + data['level'][i]['hierar_level_id'] + ' name=' + "level_name" + data['level'][i]['hierar_level_id'] + ' required class="form-control" onclick="getAreaUnderArea(this)">\n\
                                          <option value="0" disabled="true" selected="true"> ' + "Select " + data['level'][i]['hierar_level_name'] + '</option>\n\
                                        </select>\n\
                                     <span class="input-group-addon"><i class="fa fa-level-down"aria-hidden="true"></i></span>\n\
                                 </div> \n\
                             </div>\n\
                          </div> \n\
                          <div class="col-md-1 col-md-push-3 spinner" id='+"region_level_spinner"+data['level'][i]['hierar_level_id']+' style="display: none;margin-top: 5px"> \n\
                               <i class="fa fa-spinner fa-spin"></i>\n\
                         </div>\n\
                     </div>';
                            $('.append-div').append(b);
                        }
                        for (var i = 0; i < data['level_data'].length; i++) {
                        $("#level_name" + data['level_data'][i]['region_level']).append("<option value=" + data['level_data'][i]['region_code']+":"+data['level_data'][i]['region_level'] + ">" + data['level_data'][i]['region_name'] + "</option>");
                    }
                    }
                    


                    $('.append-div').append(a);
                },
                error: function (xhr, status, errorThrown) {
                    $('#region_level_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#region_level_spinner').css('display', 'none');
                }
            });

        });


    });


    function getAreaUnderArea(e) {
        
        var super_id_level= e.options[e.selectedIndex].value.split(':');
        var super_id=super_id_level[0]
        $('#region_level_spinner'+super_id_level[1]).css('display','block');
        for(var i=parseInt(super_id_level[1]);i<parseInt($('#create_level').val());i++){
           $('#level_name'+(i+1)).children('option:not(:first)').remove(); 
        }
  
        $.ajax({
            url: '<?= base_url('get_area_by') ?>',
            data: {
                super_id: super_id
            },
            type: "POST",
            success: function (json) {
                
                var data = $.parseJSON(json);
                if (data['level_data']) {
                    if (parseInt(data['level_data'][0]['region_level']) < parseInt($('#create_level').val())) {
                        for (var i = 0; i < data['level_data'].length; i++) {
                            $("#level_name" + data['level_data'][i]['region_level']).append("<option value=" + data['level_data'][i]['region_code'] + ">" + data['level_data'][i]['region_name'] + "</option>");
                        }
                    }
                }
               $('#region_level_spinner'+super_id_level[1]).css('display','none');
            },
            error: function (xhr, status, errorThrown) {
                $('#region_level_spinner'+super_id_level[1]).css('display','none');
            },
            complete: function (xhr, status) {
                $('#region_level_spinner'+super_id_level[1]).css('display','none');
            }
        });
    }
</script>

