<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('create_app'); ?>" method="POST" enctype="multipart/form-data">
            <h2 class="text-center">Mira Application Create</h2>  
            <hr class="colorgraph">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><strong>Application Name</strong></span>
                            <input name="app_name" class="form-control" type="text" placeholder="Application Name" accept="image/*">
                        </div>                    
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="form-group">
                        <div class="input-group">
                              <input name="miraAppLogo" type="file" class="filestyle" data-buttonText="Choose App Logo">
                        </div>                    
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-3">
                    <div class="form-group"> 
                        <div class="input-group">
                            <span class="input-group-btn"><button type="button" class="btn btn-danger btn-number" data-type="minus"><i class="fa fa-minus"></i></button></span>
                            <input id="hierarchy_number" name="hierarchy_number" class="form-control" type="text" placeholder="Total Hierarchy Number">
                            <span class="input-group-btn"><button type="button" class="btn btn-success btn-number" data-type="plus"><i class="fa fa-plus"></i></button></span>
                        </div>                    
                    </div> 
                </div>
            </div>
            <div class="hierarchy">

            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <?php $this->load->view('mira_alert_message'); ?>
                </div>
            </div>
            <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="Create Application" class="btn btn-primary btn-lg btn-block"></div>            
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.btn-number').on('click', function (e) {
            e.preventDefault();
            var total_hierarchy = parseInt($("#hierarchy_number").val());
            var data_type = $(this).attr('data-type');
            if (isNaN(total_hierarchy)) {
                if (data_type == 'plus') {
                    $("#hierarchy_number").val(1);
                    insertRow(parseInt(1));
                
                }
            } else {
                if (data_type == 'plus') {
                    $("#hierarchy_number").val((total_hierarchy + 1));
                    insertRow(parseInt((total_hierarchy + 1)));
                } else {
                    if (total_hierarchy > 0) {
                       $("#hierarchy_number").val((total_hierarchy - 1));
                        removeRow(parseInt(total_hierarchy));
                   }
                }

            }
        });
        $("#hierarchy_number").change(function () {
            var total_hierarchy = parseInt($("#hierarchy_number").val());
            insertHierarchy(total_hierarchy);
        });
    });
    
    function insertRow(row_number){
           $("<div class='row "+(row_number)+"'><div class='col-md-6 col-md-offset-3'><div class='form-group'><div class='input-group'><span class='input-group-addon'><i aria-hidden='true'>Hierarchy Level "+(row_number)+" Name</i></span><input class='form-control' id=" + (row_number) + " name=" + (row_number) + " type='text' placeholder='Level Name'><span class='input-group-addon'><i class='fa fa-level-down' aria-hidden='true'></i></span></div></div></div></div>").appendTo(".hierarchy");  
    }
    function removeRow(row_number){
         $('.'+(row_number)).empty();
      }
    function insertHierarchy(total_hierarchy) {
         $('.hierarchy').empty();
        if (total_hierarchy > 0) {
            for (var i = 0; i < total_hierarchy; i++) {
                $("<div class='row "+(i+1)+"'><div class='col-md-6 col-md-offset-3'><div class='form-group'><div class='input-group'><span class='input-group-addon'><i aria-hidden='true'>Hierarchy Level "+(i+1)+" Name</i></span><input class='form-control' id=" + (i + 1) + " name=" + (i + 1) + " type='text' placeholder='Level Name'><span class='input-group-addon'><i class='fa fa-level-down' aria-hidden='true'></i></span></div></div></div></div>").appendTo(".hierarchy");
            }
        }
    }
</script>

