<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-region-update{
        border: 2px solid #dddddd;
    }
    #mira-region-update > thead > tr > th,
    #mira-region-update > tbody > tr > th,
    #mira-region-update > tfoot > tr > th,
    #mira-region-update > thead > tr > td,
    #mira-region-update > tbody > tr > td,
    #mira-region-update > tfoot > tr > td {
        border: 2px solid #dddddd;

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

</style>
<div class="panel"> 
    <div class="panel-body">
        <form role="form" class="form-horizontal" action="<?= base_url('right_update_submit'); ?>" method="POST" enctype="multipart/form-data">
            <table id="mira-region-update" class="table table-bordred table-striped">
                <thead>

                    <tr>
                        <th colspan="7" style="background-color: #dddddd"><h4 class="text-center"> <strong>Update Activated User Right</strong></h4></th>
                </tr>
                <tr>
                    <th colspan="7" class="text-center">
                <div class="row" style="margin-top: 15px">
                    <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><strong>Select User Level</strong></span>
                                <select id="region_level" name="region_level" required class="form-control">
                                    <option value="0" disabled="true" selected="true"> Select User 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="rgion_spinner" style="display: none;margin-top: 5px">
                        <i class="fa fa-spinner fa-spin"></i>
                    </div>

                </div>
                </th>
                </tr>
                <tr>
                    <th class="text-center">User Id</th>
                    <th class="text-center">User Name</th>
                    <th class="text-center">Region Name</th>
                    <th class="text-center">Activation Date</th>
                    <th class="text-center">Current Status</th>
                    <th class="text-center">User Level</th>
                    <th class="text-center">Select</th>
                </tr>
                </thead>
                <tbody>


                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="7" style="background-color: #dddddd">
                <h5 class="text-center"> <strong>Selected User Right</strong></h5>
                </th>
                </tr>
                <tr>
                    <th colspan="7">
                <div class="row" style="margin-left: 30px;margin-top: 15px">
                    <input type="hidden" value=<?= count($right) ?> name="count_number" id="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" . $right[$i]['right_id'] ?> autocomplete="off" value=<?= $right[$i]['right_id'] ?>>
                                <div class="btn-group">
                                    <label for="<?= "right" . $right[$i]['right_id'] ?>" class="btn btn-primary btn-sm">
                                        <span class="glyphicon glyphicon-ok"></span>
                                        <span> </span>
                                    </label>
                                    <label for="<?= "right" . $right[$i]['right_id'] ?>" class="btn btn-default btn-sm active">
                                        <strong><?= $right[$i]['right_name'] ?></strong>
                                    </label>
                                </div>
                            </div>
                        </div>
                    <?php } ?>
                </div>

                </th>

                </tr>
                <tr>
                    <th colspan="7" style="background-color: #dddddd">
                <div class="row">
                    <div class="col-xs-6 col-md-2 col-md-offset-5 col-xs-offset-3"><strong><input type="submit" value="Update User Right" class="btn btn-primary btn-block get-region-detail"></strong></div>            
                </div>
                </th>
                </tr>
                </tfoot>
            </table>

        </form>

    </div>
</div>







<script type="text/javascript">
    $(document).ready(function () {
        /********************************/
        /*This script get district.*/
        $('.checkthis').click(function () {
            alert('hiiii')
        });
        $('#region_level').change(function () {
            $('#rgion_spinner').css('display', 'block');

            $("#mira-region-update tbody tr").remove();
            $.ajax({
                url: '<?= base_url('get_user_detail') ?>',
                data: {
                    region_level: $('#region_level').val(),
                },
                type: "POST",
                success: function (json) {
                    var user = $.parseJSON(json);
                    if (user['user']) {
                        for (var i = 0; i < user['user'].length; i++) {
                            $("#mira-region-update tbody").append('<tr></tr>');
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + 'UID' + user['user'][i]['auto_id'] + "</td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + user['user'][i]['user_name'] + "</td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + user['user'][i]['region_name'] + "</td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + user['user'][i]['mapping_date'] + "</td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + user['user'][i]['user_level'] + "</td>");
                            $("#mira-region-update tbody tr:last").append("<td class='text-center'>" + user['user'][i]['user_level'] + "</td>");
                            $("#mira-region-update tbody tr:last").append('<td class="text-center"> <input type="radio" required class="checkthis" onclick="getUserRightByRegionID(this)" name="region_code" value=' + user['user'][i]['region_code'] + '></td>');


                        }

                    }
                },
                error: function (xhr, status, errorThrown) {
                    $('#rgion_spinner').css('display', 'none');
                },
                complete: function (xhr, status) {
                    $('#rgion_spinner').css('display', 'none');
                }
            });
        });




    });
    /*****************************/
    function getUserRightByRegionID(e) {
        for (var i = 1; i <= parseInt($('#count_number').val()); i++) {
            $('#right' + i).prop("checked", false);
        }
        var region_code = e.value;
        $.ajax({
            url: '<?= base_url('get_user_right') ?>',
            data: {
                region_code: region_code,
            },
            type: "POST",
            success: function (json) {
                var user = $.parseJSON(json);
                if (user) {
                    for (var i = 0; i < user.length; i++) {
                        $('#right' + user[i]['right_id']).prop("checked", true);
                    }

                }
            },
            error: function (xhr, status, errorThrown) {
                $('#rgion_spinner').css('display', 'none');
            },
            complete: function (xhr, status) {
                $('#rgion_spinner').css('display', 'none');
            }
        });
    }
    /*****************************/
    function updateRegion(e) {

    }

    /******************************/
</script>

