<style>
    .form-group input[type="checkbox"] {
        display: none;
    }

    .form-group input[type="checkbox"] + .btn-group > label span {
        width: 20px;
    }

    .form-group input[type="checkbox"] + .btn-group > label span:first-child {
        display: none;
    }
    .form-group input[type="checkbox"] + .btn-group > label span:last-child {
        display: inline-block;   
    }

    .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
        display: inline-block;
    }
    .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
        display: none;   
    }
    #mira-application-region{
        border: 2px solid #dddddd;
    }
    #mira-application-region > thead > tr > th,
    #mira-application-region > tbody > tr > th,
    #mira-application-region > tfoot > tr > th,
    #mira-application-region > thead > tr > td,
    #mira-application-region > tbody > tr > td,
    #mira-application-region > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #mira-application-region{
        width: 100%;
        overflow-x: scroll;
    }



    #mira-user-detail{
        border: 2px solid #dddddd;
    }
    #mira-user-detail > thead > tr > th,
    #mira-user-detail > tbody > tr > th,
    #mira-user-detail > tfoot > tr > th,
    #mira-user-detail > thead > tr > td,
    #mira-user-detail > tbody > tr > td,
    #mira-user-detail > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #mira-user-detail{
        width: 100%;
        overflow-x: scroll;
    }
    
    
    #admin-user-right{
        border: 2px solid #dddddd;
    }
    #admin-user-right > thead > tr > th,
    #admin-user-right > tbody > tr > th,
    #admin-user-right > tfoot > tr > th,
    #admin-user-right > thead > tr > td,
    #admin-user-right > tbody > tr > td,
    #admin-user-right > tfoot > tr > td {
        border: 2px solid #dddddd;

    }
    #admin-user-right{
        width: 100%;
        overflow-x: scroll;
    }

</style>
<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('mapped_region_user'); ?>" method="POST" enctype="multipart/form-data">
            <h2 class="text-center">Region Mapped To User</h2>  
            <hr class="colorgraph">

            <div class="panel">
                <div class="panel-body">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row" >
                                <div class="col-md-6 col-md-push-3">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i aria-hidden="true"></i>Select 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 if (isset($level) and $level) {
                                                    for ($i = 0; $i < count($level); $i++) { ?>
                                                        <option value=<?= $level[$i]['hierar_level_id'] ?>> <?= $level[$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>        
                        </div>
                    </div>
                    <table id="mira-application-region" class="table table-bordred table-striped">
                        <thead>
                            <tr>
                                <th colspan="4"><h4 class="text-center"> <strong>Region Detail</strong></h4></th>
                        </tr>
                        <tr>
                            <th class="text-center">Region Name</th>
                            <th class="text-center">Region Level</th>
                            <th class="text-center">Create Date</th>
                            <th class="text-center">Select</th>
                        </tr>
                        </thead>
                        <tbody>
                            

                        </tbody>
                    </table>
                    <table id="mira-user-detail" class="table table-bordred table-striped">
                        <thead>
                            <tr>
                                <th colspan="6"><h4 class="text-center"> <strong>User Details</strong></h4></th>
                        </tr>
                        <tr>
                            <th class="text-center">Name</th>
                            <th class="text-center">Login Id</th>
                            <th class="text-center">Password</th>
                            <th class="text-center">Mobile</th>
                            <th class="text-center">Level</th>
                            <th class="text-center">Select</th>
                        </tr>
                        </thead>
                        <tbody>
                        
                        <input type="hidden" name="" id="" value="">
                        </tbody>
                    </table>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row" style="margin-left: 30px">
                                <input type="hidden" value=<?= count($right) ?> name="count_number">                                
                                 <?php for ($i = 0; $i < count($right); $i++) { ?>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <input type="checkbox" name=<?= "right" . $i ?> id=<?= "right" . $i ?> autocomplete="off" value=<?= $right[$i]['right_id'] ?>>
                                            <div class="btn-group">
                                                <label for="<?= "right" . $i ?>" class="btn btn-primary btn-sm">
                                                    <span class="glyphicon glyphicon-ok"></span>
                                                    <span> </span>
                                                </label>
                                                <label for="<?= "right" . $i ?>" class="btn btn-default btn-sm active">
                                                    <strong><?= $right[$i]['right_name'] ?></strong>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>        
                        </div>
                    </div>

                </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="Region Assign To User" 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');
          $("#mira-user-detail tbody tr").remove();
          $("#mira-application-region tbody tr").remove();
          
           $.ajax({
                url: '<?= base_url('get_user_region') ?>',
                data: {
                    region_level: $('#region_level').val()
                },
                type: "POST",
                success: function (json) {
                    var data = $.parseJSON(json);
                    if(data['user']){
                        for(var i=0;i<data['user'].length;i++){
                            $("#mira-user-detail tbody").append('<tr></tr>');
                            $("#mira-user-detail tbody tr:last").append("<td class='text-center'>"+data['user'][i]['user_name']+"</td>");
                            $("#mira-user-detail tbody tr:last").append("<td class='text-center'><input type='hidden' name="+'login_id'+data['user'][i]['auto_id']+" value="+data['user'][i]['user_login_id']+">"+data['user'][i]['user_login_id']+ "</td>");
                            $("#mira-user-detail tbody tr:last").append("<td class='text-center'><input type='hidden' name="+'password'+data['user'][i]['auto_id']+" value="+data['user'][i]['user_password']+">"+data['user'][i]['user_password']+ "</td>");
                            $("#mira-user-detail tbody tr:last").append("<td class='text-center'>" + data['user'][i]['mobile'] + "</td>");
                            $("#mira-user-detail tbody tr:last").append("<td class='text-center'>" + data['user'][i]['user_level'] + "</td>");
                            $("#mira-user-detail tbody tr:last").append('<td class="text-center"> <input type="radio" required class="checkthis" name="user_auto_id" value='+data['user'][i]['auto_id']+'></td>');
                            
                        }
                    }
                    if(data['region']){
                        for(var i=0;i<data['region'].length;i++){
                            $("#mira-application-region tbody").append('<tr></tr>');
                            $("#mira-application-region tbody tr:last").append("<td class='text-center'>" + data['region'][i]['region_name'] + "</td>");
                            $("#mira-application-region tbody tr:last").append("<td class='text-center'>" + data['region'][i]['region_level'] + "</td>");
                            $("#mira-application-region tbody tr:last").append('<td class="text-center">'+data['region'][i]['create_date']+'</td>');
                            $("#mira-application-region tbody tr:last").append('<td class="text-center"> <input type="radio" required class="checkthis" name="region_id" value='+data['region'][i]['region_code']+'></td>');
                            
                            
                        }
                    }
                    
                },
                error: function (xhr, status, errorThrown) {
                    $('#region_level_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#region_level_spinner').css('display', 'none');
                }
            });
      });
    });
</script>
